/* v3 Common Top
---------------------------------------------------------- */
.v3-top {
  display: block;
  padding-top: 105px;
}

/* 0. Sections common
---------------------------------------------------------- */
/* リンク・ボタンのマウスオーバー（フッターと同じ opacity 方式） */
.v3-top a,
.v3-top button {
  transition: opacity 0.25s ease;
}

.v3-top a:hover,
.v3-top a:focus-visible,
.v3-top button:hover,
.v3-top button:focus-visible {
  opacity: 0.7;
}

/* スライドカードは画像の拡大で表現するので opacity は変えない */
.v3-top .v3-featured-stores__card:hover,
.v3-top .v3-featured-stores__card:focus-visible,
.v3-top .v3-people__card-link:hover,
.v3-top .v3-people__card-link:focus-visible
{
  opacity: 1;
}

.v3-featured-stores__card-image,
.v3-people__card-image,
.v3-login__banner-image {
  transition: transform 0.4s ease;
}

.v3-featured-stores__card:hover .v3-featured-stores__card-image,
.v3-featured-stores__card:focus-visible .v3-featured-stores__card-image,
.v3-people__card-link:hover .v3-people__card-image,
.v3-people__card-link:focus-visible .v3-people__card-image {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .v3-top a,
  .v3-top button {
    transition: none;
  }

  .v3-featured-stores__card-image,
  .v3-people__card-image,
  .v3-login__banner-image {
    transition: none;
  }
}

/* 左右辺にドット帯を敷くセクション */
.v3-departments,
.v3-information,
.v3-qualifications,
.v3-login {
  background-color: #ffffff;
  background-image:
    url(/v3/img/top_background_dot.png),
    url(/v3/img/top_background_dot.png);
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 39px auto, 39px auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* コンテンツ幅1300pxを基準に、左右は最低80pxを確保 */
.v3-departments__inner,
.v3-information__inner,
.v3-qualifications__inner,
.v3-login__inner {
  padding-left: max(calc(50% - 610px), 70px);
  padding-right: max(calc(50% - 610px), 70px);
}

/* スライダーの 前へ / 次へ ボタン（四角＋三角）。縦位置は各セクションで指定 */
.v3-slider-arrow {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background-color: #222;
  transform: translateY(-50%);
  cursor: pointer;
}

.v3-slider-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
}

.v3-slider-arrow--prev {
  left: 55px;
}

.v3-slider-arrow--prev::after {
  border-width: 6px 10px 6px 0;
  border-color: transparent #ffffff transparent transparent;
  transform: translate(-65%, -50%);
}

.v3-slider-arrow--next {
  right: 55px;
}

.v3-slider-arrow--next::after {
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ffffff;
  transform: translate(-35%, -50%);
}

/* 1. First view
---------------------------------------------------------- */
.v3-firstview__inner {
  position: relative;
  width: 100%;
  height: 600px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.v3-firstview__title-inner {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 183px;
  height: 100%;
}

.v3-firstview__title-inner .v3-firstview__title {
  width: 100%;
  height: auto;
}

.v3-firstview__lead-inner {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  height: 100%;
}

.v3-firstview__lead-label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 42px;
  box-sizing: border-box;
  width: 110px;
  height: 100%;
  background-color: var(--color-base);
  align-items: flex-start;
  padding-left: 40px;
  padding-top: 30px;
}

.v3-firstview__lead-label-item {
  margin: 0;
  width: 28px
}

.v3-firstview__lead-label-sub {
  display: block;
  font-size: 10px;
  line-height: 18px;
}

.v3-firstview__lead-label-main {
  display: block;
  font-size: 16px;
  line-height: 16px;
}

.v3-firstview__lead-body {
  position: absolute;
  top: 30px;
  right: 100px;
  display: flex;
  align-items: flex-start;
}

.v3-firstview__lead-image-inner {
  width: 60px;
  background-color: #222;
  padding-top: 2px;
  padding-left: 1px;
  padding-bottom: 7px;
  height: fit-content;
}

img.v3-firstview__lead-image {
  display: block;
  width: 57px;
  height: auto;
}

/* 2. Departments
---------------------------------------------------------- */
.v3-departments {
  padding-bottom: 48px;
}

.v3-departments__inner {
  display: flow-root;
}

.v3-departments__title-inner {
  position: relative;
  z-index: 1;
  margin-top: -118px;
}

.v3-departments__title {
  width: min(50%, 610px);
  height: 118px;
  margin: 0;
  background-color: #222;
  color: #ffffff;
  padding: 26px 48px;
  font-weight: bold;
}

.v3-departments__title img {
  width: 340px;
}

.v3-departments__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 33px;
  margin-top: -32px;
  margin-left: 48px;
  padding: 27px 48px;
  background-color: #ffffff;
}

.v3-departments__content-item {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  border-bottom: 2px solid #e1e1e1;
  color: var(--color-text);
  text-decoration: none;
}

