@charset "utf-8";

/*
Version History:
v1.0.0 (Lines: 15, Chars: 312) - Initial commit (Tailwindで補えないカスタムスタイルや微調整用)
v1.1.0 (Lines: 25, Chars: 485) - 参考HTMLに合わせた大見出し(.c-headline_01)の背景画像指定を追加
v1.2.0 (Lines: 32, Chars: 615) - Figmaデザインに合わせたスタイルの微調整
v1.3.0 (Lines: 32, Chars: 615) - バージョン表記の更新のみ
v1.4.0 (Lines: 34, Chars: 698) - c-headline_01の背景をサイト標準に合わせるためのベーススタイルを追加
v1.5.0 - p-offices_hero を company/history の p-history_hero を参考にスタイル追加
v1.6.0 - history/css/style.css と同系のページ背景・ローカルナビ・ブレークポイントを追加し、main背景と整合
v1.7.0 - Tailwind 依存を廃止し、本文・ナビを p-offices_* クラスと本ファイルに集約
v1.7.1 - 配布パスを /company/offices2/css/style.css に固定（本ファイルが正）
v1.7.3 - 地図プレースホルダを高さ250px・アスペクト比23:10（幅575px相当）に変更
v1.7.4 - 地図・スライダーを img 対応（/company/offices/img/ の命名規則）
v1.7.5 - 地図を Google マップ iframe 埋め込みに変更
v1.7.6 - SP（768px以下）でスライダー前後ボタンを非表示
v1.7.7 - SP の地図（.p-offices_map）をアスペクト比 2:1 に変更
v1.7.8 - スライダー操作のため touch-action / user-select / ドット cursor を追加
v1.7.9 - 複数 .p-offices_slider__img の重ね表示（--active のみ表示）
v1.8.0 - viewport / track / slide で横スライド（/contacts/media と同系）
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,700;1,700&display=swap');

#company_offices {
  --yh-navy: #112240;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #EABF4B;
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
}

#company_offices main {
  background-color: #EABF4B;
}

#company_offices .u-pc_hidden {
  display: none !important;
}

/* history と同じく main 内 l-inner の横パディングをリセット（ヒーロー・ナビ幅を揃える） */
#company_offices #container main .l-inner {
  padding: 0 0px;
}

@media (max-width: 768px) {
  #company_offices #container main .l-inner {
    padding: 0;
  }
}

/* 大見出し用の画像が会社情報トップ(company_index)と同じ場合は以下のように指定。
  専用の画像(/company/img/offices_bg_main.jpg等)がある場合はパスを変更してください。
*/
#company_offices .c-headline_01 .bg {
  background: url(/assets/company/img/index_bg_main.jpg) no-repeat 50% 100%;
  background-size: cover;
}

/* -----------------------------------
   ヒーローエリア（history .p-history_hero と同系）
----------------------------------- */
#company_offices .p-offices_hero {
  background-color: #1a2d4c;
  color: #fff;
  position: relative;
}

#company_offices .p-offices_hero .c-bread_crumbs {
  font-size: 12px;
  margin-bottom: 20px;
}
#company_offices .p-offices_hero .c-bread_crumbs a,
#company_offices .p-offices_hero .c-bread_crumbs span,
#company_offices .p-offices_hero .c-bread_crumbs em {
  color: #fff;
  text-decoration: none;
}
#company_offices .p-offices_hero .c-bread_crumbs a:hover {
  text-decoration: underline;
}

#company_offices .p-offices_hero__title {
  font-size: 40px;
  font-weight: 700;
  color: #fdd000;
  margin: 0;
  padding-top: 60px;
}

/* -----------------------------------
   ローカルナビ（history .p-history_nav と同系・#company_offices 内のみ）
----------------------------------- */
#company_offices .p-offices_nav {
  padding: 64px 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

#company_offices .p-offices_nav_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--yh-navy);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

#company_offices .p-offices_nav_item:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

#company_offices .p-offices_nav_item--white {
  background-color: #fff;
}

#company_offices .p-offices_nav_item--yellow {
  background-color: #f8e133;
}

#company_offices .p-offices_nav_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 10px;
  transition: transform 0.3s ease;
  position: relative;
}

