@charset "UTF-8";
/* ================================================================
   徐研究室 Accessページ 最終CSS
   2026-10-24 / common.css、top.css より後に読み込んでください。
   対象は .xu-access-final 以下のみ。他ページのヘッダーには影響しません。
   以前のAccess専用CSS・補修CSSはこのファイルで置き換えます。
   ================================================================ */

.xu-access-final {
  --xu-access-navy: #173c50;
  --xu-access-teal: #168b91;
  --xu-access-text: #293e4a;
  --xu-access-muted: #647782;
  --xu-access-line: #dce8eb;
  color: var(--xu-access-text);
  background: #f9fbfc;
  padding-bottom: 60px;
  overflow-wrap: break-word;
}
.xu-access-final,
.xu-access-final * { box-sizing: border-box; }

/* NEWS一覧とまったく同じグラデーションを使用 */
.xu-access-final .sub_top.xu-access-final__hero {
  position: relative !important;
  display: block;
  height: auto !important;
  min-height: 174px;
  padding: 38px 24px 42px !important;
  background: linear-gradient(116deg, #123b51 4%, #176c79 70%, #269b9b) !important;
}
.xu-access-final .xu-access-final__hero-inner {
  width: min(100%, 1000px);
  margin: 0 auto;
  text-align: left;
}
.xu-access-final .xu-access-final__eyebrow {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #b9e4e8 !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.5 !important;
}
/* common.css にある h1 の absolute / center 配置を確実に解除 */
.xu-access-final .sub_top.xu-access-final__hero h1 {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: .04em;
  text-align: left !important;
}
.xu-access-final .xu-access-final__hero-caption {
  margin: 11px 0 0 !important;
  padding: 0 !important;
  color: #e5f5f5 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* 共通 .pankuzu を使わず、HOME と Access のフォントを同サイズに固定 */
.xu-access-final .xu-access-final__breadcrumb {
  width: min(100% - 36px, 1040px);
  max-width: 1040px;
  margin: 0 auto !important;
  padding: 16px 4px 12px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: #173c50;
}
.xu-access-final .xu-access-final__breadcrumb > a,
.xu-access-final .xu-access-final__breadcrumb > span {
  font-size: 13px !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
}
.xu-access-final .xu-access-final__breadcrumb > a {
  font-weight: 400 !important;
  color: #168b91 !important;
  text-decoration: none;
}
.xu-access-final .xu-access-final__breadcrumb > a:hover { text-decoration: underline; }
.xu-access-final .xu-access-final__breadcrumb [aria-current="page"] {
  color: #173c50;
  font-weight: 700;
}
.xu-access-final .xu-access-final__crumb-divider { color: #93a5ae; font-weight: 400; }

/* 全コンテンツの横幅 */
.xu-access-final .xu-access-final__container {
  width: min(100% - 36px, 1040px);
  margin: 0 auto;
}
.xu-access-final .xu-access-final__location {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  gap: 24px;
  align-items: stretch;
  margin: 10px 0 26px;
}
.xu-access-final .xu-access-final__card,
.xu-access-final .xu-access-final__map-wrap,
.xu-access-final .xu-access-final__section {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--xu-access-line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(23,60,80,.065);
}
.xu-access-final .xu-access-final__location-card { padding: 30px; }
.xu-access-final .xu-access-final__section-label {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--xu-access-teal) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 700;
  letter-spacing: .13em;
}
.xu-access-final .xu-access-final__location-card h2 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--xu-access-navy) !important;
  font-size: clamp(23px, 2.5vw, 30px) !important;
  font-weight: 700;
  line-height: 1.45 !important;
  text-align: left !important;
}
.xu-access-final .xu-access-final__location-card h2 [lang="en"] {
  display: block;
  margin-top: 3px;
  color: #536c78;
  font-size: .6em;
  font-weight: 500;
}
.xu-access-final .xu-access-final__affiliation {
  margin: 0 0 18px !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #526772;
}
.xu-access-final .xu-access-final__affiliation [lang="en"] { font-size: 13px; }
.xu-access-final .xu-access-final__address {
  padding: 18px 19px;
  margin-bottom: 20px;
  border-left: 4px solid var(--xu-access-teal);
  border-radius: 8px;
  background: #f2f8f8;
}
.xu-access-final .xu-access-final__address p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--xu-access-text);
}
.xu-access-final .xu-access-final__address p + p {
  margin-top: 13px !important;
  padding-top: 13px !important;
  border-top: 1px solid #d4e6e7;
}
.xu-access-final .xu-access-final__address p[lang="en"] { color: #536873; font-size: 13.5px !important; }
.xu-access-final .xu-access-final__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.xu-access-final .xu-access-final__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--xu-access-teal);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .2s, color .2s, border-color .2s;
}
.xu-access-final .xu-access-final__button--primary {
  background: var(--xu-access-teal);
  color: #fff !important;
}
.xu-access-final .xu-access-final__button--outline {
  background: #fff;
  color: #167981 !important;
}
.xu-access-final .xu-access-final__button:hover,
.xu-access-final .xu-access-final__button:focus-visible {
  background: var(--xu-access-navy);
  border-color: var(--xu-access-navy);
  color: #fff !important;
}
.xu-access-final a:focus-visible { outline: 3px solid #4baab1; outline-offset: 3px; }
.xu-access-final .xu-access-final__map-note {
  font-size: 12px !important;
  line-height: 1.8 !important;
  color: var(--xu-access-muted);
  margin: 0 !important;
}
.xu-access-final .xu-access-final__map-note [lang="en"] { font-size: 12px; }
.xu-access-final .xu-access-final__map-wrap { overflow: hidden; min-height: 460px; }
.xu-access-final .xu-access-final__map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
  display: block;
}