.v3-departments__content-item:hover {
  opacity: 1 !important;
}

/* .v3-top a の transition を上書きしないよう opacity も併記する */
.v3-top .v3-departments__content-item {
  transition:
    border-color 0.25s ease;
}

/* ホバー時はテキスト側のボーダーもベース色に揃え、下線全体を1色にする */
.v3-departments__content-item:hover,
.v3-departments__content-item:focus-visible {
  border-bottom-color: var(--color-base);
}

.v3-departments__content-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: 20px;
  line-height: 2;
  font-weight: bold;
}

.v3-departments__content-title:has(.v3-departments__content-title-note) {
  line-height: 25px;
  padding: 8px 0;
}
.v3-departments__content-title:has(.v3-departments__content-title-note-big) {
  line-height: 25px;
  padding: 8px 0;
}
.v3-departments__content-title-note {
  font-size: 12px;
  line-height: 20px;
  font-weight: normal;
}
.v3-departments__content-title-note-big {
  font-size: 15px;
  line-height: 20px;
  font-weight: bold;
}

/* リンクアイコン部分のみ border-bottom をベース色で上書きする */
.v3-departments__content-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-left: auto;
  margin-bottom: -2px;
  padding: 15px 13px;
  border-bottom: 2px solid var(--color-base);
}

.v3-departments__content-arrow {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--color-base);
}

.v3-departments__content-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent #ffffff;
  transform: translate(-35%, -50%);
}

.v3-departments__admissions {
  display: flex;
  margin-top: 48px;
}

.v3-departments__admissions-title {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
  width: 267px;
  margin: 0;
  padding: 22px;
  background-color: #222;
  color: #ffffff;
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;

  background-image: url(/v3/img/admissions-title.svg);
  background-size: 210px auto;
  background-repeat: no-repeat;
  background-position: center;
}

.v3-departments__admissions-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 12px;
  column-gap: 18px;
  box-sizing: border-box;
  padding: 9px 27px;
  border: 3px solid #222;
  background-color: #ffffff;
}

.v3-departments__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 10px 10px 10px 19px;
  background-color: #e7e7e7;
  text-decoration: none;
}

.v3-departments__tag:hover {
  transition: background-color 0.3s ease;
  opacity: 1 !important;
  background-color: #000000;
}

.v3-departments__tag-text {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
}

.v3-departments__tag:hover .v3-departments__tag-text {
  color: #e7e7e7
}

.v3-departments__tag-arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #000000;
}

.v3-departments__tag:hover .v3-departments__tag-arrow {
  border-color: transparent transparent transparent #e7e7e7;
}

.v3-departments__news {
  display: flex;
  gap: 4px;
  border: 6px solid #222;
  margin-top: 27px;
}

.v3-departments__news-title-inner {
  flex-shrink: 0;
  display: flex;
  border: 4px solid #ffffff;
}

.v3-departments__news-title {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 190px;
  margin: 0;
  background-color: #222;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.5px;
}

.v3-departments__news-list {
  flex: 1;
  box-sizing: border-box;
  padding: 0 3px;
}

.v3-departments__news-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 7px;
}

.v3-departments__news-item:not(:last-child) {
  border-bottom: 3px solid #f3f1f1;
}

.v3-departments__news-item-text {
  font-size: 15px;
  line-height: 1.2;
  font-weight: bold;
  color: #000000;
}

.v3-departments__news-item-mark {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 22px;
  margin-left: auto;
  background-color: #000000;
}

.v3-departments__news-item-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  border-color: transparent transparent transparent #ffffff;
  transform: translate(-35%, -50%);
}

/* 3. Featured stores
---------------------------------------------------------- */
.v3-featured-stores {
  background-color: #f6f6f6;
  padding: 37px 0 47px;
  overflow: hidden;
}

.v3-featured-stores__title-inner,
.v3-people__title-inner {
  padding-left: max(110px, calc(50vw - 610px));
  padding-right: max(110px, calc(50vw - 610px));
}

.v3-featured-stores__title {
  margin: 0;
  padding: 10px 0;
}

.v3-featured-stores__title img {
  width: 728px;
}

/* slick 初期化前の縦積み表示を隠す（JS で display を戻す） */

