@charset "UTF-8";

/********** base **********/
/* ========================================
    初期設定
    ======================================== */
/* variables */
:root {
  --color-primary: #004860;
  --color-secondary: #00abe4;
  --color-accent: #ffe643;
  --color-accent-hover: #ffe643;
  --color-text: #333333;
  --color-muted: #666666;
  --color-bg: #ffffff;
  --color-bg-light: #f6faff;
  --color-bg-cream: #fbf6eb;
  --color-teal-light: #c3fff6;
  --color-blue-light: #ace1ff;
  --color-yellow-light: #ffe643;
  --white: #fff;
  --black: #000;
}

:root {
  --font-primary: "noto sans jp", "serif";
  --font-secondary: "inter", "serif";
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-primary);
  color: var(--color-primary);
  font-weight: 500;
  line-height: 1.5;
  font-size: 15px;
}

.section-ttl {
  font-size: clamp(20px, 2.5vw, 32px);
}

.section-ttl span {
  font-family: var(--font-secondary);
  font-size: clamp(12px, 2.5vw, 16px);
}

/* ========================================
    コンテナ幅
    ======================================== */

.container-sm {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  max-width: calc(800px + 32px);
}

.container-md {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  max-width: calc(940px + 32px);
}

.container {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  max-width: calc(1080px + 32px);
}

.container-lg {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  max-width: calc(1200px + 32px);
}

.container-xl {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  max-width: calc(85vw + 32px);
}

@media screen and (max-width: 1200px) {
  .container-xl {
    max-width: calc(90vw + 32px);
  }
}

@media screen and (max-width: 600px) {
  .container-xl {
    max-width: calc(100% + 32px);
  }
}

/* ========================================
    共通
    ======================================== */

.m-grid-4-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .m-grid-4-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .m-grid-4-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.m-grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .m-grid-3-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .m-grid-3-col {
    grid-template-columns: repeat(1, 1fr);
  }
}

.m-grid-2-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 600px) {
  .m-grid-2-col {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ========================================
    ヘッダー
    ======================================== */
/* ========================================
    フッター
    ======================================== */
/* ========================================
    メインビジュアル
    ======================================== */
/* ========================================
    ナビゲーションドロワー
    ======================================== */
/* ========================================
    投稿一覧ページ
    ======================================== */
/* ========================================
    投稿詳細ページ
    ======================================== */
.m-post-main img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 32px;
}

.m-post-main p {
  margin-bottom: 32px;
  line-height: 2;
}

@media (max-width: 600px) {
  .m-post-main p {
    font-size: 14px;
  }
}

.m-post-main a {
  display: inline-block;
  margin-bottom: 20px;
  color: #00afed;
  text-decoration: underline;
}

.m-post-main h1 {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .m-post-main h1 {
    font-size: 24px;
  }
}

.m-post-main h2 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
}

@media screen and (max-width: 1080px) {
  .m-post-main h2 {
    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .m-post-main h2 {
    font-size: 18px;
  }
}

.m-post-main h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}

@media screen and (max-width: 1080px) {
  .m-post-main h3 {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .m-post-main h3 {
    font-size: 16px;
  }
}

/* ========================================
    トップページ
    ======================================== 
*/
/* ========================================
    下層ページ
    ======================================== */
/* ========================================
    プライバシーポリシー
    ======================================== */
.policy {
  padding-bottom: 100px;
}

.policy__title {
  font-size: 24px;
  margin-bottom: 40px;
}

.policy__content {
  line-height: 1.75;
}

.policy__content .wp-block-heading {
  font-size: 20px;
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .policy__content .wp-block-heading {
    font-size: 18px;
  }
}

.policy__content .wp-block-spacer {
  height: 40px !important;
}

.policy__content .wp-block-list {
  padding: 20px 0;
  list-style: disc;
  margin-left: 1em;
}

.policy__content p,
.policy__content a,
.policy__content li {
  margin-top: 1em;
}

/* お問い合わせフォーム関連は assets/css/contact.css に分離（CF7 ショートコードを含むページのみ読込） */

/* パンくずリスト（シンプル） */
.breadcrumb {
  font-size: 13px;
  line-height: 1.6;
  padding: 16px 0;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform: rotate(45deg);
}

.breadcrumb__link {
  color: #555;
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .breadcrumb__link:hover {
    color: #000;
  }
}

.breadcrumb__current {
  color: #999;
}

/* ========================================
    ユーティリティ
    ======================================== */
.u-pc-only {
  display: block;
}

@media (max-width: 600px) {
  .u-pc-only {
    display: none;
  }
}

.u-sp-only {
  display: none;
}

@media (max-width: 600px) {
  .u-sp-only {
    display: block;
  }
}

.u-text-center {
  text-align: center;
}

.u-text-left {
  text-align: left;
}

.u-text-right {
  text-align: right;
}

/* ========================================
    ヘッダー
    ======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px 0 0;
  height: 64px;
  background: transparent;
  overflow: visible;
}

@media (max-width: 768px) {
  .header__inner {
    padding: 0 16px 0 0;
    height: 56px;
  }
}

.header__logo {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 16px;
  text-decoration: none;
}

.header__logo img {
  width: 28vw;
  max-width: 400px;
  min-width: 200px;
  height: auto;
}

@media (max-width: 600px) {
  .header__logo img {
    width: 48vw;
    min-width: 160px;
  }
}

.header__logo-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  letter-spacing: 0.05em;
}

@media (max-width: 600px) {
  .header__logo-name {
    display: none;
  }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 32px;
  /* クローズボタン（top: 30px）と上位置を揃える */
  align-self: flex-start;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .header__actions {
    /* SP のクローズボタン（top: 16px）と揃える */
    margin-top: 16px;
  }
}

@media (max-width: 600px) {
  .header__actions {
    gap: 12px;
  }
}

.header__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px 0 72px;
  width: 263px;
  height: 53px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.05em;
  border-radius: 100px;
  transition: 0.3s;
}

/* SP ではヘッダーの各種お問合せボタンを非表示（ドロワー内の導線に集約） */
@media (max-width: 768px) {
  .header__contact {
    display: none;
  }
}

@media (hover: hover) {
  .header__contact:hover {
    background: var(--color-primary);
    color: var(--color-accent);
  }
}

.header__contact-arrow {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  overflow: hidden;
}

.header__contact-arrow::before,
.header__contact-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  background-color: var(--color-primary);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
  transition: background-color 0.3s;
}

/* 初期表示：before は中央、after は左下に待機 */
.header__contact-arrow::before {
  transform: translate(0, 0);
}

.header__contact-arrow::after {
  transform: translate(-160%, 160%);
}

@media (hover: hover) {
  .header__contact:hover .header__contact-arrow::before,
  .header__contact:hover .header__contact-arrow::after {
    background-color: var(--color-accent);
  }
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る */
  .header__contact:hover .header__contact-arrow::before {
    animation: arrowOutTopRight 0.6s forwards;
    animation-delay: 0s;
  }
}

@media (hover: hover) {
  .header__contact:hover .header__contact-arrow::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

@keyframes arrowOutTopRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(160%, -160%);
  }
}

@keyframes arrowInFromBottomLeft {
  0% {
    transform: translate(-160%, 160%);
  }
  100% {
    transform: translate(0, 0);
  }
}

.header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 117px;
  height: 53px;
  background: var(--color-secondary);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .header__hamburger {
    width: 88px;
    height: 48px;
    gap: 7px;
  }
}

.header__hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--white);
  transition: 0.45s;
  transform-origin: center;
}

.header__hamburger.is-active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.header__hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.header__hamburger.is-active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ドロワーメニュー（ハンバーガー押下時） */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: fit-content;
  max-width: calc(100% - 128px);
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg-cream);
  z-index: 200;
  overflow-y: auto;
  /* 開くとき: 背景色（パネル）は即時表示。
     閉じるとき: 背景ごとパネル全体を素早く透過（フェードアウト）。中身も一緒に消える。 */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0s 0.25s;
}

@media (max-width: 1080px) {
  .drawer {
    left: 0;
    width: 100%;
    max-width: 100%;
  }
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0s,
    visibility 0s;
}

/* 開くとき: 中身は上から順にフェードイン（コンテンツごとに time-lag を付ける）。
   閉じるときはこのアニメが外れ、パネルの opacity フェードで背景ごと一緒に消える
   （＝上への移動はしない）。クローズボタンは対象外。 */
.drawer__list > li,
.drawer__divider,
.drawer__info {
  opacity: 1;
}

.drawer.is-open .drawer__list > li,
.drawer.is-open .drawer__divider,
.drawer.is-open .drawer__info {
  animation: drawerItemIn 0.6s ease both;
}

.drawer.is-open .drawer__list:nth-of-type(1) > li:nth-child(1) {
  animation-delay: 0.25s;
}
.drawer.is-open .drawer__list:nth-of-type(1) > li:nth-child(2) {
  animation-delay: 0.4s;
}
.drawer.is-open .drawer__list:nth-of-type(1) > li:nth-child(3) {
  animation-delay: 0.55s;
}
.drawer.is-open .drawer__list:nth-of-type(2) > li:nth-child(1) {
  animation-delay: 0.7s;
}
.drawer.is-open .drawer__list:nth-of-type(2) > li:nth-child(2) {
  animation-delay: 0.85s;
}
.drawer.is-open .drawer__list:nth-of-type(2) > li:nth-child(3) {
  animation-delay: 1s;
}
.drawer.is-open .drawer__list:nth-of-type(2) > li:nth-child(4) {
  animation-delay: 1.15s;
}
.drawer.is-open .drawer__divider {
  animation-delay: 1.3s;
}
.drawer.is-open .drawer__info {
  animation-delay: 1.45s;
}

@keyframes drawerItemIn {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drawer__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 128px 128px 64px;
}

@media (max-width: 1080px) {
  .drawer__inner {
    padding: 96px 40px 48px;
  }
}

@media (max-width: 600px) {
  .drawer__inner {
    gap: 32px;
    padding: 88px 32px 40px;
  }
}

/* クローズボタンはハンバーガー（.header__hamburger）と同じ位置・サイズ・
   3本線の見た目にして、開いた瞬間に線同士がぴったり重なるようにする。
   そこから is-open で X へ変形させ、ハンバーガー→クローズを連続して見せる。 */
.drawer__close {
  position: fixed;
  top: 30px;
  /* メニュー展開時に消えるスクロールバー幅（--sbw）を加算し、
     ハンバーガー（header 側は padding-right で補正）と左右位置を揃える */
  right: calc(40px + var(--sbw, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 117px;
  height: 53px;
  background: var(--color-secondary);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .drawer__close {
    top: 16px;
    right: calc(16px + var(--sbw, 0px));
    width: 88px;
    height: 48px;
  }
}

@media (hover: hover) {
  .drawer__close:hover {
    opacity: 0.8;
  }
}

.drawer__close span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--white);
  border-radius: 1px; /* Figma: strokeCap ROUND（線の端を丸める） */
  transition:
    transform 0.45s,
    opacity 0.45s;
  transform-origin: center;
}

/* 開いている間は X 形状。
   span 同士の中心間距離（gap 7px + 線幅 2px = 9px）ぶん translateY で中央へ寄せ、
   2 本が中心でぴったり交差する。
   角度は Figma（Group 136 / 20×15.2px の対角線）に合わせ atan(15.2/20)≈37.23°。
   横に少しへしゃげた（横長の）X を忠実に再現する。 */
.drawer.is-open .drawer__close span:nth-child(1) {
  transform: translateY(9px) rotate(37.23deg);
}

.drawer.is-open .drawer__close span:nth-child(2) {
  opacity: 0;
}

.drawer.is-open .drawer__close span:nth-child(3) {
  transform: translateY(-9px) rotate(-37.23deg);
}

.drawer__menu {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 0 128px;
  padding: 0 32px;
}

@media (max-width: 600px) {
  .drawer__menu {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 32px;
  }
}

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

.drawer__list a,
.drawer__label {
  position: relative;
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
  z-index: 0;
}

/* ホバー時の黄色いピル背景（テキストの背面に配置し、レイアウトは動かさない） */
.drawer__list a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -36px;
  right: -30px;
  height: 45px;
  transform: translateY(-50%);
  background: var(--color-accent);
  border-radius: 100px;
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
}

/* ホバー時の青い丸ぽち（テキスト左） */
.drawer__list a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  background: var(--color-secondary);
  border-radius: 50%;
  opacity: 0;
  transition: 0.3s;
}

@media (hover: hover) {
  .drawer__list a:hover::before,
  .drawer__list a:hover::after {
    opacity: 1;
  }
}

.drawer__list > li > a,
.drawer__label {
  display: inline-block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .drawer__list > li > a,
  .drawer__label {
    font-size: 14px;
  }
}

.drawer__label {
  padding-bottom: 8px;
  font-size: 15px;
  font-weight: 400;
}

@media (max-width: 600px) {
  .drawer__label {
    font-size: 13px;
  }
}

.drawer__sub {
  display: flex;
  gap: 64px;
  padding: 8px 0 16px;
}

.drawer__sub a {
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .drawer__sub a {
    font-size: 14px;
  }
}

.drawer__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-primary);
}

.drawer__info {
  display: flex;
  align-items: flex-start;
  gap: 32px 40px;
  flex-wrap: wrap;
}

.drawer__info-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 32px;
}

.drawer__info-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.drawer__info-side .footer__info-btn,
.footer__info .footer__info-btn {
  position: relative;
  justify-content: center;
  height: 60px;
  padding: 0 32px;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.drawer__info-side .footer__info-btn-text,
.footer__info .footer__info-btn-text {
  margin-right: 16px;
}

.drawer__info-side .footer__info-btn-arrow,
.footer__info .footer__info-btn-arrow {
  position: absolute;
  top: 50%;
  right: 64px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
}

.drawer__info-side .footer__info-btn-arrow::before,
.drawer__info-side .footer__info-btn-arrow::after,
.footer__info .footer__info-btn-arrow::before,
.footer__info .footer__info-btn-arrow::after {
  width: 15px;
  height: 15px;
}

/* フッターのお問合せボタンは余白を保ったまま全幅表示 */
.footer__info .footer__info-btn {
  width: 100%;
  font-size: 16px;
}

/* フッターの矢印アイコンは 13px・右余白を8px詰める（64px→56px） */
.footer__info .footer__info-btn-arrow {
  right: 56px;
  width: 13px;
  height: 13px;
}

.footer__info .footer__info-btn-arrow::before,
.footer__info .footer__info-btn-arrow::after {
  width: 13px;
  height: 13px;
}

.drawer__info-side .footer__privacy {
  margin-top: 0;
}

.drawer__info-side .footer__privacy-link,
.footer__info .footer__privacy-link {
  font-size: 10px;
}

/* フッターのプライバシーリンクはボタンの16px下（gap 8px + margin 8px）・中央揃え */
.footer__info .footer__privacy {
  margin-top: 8px;
}

@media (max-width: 600px) {
  .drawer__info {
    flex-direction: column;
  }

  .drawer__info-side {
    width: 100%;
    align-items: center;
  }

  .drawer__info-side .footer__info-btn {
    width: 100%;
    padding: 0 32px;
  }

  .drawer__info-side .footer__privacy {
    text-align: center;
  }
}

.header__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 91, 121, 0.3);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.header__overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ========================================
    フッター
    ======================================== */
.footer-area {
  position: relative;
  /* 固定背景装飾（.m-deco / z-index:2）より前面に置き、フッターに円が被らないようにする */
  z-index: 3;
  /* フッター内の文字色（--color-primary を上書き） */
  --color-primary: #005b79;
}

.footer-area__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.footer-area__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .footer-area__bg {
    top: auto;
    bottom: 0;
    height: 90%;
  }

  .footer-area__bg img {
    object-position: bottom center;
  }
}