/* 仙台駅からの交通とキャンパスマップ */
.xu-access-final .xu-access-final__section {
  margin: 0 0 26px;
  padding: 30px;
}
.xu-access-final .xu-access-final__heading { margin: 0 0 22px; }
.xu-access-final .xu-access-final__heading h2 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--xu-access-navy) !important;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: clamp(21px, 2.4vw, 27px) !important;
  font-weight: 700;
  line-height: 1.45 !important;
  text-align: left !important;
}
.xu-access-final .xu-access-final__heading h2 [lang="en"] { font-size: .78em; font-weight: 500; }
.xu-access-final .xu-access-final__heading > p:last-child {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #526772;
}
.xu-access-final .xu-access-final__route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.xu-access-final .xu-access-final__route > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 20px 16px;
  background: #f3f8f8;
  border: 1px solid #e0ecec;
  border-radius: 10px;
}
.xu-access-final .xu-access-final__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--xu-access-teal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.xu-access-final .xu-access-final__step-content h3 {
  margin: 1px 0 12px !important;
  padding: 0 !important;
  color: var(--xu-access-navy);
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.55 !important;
}
.xu-access-final .xu-access-final__step-content h3 [lang="en"] {
  display: block;
  color: #607782;
  font-size: 12px;
  font-weight: 500;
}
.xu-access-final .xu-access-final__step-content p {
  margin: 0 0 8px !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #334c59;
}
.xu-access-final .xu-access-final__step-content p[lang="en"] { color: #60717a; font-size: 13px !important; }
.xu-access-final .xu-access-final__step-content .xu-access-final__time {
  display: inline-block;
  margin: 5px 0 0 !important;
  padding: 7px 10px;
  background: #e3f1f1;
  border-radius: 6px;
  color: #167981;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.55 !important;
}
.xu-access-final .xu-access-final__footnote {
  margin: 16px 0 0 !important;
  color: var(--xu-access-muted);
  font-size: 12px !important;
  line-height: 1.75 !important;
}
.xu-access-final .xu-access-final__buttons--maps { margin-bottom: 22px; }
.xu-access-final .xu-access-final__guide-image {
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2ebed;
  border-radius: 10px;
}
.xu-access-final .xu-access-final__guide-image img { display: block; width: 100%; height: auto; }
.xu-access-final .xu-access-final__guide-image figcaption {
  padding: 10px 14px;
  text-align: center;
  font-size: 12px;
  color: #667780;
  background: #f8fbfc;
}

@media screen and (max-width: 1024px) {
  .xu-access-final .xu-access-final__location,
  .xu-access-final .xu-access-final__route { grid-template-columns: 1fr; }
  .xu-access-final .xu-access-final__map-wrap,
  .xu-access-final .xu-access-final__map-wrap iframe { min-height: 380px; }
}
@media screen and (max-width: 767px) {
  .xu-access-final { padding-bottom: 34px; }
  .xu-access-final .sub_top.xu-access-final__hero { min-height: 0; padding: 28px 20px 32px !important; }
  .xu-access-final .sub_top.xu-access-final__hero h1 { font-size: 31px !important; }
  .xu-access-final .xu-access-final__hero-caption { font-size: 12px !important; }
  .xu-access-final .xu-access-final__breadcrumb { padding: 14px 0 12px !important; }
  .xu-access-final .xu-access-final__location { gap: 16px; margin-top: 8px; }
  .xu-access-final .xu-access-final__location-card,
  .xu-access-final .xu-access-final__section { padding: 20px 18px; }
  .xu-access-final .xu-access-final__section { margin-bottom: 18px; }
  .xu-access-final .xu-access-final__map-wrap,
  .xu-access-final .xu-access-final__map-wrap iframe { min-height: 310px; }
  .xu-access-final .xu-access-final__buttons .xu-access-final__button { width: 100%; }
  .xu-access-final .xu-access-final__route > li { padding: 18px 15px; }
  .xu-access-final .xu-access-final__address { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .xu-access-final .xu-access-final__button { transition: none; }
}