#company_offices .p-offices_nav_arrow::after {
  content: "";
  left: 3px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000000;
  border-right: 2px solid #000000;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
}

#company_offices .p-offices_nav_item--current .p-offices_nav_arrow {
  display: none;
}

#company_offices .p-offices_nav_arrow--yellow {
  background-color: #f8e133;
}

#company_offices .p-offices_nav_arrow--white {
  background-color: #fff;
}

#company_offices .p-offices_nav_item:not(.p-offices_nav_item--current):hover .p-offices_nav_arrow {
  transform: translateX(4px);
}

/* 本文エリア */
#company_offices .p-offices_content {
  background-color: #EABF4B;
  color: #111827;
  font-family: 'Noto Sans JP', sans-serif;
  padding-bottom: 100px;
}

#company_offices .p-offices_inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px 1rem 0;
  box-sizing: border-box;
}

#company_offices .p-offices_region {
  margin-bottom: 0;
}
#company_offices .p-offices_article__media {
  width: 50%;
  flex-shrink: 0;
  margin-top: -34px;
}
#company_offices .p-offices_region.tokyo .p-offices_article__media{
  margin-top: -7px;
}
#company_offices .p-offices_region.soratoshiba .p-offices_article__media{
  margin-top: 18px;
}

/* 仕切り（最後の地域の下には付けない）: 線の上下 80px */
#company_offices .p-offices_region:not(:last-child)::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 80px;
  margin-bottom: 80px;
  background-color: rgba(0, 0, 0, 0.2);
}

#company_offices .p-offices_region__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 64px;
}

#company_offices .p-offices_article {
  margin-bottom: 5rem;
}

#company_offices .p-offices_article:last-child {
  margin-bottom: 0;
}

#company_offices .p-offices_article--tight {
  margin-bottom: 2.5rem;
}

#company_offices .p-offices_article__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 48px;
}

#company_offices .p-offices_article__row {
  display: flex;
  flex-direction: column;
  gap: 31px;
}

#company_offices .p-offices_article__main {
  flex: 1 1 0%;
  min-width: 0;
}

#company_offices .p-offices_article__media {
  position: relative;
}

#company_offices .p-offices_dl {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 0;
  margin: 0 0 48px;
  font-size: 16px;
  line-height: 1.625;
}

#company_offices .p-offices_dl--narrow {
  max-width: 500px;
}

#company_offices .p-offices_dl--medium {
  max-width: 600px;
}

#company_offices .p-offices_dl--no_map {
  margin-bottom: 0;
  max-width: 1000px;
}

#company_offices .p-offices_dl__dt {
  flex: 0 0 6rem;
  width: 6rem;
  max-width: 6rem;
  font-weight: 500;
  margin: 0;
}

#company_offices .p-offices_dl__dd {
  flex: 1 1 calc(100% - 6rem);
  min-width: 0;
  margin: 0;
}

#company_offices .p-offices_dl__break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#company_offices .p-offices_map {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #d1d5db;
  margin-bottom: 0;
  background-color: #e5e7eb;
  width: calc(250px * 23 / 10);
  max-width: 100%;
  height: 250px;
  box-sizing: border-box;
}

#company_offices .p-offices_map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#company_offices .p-offices_map_link_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  text-align: right;
}

#company_offices .p-offices_map_link_wrap .p-offices_map {
  align-self: flex-start;
}

#company_offices .p-offices_map_link {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
  gap: 8px;
}

#company_offices .p-offices_map_link:hover {
  opacity: 0.7;
}

#company_offices .p-offices_map_link__icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
  flex-shrink: 0;
}

#company_offices .p-offices_slider {
  width: 100%;
  position: relative;
}

/* 紙芝居トラック（/contacts/media の .p-media__slider-* と同系） */
#company_offices .p-offices_slider__viewport {
  overflow: hidden;
  border-radius: 0.75rem;
  width: 100%;
  background-color: #d1d5db;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

#company_offices .p-offices_slider__viewport:active {
  cursor: grabbing;
}

#company_offices .p-offices_slider__track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.45s ease;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #company_offices .p-offices_slider__track {
    transition: none;
  }
}