/* margin: auto は要素が親より広いと左寄せになるため flex で中央寄せする */
.v3-featured-stores__slider {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* カード3枚分（380px + 左右20px = 420px × 3）。画面幅では縮めない */
.v3-featured-stores__list {
  display: none;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 1260px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* カード番号（.v3-featured-stores__card-number）はCMSで件数が増減するため、
     テキストを直書きせずCSSカウンターで自動採番する */
  counter-reset: featured-stores-number;
}

/* 中央3枚の左右に隣のカードを見せるため既定のクリップを解除する */
.v3-featured-stores__list .slick-list {
  overflow: visible;
}

/* スライドの高さを最も高いカードに揃える */
.v3-featured-stores__list .slick-track {
  display: flex;
  align-items: stretch;
}

/* 左右20pxずつで隣接カード間を40pxにする */
.v3-featured-stores__item {
  display: flex;
  height: auto;
  width: 420px;
  padding: 0 20px;
  counter-increment: featured-stores-number;
}

.v3-featured-stores__card {
  position: relative;
  display: block;
  width: 380px;
  height: 100%;
  color: var(--color-text);
  text-decoration: none;
}

/* 番号テキストの上に重ねるため画像を前面に出す。
   ホバー時の拡大を枠内に収めるためここでクリップする。
   画像は元サイズに関わらず「横幅合わせ・高さ方向センター」で表示する。
   ・小さい／横長で高さが足りない画像: 上下に余白が出るので白背景を敷く
   ・縦長画像: 枠からはみ出す上下をセンター基準でトリミング
   （flex の align-items: center は、はみ出しても上下均等になる） */
.v3-featured-stores__card-image-inner {
  position: relative;
  z-index: -1;
  display: flex;
  align-items: center;
  height: 228px;
  overflow: hidden;
  background-color: #ffffff;
}

.v3-featured-stores__card-image {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
}

/* 縦位置のみセクションごとに指定する（共通部分は v3-slider-arrow） */
.v3-featured-stores__arrow {
  top: 114px;
}

/* 番号（旧: /v3/img/txt_num_[番号].svg 画像 / 新: CMS管理のテキスト表示、両対応）
   位置・重なり順は共通。サイズ指定のみ img（画像運用）と span（テキスト運用）で分ける */
.v3-featured-stores__card-number {
  display: block;
  position: absolute;
  bottom: 0;
  z-index: -2;
  right: -12px;
}

/* 画像運用（img）: txt_num_01 のみ書き出し倍率が異なるため高さで揃える */
img.v3-featured-stores__card-number {
  width: auto;
  height: 114px;
}

/* テキスト運用（span 等）: CMSで件数が変わってもSVGを都度書き出さずに済むようテキスト表示する。
   画像版と見た目を揃えるためのフォント指定。数字はHTMLに直書きしない。
   ・スライダー化（slick）後は複製スライド分もJS（v3/js/common/common.js の
     applySlideNumbers）が data-slick-index から実件数に対応する番号を書き込む。
   ・JSが未実行/スライダー化前はCSSカウンターで暫定表示し、
     JSが textContent を書き込んだ時点で :empty が外れ ::before は自動的に消える */
.v3-featured-stores__card-number:not(img) {
  font-family: var(--font-helvetica);
  font-size: 160px;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  /* デザインは Helvetica Neue LT Std 95 Black（閲覧環境に無い商用フォント）のため、
     Bold に同色の縁取りを足して太さを、横方向の拡大で Black の広い字幅を寄せる。
     値は画像版（/v3/img/txt_num_*.svg）と並べて合わせたもの。縁取りをこれ以上太くすると 0・2・3 の内側が潰れる */
  -webkit-text-stroke: 0.05em currentColor;
  letter-spacing: 0.03em;
  transform: scaleX(1.08);
  /* right / bottom 基準で配置しているので、拡大しても右下の位置がずれないようにする */
  transform-origin: right bottom;
  /* body の -webkit-font-smoothing: antialiased を継承すると、
     Mac実機で本来のウェイトより細く見えるため、この巨大な装飾数字だけ既定に戻す */
  -webkit-font-smoothing: auto;
  bottom: -16px;
  right: -20px;
}

/* featured stories */

/* 番号ごとの個別指定。data-number は JS（applySlideNumbers）が番号テキストから自動で付与する */
.v3-featured-stores__card-number[data-number="01"] {
  right: -40px;
}

.v3-featured-stores__card-number[data-number="04"] {
  right: -24px;
}

.v3-featured-stores__card-number:not(img):empty::before {
  content: counter(featured-stores-number, decimal-leading-zero);
}

/* カード下部のタイトル・説明文は PEOPLE と共通。縦位置のみ各セクションで指定 */
.v3-featured-stores__card-body {
  top: 213px;
  margin-top: -12px;
  margin-left: -12px;
}
.v3-people__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin-top: -15px;
  margin-left: -12px;
}
/* タイトル3行以上：超過行数分だけ上へスライド（下端を2行時に揃える）。量は JS が指定 */
.v3-people__card-body.is-title-shift-up {
  margin-top: var(--people-title-shift, -45px);
}

/* タイトルは最大2行。<br> による改行も含めて2行を超えた場合のみ、末尾に「…」を付けて省略する。
   「…」は JS（v3/js/common/common.js の initFeaturedTitleClamp）が文字を削って差し込む。
   CSS の line-clamp は使わない（ブラウザ標準の「…」が JS の判定とずれて重複・誤表示するため）。
   overflow: hidden は、JS の組み直しが済むまでの間に3行目が見えないようにするための保険 */