@media (max-width: 600px) {
  .footer-area__bg {
    height: 90%;
  }
}

.footer {
  position: relative;
  z-index: 1;
  background: var(--color-bg-cream);
  border-radius: 100px;
  width: min(1340px, calc(100% - 80px));
  margin: 0 auto 40px;
  padding: 64px 0 48px;
}

@media (max-width: 1080px) {
  .footer {
    border-radius: 48px;
    width: calc(100% - 48px);
  }
}

@media (max-width: 768px) {
  .footer {
    border-radius: 32px;
    width: calc(100% - 32px);
    margin: 0 auto 24px;
    padding: 48px 0 32px;
  }
}

.footer__inner {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  gap: 40px 48px;
  padding: 0 48px;
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 1080px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    padding: 0 64px;
  }
}

@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr;
    padding: 0 30px;
    gap: 32px;
  }
}

/* 縦積み時（1カラム）、コンテンツ間に区切りの下線を追加（最後のブロックは除く） */
@media (max-width: 768px) {
  .footer__inner > *:not(:last-child) {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-primary);
  }
}

/* 左カラム：メインメニュー（下線・項目矢印なし） */
.footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  border-radius: 999px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s;
}

@media (hover: hover) {
  .footer__nav-link:hover {
    background: var(--color-accent-hover);
  }
}

/* ホバー時のみ表示する矢印（arrow.svg を色付け） */
.footer__nav-link:not(.footer__nav-link--current)::after {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  align-self: center;
  background-color: var(--color-secondary);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
  opacity: 0;
  transition: 0.3s;
}

@media (hover: hover) {
  .footer__nav-link:not(.footer__nav-link--current):hover::after {
    opacity: 1;
  }
}

/* フッターナビの矢印は他の箇所と同様、ホバーで左下→右上へ流す（FVメニューの丸ぽちは対象外） */
.footer .footer__nav-link:not(.footer__nav-link--current)::after {
  transform: translate(-160%, 160%);
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .footer .footer__nav-link:not(.footer__nav-link--current):hover::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
  }
}

.footer__nav-link--current {
  background: var(--color-accent);
  font-weight: 700;
}

@media (hover: hover) {
  .footer__nav-link--current:hover {
    opacity: 0.8;
  }
}

/* リンクなしの見出し項目（研修のご案内：ページ未作成） */
.footer__nav-link--nolink {
  cursor: default;
}

@media (hover: hover) {
  .footer__nav-link--nolink:hover {
    background: transparent;
  }
}

/* 矢印は非表示にしつつ占有スペースは残す（右寄せのFVメニューで右端を他項目と揃えるため） */
.footer__nav-link.footer__nav-link--nolink::after {
  visibility: hidden;
}

/* フッターの「研修のご案内」ラベル */
.footer .footer__nav-link--nolink {
  font-size: 12px;
  font-weight: 400;
}

/* 研修のご案内 サブメニュー（初期研修 / 後期研修） */
.footer__nav-item--training {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__nav-sublist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.footer__nav-sublink {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: 0.3s;
}

/* フッターのサブリンク（初期研修 / 後期研修） */
.footer .footer__nav-sublink {
  font-size: 14px;
  font-weight: 500;
}

.footer .footer__nav-sublist {
  margin-top: 0;
  /* サブリンクの透明ボーダー1px分、テキスト開始位置が右にずれるため補正 */
  margin-left: -1px;
}

@media (hover: hover) {
  /* 上位項目と同じホバー（黄色背景） */
  .footer__nav-sublink:hover {
    background: var(--color-accent-hover);
    color: var(--color-primary);
  }
}

/* ↗ 斜め矢印 */
.footer__nav-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--color-primary);
  border-right: 1.5px solid var(--color-primary);
  flex-shrink: 0;
}

/* 中央カラム：外部サイト */
.footer__external-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 32px;
  /* 1つ目のコンテンツ（ナビのピル padding 8px 20px）とテキスト左右位置を揃える */
  padding: 0 20px;
}

.footer__external-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.footer__external-icon svg {
  width: 100%;
  height: 100%;
}

.footer__external-list {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__external-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  transition: 0.3s;
}

@media (hover: hover) {
  .footer__external-link:hover {
    text-decoration: underline;
  }
}

.footer__external-link--sub {
  display: block;
  font-size: 10px;
  color: var(--color-primary);
}

.footer__external-link-name {
  font-size: 13px;
}

.footer__external-fb {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.footer__external-fb svg {
  width: 100%;
  height: 100%;
}

/* 右カラム：病院情報 */
.footer__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 48px;
  padding-left: 96px;
  border-left: 1px solid var(--color-primary);
}

/* 2カラム以下では右カラムが折り返すため、左罫線を解除し、
   1つ目のコンテンツと左右のインセット（20px）を揃える */
@media (max-width: 1080px) {
  .footer__info {
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
    border-left: none;
  }
}

.footer__info-hospital {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.5;
}

.footer__info-hospital-name {
  font-size: 13px;
  font-weight: 500;
}

.footer__info-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}

.footer__info-address {
  font-size: 13px;
  color: var(--color-primary);
  line-height: 1.7;
}

.footer__info-sns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-secondary);
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .footer__info-sns:hover .footer__info-sns-text {
    text-decoration: underline;
  }
}

.footer__info-sns-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer__info-sns-icon svg {
  width: 100%;
  height: 100%;
}

.footer__info-tel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.footer__info-tel-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

.footer__info-tel-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-secondary);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.footer__info-tel-note {
  font-size: 12px;
  color: var(--color-primary);
}

.footer__info-hours {
  font-size: 12px;
  color: var(--color-primary);
}

.footer__info-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* flex縦カラム内での stretch を解除し、テキスト幅に収める（100%に広げない） */
  align-self: flex-start;
  padding: 0 40px 0 80px;
  width: 263px;
  max-width: 100%;
  height: 53px;
  background: var(--color-secondary);
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 100px;
  transition: 0.3s;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .footer__info-btn {
    width: auto;
    padding: 0 24px 0 40px;
    height: 48px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .footer__info-btn {
    padding: 0 20px 0 24px;
    height: 40px;
    font-size: 11px;
    gap: 8px;
  }
}

@media (hover: hover) {
  .footer__info-btn:hover {
    background: var(--color-primary);
  }
}

/* ↗ 斜め矢印（arrow.svg を白で・ヘッダーと同じ動き） */
.footer__info-btn-arrow {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  overflow: hidden;
}

.footer__info-btn-arrow::before,
.footer__info-btn-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  background-color: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.footer__info-btn-arrow::before {
  transform: translate(0, 0);
}

.footer__info-btn-arrow::after {
  transform: translate(-160%, 160%);
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る */
  .footer__info-btn:hover .footer__info-btn-arrow::before {
    animation: arrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .footer__info-btn:hover .footer__info-btn-arrow::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

.footer__privacy {
  margin-top: 16px;
}

.footer__privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .footer__privacy-link:hover .footer__privacy-text {
    text-decoration: underline;
  }
}

/* › 右向き矢印 */
.footer__privacy-arrow {
  display: inline-block;
  width: 5px;
  height: 9px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("../img/common/arrow-simple.svg") no-repeat center / contain;
  mask: url("../img/common/arrow-simple.svg") no-repeat center / contain;
  transform: translateY(1px);
}

/* コピーライト（波背景の上・中央） */
.footer__copy {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 10%;
  color: var(--color-primary);
  padding: 16px;
}

/* ========================================
    メインビジュアル（FV）
    ======================================== */
.fv {
  padding-top: 64px;
  padding-bottom: 64px;
  position: relative;
  overflow: hidden;
  background-color: var(--white);
}

/* タブレット以下は SP 表示に統一（ヒーロー画像・背景を上詰め） */
@media (max-width: 768px) {
  .fv {
    padding-top: 48px;
  }
}

/* 背景画像（fv-background.webp）をゆっくり左右に揺らす */
.fv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/common/fv-background.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  transform-origin: center top;
  animation: fv-bg-float 8s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

/* 背景装飾を左右にゆっくりゆらす */
@keyframes fv-bg-float {
  0% {
    transform: translate3d(-60px, -110px, 0) scale(1.08);
  }
  50% {
    transform: translate3d(20px, -60px, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-60px, -110px, 0) scale(1.08);
  }
}

/* タブレット以下: 横の振れをほぼ無くし、縦移動をメインにゆらす（上部寄りに収める） */
@keyframes fv-bg-float-sp {
  0% {
    transform: translate3d(-8px, -10px, 0) scale(1.08);
  }
  50% {
    transform: translate3d(-8px, -70px, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-8px, -10px, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv::before {
    animation: none;
    transform: none;
  }
}

/* 超大画面: 100%表示のまま上にずらし、下側の見切れは overflow:hidden で非表示 */
@media (min-width: 1600px) {
  .fv::before {
    background-size: 100%;
    margin-top: -100px;
  }
}

/* タブレット・SP: 背景を上部にアンカーし、高さを十分に確保して
   下側が見切れ（白い余白が出る）ないようにする */
@media (max-width: 770px) {
  .fv::before {
    background-size: 350%;
    background-position: center top;
  }
}

/* タブレット以下: 縦移動メインのアニメーションに差し替え */
@media (max-width: 1080px) {
  .fv::before {
    animation-name: fv-bg-float-sp;
  }
}

.fv__inner {
  position: relative;
  min-height: 720px;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* タブレット: 画像が縮む一方 min-height が残ると FV とニュースバーの間に
   余白ができるため、min-height を解除してニュースバーを画像直下に詰める */
@media (max-width: 1080px) {
  .fv__inner {
    min-height: auto;
  }
}

.fv__tagline {
  position: absolute;
  top: 48px;
  left: 40px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  z-index: 2;
}

@media (max-width: 768px) {
  .fv__tagline {
    display: none;
  }
}

.fv__image-wrap {
  position: relative;
  flex: 1;
  padding: 32px 0 0 80px;
}

@media (max-width: 768px) {
  .fv__image-wrap {
    padding: 0;
  }
}

.fv__image-bg {
  position: absolute;
  top: 56px;
  left: 60px;
  /* .fv__image は wrap の content-box(左padding 80px を除く)基準、
     .fv__image-bg は absolute で padding-box 基準。基準を揃えて
     画像サイズに追従させる（80% × (W - 80px) = calc(80% - 64px)） */
  width: calc(80% - 64px);
  max-width: 1000px;
  aspect-ratio: 1000 / 574;
  background: linear-gradient(
    270deg,
    var(--color-blue-light) 0%,
    var(--color-yellow-light) 100%
  );
  border-radius: 10px;
  z-index: 0;
}

/* 背景フレームはヒーロー画像から16pxずらして背面に表示（グラデーション） */
@media (max-width: 768px) {
  .fv__image-bg {
    left: 40px;
    top: 16px;
    width: calc(100% - 56px);
    aspect-ratio: 690 / 920;
  }
}

.fv__image {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  width: 80%;
}

/* FVはPCと別の縦長画像を右づめ・左56px余白で配置 */
@media (max-width: 768px) {
  .fv__image {
    width: calc(100% - 56px);
    margin-left: 56px;
    margin-right: 0;
  }
}

.fv__image img {
  width: 100%;
  height: auto;
  display: block;
}

.fv__nav {
  position: absolute;
  top: 64px;
  right: 40px;
  z-index: 2;
}

/* タブレット以下では FV のグローバルナビを非表示 */
@media (max-width: 1080px) {
  .fv__nav {
    display: none;
  }
}

.fv__nav .footer__nav-list {
  align-items: flex-end;
}

/* FVメニューでは研修サブメニューも右寄せに揃える */
.fv__nav .footer__nav-item--training {
  align-items: flex-end;
}

/* FVメニューの「研修のご案内」ラベル */
.fv__nav .footer__nav-link--nolink {
  font-size: 12px;
  font-weight: 400;
}

.fv__nav .footer__nav-sublist {
  justify-content: flex-end;
  gap: 0;
  margin-top: 0;
}

/* FVメニューはホバー時の矢印ではなく丸ぽちを表示 */
.fv__nav .footer__nav-link:not(.footer__nav-link--current)::after {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background-color: var(--color-secondary);
  -webkit-mask: none;
  mask: none;
}

/* サブリンク（初期研修 / 後期研修）にも上位項目と同じ丸ぽちを表示。
   丸ぽち分のスペースを常に確保することで右端も他項目と揃う */
.fv__nav .footer__nav-sublink {
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
}

.fv__nav .footer__nav-sublink::after {
  content: "";
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: var(--color-secondary);
  opacity: 0;
  transition: 0.3s;
}

@media (hover: hover) {
  .fv__nav .footer__nav-sublink:hover::after {
    opacity: 1;
  }
}

.fv__catch {
  position: absolute;
  right: 80px;
  bottom: 112px;
  /* コンテナは「1行目の左端〜2行目の右端」までを内包する幅 */
  width: 30%;
  max-width: 440px;
  z-index: 2;
}

/* タブレット以下: 余白帯を詰めたぶん、キャッチはヒーロー画像の右下に重ねる */
@media (max-width: 1080px) {
  .fv__catch {
    right: 16px;
    bottom: 16px;
    width: 56%;
  }
}

/* SP: キャッチコピーは左づめ（画像左端を画面左に合わせる） */
@media (max-width: 768px) {
  .fv__catch {
    left: 0;
    right: auto;
    width: 90%;
  }
}

/* キーメッセージ：背景（svg）＋テキスト（webp）を2行で重ねる */
.fv__catch-row {
  position: relative;
  display: block;
}

/* 1行目（未来をつくる）：コンテナ左端に左づめ。
   2行目と表示スケールを揃えるため width は 404:415 の比で指定 */
.fv__catch-row--01 {
  width: 84.2%;
}

/* 2行目（医療の現場へ。）：右へずらしつつコンテナ右端に収める */
.fv__catch-row--02 {
  width: 86.5%;
  /* 1行目との行間 */
  margin-top: 8px;
  /* 1行目の開始位置から右へ階段状にずらす */
  margin-left: 13.5%;
}

/* SP: デザインに合わせて縮小し、2行目は左に80pxの余白を足してずらす。
   1行目と2行目の表示スケールを揃えるため width は 404:415 の比で指定 */
@media (max-width: 768px) {
  .fv__catch-row--01 {
    width: 70%;
  }
  .fv__catch-row--02 {
    width: 72%;
    margin-left: 80px;
  }
}

.fv__catch-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fv__catch-text {
  position: relative;
  z-index: 1;
}

/* テキスト画像が行の高さ（アスペクト比）を決める */
.fv__catch-text img {
  width: 100%;
  height: auto;
  display: block;
}

/* 背景は行いっぱいに引き伸ばしてテキストの真下に敷く */
.fv__catch-bg img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 左→右へワイプしながらフェードイン（表示の仕方は従来どおり）。
   1) bg-01 → 2) bg-02 → 3) text-01 → 4) text-02 の順に遅延表示 */
.fv__catch-bg,
.fv__catch-text {
  animation: fv-catch-reveal 0.8s ease-out both;
}

.fv__catch-row--01 .fv__catch-bg {
  animation-delay: 1s;
}

.fv__catch-row--02 .fv__catch-bg {
  animation-delay: 1.35s;
}

.fv__catch-row--01 .fv__catch-text {
  animation-delay: 1.7s;
}

.fv__catch-row--02 .fv__catch-text {
  animation-delay: 2.05s;
}

@keyframes fv-catch-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv__catch-bg,
  .fv__catch-text {
    animation: none;
  }
}

.fv__ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 40px;
  background: transparent;
  margin-top: 24px;
  flex-wrap: wrap;
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .fv__ticker:hover .fv__ticker-title {
    color: var(--color-primary);
  }
}