#company_offices .p-offices_slider__slide {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 100%;
}

/* メディアの .p-media__card-img と同様、スライド高さは画像のアスペクトで決める */
#company_offices .p-offices_slider__slide .p-offices_slider__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* 画像の下の1行：ドットは行の水平中央、矢印は右端（ドットは absolute で中央、ボタンは flex で右） */
#company_offices .p-offices_slider__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-height: 40px;
}

#company_offices .p-offices_slider__dots {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 16px;
}

#company_offices .p-offices_slider__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  cursor: pointer;
}

#company_offices .p-offices_slider__dot--active {
  background-color: #000;
  border: 1px solid #000;
}

#company_offices .p-offices_slider__dot--idle {
  background-color: #fff;
}

#company_offices .p-offices_slider__btn {
  width: 40px;
  height: 40px;
  border-radius: 24%;
  border: 2px solid #000;
  background-color: transparent;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#company_offices .p-offices_slider__btn:hover {
  background-color: #000;
  color: #fff;
}

#company_offices .p-offices_wave {
  width: 100%;
  height: 3rem;
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  #company_offices .p-offices_article__row {
    flex-direction: row;
    align-items: flex-start;
  }
}

@media (max-width: 1023px) {
  #company_offices .p-offices_nav {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
    column-gap: 21px;
    padding: 40px 0;
  }

  #company_offices .p-offices_nav_item {
    padding: 15px 12px;
    font-size: 14px;
    line-height: 1.8;
  }

  #company_offices .p-offices_nav_item:last-child {
    grid-column: span 2;
    width: 50%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  #company_offices .c-headline_01 .bg {
    background: url(/assets/company/img/index_bg_main_sp.jpg) no-repeat 50% 100%;
    background-size: cover;
  }

  #company_offices .u-sp_hidden {
    display: none !important;
  }
  #company_offices .u-pc_hidden {
    display: block !important;
  }

  #company_offices .p-offices_hero {
    padding: 0 20px;
  }
  #company_offices .p-offices_hero__title {
    font-size: 30px;
    padding-top: 32px;
  }

  #company_offices .p-offices_nav_arrow {
    width: 24px;
    height: 24px;
  }
  #company_offices .p-offices_nav_arrow::after {
    width: 8px;
    height: 8px;
  }

  #company_offices .p-offices_inner {
    padding-top: 32px 20px 0px;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  #company_offices .p-offices_region__title {
    font-size: 30px;
    margin-bottom: 40px;
  }

  #company_offices .p-offices_article {
    margin-bottom: 72px;
  }

  #company_offices .p-offices_article__title {
    font-size: 24px;
    margin-bottom: 16px;
  }

  #company_offices .p-offices_article__row {
    gap: 3.5rem;
    flex-direction: column-reverse;
  }

  #company_offices .p-offices_slider__controls {
    position: relative;
    margin-top: -3rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-height: 40px;
  }

  #company_offices .p-offices_slider__btn {
    display: none;
  }

  #company_offices .p-offices_map {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
  }

  #company_offices .p-offices_map__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  #company_offices #container footer .c-bread_crumbs .l-inner {
    padding: 8px 0px;
  }
  #company_offices .p-offices_article__media {
    margin-top: 0px;
    width: 100%;
  }
  #company_offices .p-offices_region.tokyo .p-offices_article__media{
    margin-top: 0px;
  }
  #company_offices .p-offices_region.soratoshiba .p-offices_article__media{
    margin-top: 0px;
  }
  #company_offices .p-offices_slider__dot{
    width: 8px;
    height: 8px;
  }
  #company_offices .p-offices_dl{
    display: inherit;
  }
  #company_offices .p-offices_dl__dd{
    margin-bottom: 16px;
  }
  #company_offices .p-offices_dl__dt{
    margin-bottom: 8px;
  }
  #company_offices .p-offices_dl{
    margin: 0 0 16px;
  }
  #company_offices .p-offices_region:not(:last-child)::after{
    margin-top: 48px;
    margin-bottom: 48px;
  }
  #company_offices .p-offices_content{
    padding-bottom: 72px;
  }
}