.v3-featured-stores__card-title
 {
  overflow: hidden;
  margin: 0;
  height: 60px;
  font-size: 22px;
  line-height: 30px;
  font-weight: bold;
  color: #ffffff;
}
.v3-people__card-title{
  margin: 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: bold;
  color: #ffffff;
  z-index: 10;
}
/* テキストの幅だけに高さ24pxの帯を敷く */
.v3-featured-stores__card-title-text,
.v3-people__card-title-text {
  padding: 1px;
  font-family: var(--font-gothic);
  font-weight: bold;
  letter-spacing: 0.8px;
  background-image: linear-gradient(#222, #222);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 24px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.v3-featured-stores__card-title-text:empty {
  background-image: none;
}

.v3-featured-stores__card-text,
.v3-people__card-text {
  margin-top: 8px;
  margin-bottom: 0px;
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  letter-spacing: 0.7px;
}

/* タイトル行数が違っても card-text を li 下端に揃える */
.v3-people__card-text {
  margin-top: auto;
  padding-top: 10px;
  padding-right: 24px;
  margin-bottom: 0;
  line-height : 1.3;
}

.v3-people__card-text span {
  font-size: 12px;
  line-height: 1;
}

.v3-featured-stores__subtitle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--font-gothic);
  font-weight: bold;
  font-size: 18px;
  line-height: 28px;
  color:#222;
}

.v3-featured-stores__subtitle-mark {
  width: 36px;
  height: 13px;
  background-color: #222;
}

/* 4. Information
---------------------------------------------------------- */
.v3-information__inner {
  padding-top: 43px;
  padding-bottom: 49px;
}

.v3-information__content {
  margin-top: 21px;
}

