@charset "UTF-8";

/*
 * 移行してきた本文の中に残る横送りの器（.slider）の組み方（Issue #2228）。
 *
 * 組み立ては assets/js/legacy-slider.js が行い、最後に器へ is-slider-ready を
 * 付ける。このファイルの指定は、その印が付いているときだけ効く。よって
 * JavaScript が動かない環境では写真が縦に並ぶだけで、隠れて読めなくなる中身は
 * 1 つも無い。移行元も slick が動かなければ同じ見え方になる。
 *
 * 内側の名前（slick-list / slick-track / slick-slide / slick-prev / slick-next /
 * slick-dots / slick-active）は、移行元 slick が組み立てる名前をそのまま写して
 * いる。移行元のページ別 CSS はこの名前に対して書かれているためである。たとえば
 * 社内風景は移行元 css/page_company.css の 664 行で
 * 「#photo .slick-list { width: 600px; margin: 0 auto; }」と窓の幅を決めている。
 * 同じ名前で組めば、各区画の Issue がページ別 CSS を移すときにそのまま効く。
 *
 * 【移行元 slick との作りの違い】
 * 移行元は帯（.slick-track）を transform で横へずらして送る。ここでは窓
 * （.slick-list）の横スクロールと吸着（scroll-snap）で送る。テーマの自前の
 * 横送り 3 種（assets/js/front-page.js・assets/js/branch-visual.js・
 * assets/js/happyreport-list.js）と同じ作りにそろえるためであり、指でのスワイプ・
 * ホイール・矢印キーがブラウザの働きだけで効く利点もある。
 *
 * 【移行元 slick の既定の見た目から変えた点】
 * 移行元の共通の見た目（slick-theme.css）は、左右の送りボタンを器の外側
 * （left: -25px / right: -25px）へ白い文字で置く。ページ別 CSS が上書きする前提の
 * 値で、上書きが無いページでは白地に白で見えない。ここは汎用の土台なので、
 * ボタンを器の内側へ置き、白い丸の上に濃い矢印を描いて、ページ別 CSS が無くても
 * 見えるようにしてある。大きさは 40 × 40px で、押す的として十分な広さがある
 * （移行元の社内風景のページ別 CSS も 40 × 40px を指定している）。
 * ページ別 CSS が background と位置を指定すれば、そのまま上書きできる。
 *
 * 丸い印（.slick-dots）は、器の下へ流し込みのまま置く。移行元の共通の見た目
 * （slick-theme.css）は印を器の下端から 25px 下へ絶対配置するが、**この器を使う
 * ページはその CSS を読み込んでいない**。社内風景が読み込む CSS は
 * import.css / page_top.css / page_company.css / slick.css /
 * company/interview/css/style.css の 5 本で、slick-theme.css は入っていない
 * （2026-08-27 に稼働中の本番を開いて確認。印の position は static だった）。
 * 印の高さぶんも器の高さに入る。実測では器 498px の内訳が
 * 上の余白 39px ＋ 写真 400px ＋ 帯の下の余白 19px ＋ 印 32px ＋ 下の余白 6px ＋
 * 枠線 2px であり、印を絶対配置にすると 32px 足りなくなる。
 */

/* 器。左右の送りボタンと丸い印の位置の基準になる. */
.slider.is-slider-ready {
	position: relative;
	display: block;
	box-sizing: border-box;
}

/*
 * 窓。ここが横にスクロールする。吸着（scroll-snap）で 1 枚ずつ止まる。
 *
 * スクロールバーは隠す。移行元は transform で送るためスクロールバーが出ず、
 * 出したままにすると器の高さが移行元より数ピクセル高くなるためである。
 * 隠しても、指・ホイール・矢印キー・送りボタン・丸い印で送れる.
 */
.slider.is-slider-ready .slick-list {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.slider.is-slider-ready .slick-list::-webkit-scrollbar {
	display: none;
}

/* 帯。1 枚ずつを横一列に並べる. */
.slider.is-slider-ready .slick-track {
	position: relative;
	display: flex;
	align-items: stretch;
}

/*
 * 1 枚。窓の幅いっぱいに広げる（移行元 slick の slidesToShow: 1 に当たる）。
 *
 * flex-basis を 100% にして縮まないようにする。min-width: 0 を添えるのは、
 * 中に長い文字列や表があるときに 1 枚が窓より広がるのを防ぐためである。
 * 高さをそろえる（align-items: stretch）ので、説明文の長さが 1 枚ごとに違って
 * いても、いちばん高い 1 枚に合わせた高さで安定する。移行元 slick も
 * adaptiveHeight を切った既定では同じく、いちばん高い 1 枚に合わせる.
 */
.slider.is-slider-ready .slick-slide {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	scroll-snap-align: center;
}

/*
 * 1 枚の中の写真。移行元 slick.css は .slick-slide img { display: block } だけを
 * 指定する。ここでは併せて、窓より大きい写真がはみ出さないようにし、写真が
 * 窓より小さいときは中央へ置く。管理画面から入れた大きさの違う写真でも崩れない
 * ようにするためである.
 */
.slider.is-slider-ready .slick-slide img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/*
 * 左右の送りボタン。器の内側の左右へ置く。
 *
 * 文字（Previous / Next）は読み上げのために残し、見た目では隠す（font-size: 0）。
 * 矢印は背景の画像として描く。移行元のページ別 CSS は
 * 「background: url(next.gif) no-repeat 0px 0px」のように background をまとめて
 * 指定するため、ここで背景に描いておけば、上書きしたときに二重に出ない.
 */
.slider.is-slider-ready .slick-prev,
.slider.is-slider-ready .slick-next {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: block;
	width: 40px;
	height: 40px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.75);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 12px 20px;
}