/*
===== Customization ===========================*/
#company_offices {
    background-color: #112240;
}

#company_offices #container main .c-headline_02 .l-inner {
  padding: 0 32px;
}

#company_offices .p-offices_dl {
  margin: 0 0 69px;
}

#company_offices .tokyo .p-offices_dl,
#company_offices .soratoshiba .p-offices_dl {
  margin: 0 0 45px;
}

#company_offices .p-offices_article__media {
  margin-top: -10px;
}

@media (max-width: 768px) {
  #company_offices #container main .c-headline_02 .l-inner {
    padding: 0 calc((20 / 375) * 100%);
  }

  #company_offices .p-offices_inner {
    padding: 32px calc((20 / 375) * 100%);
  }

  #company_offices .p-offices_dl {
    margin: 0 0 16px !important;
  }

  #company_offices .p-offices_article__media {
    margin-top: 0;
  }

  #company_offices .p-offices_article__row {
    gap: 8px;
  }

  #company_offices .p-offices_region:not(:last-child)::after {
    margin-top: 72px;
  }
}

/* p-slide
--------------------*/
#company_offices .p-slide {
	position: relative;
	padding: 0 0 56px;
}

#company_offices .p-slide .swiper {
	border-radius: 16px;
	overflow: hidden;
}

#company_offices .p-slide .swiper-button-prev,
#company_offices .p-slide .swiper-button-next {
	display: block;
	top: inherit;
	bottom: 0;
	width: 40px;
	height: 40px;
	margin: 0;
	border: 2px solid #112240;
	border-radius: 8px;
	transition: all .3s ease;
}

#company_offices .p-slide .swiper-button-prev {
	left: inherit;
	right: 64px;
}

#company_offices .p-slide .swiper-button-next {
	right: 0;
}

#company_offices .p-slide .swiper-button-prev:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 6px;
	height: 12px;
	background: url(/assets/img/common/bullet_arrow_05_n.svg) no-repeat 50% 50%;
	background-size: 6px auto;
}

#company_offices .p-slide .swiper-button-next:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 6px;
	height: 12px;
	background: url(/assets/img/common/bullet_arrow_01_n.svg) no-repeat 50% 50%;
	background-size: 6px auto;
}

#company_offices .p-slide .swiper-button-disabled {
	display: none !important;
}

#company_offices .p-slide .swiper-pagination {
	bottom: 8px;
	font-size: 0;
	line-height: 0;
	z-index: 10;
}

#company_offices .p-slide .swiper-pagination-bullet {
	margin: 0 8px;
	width: 16px;
	height: 16px;
	background: #ffffff;
	transition: all .3s ease;
	opacity: 1;
}

#company_offices .p-slide .swiper-pagination-bullet:hover {
	background: #112240;
}

#company_offices .p-slide .swiper-pagination-bullet-active {
	background-color: #112240 !important;
}

@media (min-width: 769px) {
	#company_offices .p-slide .swiper-button-prev:hover,
	#company_offices .p-slide .swiper-button-next:hover {
		background: #112240;
	}

	#company_offices .p-slide .swiper-button-prev:hover:after {
		background: url(/assets/img/common/bullet_arrow_05_y.svg) no-repeat 50% 50%;
		background-size: 6px auto;
	}

	#company_offices .p-slide .swiper-button-next:hover:after {
		background: url(/assets/img/common/bullet_arrow_01_y.svg) no-repeat 50% 50%;
		background-size: 6px auto;
	}
}

@media (max-width: 768px) {
	#company_offices .p-slide {
		padding: 0 0 24px;
	}

	#company_offices .p-slide .swiper {
		border-radius: 10px;
	}

	#company_offices .p-slide .swiper-button-prev,
	#company_offices .p-slide .swiper-button-next {
		display: none;
	}

	#company_offices .p-slide .swiper-pagination {
		bottom: 0;
	}

	#company_offices .p-slide .swiper-pagination-bullet {
		margin: 0 8px;
		width: 8px;
		height: 8px;
	}

	#company_offices .p-slide .swiper-pagination-bullet:hover {
		background: #ffffff;
	}
}