.v3-information__tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.v3-information__tab {
  height: 60px;
  padding: 0;
  border: none;
  background-color: #e8e8e8;
  color: #000000;
  font-size: 15px;
  line-height: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.v3-information__tab.en {
  font-family: var(--font-helvetica);
}

.v3-information__tab:hover {
  background-color: #000000;
  color: #e8e8e8;
}

.v3-information__tab.is-active {
  background-color: #222;
  color: #ffffff;
}

.v3-information__panel {
  display: none;
}

.v3-information__panel.is-active {
  display: block;
}

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

.v3-information__list[hidden] {
  display: none;
}

/* リストが0件のタブ用。JS（common.js）が0件を検知して自動挿入・表示する。
   MOREボタンは非表示にせず、このテキストと併せて常に表示する */
.v3-information__empty {
  margin: 0;
  padding: 30px 0;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: #000000;
}

.v3-information__empty[hidden] {
  display: none;
}

/* 開閉は grid の 0fr/1fr で高さをアニメーションさせる。
   display: none と違い行の高さが補間されるため、アイテムの高さ指定に依存しない */
/* 単なる 0fr は minmax(auto, 0fr) と解釈され、リンクの height 73px に
   引きずられて 0 まで縮まないため、最小値を明示的に 0 にする */
.v3-information__item {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.v3-information__item.is-hidden {
  grid-template-rows: minmax(0, 0fr);
  opacity: 0;
}

/* 初期表示で5件目以降が閉じるアニメーションを見せないよう、JS で有効化する */
.v3-information__panel.is-animatable .v3-information__item {
  transition:
    grid-template-rows 0.35s ease,
    opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .v3-information__panel.is-animatable .v3-information__item {
    transition: none;
  }
}

.v3-information__link {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 73px;
  padding-left: 27px;
  padding-right: 30px;
  text-decoration: none;
}
.v3-information__item:not(.is-hidden) .v3-information__link {
  border-bottom: 3px solid #f3f1f1;
}

.v3-information__item:not(.is-hidden):not(:has(~ .v3-information__item:not(.is-hidden))) .v3-information__link {
  border-bottom: none;
}

/* タグ3件以上: 2列表示になり行が高くなるため上揃え＋高さ自動 */
.v3-information__link:has(.v3-information__tag:nth-child(3)) {
  align-items: flex-start;
  height: auto;
  min-height: 73px;
  padding-top: 24px;
  padding-bottom: 27px;
}

/* タグは任意表示。無い場合もタイトル位置を揃えるため幅を確保する */
.v3-information__tags {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 160px;
}

/* タグ3件以上: 2列グリッド（3件目で改行） */
.v3-information__tags:has(.v3-information__tag:nth-child(3)) {
  display: grid;
  grid-template-columns: repeat(2, max-content);
}

.v3-information__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 78px;
  height: 16px;
  padding-top: 2px;
  padding-left: 6px;
  padding-right: 6px;
  background-color: #222;
  color: #ffffff;
  font-size: 13px;
  line-height: 16px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.v3-information__title {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.v3-information__link:has(.v3-information__tag:nth-child(3)) .v3-information__title {
  align-items: flex-start;
}

.v3-information__title-inner {
  padding: 5px 0;
}

.v3-information__title-inner img {
  width: 296px;
}

.v3-information__mark {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 16px;
  background-color: #000000;
}

.v3-information__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  border-color: transparent transparent transparent #ffffff;
  transform: translate(-35%, -50%);
}

.v3-information__title-text {
  display: block;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-information__date {
  flex-shrink: 0;
  margin-left: 20px;
  font-family: var(--font-helvetica);
  font-size: 12px;
  font-weight: bold;
  color: #000000;
  font-family: "Helvetica Neue", "Helvetica", Arial, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
}

.v3-information__more {
  display: block;
  width: 100%;
  height: 70px;
  padding: 0;
  border: none;
  background-color: #e8e8e8;
  color: #ffffff;
  font-family: var(--font-helvetica);
  font-size: 20px;
  line-height: 70px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

.v3-information__more.is-active {
  background-color: #222;
  cursor: pointer;
  pointer-events: auto;
}

.v3-information .v3-information__more.is-active:hover {
  opacity: 0.8;
}

.v3-information__more[hidden] {
  display: none;
}

/* 5. People
---------------------------------------------------------- */
.v3-people {
  padding: 43px 0 43px;
  overflow: hidden;
  background-color: #f6f6f6;
}

.v3-people__title {
  margin: 0;
  padding: 10px 0px;
}

.v3-people__title img {
  width: 310px;
}

.v3-people__subtitle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 1px;
  font-family: var(--font-gothic);
  font-weight: bold;
  font-size: 18px;
  line-height: 28px;
  color:#222;
}

.v3-people__subtitle-mark {
  width: 36px;
  height: 13px;
  background-color: #222;
}

/* margin: auto は要素が親より広いと左寄せになるため flex で中央寄せする */
.v3-people__slider {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* カード5枚分（212px + 左右20px = 252px × 5）。画面幅では縮めない */
.v3-people__list {
  display: none;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 1260px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-people__list .slick-list {
  overflow: visible;
}

/* slick の float + height:100% を上書きし、各スライドの高さを揃える */
.v3-people__list .slick-track {
  display: flex;
  align-items: stretch;
}

.v3-people__item,
.v3-people__list.slick-initialized .slick-slide {
  display: flex;
  height: auto;
}

.v3-people__item {
  width: 252px;
  padding: 0 20px;
}

.v3-people__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 212px;
  height: 100%;
}

.v3-people__card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  color: var(--color-text);
  text-decoration: none;
}

/* ホバー時の拡大を枠内に収めるためここでクリップする */
.v3-people__card-image-inner {
  display: block;
  overflow: hidden;
}

.v3 .v3-people__card-image {
  display: block;
  width: 212px;
  height: 283px;
  object-fit: cover;
}

.v3-people__copy {
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: #222;
  cursor: pointer;
}

/* 横軸を中心に180度回転（前面のシートを右上に置く） */
.v3-people__copy-icon {
  display: block;
  width: 12px;
  height: 12px;
  transform: scaleY(-1);
}

/* 画像下端に 15px 重ねる（FEATURED STORIES と同じ重なり量） */
.v3-people__card-body {
  top: 268px;
}

/* 縦位置のみセクションごとに指定する（共通部分は v3-slider-arrow） */
.v3-people__arrow {
  top: 142px;
}

/* 6. Login
---------------------------------------------------------- */
.v3-login {
  padding-top: 48px;
  padding-bottom: 45px;
}

.v3-login__banner {
  position: relative;
  z-index: 1;
}

.v3-login__title-inner-second {
  margin-top: 27px;
}

/* margin: auto は要素が親より広いと左寄せになり右側だけ切れるため、
   幅が足りない場合も左右均等にはみ出す flex の中央寄せにする */
.v3-login__banner-viewport {
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

/* バナーは画面幅に関わらず固定サイズ。394px × 3 + 19px × 2 = 1220px */
.v3-login__banner-list {
  display: none;
  flex-shrink: 0;
  width: 1220px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 右マージンで間隔を作る（slick は margin を含めた幅でスライドを並べる） */
.v3-login__banner-item {
  width: 394px;
  margin-right: 19px;
}

/* リンクの中身が画像だけなので、ホバー時の拡大はここでクリップする */
.v3-login__banner-link {
  display: block;
  overflow: hidden;
}

.v3-login__banner-item-text {
  line-height: 1;
  letter-spacing: 0.04rem;
  font-family: var(--font-gothic);
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  left: 0;
  bottom: -15px;
  background-color: white;
  padding: 2px;
}

.v3-login__banner-image {
  display: block;
  width: 394px;
  height: 150px;
}

/* インジケーター: slick-theme.css は使わないため独自に指定 */
.v3-login__banner .slick-dots {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.v3-login__banner .slick-dots li {
  line-height: 0;
}

.v3-login__banner .slick-dots button {
  display: block;
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  background-color: #c2c2c2;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}

.v3-login__banner .slick-dots .slick-active button {
  background-color: #3e3e3e;
}

/* 縦位置のみセクションごとに指定する（共通部分は v3-slider-arrow） */
.v3-login__arrow {
  top: 75px;
}

/* スライド領域（1220px）の外側に、カード間隔と同じ19px空けて置く */
.v3-login__arrow.v3-slider-arrow--prev {
  left: -55px;
}

.v3-login__arrow.v3-slider-arrow--next {
  right: -55px;
}

.v3-login__content {
  margin-top: 22px;
}

.v3-login__title {
  padding: 13.5px 0;
  line-height: 1;
  margin: 0 !important;
}

.v3-login__title img {
  height: 32px;
  width: auto;
}

.v3-login__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

.v3-login__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  height: 106px;
  padding: 0 22px;
  border-color: #000000;
  border-style: solid;
  border-top-width: 4px;
  border-right-width: 2px;
  border-bottom-width: 4px;
  border-left-width: 2px;
  color: var(--color-text);
  text-decoration: none;
}

.v3-login__link:first-child {
  border-left-width: 4px;
}

.v3-login__link:hover {
  opacity: 1 !important;
  background-color: #000000;
  transition: background-color ease 0.3s;
}

.v3-login__link:last-child {
  border-right-width: 4px;
}

.v3-login__link-ja {
  font-size: 26px;
  font-family: var(--font-gothic);
  line-height: 30px;
  font-weight: bold;
  margin-block-start: 0;
  margin-block-end: 0;
}

.v3-login__link:hover .v3-login__link-ja {
  color: #ffffff;
}

.v3-login__link-en {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: var(--font-helvetica);
  line-height: 20px;
  font-weight: bold;
  margin-top: 3px;
}

.v3-login__link:hover .v3-login__link-en {
  color: #ffffff;
}

/* 四角＋三角（右寄せ） */
.v3-login__link-mark {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background-color: #000000;
}

.v3-login__link:hover .v3-login__link-mark {
  transition: background-color ease 0.3s;
  background-color: #ffffff;
}

.v3-login__link-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #ffffff;
  transform: translate(-35%, -50%);
}

.v3-login__link:hover .v3-login__link-mark::after {
  transition: border-color ease 0.3s;
  border-color: transparent transparent transparent #000000;
}

@media screen and (max-width: 1250px) {
  .v3-login__banner-item-text {
    font-size: 20px;
  }
}

@media screen and (max-width: 1080px) {
  .v3-featured-stores__title-inner, .v3-people__title-inner {
    padding-left: 72px;
    padding-right: 72px;
  }
  .v3-departments__inner, .v3-information__inner, .v3-qualifications__inner, .v3-login__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .v3-departments__title {
    width: 430px;
    padding: 20px 24px;
  }

  .v3-departments__content {
    padding: 27px 16px;
    gap: 8px;
    margin-left: 25px;
  }

  .v3-departments__content-icon {
    padding: 15px 5px;
  }

  .v3-login__link {
    padding: 0 10px;
  }
}

@media screen and (max-width: 768px) {
  
  .v3-top {
    padding-top: 54px;
  }

  .v3-firstview__inner {
    height: 322px;
  }

  .v3-firstview__title-inner {
    width: 117px;
    height: fit-content;
  }

  .v3-firstview__lead-label {
    width: 54px;
    padding-left: 20px;
    padding-top: 21px;
    gap: 13px;
  }

  .v3-firstview__lead-label-main {
    font-size: 9px;
    line-height: 9px;
  }

  .v3-firstview__lead-label-item {
    width: 15px;
  }

  .v3-firstview__lead-label-sub {
    font-size: 5.5px;
    line-height: 9px;
  }

  .v3-firstview__lead-body {
    top: 20px;
    right: 50px;
  }

  .v3-firstview__lead-image-inner {
    width: 30px;
    height: fit-content;
    padding-bottom: 12px;
  }

  img.v3-firstview__lead-image {
    width: 27px;
  }

  .v3-departments {
    padding-bottom: 22px;
  }

  .v3-departments, .v3-information, .v3-qualifications, .v3-login {
    background-image: none;
    padding-left: 6px;
    padding-right: 6px;
  }

  .v3-departments__inner, .v3-information__inner, .v3-qualifications__inner, .v3-login__inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .v3-departments__title-inner {
    margin-top: -12px;
  }

  .v3-departments__title {
    width: 287px;
    height: 100px;
    padding: 8px 13px;
    margin: 0px;
  }

  .v3-departments__content {
    margin-left: 39px;
    margin-top: -38px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0 10px 13px;
  }

  .v3-departments__content-arrow::after {
    border-width: 3px 0 3px 5px;
  }

  .v3-departments__content-title {
    font-size: 15px;
    line-height: 16px;
    margin-top: 2px;
  }

  .v3-departments__content-title:has(.v3-departments__content-title-note) {
    height: inherit;
    padding: 4px 0;
    line-height: 1.2;
  }

  .v3-departments__content-title-note {
    font-size: 10px;
    line-height: 16px;
  }

  .v3-departments__content-icon {
    padding: 11px 12px;
  }

  .v3-departments__content-arrow {
    width: 19px;
    height: 19px;
    margin-top: 2px;
  }

  .v3-departments__admissions {
    margin-top: 26px;
    flex-direction: column;
  }

  .v3-departments__admissions-title {
    width: 100%;
    padding: 22px 27px;
    background-size: 190px auto;
  }

  .v3-departments__admissions-body {
    padding: 9px 9.5px;
    gap: 9px;
  }

  .v3-departments__tag {
    padding: 6px 8px 7px 15px;
    gap: 6px;
  }

  .v3-departments__tag-text {
    font-size: 12px;
    margin-top: 2px;
  }

  .v3-departments__tag-arrow {
    margin-top: 2px;
    border-width: 4px 0 4px 5.5px;
  }

  .v3-departments__news {
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
    margin-left: -12px;
    margin-right: -12px;
    border: 4px solid #222;
  }

  .v3-departments__news-title-inner {
    width: 100%;
    border: none;
  }

  .v3-departments__news-title {
    width: 100%;
    height: 34px;
    justify-content: flex-start;
    padding-left: 9px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .v3-departments__news-list {
    padding: 0;
  }

  .v3-departments__news-item-text {
    font-size: 13px;
    letter-spacing: -1px;
    padding-right: 5px;
  }

  .v3-departments__news-item-mark {
    width: 19px;
    height: 16px;
  }

  .v3-departments__news-item {
    padding: 12px;
  }

  .v3-featured-stores {
    padding: 13px 0 calc(10.67vw - 16px);
  }

  .v3-featured-stores__title-inner, .v3-people__title-inner {
    padding-left: 18px;
    padding-right: 18px;
  }

  .v3-featured-stores__title {
    padding-left: 1px;
  }

  .v3-featured-stores__title img {
    width: 228px;
  }

  .v3-featured-stores__subtitle {
    margin-top: 0;
    gap: 3px;
    padding-left: 0.5px;
    font-size: 9px;
    line-height: 9px;
  }

  .v3-featured-stores__subtitle-mark {
    width: 24px;
    height: 7px;
  }

  /* SP: カードを画面幅に追従させる（左右18pxずつ余白） */
  .v3-featured-stores__list {
    width: 100vw;
  }

  .v3-featured-stores__item {
    width: 100vw;
    padding: 0 18px;
  }

  .v3-featured-stores__card {
    width: calc(100vw - 36px);
  }

  /* 枠の縦横比を固定し、画像は横幅合わせ（センター配置・はみ出しはトリミング） */
  .v3-featured-stores__card-image-inner {
    height: auto;
    aspect-ratio: 339 / 204;
  }

  /* 画像の高さが可変になるため、下端から15px重なる位置を計算する */
  .v3-featured-stores__card-body {
    margin-top: -36px;
    margin-left: -6px;
  }

  .v3-featured-stores__card-title {
    height: 54px;
    line-height: 24px;
  }
  .v3-people__card-title{
    line-height: 24px;
  }

  .v3-featured-stores__card-text, .v3-people__card-text {
    margin-top: 6px;
    font-size: 12px;
    line-height: 19px;
    letter-spacing: 0.3px;
  }

  .v3-featured-stores__card-number {
    margin-top: -16px;
    margin-right: 2px;
  }

  img.v3-featured-stores__card-number {
    height: 70px;
  }

  .v3-featured-stores__card-number:not(img) {
    font-size: 24.5vw;
    bottom: calc(50px - 13.33vw);
    right: -10px;
  }

  .v3-featured-stores__card-number[data-number="01"] {
    right: -26px;
  }

  .v3-featured-stores__card-number[data-number="04"] {
    right: -16px;
  }

  .v3-slider-arrow {
    width: 19px;
    height: 19px;
  }

  .v3-featured-stores__slider {
    margin-top: 24px;
  }

  .v3-featured-stores__arrow {
    top: calc((100vw - 36px) * 203 / 339 / 2);
  }

  .v3-slider-arrow--prev {
    left: 6.5px;
  }
  
  .v3-slider-arrow--next {
    right: 6.5px;
  }

  .v3-slider-arrow--prev::after {
    border-width: 3px 5px 3px 0;
  }

  .v3-slider-arrow--next::after {
    border-width: 3px 0 3px 5px;
  }

  .v3-information__inner {
    padding-top: 19px;
    padding-bottom: 24px;
  }

  .v3-information__title-inner img {
    width: 245px;
  }

  .v3-information__content {
    margin-top: 7px;
  }

  .v3-information__tab {
    font-size: 10.5px;
    line-height: 10.5px;
  }

  .v3-information__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    height: inherit;
    min-height: 0;
    padding-top: 14px;
    padding-right: 14px;
    padding-bottom: 8px;
    padding-left: 14px;
    border-width: 2px;
  }

  .v3-information__link:has(.v3-information__tag:nth-child(3)) {
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .v3-information__tags {
    gap: 2px;
    max-width: 100%;
  }

  .v3-information__tag {
    min-width: 73px;
    height: 17px;
    font-size: 13px;
    line-height: 17px;
  }

  .v3-information__mark {
    width: 19px;
    height: 19px;
    margin-right: 10px;
  }

  .v3-information__title {
    flex: none;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  /* PC の width:0 ハックを解除（column + flex-start だと文字幅が潰れる） */
  .v3-information__title-text {
    width: auto;
    font-size: 13px;
  }

  .v3-information__date {
    margin-left: auto;
    margin-top: -8px;
    font-size: 13px;
  }

  .v3-information__more {
    height: 54px;
    font-size: 17px;
    line-height: 54px;
  }

  .v3-people {
    padding: 13px 0 23px;
  }

  .v3-people__title {
    padding: 10px 2px 9.5px;
  }

  .v3-people__title img {
    width: 178px;
  }

  .v3-people__subtitle {
    margin-top: 0;
    gap: 3px;
    padding-left: 0.5px;
    font-size: 9px;
    line-height: 9px;
  }

  .v3-people__subtitle-mark {
    width: 24px;
    height: 7px;
  }

  .v3-people__slider {
    margin-top: 24px;
  }

  /* SP: カードは165×220px固定。1枚目を画面左端から見せるためリストは画面幅に合わせる */
  .v3-people__list {
    width: 100vw;
  }

  /* 左右18pxずつで隣接カード間を36pxにする */
  .v3-people__item {
    width: 201px;
    padding: 0 18px;
  }

  .v3-people__card {
    width: 165px;
  }

  .v3 .v3-people__card-image {
    width: 165px;
    height: 220px;
  }

  /* 画像下端から15px重ねる（PC と同じ重なり量） */
  .v3-people__card-body {
    margin-top: -13px;
    top: inherit;
    bottom: 0;
  }

  .v3-people__card-text {
    margin-top: auto;
    padding-top: 6px;
  }

  .v3-people__arrow {
    top: 102px;
  }

  .v3-people__copy {
    bottom: 1px;
    width: 19px;
    height: 19px;
  }

  .v3-login {
    padding-top: 24px;
    padding-bottom: 32px;
  }

  /* SP: コンテンツ幅を使い、左右の矢印分だけ画像領域を確保する */
  .v3-login__banner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .v3-login__banner-viewport {
    width: calc(100% - 66px);
    margin-left: auto;
    margin-right: auto;
  }

  /* SP: 画像は表示領域に追従し、バナー間は5px空ける */
  .v3-login__banner-list {
    width: 100%;
  }

  .v3-login__banner-item {
    width: 100%;
    margin-right: 0px;
    padding: 0 10px;
  }

  .v3-login__banner-image {
    width: 100%;
    height: auto;
    aspect-ratio: 394 / 150;
    object-fit: cover;
  }

  /* 画像の高さの中央に合わせる */
  .v3-login__arrow {
    top: calc(50% - 10px);
  }

  /* 画像と矢印の間を24pxにする */
  .v3-login__arrow.v3-slider-arrow--prev {
    left: 0;
  }

  .v3-login__arrow.v3-slider-arrow--next {
    right: 0;
  }

  .v3-login__banner .slick-dots {
    margin: 17px 0 0;
  }

  .v3-login__content {
    margin-top: 19px;
  }

  .v3-login__title img {
    height: 25px;
  }

  .v3-login__list {
    grid-template-columns: repeat(2, 1fr);
    margin: 15px 0 0;
  }

  .v3-login__link {
    padding: 6.5px 12px;
    height: auto;
    gap: 0px;
  }

  .v3-login__link:nth-child(1) {
    border-top-width: 4px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 4px;
  }

  .v3-login__link:nth-child(2) {
    border-top-width: 4px;
    border-right-width: 4px;
    border-bottom-width: 2px;
    border-left-width: 2px;
  }

  .v3-login__link:nth-child(3) {
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 4px;
    border-left-width: 4px;
  }

  .v3-login__link:nth-child(4) {
    border-top-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 4px;
    border-left-width: 2px;
  }

  .v3-login__link-ja {
    font-size: 14px;
    line-height: 18px;
  }

  .v3-login__link-en {
    font-size: 9px;
    line-height: 9px;
    padding-left: 1px;
    margin-top: 2px;
  }

  .v3-login__link-mark {
    width: 11px;
    height: 11px;
    margin-right: -1px;
  }

  .v3-login__link-mark::after {
    border-width: 2px 0 2px 3px;
  }
}