.slider.is-slider-ready .slick-prev:hover,
.slider.is-slider-ready .slick-next:hover {
	background-color: rgba(255, 255, 255, 0.95);
}

.slider.is-slider-ready .slick-prev {
	left: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath fill='none' stroke='%23111' stroke-width='2' d='M10 1L2 10l8 9'/%3E%3C/svg%3E");
}

.slider.is-slider-ready .slick-next {
	right: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath fill='none' stroke='%23111' stroke-width='2' d='M2 1l8 9-8 9'/%3E%3C/svg%3E");
}

/*
 * 丸い印。器の下へ流し込みのまま並べる（絶対配置にしない理由は冒頭の説明を
 * 参照）。
 *
 * 丸そのものは button の ::before に文字（•）として描く。移行元のページ別 CSS は
 * 「text-indent: -9999px」で文字を画面の外へ押し出し、button の background で丸を
 * 描き直す作りになっているため（移行元 css/page_company.css の 705 行）、同じ形で
 * 描いておけば、そのまま上書きできる。
 *
 * 印 1 つぶんの枠（li）には大きさを与えない。移行元も与えておらず、ページ別 CSS
 * が余白だけを決める作りだからである（移行元 css/page_company.css の 718 行）.
 */
.slider.is-slider-ready .slick-dots {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.slider.is-slider-ready .slick-dots li {
	position: relative;
	display: inline-block;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}

.slider.is-slider-ready .slick-dots li button {
	display: block;
	width: 20px;
	height: 20px;
	padding: 5px;
	border: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	background: transparent;
}

.slider.is-slider-ready .slick-dots li button::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	content: "\2022";
	font-size: 6px;
	line-height: 20px;
	text-align: center;
	color: #000;
	opacity: 0.25;
}

.slider.is-slider-ready .slick-dots li button:hover::before,
.slider.is-slider-ready .slick-dots li button:focus::before {
	opacity: 1;
}

.slider.is-slider-ready .slick-dots li.slick-active button::before {
	opacity: 0.75;
}

/*
 * 携帯幅では左右の送りボタンを出さない。移行元は携帯版のページで
 * arrows: false を指定しており（sp/company/recruit/photo/index.html の 111 行、
 * sp/event/js/slick.min.js の 3 行）、丸い指の操作では画面に重なるボタンより
 * スワイプの方が扱いやすいためである。テーマは 1 つの HTML で両方をまかなうので、
 * ここで出し分ける。境目の 750px は移行元 slick が携帯幅の切り替えに使う値と
 * 同じである。ボタンを消しても、指でのスワイプと丸い印で全部の 1 枚に届く.
 */
@media (max-width: 749px) {
	.slider.is-slider-ready .slick-prev,
	.slider.is-slider-ready .slick-next {
		display: none;
	}
}

/*
 * 薄く重ねて切り替える器（移行元 slick の `fade: true`・Bug #9238）。
 *
 * 組み立ては assets/js/legacy-slider.js の setUpFade が行い、器へ is-slider-fade を
 * 付ける。1 枚の重なり（position・z-index・不透明度・transition）は、移行元 slick と
 * 同じく JS が 1 枚ずつ直に当てる。ここでは、横送りの組みのうち重ねる邪魔になる
 * 2 つだけを戻す。
 *
 *   - 帯の flex … 1 枚が横に並び、2 枚目以降が窓の右へ出る。移行元 slick の fade と
 *     同じブロックの並びに戻す（1 枚は縦に積まれ、中身の絶対配置で同じ位置に重なる）
 *   - 窓の横スクロールと吸着 … fade は位置を動かさないので要らない。移行元 slick の
 *     既定（slick.css の `.slick-list { overflow: hidden }`）に戻す
 *
 * /pac/ の主画像（#slider-mv）では、意匠の写しの `#slider-mv .slick-list
 * { overflow: visible !important }` が窓の overflow に勝つ。移行元と同じ値である.
 */
.slider.is-slider-ready.is-slider-fade .slick-list {
	overflow: hidden;
	scroll-snap-type: none;
}

.slider.is-slider-ready.is-slider-fade .slick-track {
	display: block;
}