@media (hover: hover) {
  .fv__ticker:hover .fv__ticker-cat {
    background: var(--color-bg-cream);
  }
}

@media (max-width: 768px) {
  .fv__ticker {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 30px;
    margin-top: 48px;
  }
}

.fv__ticker-label {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-secondary);
  color: var(--color-primary);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.fv__ticker-date {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  line-height: 2.06;
  letter-spacing: 1.28px;
  flex-shrink: 0;
}

.fv__ticker-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.fv__ticker-cat {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-secondary);
  background: transparent;
  border: 1px solid var(--color-secondary);
  border-radius: 50px;
  padding: 5px 16px;
  flex-shrink: 0;
}

.fv__ticker-body {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.fv__ticker-title {
  font-size: 13px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

/* ↗ タイトル右側の矢印（テキストから32px・左下→右上に流す） */
.fv__ticker-arrow {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  /* flex gap 16px ＋ margin 16px ＝ テキストから 32px */
  margin-left: 16px;
  /* テキストに合わせて 1px 下げる */
  top: 1px;
  overflow: hidden;
}

.fv__ticker-arrow::before,
.fv__ticker-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background-color: var(--color-secondary);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

.fv__ticker-arrow::before {
  transform: translate(0, 0);
}

.fv__ticker-arrow::after {
  transform: translate(-280%, 280%);
}

@media (hover: hover) {
  .fv__ticker:hover .fv__ticker-arrow::before {
    animation: blogArrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .fv__ticker:hover .fv__ticker-arrow::after {
    animation: blogArrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

/* SP: NEWS を縦積みの見出しブロックとして表示 */
@media (max-width: 768px) {
  .fv__ticker-label {
    background: transparent;
    color: var(--color-primary);
    padding: 0;
    font-size: 16px;
    letter-spacing: 0.08em;
  }

  .fv__ticker-date {
    font-size: 14px;
    letter-spacing: 0.09em;
  }

  /* title と arrow を横並びにする */
  .fv__ticker-body {
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .fv__ticker-title {
    font-size: 14px;
    /* 1行で表示し、超過分は省略（…）表示 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
  }

  .fv__ticker-arrow {
    margin-left: 0;
    top: 0;
  }
}

/* ========================================
    医学生へのご案内
    ======================================== */
.medical-students {
  position: relative;
  overflow: hidden;
  /* 水色グラデに白グラデを重ねた見え方を1本で再現（上：白 → 中央：淡い水色 → 下：白） */
  background: linear-gradient(
    180deg,
    var(--white) 0%,
    rgba(0, 171, 228, 0.18) 45%,
    rgba(0, 171, 228, 0.18)
  );
}

.medical-students__row {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 680px;
}

@media (max-width: 768px) {
  .medical-students__row {
    flex-direction: column;
    min-height: auto;
  }
}

.medical-students::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 10%, #000 100%);
}

.medical-students::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  top: 20px;
  pointer-events: none;
  background: url("../img/top/medical-students-bg-pattern.webp") no-repeat top /
    100% auto;
}

@media (max-width: 768px) {
  .medical-students::after {
    top: 160px;
    background-size: 100%;
    background: url("../img/top/medical-students-bg-pattern.webp") no-repeat
      top / 200% auto;
  }
}

.medical-students__image {
  width: 675px;
  max-width: 46.875%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .medical-students__image {
    order: 1;
    width: 80%;
    max-width: 80%;
    margin-right: auto;
  }

  .medical-students__image img {
    height: auto;
  }
}

.medical-students__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.medical-students__content {
  flex: 1;
  padding: 88px 72px 0px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 1080px) {
  .medical-students__content {
    padding: 64px 40px 64px 40px;
  }
}

@media (max-width: 768px) {
  .medical-students__content {
    order: 2;
    padding: 48px 30px 0;
  }
}

.medical-students__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.medical-students__en {
  font-size: 12px;
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--color-secondary);
  letter-spacing: 0.1em;
}

.medical-students__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}

.medical-students__title {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 32px;
  line-height: 1.4;
}

.medical-students__catch {
  font-size: 30px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.medical-students__body {
  max-width: 464px;
  font-size: 15px;
  line-height: 2.6667;
  color: var(--color-muted);
  margin-bottom: 40px;
}

@media (max-width: 600px) {
  .medical-students__body {
    font-size: 14px;
  }
}

.medical-students__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  max-width: 100%;
  height: 80px;
  padding: 0 32px 0 60px;
  background: var(--color-secondary);
  border-radius: 10px;
  color: var(--white);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .medical-students__btn {
    display: flex;
    width: 240px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px 0 32px;
    font-size: 14px;
  }
}

@media (hover: hover) {
  .medical-students__btn:hover {
    background: var(--color-primary);
  }
}

.medical-students__banner {
  position: relative;
  z-index: 3;
  margin-top: 96px;
}

.medical-students__banner img {
  display: block;
  width: 86%;
  height: auto;
  margin-left: auto;
  margin-right: -16px;
}

@media (max-width: 768px) {
  .medical-students__banner img {
    width: 100%;
    margin-right: 0;
  }
}

/* セクション下部の波型区切り（下のクリーム背景セクションへ繋ぐ装飾） */
.medical-students__divider {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -120px;
}

@media (max-width: 768px) {
  .medical-students__divider {
    margin-top: -40px;
  }
}

.medical-students__divider img {
  display: block;
  width: 100%;
  height: auto;
}

.medical-students__btn-arrow {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.medical-students__btn-arrow::before {
  content: "";
  display: block;
  width: 1px;
  height: 50px;
  background: var(--white);
}

.medical-students__btn-arrow-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  overflow: hidden;
}

.medical-students__btn-arrow-icon::before,
.medical-students__btn-arrow-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  background-color: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.medical-students__btn-arrow-icon::before {
  transform: translate(0, 0);
}

.medical-students__btn-arrow-icon::after {
  transform: translate(-160%, 160%);
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る */
  .medical-students__btn:hover .medical-students__btn-arrow-icon::before {
    animation: arrowOutTopRight 0.6s forwards;
    animation-delay: 0s;
  }
}

@media (hover: hover) {
  .medical-students__btn:hover .medical-students__btn-arrow-icon::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

/* ========================================
    研修のご案内
    ======================================== */
.training {
  background: var(--color-bg-cream);
  padding: 80px 0 96px;
  position: relative;
  overflow: hidden;
}

.training::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  top: 20px;
  pointer-events: none;
  background: url("../img/top/training-bg-pattern.webp") no-repeat top / 100%
    auto;
}

@media (max-width: 768px) {
  .training::after {
    top: 160px;
    background: url("../img/top/training-bg-pattern.webp") no-repeat top / 200%
      auto;
  }
}

@media (max-width: 768px) {
  .training {
    padding: 64px 0 72px;
  }
}

.training__header {
  position: relative;
  z-index: 1;
  padding: 0 48px 0 188px;
  margin-bottom: 72px;
}

@media (max-width: 1080px) {
  .training__header {
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .training__header {
    padding: 0 30px;
    margin-bottom: 32px;
  }
}

.training__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.training__en {
  font-size: 13px;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  letter-spacing: 0.1em;
}

.training__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}

.training__title {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.training__cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 0 48px;
}

@media (max-width: 768px) {
  .training__cards {
    flex-direction: column;
    align-items: center;
    padding: 0 30px;
    gap: 24px;
  }
}

/* 研修カード下のイラスト（画面左寄せ） */
.training__illust {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  margin-left: -16px;
}

.training__illust img {
  display: block;
  width: 34%;
  height: auto;
}

@media (max-width: 768px) {
  .training__illust img {
    width: 64%;
  }
}

/* 研修バナー（写真フレーム＋半透明パネル） */
.training__card {
  flex: 1;
  max-width: 600px;
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  min-height: 375px;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .training__card {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* 後期研修は初期研修より少し下げて表示 */
.training__card--later {
  margin-top: 56px;
}

@media (max-width: 768px) {
  .training__card--later {
    margin-top: 0;
  }
}

.training__card-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.training__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ホバー時に画像全体へ #00abe4 を 0.4 で重ねる */
.training__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--color-secondary);
  opacity: 0;
  transition: 0.3s;
  pointer-events: none;
}

@media (hover: hover) {
  .training__card:hover::after {
    opacity: 0.4;
  }
}

.training__panel {
  position: absolute;
  inset: 24px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  transition: 0.3s;
}

@media (max-width: 600px) {
  .training__panel {
    inset: 16px;
  }
}

@media (hover: hover) {
  /* ホバー時は半透明の白パネルを消す */
  .training__card:hover .training__panel {
    background: transparent;
  }
}

@media (hover: hover) {
  /* ホバー時は文字と矢印を白にする */
  .training__card:hover .training__panel-title,
  .training__card:hover .training__panel-en {
    color: var(--white);
  }
}

@media (hover: hover) {
  .training__card:hover .training__panel-arrow::before,
  .training__card:hover .training__panel-arrow::after {
    background-color: var(--white);
  }
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る */
  .training__card:hover .training__panel-arrow::before {
    animation: arrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .training__card:hover .training__panel-arrow::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

.training__panel-title {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin-bottom: 8px;
  transition: 0.3s;
}

.training__panel-en {
  font-size: 12px;
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  transition: 0.3s;
}

.training__panel-arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 13px;
  height: 13px;
  overflow: hidden;
}

.training__panel-arrow::before,
.training__panel-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  background-color: #00abe4;
  -webkit-mask: url(../img/common/arrow.svg) no-repeat center / contain;
  mask: url(../img/common/arrow.svg) no-repeat center / contain;
  transition: background-color 0.3s;
}

/* 初期表示：before は中央、after は左下に待機 */
.training__panel-arrow::before {
  transform: translate(0, 0);
}

.training__panel-arrow::after {
  transform: translate(-160%, 160%);
}

/* ========================================
    高校生・予備校生へのご案内
    ======================================== */
.highschool {
  padding: 80px 0 96px;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .highschool {
    padding: 64px 0 72px;
  }
}

/* 研修セクションとの境界を波形にするクリームのスカラップ（最上部に密着） */
.highschool__divider {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -120px;
  margin-bottom: 32px;
}

.highschool__divider img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .highschool__divider {
    margin-top: -64px; /* SPの上パディング（64px）を相殺 */
    margin-bottom: 24px;
  }
}

/* 背面を流れる波の装飾（wave-highschool / opacity 0.3 はSVGに内包） */
.highschool__wave {
  position: absolute;
  left: 0;
  top: 256px;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.highschool__wave img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .highschool__wave img {
    width: 200%;
    margin-left: -50%;
  }
}

@media (max-width: 768px) {
  .highschool__wave {
    top: 144px;
  }
}

/* SP: 装飾の波をさらに下げて表示 */
@media (max-width: 600px) {
  .highschool__wave {
    top: 600px;
  }
}

/* 左側にはみ出す装飾グラデーション（Rectangle 80 / 右端をピル状に） */
.highschool__bg {
  position: absolute;
  top: 160px;
  left: -6%;
  width: 56%;
  aspect-ratio: 879 / 518;
  background: linear-gradient(
    270deg,
    var(--color-blue-light) 0%,
    var(--color-accent) 100%
  );
  border-radius: 0 300px 300px 0;
  z-index: 0;
}

@media (max-width: 768px) {
  .highschool__bg {
    top: 100px;
    left: -50%;
    width: 110%;
  }
}

.highschool__header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 7.639vw;
  max-width: 1440px;
  margin: 128px auto 80px;
}

@media (max-width: 768px) {
  .highschool__header {
    display: block;
    padding: 0 30px;
    margin-bottom: 32px;
  }
}

.highschool__label {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.highschool__dot {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--color-secondary);
  border-radius: 2px;
}

.highschool__en {
  font-size: 12px;
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--color-secondary);
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.highschool__title {
  grid-column: 2;
  font-size: clamp(22px, 1.736vw, 25px);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.highschool__cards {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16vw;
  padding: 0 7.639vw;
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .highschool__cards {
    flex-direction: column;
    padding: 0 30px;
    gap: 40px;
  }
}

.highschool__banner {
  position: relative;
  z-index: 1;
  margin-top: 52px;
}

.highschool__banner img {
  display: block;
  width: 105%;
  height: auto;
  margin-left: -2.5%;
}

@media (max-width: 600px) {
  .highschool__banner img {
    width: 100%;
    margin-left: 0;
  }
}

.highschool__card {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* 画像の背面にずらして敷くグラデーション枠（Rectangle 81 / 85） */
.highschool__card-figure {
  position: relative;
}

.highschool__card-figure::before {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  background: linear-gradient(
    270deg,
    var(--color-blue-light) 41%,
    var(--color-accent) 100%
  );
  border-radius: 10px;
  z-index: 0;
}

.highschool__card-img {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 500 / 450;
}

.highschool__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像に重ねるグラデーション（Rectangle 78 / opacity 0.2） */
.highschool__card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    270deg,
    var(--color-blue-light) 0%,
    var(--color-accent) 100%
  );
  opacity: 0.2;
  pointer-events: none;
  transition: 0.3s;
}

@media (hover: hover) {
  /* ホバー時は画像上のグラデーションを外す */
  .highschool__card:hover .highschool__card-img::after {
    opacity: 0;
  }
}

@media (hover: none) {
  /* タッチデバイスはホバー不可のため、PCホバー時（黄色オーバーレイなし）を初期表示にする */
  .highschool__card-img::after {
    opacity: 0;
  }
}

/* 画像左に立つ白帯＋縦書きの英字ラベル（Rectangle 84 + 縦書きテキスト） */
.highschool__card-label {
  position: absolute;
  bottom: 40px;
  left: 16px;
  writing-mode: vertical-rl;
  font-size: 12px;
  font-family: var(--font-secondary);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  background: transparent;
  padding: 16px 8px;
  z-index: 1;
  transition: 0.3s;
}

@media (hover: hover) {
  .highschool__card:hover .highschool__card-label {
    background: var(--white);
  }
}

@media (hover: none) {
  /* タッチデバイスはPCホバー時と同じ白背景ラベルを初期表示にする */
  .highschool__card-label {
    background: var(--white);
  }
}

.highschool__card-body {
  padding: 56px 0 0;
}

.highschool__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.highschool__card-title {
  font-size: clamp(20px, 1.736vw, 25px);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* 丸角スクエアの矢印ボタン（Rectangle 86 / 88 + Vector 76 / 78） */
.highschool__card-arrow {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: var(--color-secondary);
  border-radius: 10px;
  overflow: hidden;
  transition: 0.3s;
}

/* ↗ arrow.svg を白で表示（2枚重ねて左下→右上に流す） */
.highschool__card-arrow::before,
.highschool__card-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  background-color: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.highschool__card-arrow::before {
  transform: translate(0, 0);
}

.highschool__card-arrow::after {
  transform: translate(-280%, 280%);
}

@media (hover: hover) {
  .highschool__card:hover .highschool__card-arrow {
    background: var(--color-primary);
  }
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る（50pxの枠外まで移動） */
  .highschool__card:hover .highschool__card-arrow::before {
    animation: blogArrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .highschool__card:hover .highschool__card-arrow::after {
    animation: blogArrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

/* タイトル下の短いライン（Vector 77 / 79） */
.highschool__card-line {
  display: block;
  width: 50px;
  height: 2px;
  background: var(--color-secondary);
  margin: 32px 0;
}

.highschool__card-desc {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 2;
}

/* ========================================
    ブログ・お知らせ
    ======================================== */
.blog-news {
  padding: 96px 0 80px 0;
  background:
    linear-gradient(
      -37deg,
      rgba(195, 255, 246, 0.2) 46%,
      rgba(0, 171, 228, 0.2) 99%
    ),
    var(--color-bg);
  position: relative;
  z-index: 1;
  /* 横方向のみクリップ（右の見切れを非表示）。縦は装飾を下のAccessへはみ出させるため visible */
  overflow-x: clip;
  overflow-y: visible;
}

@media (max-width: 768px) {
  .blog-news {
    padding: 64px 0;
  }
}

.blog-news__deco {
  position: absolute;
  right: -16px;
  bottom: -32px;
  width: 45%;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .blog-news__deco {
    position: static;
    width: 80%;
    margin-top: 40px;
    margin-left: auto;
  }
}

.blog-news__deco img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-news__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 420fr 670fr;
  gap: 48px;
  max-width: calc(1144px + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 1080px) {
  .blog-news__inner {
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .blog-news__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 30px;
  }
}

/* --- 見出し（BLOG / NEWS 共通） --- */
.blog-news__head {
  margin-bottom: 32px;
}

.blog-news__en {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
}

.blog-news__en::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--color-secondary);
  border-radius: 2px;
}

.blog-news__ttl {
  margin-top: 4px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

/* --- 一覧をみる ＋ 角丸ボタン（共通） --- */
.blog-news__action {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: 0.3s;
}

.blog-news__action-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  transition: color 0.3s;
}

@media (hover: hover) {
  .blog-news__action:hover .blog-news__action-text {
    color: var(--color-primary);
  }
}

.blog-news__square {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background: var(--color-secondary);
  border-radius: 10px;
  overflow: hidden;
  transition: background-color 0.3s;
}

@media (hover: hover) {
  .blog-news__action:hover .blog-news__square {
    background: var(--color-primary);
  }
}

.blog-news__square::before,
.blog-news__square::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  background-color: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.blog-news__square::before {
  transform: translate(0, 0);
}

.blog-news__square::after {
  transform: translate(-280%, 280%);
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る（50pxの枠外まで移動） */
  .blog-news__action:hover .blog-news__square::before {
    animation: blogArrowOutTopRight 0.6s forwards;
    animation-delay: 0s;
  }
}

@media (hover: hover) {
  .blog-news__action:hover .blog-news__square::after {
    animation: blogArrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

@keyframes blogArrowOutTopRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(280%, -280%);
  }
}

@keyframes blogArrowInFromBottomLeft {
  0% {
    transform: translate(-280%, 280%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* --- ブログ（カード3枚） --- */
.blog-news__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-news__card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 36px 24px 24px 40px;
  background: var(--white);
  border-radius: 10px;
}

.blog-news__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-news__card-bar {
  width: 3px;
  height: 24px;
  background: var(--color-secondary);
  flex-shrink: 0;
}

.blog-news__card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.blog-news__card-desc {
  margin-top: 16px;
  margin-left: 13px;
  margin-right: 13px;
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  color: var(--color-muted);
}

.blog-news__card .blog-news__action {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-end;
}

/* --- お知らせ（リスト） --- */
.blog-news__news-list {
  display: flex;
  flex-direction: column;
}

.blog-news__news-item {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 8px 32px;
  border: 1px solid transparent;
  border-radius: 300px;
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  /* PC：デフォルトはプレーン、ホバー時のみ白背景＋青枠 */
  .blog-news__news-item:hover {
    background: var(--white);
    border-color: var(--color-secondary);
  }
}

.blog-news__news-date {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.blog-news__news-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-news__news-arrow {
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-news__news-arrow::before,
.blog-news__news-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  background-color: var(--color-secondary);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.blog-news__news-arrow::before {
  transform: translate(0, 0);
}

.blog-news__news-arrow::after {
  transform: translate(-160%, 160%);
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る */
  .blog-news__news-item:hover .blog-news__news-arrow::before {
    animation: arrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .blog-news__news-item:hover .blog-news__news-arrow::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

.blog-news__col--news .blog-news__action--news {
  display: flex;
  width: fit-content;
  margin-top: 24px;
  margin-left: auto;
  margin-right: 32px;
}

@media (max-width: 768px) {
  .blog-news__card {
    min-height: 0;
    padding: 24px;
  }

  /* お知らせ SP のみ：日付を改行して上段に、ピル枠をやめてプレーンなリストに */
  .blog-news__news-item {
    flex-wrap: wrap;
    gap: 4px 16px;
    min-height: 0;
    padding: 16px 8px;
    border-radius: 0;
    border-color: transparent;
    background: transparent;
  }

  /* SP はホバーでもピルを出さずプレーンなまま */
  .blog-news__news-item:hover {
    background: transparent;
    border-color: transparent;
  }

  .blog-news__news-item:hover .blog-news__news-title {
    color: var(--color-primary);
  }

  .blog-news__news-date {
    width: 100%;
  }

  /* SP：もっと見るボタンを画面中央に配置 */
  .blog-news__col--news .blog-news__action--news {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================
    アクセス
    ======================================== */
.access {
  padding: 96px 0 96px;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* 背面を流れる波の装飾（access-wave / 中央配置から24px下げ） */
.access__wave {
  position: absolute;
  left: 0;
  top: 56%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .access__wave {
    top: 100px;
    transform: none;
  }
}

.access__wave img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .access__wave img {
    width: 200%;
    margin-left: -50%;
  }
}

@media (max-width: 768px) {
  .access {
    padding: 64px 0 72px;
  }
}

.access__inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 104px;
  align-items: center;
  padding: 0 0 0 192px;
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 1080px) {
  .access__inner {
    padding: 0 32px 0 64px;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .access__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 30px;
    gap: 32px;
  }
}

.access__content {
  width: 340px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .access__content {
    width: 100%;
  }
}

.access__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 8px;
}

.access__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-secondary);
  border-radius: 2px;
  flex-shrink: 0;
}

.access__en {
  font-size: 12px;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  letter-spacing: 1.28px;
}

.access__title {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  line-height: 1.57;
  margin-bottom: 20px;
}

.access__address {
  font-size: 16px;
  color: var(--color-muted);
  line-height: 1.875;
  margin-bottom: 16px;
}

.access__transport {
  font-size: 16px;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 40px;
}

.access__btn {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .access__btn {
    display: flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .access__btn {
    gap: 16px;
    font-size: 14px;
  }
}

.access__btn-text {
  transition: color 0.3s;
}

@media (hover: hover) {
  .access__btn:hover .access__btn-text {
    color: var(--color-primary);
  }
}

.access__btn-icon {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  background: var(--color-secondary);
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  transition: background-color 0.3s;
}

@media (hover: hover) {
  .access__btn:hover .access__btn-icon {
    background: var(--color-primary);
  }
}

.access__btn-icon::before,
.access__btn-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  background: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.access__btn-icon::before {
  transform: translate(0, 0);
}

.access__btn-icon::after {
  transform: translate(-280%, 280%);
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る（50pxの枠外まで移動） */
  .access__btn:hover .access__btn-icon::before {
    animation: blogArrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .access__btn:hover .access__btn-icon::after {
    animation: blogArrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

.access__map {
  flex: 0 0 50%;
  min-width: 0;
}

.access__map img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* アクセスセクション下のイラスト（中央よりやや左・地図に重ねる） */
.access__illust {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: -40px;
  transform: translateX(-60px);
}

.access__illust img {
  display: inline-block;
  width: 32%;
  height: auto;
}

/* SP: イラストを画面右揃え・幅60%で表示 */
@media (max-width: 768px) {
  .access__illust {
    text-align: right;
    transform: none;
  }

  .access__illust img {
    width: 60%;
  }
}

/* ========================================
    情報誌KIMAI
    ======================================== */
.kimai {
  /* 上：水色濃いめ → 早めに白へ（医学生セクションと同じ色味・テクスチャなし） */
  background: linear-gradient(
    180deg,
    rgba(0, 171, 228, 0.28) 0%,
    var(--white) 55%
  );
  padding: 0 0 176px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .kimai {
    padding: 0 0 72px;
  }
}

.kimai__top {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 0;
}

.kimai__top img {
  display: block;
  width: 100%;
  height: auto;
}

.kimai__deco {
  position: absolute;
  right: -16px;
  bottom: 40px;
  z-index: 0;
  width: 23%;
  pointer-events: none;
}

/* SP: 位置はそのまま、大きさのみ幅45%に */
@media (max-width: 768px) {
  .kimai__deco {
    width: 50%;
    right: 0;
  }
}

.kimai__deco img {
  display: block;
  width: 100%;
  height: auto;
}

.kimai__inner {
  /* deco を内包しても絶対配置の参照元は .kimai（section）に保つため static */
  position: static;
  display: flex;
  align-items: center;
  padding: 0 48px 0 192px;
  max-width: 1440px;
  margin: 80px auto 0;
}

@media (max-width: 1080px) {
  .kimai__inner {
    padding: 0 32px 0 64px;
  }
}

@media (max-width: 768px) {
  .kimai__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0 30px;
    gap: 0;
    margin-top: 64px;
  }
}

.kimai__content {
  position: relative;
  z-index: 1;
  width: 52%;
  flex-shrink: 0;
}

/* SP: content をフラット化し、画像を h2 と本文の間へ並び替え
   （subtitle → h2 → kimai.webp → kimai-deco.webp → 本文 → ボタン） */
@media (max-width: 768px) {
  .kimai__content {
    display: contents;
  }

  .kimai__subtitle {
    order: 1;
  }

  .kimai__en {
    order: 2;
  }

  .kimai__image-wrap {
    order: 3;
  }

  .kimai__deco {
    order: 4;
    position: static;
    align-self: flex-end;
    margin: -24px 0 32px;
  }

  .kimai__body {
    order: 5;
  }

  .kimai__btn {
    order: 6;
    align-self: center;
  }
}

.kimai__subtitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  line-height: 2.5;
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .kimai__subtitle {
    font-size: 16px;
  }
}

.kimai__en {
  font-size: clamp(28px, 2.778vw, 40px);
  font-family: var(--font-secondary);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.125em;
  margin-bottom: 24px;
  line-height: 1.2;
}

.kimai__body {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-muted);
  line-height: 2.6;
  margin-bottom: 40px;
}

@media (max-width: 600px) {
  .kimai__body {
    font-size: 14px;
    line-height: 2;
  }
}

.kimai__btn {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: 0.3s;
}

@media (max-width: 600px) {
  .kimai__btn {
    gap: 16px;
    font-size: 14px;
  }
}

.kimai__btn-text {
  transition: color 0.3s;
}

@media (hover: hover) {
  .kimai__btn:hover .kimai__btn-text {
    color: var(--color-primary);
  }
}

.kimai__btn-square {
  position: relative;
  width: 50px;
  height: 50px;
  background: var(--color-secondary);
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  transition: background-color 0.3s;
}

@media (hover: hover) {
  .kimai__btn:hover .kimai__btn-square {
    background: var(--color-primary);
  }
}

.kimai__btn-square::before,
.kimai__btn-square::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  background: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.kimai__btn-square::before {
  transform: translate(0, 0);
}

.kimai__btn-square::after {
  transform: translate(-280%, 280%);
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る（50pxの枠外まで移動） */
  .kimai__btn:hover .kimai__btn-square::before {
    animation: blogArrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .kimai__btn:hover .kimai__btn-square::after {
    animation: blogArrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

.kimai__image-wrap {
  position: relative;
  z-index: 0;
  width: 62%;
  flex-shrink: 0;
  min-width: 0;
  margin-left: -14%;
  transform: translateY(80px);
}

@media (max-width: 768px) {
  .kimai__image-wrap {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}

.kimai__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
    Instagram
    ======================================== */
.instagram {
  background: var(--white);
  padding: 80px 0 96px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .instagram {
    padding: 64px 0 72px;
  }
}

.instagram::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  top: 180px;
  pointer-events: none;
  background: url("../img/top/instagram-bg-pattern.webp") no-repeat center /
    100% auto;
}

@media (max-width: 768px) {
  .instagram::after {
    background: url("../img/top/instagram-bg-pattern.webp") no-repeat top / 200%
      auto;
  }
}

.instagram__header {
  position: relative;
  z-index: 1;
  padding: 0 48px 0 188px;
  margin-bottom: 72px;
}

@media (max-width: 768px) {
  .instagram__header {
    padding: 0 30px;
    margin-bottom: 32px;
  }
}

.instagram__body {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 7.639vw;
}

@media (max-width: 768px) {
  .instagram__body {
    padding: 0 30px;
  }
}

/* Instagram フィード投稿（プラグイン出力）の角丸 */
.instagram__body .sbi_photo,
.instagram__body .sbi_photo_wrap,
.instagram__body .sbi_item,
.instagram__body .sbi_photo img {
  border-radius: 10px;
  overflow: hidden;
}

.instagram__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.instagram__en {
  font-size: 13px;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  letter-spacing: 0.1em;
}

.instagram__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}

.instagram__title {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.instagram__foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .instagram__foot {
    margin-top: 32px;
  }
}

.instagram__action {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: 0.3s;
}

.instagram__action-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  transition: color 0.3s;
}

@media (hover: hover) {
  .instagram__action:hover .instagram__action-text {
    color: var(--color-primary);
  }
}

.instagram__square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background: var(--color-secondary);
  border-radius: 10px;
  transition: background-color 0.3s;
}

@media (hover: hover) {
  .instagram__action:hover .instagram__square {
    background: var(--color-primary);
  }
}

.instagram__icon {
  width: 24px;
  height: 24px;
  color: var(--white);
}

/* ========================================
    お問合せ（Contact）
    ======================================== */
.contact-section {
  background: var(--white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .contact-section {
    padding: 64px 0;
  }
}

/* 右側を大きく流れる波の装飾（wave-kimai / KIMAI→お問合せ境界） */
.contact-section__wave {
  position: absolute;
  left: -9%;
  top: 0;
  width: 109%;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .contact-section__wave {
    top: 200px;
  }
}

.contact-section__wave img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .contact-section__wave img {
    width: 200%;
    margin-left: -50%;
  }
}

.contact-section__deco {
  position: absolute;
  left: -16px;
  top: 104px;
  z-index: 0;
  width: 33%;
  pointer-events: none;
}

/* SP: 装飾画像を幅75%で表示 */
@media (max-width: 768px) {
  .contact-section__deco {
    width: 70%;
  }
}

.contact-section__deco img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-section__inner {
  position: relative;
  /* 固定背景装飾（.m-deco / z-index:2）より前面に置き、バナー・テキストが
     装飾の背後に隠れないようにする。白背景と __wave/__deco は据え置きなので、
     装飾円は白背景の上・バナーの下に表示される。 */
  z-index: 3;
  width: 100%;
  max-width: calc(1220px + 32px);
  margin: 0 auto;
  padding: 128px 16px 0;
}

@media (max-width: 1080px) {
  .contact-section__inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 768px) {
  .contact-section__inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.contact-section__header {
  text-align: center;
  margin-bottom: 40px;
}

@media (max-width: 600px) {
  .contact-section__header {
    text-align: left;
  }
}

.contact-section__en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-secondary);
  letter-spacing: 0.107em;
  line-height: 2.4;
}

@media (max-width: 600px) {
  .contact-section__en {
    justify-content: flex-start;
  }
}

.contact-section__en-dot {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--color-secondary);
}

.contact-section__title {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  line-height: 1.568;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .contact-section__title {
    font-size: 22px;
  }
}

.contact-section__desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-muted);
  line-height: 2.666;
}

@media (max-width: 600px) {
  .contact-section__desc {
    font-size: 14px;
    line-height: 2;
  }
}

.contact-section__cards {
  display: flex;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 768px) {
  .contact-section__cards {
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
  }
}

.contact-section__card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 250px;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .contact-section__card {
    min-height: 208px;
  }
}

.contact-section__card--phone {
  background: var(--color-accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 56px;
}

.contact-section__phone-inner {
  text-align: left;
}

@media (max-width: 600px) {
  .contact-section__card--phone {
    padding: 40px 24px;
  }
}

.contact-section__card-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.8;
}

.contact-section__card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.8;
  margin-top: 16px;
}

.contact-section__phone {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.contact-section__phone-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  color: var(--color-primary);
  transform: translateY(2px);
}

.contact-section__phone-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-primary);
}

.contact-section__phone-number {
  font-family: var(--font-secondary);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.032em;
  line-height: 1;
  text-decoration: none;
}

@media (max-width: 1080px) {
  .contact-section__phone-number {
    font-size: 30px;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .contact-section__phone-number {
    font-size: 26px;
    white-space: nowrap;
  }
}

@media (hover: hover) {
  .contact-section__phone-number:hover {
    opacity: 0.7;
  }
}

.contact-section__phone-note {
  font-size: 20px;
  font-weight: 400;
}

@media (max-width: 1080px) {
  .contact-section__phone-note {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .contact-section__phone-note {
    font-size: 13px;
  }
}

.contact-section__card--form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 56px;
  background: var(--color-secondary);
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
}

@media (max-width: 600px) {
  .contact-section__card--form {
    padding: 24px;
  }
}

@media (hover: hover) {
  .contact-section__card--form:hover {
    background: var(--color-primary);
  }
}

.contact-section__form-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.05em;
}

@media (max-width: 1080px) {
  .contact-section__form-text {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .contact-section__form-text {
    font-size: 18px;
  }
}

.contact-section__form-arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 15px;
  height: 15px;
  overflow: hidden;
}

.contact-section__form-arrow::before,
.contact-section__form-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  background-color: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.contact-section__form-arrow::before {
  transform: translate(0, 0);
}

.contact-section__form-arrow::after {
  transform: translate(-160%, 160%);
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る */
  .contact-section__card--form:hover .contact-section__form-arrow::before {
    animation: arrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .contact-section__card--form:hover .contact-section__form-arrow::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

/*# sourceMappingURL=main.css.map */

/* ========================================
    医学生へのご案内ページ（page-medical-students）
    ======================================== */

/* --- 共通トーン --- */
.ms-body,
.ms-lead__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 2.6667;
  letter-spacing: 0;
}

@media (max-width: 600px) {
  .ms-body,
  .ms-lead__text {
    font-size: 14px;
    line-height: 1.85;
  }
}

.ms-body--intro {
  margin-top: 24px;
}

.ms-body--gap {
  margin-bottom: 80px;
}

@media (max-width: 600px) {
  .ms-body--gap {
    margin-bottom: 40px;
  }
}

.ms-section {
  padding: 56px 0;
  scroll-margin-top: 80px;
}

@media (max-width: 768px) {
  .ms-section {
    padding: 40px 0;
  }
}

/* --- 主要見出し（上下ライン） --- */
.ms-secttl {
  color: var(--color-secondary);
  font-size: clamp(18px, 1.389vw, 20px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding: 16px 56px;
  border-top: 2px solid var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .ms-secttl {
    padding: 16px 24px;
    margin-bottom: 32px;
  }
}

/* --- サブ見出し（左バー） --- */
.ms-label {
  position: relative;
  padding-left: 16px;
  color: var(--color-primary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.ms-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 3px;
  height: 1.1em;
  background: var(--color-secondary);
}

/* --- ヒーロー --- */
.ms-hero {
  position: relative;
  padding-top: 64px;
  overflow: hidden;
  background-color: var(--color-bg-light);
  background-image: url("../img/medical-students/hero-wave.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

@media (max-width: 768px) {
  .ms-hero {
    padding-top: 56px;
  }
}

.ms-hero__inner {
  min-height: 200px;
  padding-top: 128px;
  padding-bottom: 200px;
  padding-right: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: left;
}

@media (max-width: 768px) {
  .ms-hero__inner {
    padding-right: 16px;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .ms-hero__inner {
    min-height: 140px;
    padding-top: 64px;
    padding-bottom: 40px;
  }
}

.ms-hero__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ms-hero__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}

.ms-hero__en {
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.ms-hero__title {
  color: var(--color-primary);
  font-size: clamp(22px, 1.736vw, 25px);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ===== 情報誌KIMAI リード文＋お問合せボタン（アーカイブ タイトル下・中央） ===== */
/* ボタンは共通の .ms-btn を使用（デザイン統一） */
.kimai-lead {
  padding: 0 0 128px;
}

@media (max-width: 600px) {
  .kimai-lead {
    padding: 0 0 64px;
  }
}

.kimai-lead__inner {
  text-align: center;
}

.kimai-lead__text {
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

/* ===== 404 NOT FOUND リード文＋トップへ戻る（ヒーロー下・中央） ===== */
/* ボタンは共通の .ms-btn を使用（デザイン統一） */
.notfound {
  padding: 0 0 128px;
}

@media (max-width: 600px) {
  .notfound {
    padding: 64px 0;
  }
}

.notfound__inner {
  text-align: center;
}

.notfound__text {
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

@media (max-width: 600px) {
  .notfound__text {
    font-size: 14px;
    text-align: left;
  }
}

/* ===== 情報誌KIMAI バックナンバー一覧（クリーム箱・破線区切り） ===== */
.kimai-back {
  padding-bottom: 128px;
}

@media (max-width: 600px) {
  .kimai-back {
    padding-bottom: 64px;
  }
}

.kimai-back__box {
  background: var(--color-bg-cream);
  border-radius: 10px;
  padding: 24px 56px 48px;
  margin: 0 72px;
}

@media (max-width: 768px) {
  .kimai-back__box {
    padding: 24px;
    margin: 0;
  }
}

.kimai-back__list {
  list-style: none;
}

.kimai-back__item {
  display: flex;
  align-items: flex-start;
  gap: 62px;
  padding: 56px 0;
  border-bottom: 1px dashed var(--color-secondary);
}

@media (max-width: 1080px) {
  .kimai-back__item {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 0;
  }
}

.kimai-back__thumb {
  flex-shrink: 0;
  width: 180px;
}

.kimai-back__thumb-img,
.kimai-back__thumb-dummy {
  display: block;
  width: 180px;
  aspect-ratio: 180 / 255;
  object-fit: cover;
  /* 横長・見開きPDFは右側（表紙面）を残して切り取る */
  object-position: right center;
}

.kimai-back__thumb-dummy {
  background: #d9d9d9;
}

.kimai-back__body {
  flex: 1;
  min-width: 0;
}

@media (max-width: 1080px) {
  .kimai-back__body {
    width: 100%;
  }
}

.kimai-back__name {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-bottom: 16px;
}

.kimai-back__name::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 25px;
  background: var(--color-secondary);
}

.kimai-back__topics {
  list-style: none;
}

.kimai-back__topic {
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

.kimai-back__pdf {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 263px;
  height: 53px;
  margin-right: 80px;
  background: var(--color-secondary);
  border-radius: 100px;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .kimai-back__pdf:hover {
    background: var(--color-primary);
  }
}

@media (max-width: 1080px) {
  .kimai-back__pdf {
    width: 100%;
    max-width: 263px;
    margin: 0;
  }
}

.kimai-back__empty {
  color: var(--color-muted);
  font-size: 15px;
  text-align: center;
}

.ms-tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

@media (max-width: 768px) {
  .ms-tabs {
    justify-content: flex-start;
    gap: 8px;
  }
}

.ms-tabs__item a {
  position: relative;
  display: block;
  min-width: 200px;
  padding: 16px 24px;
  text-align: center;
  border-radius: 500px;
  background: var(--color-bg-cream);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .ms-tabs__item a:hover {
    background: var(--color-primary);
    color: var(--white);
  }
}

.ms-tabs__item a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  border: 10px solid transparent;
  border-top-color: var(--color-primary);
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: 0s;
}

@media (hover: hover) {
  .ms-tabs__item a:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-3px);
    transition: 0.3s 0.1s;
  }
}

@media (max-width: 600px) {
  .ms-tabs__item {
    width: calc(50% - 4px);
  }
  .ms-tabs__item a {
    min-width: 0;
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* --- リード --- */
.ms-lead-sec {
  padding-top: 116px;
}

@media (max-width: 768px) {
  .ms-lead-sec {
    padding-top: 56px;
  }
}

.ms-lead {
  color: var(--color-primary);
  font-size: clamp(20px, 1.736vw, 25px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.8;
  margin-bottom: 24px;
}

/* --- 病院実習 --- */
.ms-practice {
  display: flex;
  gap: 3.333vw;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 48px;
}

.ms-practice__body {
  flex: 1;
}

.ms-practice__title {
  color: var(--color-primary);
  font-size: clamp(20px, 1.736vw, 25px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: 24px;
  margin-bottom: 32px;
}

.ms-practice__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 2.6667;
  letter-spacing: 0;
}

.ms-practice__body .ms-label {
  margin: 40px 0 12px;
}

.ms-practice__figure {
  flex: 0 0 400px;
  max-width: 38%;
}

.ms-practice__img {
  border-radius: 10px;
  overflow: hidden;
}

.ms-practice__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.ms-practice__caption {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .ms-practice {
    flex-direction: column;
  }

  .ms-practice__figure {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .ms-practice__title {
    margin-top: 16px;
    margin-bottom: 24px;
  }

  .ms-practice__text {
    font-size: 14px;
    line-height: 1.85;
  }

  .ms-practice__body .ms-label {
    margin: 32px 0 12px;
  }
}

/* --- カード（スケジュール／概要／申請の流れ） --- */
.ms-card {
  position: relative;
  display: flex;
  gap: 24px;
  background: var(--color-bg-cream);
  border-radius: 10px;
  overflow: hidden;
  padding: 48px 48px 48px 0;
  margin-bottom: 72px;
}

.ms-card__side {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-left: 34px;
  padding-top: 104px;
}

.ms-card__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 34px;
  background: var(--color-accent);
  border-radius: 0 50px 50px 0;
}

.ms-card__icon img {
  display: block;
  width: 25px;
  height: auto;
}

.ms-card__label {
  color: var(--color-primary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.ms-card__body {
  flex: 3;
  min-width: 0;
  padding-top: 8px;
}

@media (max-width: 768px) {
  .ms-card {
    flex-direction: column;
    gap: 24px;
    /* 左は 0 にしてアイコンをカード左端に密着させ、コンテンツは body 側で 24px 確保 */
    padding: 32px 24px 32px 0;
  }

  .ms-card__side {
    flex: none;
    padding: 0 0 0 116px;
    min-height: 80px;
    display: flex;
    align-items: center;
  }

  .ms-card__icon {
    top: 50%;
    transform: translateY(-50%);
    width: 88px;
    height: 64px;
    padding-left: 28px;
  }

  .ms-card__body {
    padding-left: 24px;
  }
}

/* スケジュール表 */
.ms-schedule {
  padding-right: 32px;
}

@media (max-width: 600px) {
  .ms-schedule {
    padding-right: 0;
  }
}

.ms-schedule__row {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(102, 102, 102, 0.3) 0 3px,
    transparent 3px 6px
  );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 1px;
}

.ms-schedule__row:first-child {
  padding-top: 0;
}

.ms-schedule__row:last-child {
  padding-bottom: 0;
  background-image: none;
}

.ms-schedule__row dt {
  flex: 0 0 148px;
  padding-top: 3px;
  color: var(--color-secondary);
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
}

.ms-schedule__row dd {
  flex: 1;
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .ms-schedule__row {
    flex-direction: column;
    gap: 4px;
  }

  .ms-schedule__row dt {
    flex: none;
  }
}

/* 概要リスト */
.ms-outline {
  padding-right: 32px;
}

@media (max-width: 600px) {
  .ms-outline {
    padding-right: 0;
  }
}

.ms-outline__row {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(102, 102, 102, 0.3) 0 3px,
    transparent 3px 6px
  );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 1px;
}

.ms-outline__row:first-child {
  padding-top: 0;
}

.ms-outline__row:last-child {
  padding-bottom: 0;
  background-image: none;
}

.ms-outline__row dt {
  flex: 0 0 120px;
}

.ms-outline__row dd {
  flex: 1;
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .ms-outline__row {
    flex-direction: column;
    gap: 8px;
  }

  .ms-outline__row dt {
    flex: none;
  }
}

/* --- ボタン（テキスト＋区切り＋矢印） --- */
.ms-btn-wrap {
  text-align: center;
  margin-top: 80px;
}

@media (max-width: 600px) {
  .ms-btn-wrap {
    margin-top: 48px;
  }
}

.ms-btn {
  display: inline-flex;
  align-items: stretch;
  min-width: 300px;
  min-height: 72px;
  background: var(--color-secondary);
  border-radius: 10px;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .ms-btn:hover {
    background: var(--color-primary);
  }
}

.ms-btn__text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 24px;
}

.ms-btn__arrow {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
  color: var(--white);
}

/* TOPページのボタンと同じ区切り線（1px × 50px・上下中央） */
.ms-btn__arrow::before {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: 50px;
  background: var(--white);
}

/* TOPページのボタンと同じ矢印ホバー（右上へ抜け、左下から入る対角ループ） */
.ms-btn__arrow-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  overflow: hidden;
}

.ms-btn__arrow-icon::before,
.ms-btn__arrow-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  background-color: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

.ms-btn__arrow-icon::before {
  transform: translate(0, 0);
}

.ms-btn__arrow-icon::after {
  transform: translate(-160%, 160%);
}

@media (hover: hover) {
  .ms-btn:hover .ms-btn__arrow-icon::before {
    animation: arrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .ms-btn:hover .ms-btn__arrow-icon::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

.ms-btn--sm {
  min-width: 260px;
  min-height: 64px;
}

@media (max-width: 600px) {
  .ms-btn {
    min-width: min(100%, 300px);
  }
}

/* --- 奨学金：先輩医師メッセージ --- */
.ms-message {
  display: flex;
  gap: 3.333vw;
  background: var(--color-bg-cream);
  border-radius: 10px;
  padding: 48px;
  margin: 40px 0;
}

.ms-message__profile {
  flex: 0 0 250px;
}

.ms-message__img {
  border-radius: 10px;
  overflow: hidden;
}

.ms-message__img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.ms-message__role {
  margin-top: 16px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 400;
}

.ms-message__meta {
  color: var(--color-muted);
  font-size: 12px;
  margin-top: 4px;
}

.ms-message__name {
  color: var(--color-primary);
  font-size: clamp(18px, 1.389vw, 20px);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: 8px;
}

.ms-message__job {
  font-size: 10px;
  font-weight: 400;
  margin-left: 8px;
}

.ms-message__content {
  flex: 1;
  min-width: 0;
  align-self: center;
}

.ms-message__heading {
  text-align: center;
  color: var(--color-primary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.ms-message__box {
  padding: 24px 0;
  border-top: 1px dashed var(--color-secondary);
  border-bottom: 1px dashed var(--color-secondary);
}

.ms-message__catch {
  color: var(--color-secondary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.ms-message__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 2.6667;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .ms-message {
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
  }

  /* content を display:contents にして heading / box を .ms-message 直下の
     flex アイテム扱いにし、order で「見出し → プロフィール → 本文」に並べ替える */
  .ms-message__content {
    display: contents;
  }

  .ms-message__heading {
    order: 1;
    margin-top: 0;
    margin-bottom: 0;
  }

  .ms-message__profile {
    order: 2;
    flex: none;
    max-width: 250px;
    margin: 0 auto;
    text-align: center;
  }

  .ms-message__box {
    order: 3;
  }

  .ms-message__name {
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .ms-message {
    margin: 32px 0;
  }

  .ms-message__catch {
    margin-bottom: 12px;
  }

  .ms-message__text {
    font-size: 14px;
    line-height: 1.85;
  }
}

/* --- 貸与金額／返済免除 --- */
.ms-loan {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 64px 0;
}

@media (max-width: 600px) {
  .ms-loan {
    gap: 40px;
    margin: 40px 0;
  }
}

.ms-loan__row {
  display: flex;
  gap: 32px;
}

.ms-loan__row .ms-label {
  flex: 0 0 120px;
}

.ms-loan__detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--color-muted);
}

.ms-loan__line {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ms-loan__line p {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
}

.ms-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 32px;
  border: 1px solid var(--color-primary);
  border-radius: 100px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .ms-loan__row {
    flex-direction: column;
    gap: 12px;
  }

  .ms-loan__row .ms-label {
    flex: none;
  }
}

/* --- 奨学金Q&A --- */
.ms-qa {
  margin: 64px 0;
}

@media (max-width: 600px) {
  .ms-qa {
    margin: 40px 0;
  }
}

.ms-qa__list {
  margin-top: 24px;
}

.ms-qa__item {
  padding: 20px 0;
  border-bottom: 1px dashed var(--color-secondary);
}

.ms-qa__q {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.ms-qa__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 32px;
  padding: 0 8px 0 12px;
  background: var(--color-accent);
  border-radius: 100px;
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}

.ms-qa__question {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.ms-qa__a {
  padding-left: 76px;
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .ms-qa__a {
    padding-left: 0;
  }
}

/* --- 特別貸付金制度 --- */
.ms-special {
  margin: 64px 0;
}

@media (max-width: 600px) {
  .ms-special {
    margin: 40px 0;
  }
}

.ms-special .ms-body {
  margin-top: 16px;
}

/* --- 申請の流れ --- */
.ms-flow {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}

.ms-flow__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(102, 102, 102, 0.3) 0 3px,
    transparent 3px 6px
  );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 1px;
}

.ms-flow__item:nth-child(4),
.ms-flow__item:nth-child(8) {
  background-image: none;
}

.ms-flow__num {
  flex: 0 0 32px;
  color: var(--color-secondary);
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 1.528vw, 22px);
}

.ms-flow__label {
  color: var(--color-primary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
}

@media (max-width: 600px) {
  .ms-flow {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }

  .ms-flow__item:nth-child(4) {
    background-image: repeating-linear-gradient(
      to right,
      rgba(102, 102, 102, 0.3) 0 3px,
      transparent 3px 6px
    );
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 1px;
  }

  .ms-flow__item:last-child {
    background-image: none;
  }
}

.ms-flow__docs {
  background: var(--white);
  border-radius: 10px;
  padding: 32px;
  margin: 32px 120px 0;
  text-align: center;
}

@media (max-width: 1080px) {
  .ms-flow__docs {
    margin: 32px 56px 0;
  }
}

@media (max-width: 768px) {
  .ms-flow__docs {
    margin: 32px 24px 0;
  }
}

@media (max-width: 600px) {
  .ms-flow__docs {
    padding: 24px;
    margin: 24px 16px 0;
  }
}

.ms-flow__docs-title {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.ms-flow__docs-list {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .ms-flow__docs-list {
    text-align: left;
  }
}

.ms-flow__docs-note {
  color: var(--color-muted);
  font-size: 12px;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .ms-flow__docs-note {
    text-align: left;
  }
}

.ms-flow__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

/* --- 申請の流れカード：side + flow を横並び、docs / btns を下段に全幅配置 --- */
.ms-card--flow {
  flex-direction: column;
  gap: 0;
  padding: 48px 0;
}

@media (max-width: 768px) {
  .ms-card--flow {
    padding: 32px 0;
    /* 最後のカードなので下マージンはセクション padding と重複 → SP では詰める */
    margin-bottom: 0;
  }
}

.ms-card--flow .ms-card__top {
  display: flex;
  gap: 24px;
  padding-right: 48px;
}

@media (max-width: 768px) {
  .ms-card--flow .ms-card__top {
    flex-direction: column;
    gap: 24px;
    padding-right: 24px;
  }
}

/* 点線を短く／右に余白を広め */
.ms-card--flow .ms-flow {
  flex: 3;
  min-width: 0;
  column-gap: 64px;
  padding-right: 56px;
}

@media (max-width: 768px) {
  .ms-card--flow .ms-flow {
    padding-left: 24px;
  }
}

@media (max-width: 600px) {
  .ms-card--flow .ms-flow {
    padding-right: 0;
  }
}

/* docs / btns はカードに対して左右余白なしの全幅 */
.ms-card--flow .ms-flow__btns {
  gap: 40px;
}

@media (max-width: 600px) {
  .ms-card--flow .ms-flow__btns {
    gap: 16px;
    margin-top: 24px;
  }
}

.ms-card--flow .ms-flow__btns .ms-btn--sm {
  width: 300px;
  min-width: 0;
  max-width: 100%;
}

/* --- 奨学生活動 --- */
.ms-acts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: var(--color-bg-cream);
  border-radius: 10px;
  padding: 48px;
  margin-top: 32px;
}

.ms-act {
  display: flex;
  gap: 2.778vw;
  align-items: flex-start;
}

.ms-act--reverse {
  flex-direction: row-reverse;
}

.ms-act__img {
  flex: 0 0 320px;
  border-radius: 10px;
  overflow: hidden;
}

.ms-act__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.ms-act__body {
  flex: 1;
  min-width: 0;
  padding: 40px 16px 0;
  border-top: 1px dashed var(--color-secondary);
}

/* 縦並び（〜768px）になったら点線を上から下へ。最後のコンテンツは点線なし（PC は上のまま変更なし） */
@media (max-width: 768px) {
  .ms-act__body {
    padding: 0 0 24px;
    border-top: none;
    border-bottom: 1px dashed var(--color-secondary);
  }

  .ms-acts .ms-act:last-child .ms-act__body {
    padding-bottom: 0;
    border-bottom: none;
  }
}

.ms-act__body .ms-label {
  margin-bottom: 16px;
}

.ms-act__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
}

.ms-act__note {
  color: var(--color-muted);
  font-size: 12px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .ms-acts {
    padding: 32px 20px;
    gap: 32px;
  }

  .ms-act,
  .ms-act--reverse {
    flex-direction: column;
  }

  .ms-act__img {
    flex: none;
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 600px) {
  .ms-act__text {
    font-size: 14px;
    line-height: 1.85;
  }
}

/* --- サポートセンターみき：住所 --- */
.ms-office {
  display: flex;
  gap: 3.333vw;
  align-items: flex-start;
  margin: 40px 0;
}

.ms-office__img {
  flex: 0 0 480px;
  max-width: 45%;
  border-radius: 10px;
  overflow: hidden;
}

.ms-office__img img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  display: block;
}

.ms-office__info {
  flex: 1;
}

.ms-office__address {
  color: var(--color-primary);
  font-weight: 500;
  font-size: 15px;
  line-height: 2.4;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .ms-office__address {
    font-size: 14px;
    line-height: 2;
  }
}

.ms-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: var(--color-accent);
  border-radius: 500px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .ms-map-btn:hover {
    background: var(--color-primary);
    color: var(--color-accent);
  }
}

.ms-map-btn__arrow {
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: rotate(45deg);
}

@media (hover: hover) {
  .ms-map-btn:hover .ms-map-btn__arrow {
    border-top-color: var(--color-accent);
    border-right-color: var(--color-accent);
  }
}

@media (max-width: 768px) {
  .ms-office {
    flex-direction: column;
    align-items: flex-start;
  }

  .ms-office__img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

/* --- ランチミーティング／臨床セミナー --- */
.ms-events {
  display: flex;
  gap: 3.333vw;
  margin-top: 80px;
}

.ms-event {
  flex: 1;
  min-width: 0;
}

.ms-event__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  margin: 12px 0 24px;
}

.ms-event__imgs {
  display: flex;
  gap: 16px;
}

.ms-event__img {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
}

.ms-event__img img {
  width: 100%;
  aspect-ratio: 23 / 18;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .ms-events {
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
  }
}

/* --- Contact --- */
.ms-contact {
  position: relative;
  overflow: hidden;
  padding: 80px 0 96px;
  margin-top: 64px;
}

.ms-contact__wave {
  position: absolute;
  right: -5%;
  top: 0;
  width: 70%;
  height: 100%;
  background: url("../img/medical-students/contact-wave.svg") no-repeat right
    top;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}

.ms-contact__deco {
  position: absolute;
  left: 0;
  top: 24px;
  z-index: 0;
  color: var(--white);
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(48px, 8.333vw, 120px);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--color-accent);
  pointer-events: none;
  user-select: none;
}

.ms-contact__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ms-contact__en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-secondary);
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.ms-contact__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
}

.ms-contact__title {
  color: var(--color-primary);
  font-size: clamp(20px, 1.736vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.ms-contact__lead {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 40px;
}

.ms-contact__cards {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.ms-contact__tel,
.ms-contact__form {
  flex: 1;
  max-width: 600px;
  min-height: 250px;
  border-radius: 10px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ms-contact__tel {
  background: var(--color-accent);
  text-align: left;
}

.ms-contact__tel-label {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
}

.ms-contact__tel-sub {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  margin-top: 16px;
}

.ms-contact__tel-num {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--color-primary);
}

.ms-contact__tel-icon img {
  display: block;
  width: 25px;
  height: 25px;
}

.ms-contact__tel-num a {
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
}

.ms-contact__tel-note {
  font-size: 14px;
  font-weight: 400;
}

.ms-contact__form {
  position: relative;
  background: var(--color-secondary);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .ms-contact__form:hover {
    opacity: 0.9;
  }
}

.ms-contact__form-text {
  font-size: clamp(18px, 1.389vw, 20px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.ms-contact__form-arrow {
  position: absolute;
  right: 32px;
  bottom: 32px;
  color: var(--white);
}

.ms-contact__form-arrow svg {
  display: block;
}

@media (max-width: 768px) {
  .ms-contact {
    padding: 56px 0 64px;
  }

  .ms-contact__cards {
    flex-direction: column;
    align-items: center;
  }

  .ms-contact__tel,
  .ms-contact__form {
    width: 100%;
    max-width: 100%;
    min-height: 0;
  }

  .ms-contact__form {
    padding: 40px 40px 56px;
  }
}

/* ========================================
    初期研修ページ（page-initial）
    ======================================== */

/* --- ヒーロー（ms-hero を流用しつつ背景差し替え） --- */
.res-hero {
  background-image: url("../img/initial/hero-wave.svg");
  background-position: center bottom;
  background-size: cover;
}

/* --- 汎用セクション（ms-section と余白を統一） --- */
.res-sec {
  padding: 56px 0;
}

@media (max-width: 768px) {
  .res-sec {
    padding: 40px 0;
  }
}

.res-sec--flush-top {
  padding-top: 0;
}

.res-philosophy {
  padding-top: 0;
}

.res-catch {
  color: var(--color-primary);
  font-size: clamp(22px, 1.736vw, 25px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin-bottom: 32px;
}

@media (max-width: 600px) {
  .res-catch {
    margin-bottom: 24px;
  }
}

.res-lead {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
  margin-bottom: 72px;
}

/* --- 研修理念 --- */
.res-lead:has(+ .res-tenet) {
  margin-bottom: 0;
}

.res-tenet {
  list-style: none;
  margin-top: 40px;
}

.res-tenet__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0;
}

.res-tenet__item + .res-tenet__item {
  background-image: repeating-linear-gradient(
    to right,
    rgba(102, 102, 102, 0.3) 0 3px,
    transparent 3px 6px
  );
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 1px;
}

.res-tenet__num {
  flex-shrink: 0;
  color: var(--color-secondary);
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(24px, 2.083vw, 30px);
  line-height: 30px; /* 本文1行分（15px × 2）に高さを合わせ、番号の中央を本文1行目に揃える */
}

.res-tenet__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
}

@media (max-width: 600px) {
  .res-tenet__item {
    gap: 12px;
  }
}

/* --- 初期研修のポイント --- */
.res-points {
  /* ベージュ地（背景色）→ ウェーブ（.res-points__wave）→ 画像・テキスト（.res-point）の順で重なる */
  position: relative;
  background-color: var(--color-bg-cream);
  border-radius: 10px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ウェーブ背景：画面幅いっぱい（フルブリード）に敷き、ベージュ地の上・中身の下に配置 */
.res-points__wave {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.res-points__wave img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* 画面幅が狭い時は幅に合わせて引き伸ばさず、比率を保ったまま見切れさせる */
@media (max-width: 768px) {
  .res-points__wave img {
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .res-points {
    padding: 32px 24px;
    gap: 32px;
  }
}

.res-point {
  position: relative;
  z-index: 1; /* ウェーブ（.res-points__wave）より前面 */
  display: flex;
  align-items: flex-start;
  gap: 3.472vw;
  padding-left: 48px;
}

.res-point--reverse {
  flex-direction: row-reverse;
  padding-left: 0;
  padding-right: 48px;
}

.res-point__img {
  flex-shrink: 0;
  width: 230px;
  border-radius: 10px;
  overflow: hidden;
}

.res-point__img img {
  display: block;
  width: 100%;
  aspect-ratio: 230 / 280;
  object-fit: cover;
}

.res-point__body {
  position: relative;
  flex: 1;
  background: var(--white);
  border-radius: 10px;
  padding: 32px 40px;
}

.res-point__body::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 12px solid transparent;
}

.res-point:not(.res-point--reverse) .res-point__body::before {
  left: -20px;
  border-right-color: var(--white);
}

.res-point--reverse .res-point__body::before {
  right: -20px;
  border-left-color: var(--white);
}

.res-point__title {
  color: var(--color-secondary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.res-point__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .res-point,
  .res-point--reverse {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-left: 0;
    padding-right: 0;
  }

  .res-point__img {
    width: 100%;
    max-width: 320px;
    margin-bottom: 8px;
  }

  .res-point__img img {
    width: 50%;
    margin: 0 auto;
  }

  .res-point__body {
    width: 100%;
    padding: 24px;
  }

  .res-point__body::before {
    top: -20px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    border-color: transparent;
    border-bottom-color: var(--white);
  }
}

/* --- 選択科目 --- */
.res-select {
  display: flex;
  gap: 3.472vw;
  align-items: flex-start;
  margin-top: 40px;
}

.res-select__text {
  flex: 1;
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
}

.res-select__imgs {
  flex-shrink: 0;
  display: flex;
  gap: 20px;
}

.res-select__fig {
  width: 230px;
}

.res-select__img {
  border-radius: 10px;
  overflow: hidden;
}

.res-select__img img {
  display: block;
  width: 100%;
  aspect-ratio: 230 / 180;
  object-fit: cover;
}

.res-select__cap {
  margin-top: 12px;
  color: var(--color-muted);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .res-select {
    flex-direction: column;
    gap: 24px;
  }

  .res-select__imgs {
    width: 100%;
  }

  .res-select__fig {
    flex: 1;
    width: auto;
  }
}

/* --- 研修プログラム（スケジュール表） --- */
.res-prog-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}

.res-prog-note {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-primary);
  font-weight: 500;
  font-size: 14px;
}

.res-prog-note__sample {
  display: block;
  width: 80px;
  height: 30px;
  background: rgba(255, 202, 42, 0.2);
}

.res-table-wrap {
  overflow-x: auto;
  margin-bottom: 40px;
  -webkit-overflow-scrolling: touch;
}

.res-schedule {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--color-bg-cream);
  border: 1px solid var(--color-primary);
  table-layout: fixed;
}

.res-schedule th,
.res-schedule td {
  border: 1px solid var(--color-primary);
  padding: 8px 4px;
  text-align: center;
  vertical-align: middle;
  color: var(--color-primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
}

.res-schedule thead th {
  background: rgba(0, 171, 228, 0.05);
  height: 60px;
}

.res-schedule__corner,
.res-schedule__year {
  background: var(--white);
  width: 88px;
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--color-primary);
}

.res-schedule thead th.res-schedule__corner {
  background: var(--white);
}

.res-schedule__year {
  font-size: 14px;
}

.res-schedule .is-req {
  background: rgba(255, 202, 42, 0.2);
}

.res-schedule .is-hl {
  background: rgba(0, 171, 228, 0.2);
}

/* --- 診療科希望コース表 --- */
.res-course {
  margin-bottom: 40px;
}

.res-course__badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 20px;
  border-radius: 100px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: 500;
  font-size: 14px;
}

.res-schedule--course {
  min-width: 640px;
}

.res-course .res-table-wrap {
  margin-bottom: 0;
}

/* --- 初期研修の特徴 --- */
.res-features {
  background: var(--color-bg-cream);
  border-radius: 10px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (max-width: 768px) {
  .res-features {
    padding: 32px 24px;
    gap: 32px;
  }
}

/* --- プログラム責任者 / 研修施設 --- */
.res-facility {
  display: flex;
  gap: 3.472vw;
  align-items: flex-start;
}

.res-facility__info {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 8px;
}

.res-facility__person {
  margin-top: 12px;
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
}

.res-facility__card {
  flex: 1;
  background: var(--white);
  border-radius: 10px;
  padding: 40px;
}

.res-facility__card-ttl {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .res-facility {
    flex-direction: column;
    gap: 32px;
  }

  .res-facility__info {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 48px;
  }

  .res-facility__card {
    width: 100%;
    padding: 32px 24px;
  }
}

/* --- 定義リスト（研修施設・連携施設） --- */
.res-deflist__row {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px dashed #cfcfcf;
}

.res-deflist__row:last-child {
  border-bottom: none;
}

.res-deflist dt {
  flex-shrink: 0;
  width: 300px;
  color: var(--color-secondary);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
}

.res-deflist dd {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
}

.res-deflist--plain .res-deflist__row {
  border-bottom: 1px dashed #cfcfcf;
}

.res-subttl {
  margin: 32px 0 8px;
}

@media (max-width: 600px) {
  .res-deflist__row {
    flex-direction: column;
    gap: 4px;
  }

  .res-deflist dt {
    width: 100%;
  }
}

/* --- 待遇 / 募集要項テーブル --- */
.res-terms {
  border-radius: 4px;
  overflow: hidden;
}

.res-terms__row {
  display: flex;
}

.res-terms__row + .res-terms__row {
  border-top: 2px solid var(--white);
}

.res-terms__key {
  flex-shrink: 0;
  width: 200px;
  background: rgba(0, 171, 228, 0.15);
  color: var(--color-primary);
  font-weight: 500;
  font-size: 14px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
}

.res-terms__val {
  flex: 1;
  background: var(--color-bg-cream);
  color: var(--color-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.9;
  padding: 24px 32px;
}

.res-terms__doc {
  margin-right: 24px;
}

.res-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .res-pdf:hover {
    opacity: 0.7;
  }
}

.res-pdf__icon img {
  display: block;
}

@media (max-width: 600px) {
  .res-terms__row {
    flex-direction: column;
  }

  .res-terms__key {
    width: 100%;
    padding: 16px 20px;
  }

  .res-terms__val {
    padding: 16px 20px;
  }
}

/* --- 研修プログラム / 年次報告 ボタン（TOP の medical-students__btn を流用） --- */
.res-linkbtns {
  display: flex;
  justify-content: center;
  gap: 40px;
}

@media (max-width: 600px) {
  .res-linkbtns {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* ============================================================
   後期研修ページ（page-later.php）
   ヒーロー / セクション / 番号リスト / 待遇表 / お問合せは
   初期研修（res-）・医学生（ms-）ページのクラスを流用。
   以下は後期研修に固有のパーツのみ定義する。
   ============================================================ */
:root {
  --lt-head: #eef1ec; /* 表ヘッダーのグレー */
  --lt-blue: #cae7ea; /* 3年間スケジュールの淡いブルー帯 */
}

/* ============================================================
   背景装飾（スクロール固定のグラデーション円）… 複数ページ共通
   後期研修 / 初期研修 / 医学生 / 高校生・予備校生 / アクセス で使用
   ============================================================ */
.m-deco {
  position: fixed;
  /* hero（＝z-index を持ち上げていないセクション）の前面に重なり、
     中間セクション・Contact（z-index:3）より背面に入る中間レイヤー */
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.m-deco img {
  display: block;
  width: 100%;
  height: auto;
}

/* 左上（01）… ヒーロー下、最初のコンテンツ上部に重なる高さから開始 */
.m-deco--01 {
  top: 240px;
  left: 0;
  width: 26vw;
  max-width: 515px;
}

@media (max-width: 600px) {
  .m-deco--01 {
    width: 50vw;
    top: 180px;
    left: -60px;
  }
}

/* 右下（02） */
.m-deco--02 {
  right: -200px;
  bottom: -100px;
  width: 42vw;
  max-width: 941px;
}

@media (max-width: 768px) {
  .m-deco--02 {
    width: 100vw;
    right: -100px;
    bottom: 0;
  }
}

/* 各ページの中間コンテンツセクションを装飾より前面へ（文字が装飾の上に来る）。
   背景は透明なので、文字の背後に装飾のグラデーション円が透けて見える。
   hero は持ち上げないため、装飾がその上に重なる。 */
.res-sec,
.ms-nav-sec,
.ms-lead-sec,
.ms-section,
.hs-sec,
.access-map,
.kimai-lead,
.kimai-back {
  position: relative;
  z-index: 3;
}

/* --- 【研修期間】ラベル --- */
.lt-term {
  margin-bottom: 32px;
}

/* --- 研修の特徴（黄色ピル番号リスト） --- */
.lt-feature {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.lt-feature__head {
  flex-shrink: 0;
  width: 160px;
  padding-top: 8px;
}

/* padding-top 分だけテキストが下がるので、装飾ラインも同じだけ下げて揃える */
.lt-feature__head::before {
  top: calc(0.2em + 8px);
}

.lt-feature__list {
  flex: 1;
}

.lt-feature__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(102, 102, 102, 0.3) 0 3px,
    transparent 3px 6px
  );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 1px;
}

.lt-feature__item:first-child {
  padding-top: 0;
}

.lt-feature__item:last-child {
  background-image: none;
}

.lt-feature__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 32px;
  border-radius: 500px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 1px;
  line-height: 20px;
}

.lt-feature__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .lt-feature {
    flex-direction: column;
    gap: 24px;
  }

  .lt-feature__head {
    width: auto;
    padding-top: 0;
  }

  .lt-feature__head::before {
    top: 0.2em;
  }
}

@media (max-width: 600px) {
  .lt-feature__item {
    gap: 12px;
    padding: 16px 0;
  }

  .lt-feature__num {
    width: 40px;
    height: 24px;
    font-size: 13px;
  }

  .lt-feature__text {
    font-size: 14px;
    line-height: 1.85;
  }
}

/* --- スケジュール等のサブ見出し余白 --- */
.lt-sched-ttl {
  margin-top: 48px;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .lt-sched-ttl {
    margin-top: 32px;
  }
}

/* --- 1週間の研修スケジュール表 --- */
.lt-week {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
}

.lt-week th,
.lt-week td {
  border: 1px solid var(--color-primary);
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}

.lt-week thead th {
  background: var(--lt-head);
  font-weight: 500;
}

.lt-week thead th.lt-week__corner {
  width: 168px;
  background: var(--white);
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--color-primary);
}

.lt-week__time {
  width: 168px;
  background: var(--white);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0;
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--color-primary);
}

.lt-week tbody td {
  background: var(--color-bg-cream);
}

/* 金曜 午前の検査/病棟 分割セル */
.lt-week td.lt-week__split {
  padding: 0;
}

.lt-week__split span {
  display: block;
  padding: 12px 8px;
}

.lt-week__split span:first-child {
  border-bottom: 1px solid var(--color-primary);
}

/* 家庭医療 土曜 公休＋斜線セル（見出し下線を検査/病棟の分割線に合わせる） */
.lt-week td.lt-week__sat {
  padding: 0;
  position: relative;
  vertical-align: top;
  background-color: var(--color-bg-cream);
}

.lt-week__sat-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.lt-week__sat-head {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid var(--color-primary);
}

.lt-week__sat-body {
  flex: 1;
  min-height: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><line x1="0" y1="100" x2="100" y2="0" stroke="%23004860" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 土曜 公休の斜線セル（内科表） */
.lt-week tbody td.lt-week__diag {
  background-color: var(--color-bg-cream);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><line x1="0" y1="100" x2="100" y2="0" stroke="%23004860" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@media (max-width: 600px) {
  .lt-week {
    font-size: 13px;
  }

  .lt-week th,
  .lt-week td {
    padding: 8px 6px;
  }

  .lt-week__corner,
  .lt-week__time {
    width: 124px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* --- 3年間の研修スケジュール表 --- */
.lt-year {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
}

.lt-year th,
.lt-year td {
  border: 1px solid var(--color-primary);
  padding: 14px 8px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}

.lt-year thead th {
  background: var(--lt-head);
  font-weight: 500;
}

.lt-year thead th.lt-year__corner {
  width: 96px;
  background: var(--white);
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--color-primary);
}

.lt-year__label {
  background: var(--white);
  font-weight: 500;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--color-primary);
}

.lt-year__cell--blue {
  background: var(--lt-blue);
}

.lt-year__cell--cream {
  background: var(--color-bg-cream);
}

.lt-year__cell--white {
  background: var(--white);
}

.lt-year__cell--cyan {
  background: var(--color-secondary);
  color: var(--white);
  font-weight: 500;
}

@media (max-width: 600px) {
  .lt-year {
    font-size: 13px;
  }

  .lt-year th,
  .lt-year td {
    padding: 10px 6px;
  }
}

/* --- 研修施設 --- */
.lt-fac {
  display: flex;
  gap: 40px;
  margin-top: 24px;
}

.lt-fac__list {
  flex: 1;
}

.lt-fac__row {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(102, 102, 102, 0.3) 0 3px,
    transparent 3px 6px
  );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 1px;
}

.lt-fac__row:first-child {
  padding-top: 0;
}

.lt-fac__row:last-child {
  background-image: none;
}

.lt-fac__term {
  flex-shrink: 0;
  width: 96px;
  color: var(--color-secondary);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.9;
}

.lt-fac__desc {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
}

.lt-fac__media {
  flex-shrink: 0;
  width: 230px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lt-fac__img {
  border-radius: 10px;
  overflow: hidden;
}

.lt-fac__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 230 / 180;
  object-fit: cover;
}

.lt-fac__caption {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .lt-fac {
    flex-direction: column;
    gap: 24px;
  }

  .lt-fac__media {
    flex-direction: row;
    width: 100%;
  }

  .lt-fac__figure {
    flex: 1;
  }
}

@media (max-width: 600px) {
  .lt-fac__row {
    gap: 12px;
    padding: 16px 0;
  }

  .lt-fac__term {
    width: 80px;
    font-size: 14px;
  }

  .lt-fac__desc {
    font-size: 14px;
  }
}

/* --- 取得できる資格について（クリームボックス） --- */
.res-lead:has(+ .lt-qualify) {
  margin-bottom: 0;
}

.lt-qualify {
  margin-top: 40px;
  padding: 40px;
  background: var(--color-bg-cream);
  border-radius: 10px;
}

.lt-qualify__lead {
  margin-top: 24px;
  margin-bottom: 0;
}

.lt-qualify__box {
  display: flex;
  gap: 40px;
  margin-top: 24px;
  padding: 32px 40px;
  background: var(--white);
  border-radius: 10px;
}

.lt-qualify__col {
  flex: 1;
}

/* PC時は左右のカラムを 2：1 の横幅比にする */
.lt-qualify__col:first-child {
  flex: 2;
}

.lt-qualify__col li {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 2.2;
}

@media (max-width: 600px) {
  .lt-qualify {
    padding: 24px 16px;
  }

  .lt-qualify__box {
    flex-direction: column;
    gap: 0;
    padding: 20px;
  }

  .lt-qualify__col li {
    font-size: 14px;
    line-height: 2;
  }
}

/* ========================================
   高校生・予備校生へのご案内ページ（page-high-school）
   ヒーロー・見出し・お問合せは ms- クラスを流用し、
   固有パーツ（コース紹介 / 感想 / 模擬面接）のみ定義する。
   ======================================== */

/* --- 汎用セクション --- */
.hs-sec {
  padding: 64px 0;
}

@media (max-width: 768px) {
  .hs-sec {
    padding: 48px 0;
  }
}

.hs-sec--flush-top {
  padding-top: 0;
}

/* アンカースクロール時にヘッダー分＋余白を確保してタイトルを見せる */
.hs-sec--anchor {
  scroll-margin-top: 104px;
}

@media (max-width: 768px) {
  .hs-sec--anchor {
    scroll-margin-top: 88px;
  }
}

.hs-subttl {
  margin-top: 40px;
  margin-bottom: 16px;
}

.hs-subttl--mt {
  margin-top: 56px;
}

.hs-subttl--first {
  margin-top: 72px;
}

@media (max-width: 600px) {
  .hs-subttl {
    margin-top: 32px;
  }

  .hs-subttl--mt {
    margin-top: 40px;
  }
}

/* --- 終了案内ボックス --- */
.hs-notice {
  max-width: 650px;
  margin: 32px auto 104px;
  padding: 16px 24px;
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 600px) {
  .hs-notice {
    padding: 16px;
    font-size: 14px;
    text-align: left;
    margin-bottom: 72px;
  }
}

.hs-notice--gap {
  margin: 56px auto 144px;
}

@media (max-width: 600px) {
  .hs-notice--gap {
    margin-bottom: 96px;
  }
}

/* --- コース紹介 --- */
.hs-course {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  padding: 48px;
  background: var(--color-bg-cream);
  border-radius: 10px;
}

.hs-course__badge {
  flex-shrink: 0;
  width: 160px;
}

.hs-course__badge-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 72px;
  background: var(--color-accent);
  border-radius: 0 50px 50px 0;
  margin-left: -48px;
}

.hs-course__badge-tab img {
  display: block;
  width: 28px;
  height: 27px;
}

.hs-course__badge-label {
  margin-top: 16px;
  margin-left: -18px; /* 中央寄せの星アイコンの左端に合わせる（タブ左端0 + (88-28)/2 = 30px, badge起点48px） */
  color: var(--color-primary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.hs-course__main {
  flex: 1;
  min-width: 0;
}

.hs-course__list {
  list-style: none;
  border-bottom: 1px dashed rgba(102, 102, 102, 0.3);
}

.hs-course__item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
}

.hs-course__item:first-child {
  padding-top: 0;
}

.hs-course__item + .hs-course__item {
  border-top: 1px dashed rgba(102, 102, 102, 0.3);
}

.hs-course__body {
  flex: 1;
}

.hs-course__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 16px;
  margin-bottom: 16px;
}

.hs-course__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% + 0.06em);
  transform: translateY(-50%);
  width: 3px;
  height: 1.1em;
  background: var(--color-secondary);
}

.hs-course__name {
  color: var(--color-primary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.hs-course__tag {
  flex-shrink: 0;
  padding: 6px 18px;
  background: var(--color-accent);
  border-radius: 100px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.hs-course__text {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
}

.hs-course__img {
  flex-shrink: 0;
  width: 230px;
  overflow: hidden;
  border-radius: 10px;
}

.hs-course__img img {
  display: block;
  width: 100%;
  aspect-ratio: 230 / 180;
  object-fit: cover;
}

.hs-course__note {
  margin-top: 40px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}

@media (max-width: 768px) {
  .hs-course {
    flex-direction: column;
    gap: 24px;
    padding: 40px 24px 32px;
  }

  .hs-course__badge {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .hs-course__badge-tab {
    margin-left: -24px;
  }

  .hs-course__badge-label {
    margin-top: 0;
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .hs-course__item {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .hs-course__head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .hs-course__tag {
    font-size: 13px;
  }

  .hs-course__text {
    font-size: 14px;
  }

  .hs-course__img {
    width: 100%;
  }

  .hs-course__img img {
    aspect-ratio: 16 / 9;
  }

  .hs-course__note {
    text-align: left;
  }
}

/* --- 体験を終えての感想 --- */
.hs-voices {
  margin-top: 62px;
}

.hs-voices__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--color-secondary);
  color: var(--color-primary);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.hs-voices__ttl::before,
.hs-voices__ttl::after {
  content: "";
  width: 3px;
  height: 1.4em;
  background: var(--color-secondary);
}

.hs-voices__list {
  list-style: none;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hs-voices__item {
  position: relative;
  padding-left: 16px;
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
}

.hs-voices__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 3px;
  height: 1.1em;
  background: var(--color-secondary);
}

@media (max-width: 600px) {
  .hs-voices {
    margin-top: 40px;
  }

  .hs-voices__list {
    gap: 24px;
  }

  .hs-voices__item {
    font-size: 14px;
    line-height: 1.85;
  }
}

/* --- 医学科受験模擬面接 --- */
.hs-interview {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 88px;
}

.hs-interview__body {
  flex: 1;
}

.hs-interview__body .hs-subttl {
  margin-top: 0;
}

.hs-interview__body .ms-body {
  margin-top: 16px;
}

.hs-interview__img {
  flex-shrink: 0;
  width: 320px;
  overflow: hidden;
  border-radius: 10px;
}

.hs-interview__img img {
  display: block;
  width: 100%;
  aspect-ratio: 320 / 240;
  object-fit: cover;
}

@media (max-width: 768px) {
  .hs-interview {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 0;
  }

  .hs-interview__img {
    width: 100%;
  }
}

/* ============================================
   ブログ詳細（single）
   ============================================ */

/* --- Hero（ms-hero を流用。ブログ一覧と表示位置を統一） --- */

/* --- 本文＋サイドバー --- */
.blog-detail {
  padding-bottom: 120px;
}

@media (max-width: 768px) {
  .blog-detail {
    padding-bottom: 80px;
  }
}

.blog-detail__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

@media (max-width: 768px) {
  .blog-detail__inner {
    flex-direction: column;
    gap: 40px;
  }
}

/* --- 記事本体 --- */
.blog-article {
  flex: 1;
  min-width: 0;
}

.blog-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.blog-article__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.blog-article__cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  border: 1px solid var(--color-secondary);
  border-radius: 50px;
  color: var(--color-secondary);
  font-size: 11px;
  line-height: 1.6;
}

.blog-article__date {
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.blog-article__title {
  color: var(--color-muted);
  font-size: clamp(20px, 1.736vw, 25px);
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .blog-article__title {
    margin-bottom: 16px;
  }
}

.blog-article__line {
  height: 0;
  border: none;
  border-top: 1px solid var(--color-secondary);
  margin: 0;
}

.blog-article__body {
  padding: 48px 48px;
}

@media (max-width: 600px) {
  .blog-article__body {
    padding: 32px 0;
  }
}

/* --- 前後記事ナビ --- */
.blog-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  margin-top: 48px;
}

@media (max-width: 600px) {
  .blog-nav {
    gap: 40px;
    margin-top: 32px;
  }
}

.blog-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .blog-nav__link:hover {
    opacity: 0.7;
  }
}

.blog-nav__link--back {
  color: var(--color-primary);
}

.blog-nav__link--next {
  color: var(--color-secondary);
}

.blog-nav__link.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.blog-nav__arrow {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.blog-nav__arrow--prev {
  transform: rotate(-135deg);
}

.blog-nav__arrow--next {
  transform: rotate(45deg);
}

/* --- 記事一覧へ --- */
.blog-backlist {
  margin-top: 40px;
  text-align: center;
}

.blog-backlist__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

@media (hover: hover) {
  .blog-backlist__link:hover .blog-backlist__btn {
    background-color: var(--color-primary);
  }
}

@media (hover: hover) {
  .blog-backlist__link:hover .blog-backlist__text {
    color: var(--color-primary);
  }
}

.blog-backlist__text {
  color: var(--color-secondary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: 0.3s;
}

.blog-backlist__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: var(--color-secondary);
  transition: 0.3s;
}

.blog-backlist__btn-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.blog-backlist__btn-icon::before,
.blog-backlist__btn-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background-color: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.blog-backlist__btn-icon::before {
  transform: translate(0, 0);
}

.blog-backlist__btn-icon::after {
  transform: translate(-160%, 160%);
}

@media (hover: hover) {
  /* hover時：before が右上へ抜け、after が左下から中央へ入る */
  .blog-backlist__link:hover .blog-backlist__btn-icon::before {
    animation: arrowOutTopRight 0.6s forwards;
    animation-delay: 0s;
  }
}

@media (hover: hover) {
  .blog-backlist__link:hover .blog-backlist__btn-icon::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

/* --- サイドバー：アーカイブ --- */
.blog-side {
  flex-shrink: 0;
  width: 190px;
  padding: 24px 16px;
  border-radius: 10px;
  background-color: var(--color-bg-cream);
}

@media (max-width: 768px) {
  .blog-side {
    width: 100%;
  }
}

.blog-side__title {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 24px;
}

.blog-side__list {
  list-style: none;
}

.blog-side__item {
  text-align: center;
}

.blog-side__item + .blog-side__item {
  margin-top: 16px;
}

.blog-side__year {
  display: inline-block;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .blog-side__year:hover {
    opacity: 0.7;
  }
}

.blog-side__year.is-current {
  color: var(--color-secondary);
}

.blog-side__months {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-side__month {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .blog-side__month:hover {
    opacity: 0.7;
  }
}

.blog-side__month.is-current {
  color: var(--color-secondary);
}

/* ========================================
    ブログ一覧（home.php / category.php）
    ======================================== */

/* body_class() が投稿一覧ページの <body> に付与する .blog と衝突するため、
   セクションのスタイルは .blog-page 配下に限定する */
.blog-page .blog {
  padding-bottom: 88px;
}

@media (max-width: 768px) {
  .blog-page .blog {
    padding-bottom: 56px;
  }
}

.blog__inner {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

@media (max-width: 768px) {
  .blog__inner {
    flex-direction: column;
    gap: 40px;
  }
}

.blog__main {
  flex: 1;
  min-width: 0;
}

/* --- カテゴリタブ --- */
.blog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 0 24px;
  list-style: none;
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .blog-tabs {
    gap: 8px 20px;
    padding: 0;
  }
}

.blog-tabs__link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  padding-bottom: 6px;
  transition: 0.3s;
}

@media (hover: hover) {
  .blog-tabs__link:hover {
    color: var(--color-secondary);
  }
}

.blog-tabs__link.is-current {
  color: var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
}

/* --- 記事リスト --- */
.blog-list {
  list-style: none;
}

.blog-list__item {
  border-bottom: 1px solid var(--color-secondary);
}

.blog-list__link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 24px;
  text-decoration: none;
  color: var(--color-primary);
  transition: 0.3s;
}

@media (hover: hover) {
  /* ホバー：カテゴリの背景色のみ変更（文字色はそのまま） */
  .blog-list__link:hover .blog-list__cat {
    background: var(--color-bg-cream);
  }
}

@media (max-width: 600px) {
  .blog-list__link {
    position: relative;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 20px 24px 20px 0;
  }
}

.blog-list__date {
  flex-shrink: 0;
  width: 88px;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
}

@media (max-width: 600px) {
  .blog-list__date {
    width: auto;
  }
}

.blog-list__cats {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  width: 170px;
}

.blog-list__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 16px;
  border: 1px solid var(--color-secondary);
  border-radius: 50px;
  font-size: 11px;
  line-height: 1;
  color: var(--color-secondary);
  background: var(--white);
  white-space: nowrap;
  transition: 0.3s;
}

.blog-list__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .blog-list__title {
    flex-basis: 100%;
    order: 3;
    padding-right: 8px;
  }
}

.blog-list__arrow {
  position: relative;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  overflow: hidden;
}

.blog-list__arrow::before,
.blog-list__arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  background-color: var(--color-secondary);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

/* 初期表示：before は中央、after は左下に待機 */
.blog-list__arrow::before {
  transform: translate(0, 0);
}

.blog-list__arrow::after {
  transform: translate(-160%, 160%);
}

@media (hover: hover) {
  /* hover：before が右上へ抜け、after が左下から中央へ入る */
  .blog-list__link:hover .blog-list__arrow::before {
    animation: arrowOutTopRight 0.6s forwards;
  }
}

@media (hover: hover) {
  .blog-list__link:hover .blog-list__arrow::after {
    animation: arrowInFromBottomLeft 0.6s forwards;
    animation-delay: 0.2s;
  }
}

@media (max-width: 600px) {
  .blog-list__arrow {
    position: absolute;
    top: auto;
    bottom: 20px;
    right: 4px;
  }
}

.blog-list__empty {
  padding: 40px 0;
  font-size: 15px;
  color: var(--color-muted);
}

/* --- ページャー --- */
.blog-pager {
  margin-top: 48px;
}

@media (max-width: 600px) {
  .blog-pager {
    margin-top: 32px;
  }
}

.blog-pager__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.blog-pager__list .page-numbers {
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .blog-pager__list a.page-numbers:hover {
    color: var(--color-secondary);
  }
}

.blog-pager__list .page-numbers.current {
  color: var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
  padding-bottom: 2px;
}

.blog-pager__arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
}

.blog-pager__arrow--next {
  transform: rotate(45deg);
}

.blog-pager__arrow--prev {
  transform: rotate(-135deg);
}

/* --- アーカイブ --- */
.blog-archive {
  flex-shrink: 0;
  width: 190px;
  padding: 22px 20px 28px;
  background: var(--color-bg-cream);
  border-radius: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .blog-archive {
    width: 100%;
  }
}

.blog-archive__ttl {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.blog-archive__years {
  list-style: none;
}

.blog-archive__year-link {
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .blog-archive__year-link:hover {
    color: var(--color-secondary);
  }
}

.blog-archive__year.is-current > .blog-archive__year-link {
  color: var(--color-secondary);
}

.blog-archive__months {
  list-style: none;
  margin: 4px 0 12px;
}

.blog-archive__month-link {
  display: inline-block;
  padding: 3px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .blog-archive__month-link:hover {
    color: var(--color-secondary);
  }
}

.blog-archive__month.is-current > .blog-archive__month-link {
  color: var(--color-secondary);
  font-weight: 600;
}

/* ========================================
    アクセス（page-access.php）
    ======================================== */

/* --- ヒーロー --- */
.access-hero {
  position: relative;
  padding-top: 64px;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-bg-light);
  background-image: url("../img/access/hero-wave.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

@media (max-width: 768px) {
  .access-hero {
    padding-top: 56px;
    min-height: 260px;
  }
}

@media (max-width: 600px) {
  .access-hero {
    min-height: 200px;
  }
}

.access-hero__head {
  margin-left: 64%;
}

@media (max-width: 768px) {
  .access-hero__head {
    margin-left: 0;
  }
}

.access-hero__en {
  display: flex;
  align-items: center;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.107em;
  margin-bottom: 8px;
}

.access-hero__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  background: var(--color-secondary);
}

.access-hero__title {
  color: var(--color-primary);
  font-size: clamp(22px, 1.736vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* --- マップセクション --- */
.access-map {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .access-map {
    padding: 56px 0;
  }
}

.access-map .container-lg {
  position: relative;
  z-index: 1;
}

.access-map__head {
  padding: 12px 0;
  border-top: 2px solid var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
}

.access-map__title {
  padding-left: 72px;
  color: var(--color-secondary);
  font-size: clamp(18px, 1.389vw, 20px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .access-map__title {
    padding-left: 16px;
  }
}

.access-map__body {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 5vw;
  align-items: start;
}

@media (max-width: 768px) {
  .access-map__body {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }
}

.access-map__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 31 / 20;
  border-radius: 10px;
  background: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1カラム化するタブレット以下では地図が全幅に広がり過大になるため、PCと同じ最大幅に抑える */
@media (max-width: 768px) {
  .access-map__frame {
    max-width: 620px;
  }
}

.access-map__frame-label {
  font-family: var(--font-secondary);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.085em;
}

.access-map__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

/* --- マップ横の情報 --- */
.access-info__address {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 2.4;
}

.access-info__route {
  padding-top: 24px;
}

.access-info__mark {
  display: block;
  width: 25px;
  height: 3px;
  margin-bottom: 16px;
  background: var(--color-secondary);
}

.access-info__text {
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 2.2;
}

.access-info__text + .access-info__text {
  margin-top: 8px;
}

.access-info__note {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  color: var(--color-secondary);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

/* --- コンタクト --- */
.access-contact {
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .access-contact {
    padding: 72px 0 80px;
  }
}

.access-contact__deco {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 125%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.access-contact__deco img {
  width: 100%;
  height: auto;
  display: block;
}

.access-contact__watermark {
  position: absolute;
  top: 40px;
  left: -8px;
  z-index: 0;
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(56px, 8.333vw, 120px);
  line-height: 1;
  letter-spacing: 0.016em;
  color: var(--color-accent);
  text-shadow: 3px 3px 0 var(--white);
  pointer-events: none;
}

.access-contact__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.access-contact__en {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.107em;
  margin-bottom: 8px;
}

.access-contact__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  background: var(--color-secondary);
}

.access-contact__title {
  color: var(--color-primary);
  font-size: clamp(22px, 1.736vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.access-contact__lead {
  margin-top: 24px;
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 2.2;
}

@media (max-width: 600px) {
  .access-contact__lead {
    text-align: left;
  }
}

.access-contact__grid {
  margin-top: 56px;
}

@media (max-width: 600px) {
  .access-contact__grid {
    margin-top: 40px;
  }
}

.access-contact__box {
  min-height: 250px;
  padding: 48px;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .access-contact__box {
    min-height: 0;
    padding: 32px 24px;
  }
}

.access-contact__box--tel {
  background: var(--color-accent);
}

.access-contact__box-label {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

.access-contact__box-sub {
  margin-top: 40px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .access-contact__box-sub {
    margin-top: 24px;
  }
}

.access-contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .access-contact__tel:hover {
    opacity: 0.7;
  }
}

.access-contact__tel-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.access-contact__tel-icon img {
  width: 25px;
  height: 25px;
}

@media (max-width: 600px) {
  .access-contact__tel-icon img {
    width: 20px;
    height: 20px;
  }
}

.access-contact__tel-num {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(28px, 2.778vw, 40px);
  letter-spacing: 0.03em;
}

.access-contact__tel-note {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(16px, 1.389vw, 20px);
}

.access-contact__box--form {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-secondary);
  text-decoration: none;
  transition: 0.3s;
}

@media (hover: hover) {
  .access-contact__box--form:hover {
    opacity: 0.85;
  }
}

.access-contact__box-title {
  color: var(--white);
  font-size: clamp(18px, 1.389vw, 20px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.access-contact__box-arrow {
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 11px;
  height: 11px;
  background-color: var(--white);
  -webkit-mask: url("../img/common/arrow.svg") no-repeat center / contain;
  mask: url("../img/common/arrow.svg") no-repeat center / contain;
}

@media (max-width: 600px) {
  .access-contact__box-arrow {
    right: 24px;
    bottom: 24px;
  }
}