@charset "UTF-8";

/*!
Theme Name: 株式会社西荻
Description: 株式会社西荻のテーマ
Author: BRIGHT COMMS
Template:   cocoon-master
Version:    1.1.3
*/

/*===========================================

【全体】

===========================================*/

/*-------------------------------------------
リセット
-------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: transparent;
	top: 0 !important;
}

html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.body .article,
.entry-content,
.footer,
.copyright {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.custom-header-wrapper {
    margin: 0;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    margin: 0;
    padding: 0;
    line-height: normal;
    background-color: transparent;
    border: none;
	color: var(--p_text-color);
}

.body .article,
.entry-content {
    display: block;
	z-index: -999;
    position: relative;
}

.footer,
.copyright {
    display: block;
    position: relative;
}

.custom-header-wrapper {
	z-index: -999;
    position: relative;
}

.no-sidebar .content .main {
    padding: 0;
}

.entry-content>*, .mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond {
	margin-bottom: 0;
}

table tr:nth-of-type(2n+1) {
    background-color: var(--white-color);
}

table:not(.has-border-color) :where(th, td) {
    border: none;
}

/*-------------------------------------------
初期設定
-------------------------------------------*/
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
}

.wrap {
    width: 100%;
}

.main,
.content {
    padding: 0;
    margin: 0;
}

p, a, h1, h2, h3, h4, h5, h6 {
    font-family: "Shippori Mincho", serif;
}

/* カラー */
:root {
	--p_main-color: #192E77;
	--p_sub-color: #5BF5FF;
	--p_text-color: #1A1A1A;
	--p_bg-color: #F2F2F2;
	--pale-blue: #93A1D3;
	--sdgs-blue: #0099D9;
	--sdgs-bg: #DBF0F8;
	--bright-blue: #2E55DD;
	--gray-color: #CCCCCC;
	--dark-grey: #AAAAAA;
	--light-gray: #DDDDDD;
	--white-color: #FFFFFF;
}

p {
	color: var(--p_text-color);
}

a:hover, button:hover {
	opacity: 0.7;
}

.footer-bottom {
    margin: 0 auto;
    width: 1000px;
    padding: 10px 0;
}

/*-------------------------------------------
非表示
-------------------------------------------*/
.header-container,
.home .date-tags,
.home .entry-title,
.home .footer-meta,
.home .eye-catch-wrap,
.home .post-date,
.page-id-15 .entry-title,
.page-id-17 .entry-title,
.entry-categories,
.cat-label {
    display: none;
    margin: 0;
}

.main {
    border: none;
}

#footer, .page-id-15 .menu-item-20, .page-id-17 .menu-item-19 {
	display: none !important;
}

/*-------------------------------------------
PC用・SP用
-------------------------------------------*/
.pc-only {
    display: block;
}

.sp-only, .sp-only2 {
    display: none;
}

.pc-image {
    display: block !important;
}

.sp-image {
    display: none !important;
}

/*===========================================

【共通】

===========================================*/

/*-------------------------------------------
ヘッダー関連のスタイル
-------------------------------------------*/

/* ヘッダー全体 */
.nishiogi-header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding: 15px 60px;
	background-color: transparent;
	display: flex;
	align-items: center;
	z-index: 999;
}

/* サービスセクション到達時にヘッダーを固定表示 */
.nishiogi-header.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: var(--white-color);
	transition: background-color 1.5s ease;
}

.fixed-header {
	box-shadow: none;
}

.nishiogi-header a:hover {
	color: var(--p_text-color);
}

/* ヘッダー内部コンテナ */
.nishiogi-header-inner {
	width: 100%;
	display: flex;
	align-items: center;
}

/* ロゴ */
.header-logo {
	display: flex;
	align-items: center;
}

.header-logo-img {
	width: 172px;
	height: auto;
	display: block;
}

/* ナビゲーション */
.header-nav {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-left: 40px;
}

/* 各リンク */
.header-nav-link {
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: var(--p_text-color);
	position: relative;
	cursor: pointer;
}

/* サブメニューを持つリンクブロック */
.header-nav-has-submenu {
	display: flex;
	align-items: center;
}

/* プラス・マイナスアイコン */
.submenu-toggle-icon {
	width: 16px;
	height: 16px;
	margin-left: 4px;
	cursor: pointer;
}

.plus-icon {
	display: inline;
}

.minus-icon {
	display: none;
}

/* サブメニュー */
.header-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 140px;
	padding: 8px 0;
	background-color: var(--white-color);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: none;
	flex-direction: column;
	z-index: 1000;
}

.header-submenu-link {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--p_text-color);
	text-decoration: none;
	padding: 6px 12px;
}

.header-submenu-link:hover {
	background-color: var(--light-gray);
}

/*-------------------------------------------
  ロゴアニメーション プリローダー
  （ページ読み込み時の演出）
-------------------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  overflow: hidden;
}

.preloader-logo-wrap {
  opacity: 0;
  animation: logoFade 3s forwards; 
}

.preloader-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
	margin: 0 auto;
}

@keyframes logoFade {
  0% {
    opacity: 0; 
  }
  20% {
	opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.preloader.hide {
  display: none;
}

/*-------------------------------------------
  プリローダーアニメーション（HOMEのみ適用）
-------------------------------------------*/
body:not(.home) .preloader {
  display: none !important;
}

body:not(.home) .main-content {
  opacity: 1 !important;
}

/*-------------------------------------------
  ヘッダー・メインビジュアルのアニメーション（HOMEのみ）
-------------------------------------------*/
body:not(.home) .nishiogi-header,
body:not(.home) .mainvisual-sustainable,
body:not(.home) .mainvisual-scroll,
body:not(.home) .mainvisual-catch {
  opacity: 1 !important;
  transform: none !important;
	pointer-events: auto;
}

/* メインビジュアル要素の表示 */
.mv-step1-show {
  opacity: 1;
  transition: opacity 0.8s ease;
}

.mv-step2-show {
  opacity: 1;
  transform: translateX(0) translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.mv-step3-show {
  opacity: 1;
  transition: opacity 1s ease;
}

/*-------------------------------------------
  ページ本体のフェードイン表示アニメーション
-------------------------------------------*/
/* 初期状態：完全に透明（0） */
.main-content {
  opacity: 0;
  transition: opacity 0.8s ease; 
}

/* プリローダー終了後のクラス付与でフェードイン */
body.show-content .main-content {
  opacity: 1;
}

/*==========================================
  ハンバーガーメニュー関連スタイル
==========================================*/

/* ハンバーガーアイコンはPC時は非表示、SP時(1100px以下)に表示 */
.header-hamburger {
	display: none;
}

.hamburger-icon {
	width: 40px;
	height: auto;
	cursor: pointer;
}

/* オーバーレイ */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--p_main-color);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
	z-index: 9999;
}

.mobile-menu-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

/* メニュー本体 */
.mobile-menu-content {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

/* メニューリスト */
.mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	transform: translateX(20px);
	opacity: 0;
}

.mobile-menu-overlay.open .mobile-menu-list {
	animation: menuSlideIn 0.5s 0.3s forwards ease;
}

/* リストアイテム */
.mobile-menu-list li {
	margin-bottom: 20px;
}

.mobile-menu-list li:last-child {
	margin-bottom: 0;
}

/* 各メニューリンク */
.mobile-menu-list li a {
	font-size: 20px;
	font-weight: 500;
	color: var(--white-color);
	text-decoration: none;
	display: block;
	transition: opacity 0.3s ease;
}

.mobile-menu-list li a:hover {
	color: var(--white-color);
	opacity: 0.7;
}

@keyframes menuSlideIn {
	0% {
		transform: translateX(20px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/*-------------------------------------------
  ▼▼▼その場で透過→ふわっと表示▼▼▼
-------------------------------------------*/

/* その場でフェードイン */
.merits-carousel-wrap.scroll-fade-up, .merits-section.scroll-fade-up, .contact-inner.scroll-fade-up, .contact-box.scroll-fade-up {
  transform: none !important;
  transition: opacity 1s ease-out !important;
}

.merits-carousel-wrap.scroll-fade-up.show, .merits-section.scroll-fade-up.show, .contact-inner.scroll-fade-up.show, .contact-box.scroll-fade-up.show {
  transform: none !important;
}

/*==========================================
  ▼▼▼ スクロールアニメーション用 ▼▼▼
==========================================*/

/* 初期状態：透明 + 非表示 + 位置ずらし */
.scroll-fade-up {
	opacity: 0;
    transform: translateY(30px);
}

/* 画面内に入ったら表示 */
.scroll-fade-up.show {
	opacity: 1 !important;
    transform: translateY(0);
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out;
}

/*-------------------------------------------
  少し遅らせる
-------------------------------------------*/
.company-box-right.scroll-fade-up {
	transition-delay: 0.5s;
}

/*===========================================

【トップページ】

===========================================*/

/*-------------------------------------------
メインビジュアル関連スタイル
-------------------------------------------*/
.mainvisual-section {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	top: 0;
	left: 0;
	margin-top: -82px;
}

/* スライド全体 */
.mainvisual-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

/* 各スライド */
.mainvisual-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.2);
	transition:
		opacity 1s ease,
		transform 6s ease;
	background-size: contain;
	background-position: right center;
}

.mainvisual-slide.active {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

/* インジケーター（縦に並べる） */
.mainvisual-indicators {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 5;
}

.indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.5);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.indicator.active,
.indicator:hover {
	background-color: var(--p_sub-color);
}

/* メインキャッチ（左端・縦中央） */
.mainvisual-catch {
	position: absolute;
	left: 100px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

.mainvisual-catch h1 {
	text-align: left;
	color: var(--p_main-color);
	margin: 0;
	line-height: 1.2;
}

.catch-line1 {
	font-size: 46px;
	font-weight: 400;
	display: inline-block;
	margin-bottom: 0.4em;
}

.catch-line2 {
	font-size: 88px;
	font-weight: 500;
}

/* Sustainable Tomorrow（右下） */
.mainvisual-sustainable {
	position: absolute;
	right: 30px;
	bottom: 30px;
	font-family: "EB Garamond", serif;
	font-size: 130px;
	font-weight: 400;
	color: var(--p_main-color);
	mix-blend-mode: color-burn;
	opacity: 0.9;
	z-index: 10;
	line-height: 1;
}

/* スクロールアニメーション（左下） */
.mainvisual-scroll {
	position: absolute;
	left: 100px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 10;
}

.scroll-text {
	font-family: "EB Garamond", serif;
	font-size: 16px;
	font-weight: 400;
	color: var(--p_main-color);
	transform: rotate(90deg);
	margin-bottom: 8px;
}

/* 縦線アニメーション */
.scroll-line {
	width: 1px;
	height: 50px;
	background: var(--pale-blue);
	position: relative;
	overflow: hidden;
}

.scroll-line::before {
	content: "";
	position: absolute;
	top: -50px;
	left: 0;
	width: 1px;
	height: 50px;
	background: var(--p_main-color);
	animation: scrollLine 2s linear infinite;
}

/* スクロールラインの上から下へのループアニメーション */
@keyframes scrollLine {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100px);
	}
}

/*-------------------------------------------
ヘッダー背景色 切り替え用
-------------------------------------------*/
.nishiogi-header.scrolled {
	background-color: var(--white-color);
	transition: background-color 0.3s ease;
}

/*-------------------------------------------
サービスセクション
-------------------------------------------*/
.service-section {
	position: relative;
	background: url('../cocoon-child-master/images/service_bg.jpg') center center no-repeat;
	background-size: cover;
	overflow: hidden;
}

.service-section a:hover {
	color: var(--white-color);
}

/* メインビジュアルの縦線を伸ばし、「Service」を配置 */
.service-scroll {
	position: absolute;
	top: 0;
	left: 65px;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
}

.service-scroll-line {
	width: 1px;
	height: 100px;
	background-color: var(--pale-blue);
}

.service-scroll-text {
	font-family: "EB Garamond", serif;
	font-size: 40px;
	font-weight: 400;
	color: var(--white-color);
	transform: rotate(90deg);
	margin-top: 30px;
}

/* サービスコンテナー */
.service-container {
	max-width: 1200px;
	margin: 200px auto 150px;
	padding: 0;
	position: relative;
	z-index: 2;
}

/* サービスヘッダー */
.service-header {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 60px;
}

.service-header-left {
	width: 60%;
}

.service-header-left h2 {
	font-size: 52px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	color: var(--white-color);
	margin-bottom: 0.8em;
}

.service-header-left p {
	font-size: 20px;
	font-weight: 400;
	text-align: left;
	line-height: 1.5;
	color: var(--white-color);
}

.service-header-right {
	width: 40%;
	display: flex;
	justify-content: flex-end;
}

.service-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 380px;
	height: 80px;
	border: 1px solid var(--white-color);
	border-radius: 40px;
	background-color: transparent;
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	text-decoration: none;
	padding: 0 2em;
}

.service-button img {
	width: 28px;
	height: 28px;
}

/* サービスコンテンツ（3つ並べる） */
.service-items {
	display: flex;
	justify-content: space-between;
}

.service-item {
	width: calc(33.333% - 1px);
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}

.service-item img {
	width: 100%;
	height: auto;
}

/* 詳細div */
.service-detail {
	background: var(--white-color);
	width: 100%;
	padding: 25px 20px 30px;
	box-sizing: border-box;
}

.service-detail h3 {
	font-size: 28px;
	font-weight: 500;
	color: var(--p_main-color);
	text-align: center;
	margin-bottom: 20px;
	line-height: 1;
}

.service-detail p {
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	line-height: 1.6;
	color: var(--p_text-color);
}

/*-------------------------------------------
特徴セクション
-------------------------------------------*/
.feature-section {
	position: relative;
	width: 100%;
	background: none;
	overflow: hidden;
}

/* 左端・縦中央に大きく「Feature」 */
.feature-left-text {
	position: absolute;
	top: 50%;
	left: -320px;
	transform: translateY(-50%) rotate(90deg);
	font-family: "EB Garamond", serif;
	font-size: 300px;
	font-weight: 400;
	color: var(--light-gray);
	z-index: 1;
	margin: 0;
	line-height: 1;
}

/* 特徴コンテイナー */
.feature-container {
	max-width: 1200px;
	margin: 150px auto;
	padding: 0;
	position: relative;
	z-index: 2;
}

/* 特徴ヘッダー（中央揃え） */
.feature-header {
	text-align: center;
	margin-bottom: 100px;
}

.feature-header h2 {
	font-size: 52px;
	font-weight: 500;
	line-height: 1;
	color: var(--p_main-color);
	margin-bottom: 0.8em;
}

.feature-header p {
	font-size: 20px;
	font-weight: 400;
	color: var(--p_text-color);
	line-height: 1.5;
}

/* 特徴ボックス共通 */
.feature-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 100px;
}

/* feature-box1 と feature-box3 は「画像左 + テキスト右」 */
.feature-box1 .feature-box-left,
.feature-box3 .feature-box-left {
	width: 540px;
	height: 400px;
	overflow: hidden;
}

.feature-box1 .feature-box-right,
.feature-box3 .feature-box-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-left: 70px;
}

/* feature-box2 は「テキスト左 + 画像右」 */
.feature-box2 .feature-box-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 30px;
}

.feature-box2 .feature-box-right {
	width: 540px;
	height: 400px;
	overflow: hidden;
}

/* 画像（固定サイズ） */
.feature-box-left img,
.feature-box-right img {
	width: 540px;
	height: 400px;
	object-fit: cover;
	display: block;
}

/* タイトルボックス（Network + 01など） */
.feature-title-box {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 1.5em;
	line-height: 1;
}

/* 左側：英語タイトル (例: Network) */
.feature-title-main {
	font-family: "EB Garamond", serif;
	font-size: 50px;
	font-weight: 400;
	color: var(--p_main-color);
	text-shadow: 
		4px 0 0 var(--white-color),
		-4px 0 0 var(--white-color),
		0 4px 0 var(--white-color),
		0 -4px 0 var(--white-color),
		4px 4px 0 var(--white-color),
		4px -4px 0 var(--white-color),
		-4px 4px 0 var(--white-color),
		-4px -4px 0 var(--white-color);
	position: relative;
	z-index: 2;
	padding-right: 10px;
}

/* 右側：数字 (例: 01) */
.feature-title-num {
	font-family: "EB Garamond", serif;
	font-size: 120px;
	font-weight: 800;
	color: white;
	text-shadow: 
		1px 0 0 var(--p_main-color),
		-1px 0 0 var(--p_main-color),
		0 1px 0 var(--p_main-color),
		0 -1px 0 var(--p_main-color),
		1px 1px 0 var(--p_main-color),
		1px -1px 0 var(--p_main-color),
		-1px 1px 0 var(--p_main-color),
		-1px -1px 0 var(--p_main-color);
	background: none;
	position: relative;
	z-index: 1;
	margin-left: -20px;
	line-height: 0.7;
}

/* 見出し（背景--p_main-color・文字色--white-color） */
.feature-box-title {
	display: inline;
	color: var(--white-color);
	font-size: 28px;
	font-weight: 500;
	text-align: left;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	margin-bottom: 0.8em;
	line-height: 1.7;
}

.feature-box-title span {
	background-color: var(--p_main-color);
	padding: 0 7px 2px;
}

/* 説明文 */
.feature-box-text {
	font-size: 16px;
	font-weight: 400;
	color: var(--p_text-color);
	line-height: 1.8;
	text-align: left;
	padding: 0 0 0 7px;
}

/* ボトムのボタン */
.feature-bottom-button {
	text-align: center;
	display: flex;
	justify-content: center;
}

.feature-bottom-button a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 380px;
	height: 80px;
	border: none;
	border-radius: 40px;
	background-color: var(--p_main-color);
	color: var(--white-color);
	text-decoration: none;
	padding: 0 1.5em;
	font-size: 18px;
	font-weight: 500;
}

.feature-bottom-button a img {
	width: 28px;
	height: 28px;
}

/*-------------------------------------------
メリットセクション
-------------------------------------------*/
.merits-section {
	position: relative;
	width: 100%;
	background: url('../cocoon-child-master/images/merits_bg.jpg') center top no-repeat;
	background-size: cover;
	overflow: hidden;
	padding: 0 0 150px;
}

/* 大きな文字「MERITS」 */
.merits-big-text {
	font-size: 330px;
	font-weight: 400;
	color: var(--p_sub-color);
	opacity: 0.75;
	line-height: 1;
	text-align: center;
	font-family: "EB Garamond", serif;
	margin: 50px 0 90px;
}

/* メリットヘッダー */
.merits-header-container {
	max-width: 1200px;
	margin: 0 auto 70px;
	padding: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.merits-header-left {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-width: 60%;
}

.merits-header-left h2 {
	font-size: 52px;
	font-weight: 500;
	color: var(--white-color);
	line-height: 1;
	margin-bottom: 40px;
}

.merits-header-left p {
	font-size: 20px;
	font-weight: 400;
	color: var(--white-color);
	line-height: 1.5;
}

.merits-header-right {
	display: flex;
	align-items: center;
	gap: 30px;
}

/* カルーセルボタン */
.merits-slide-btn {
	width: 50px;
	height: 50px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.merits-slide-btn img {
	width: 50px;
	height: 50px;
}

/* カルーセル全体 */
.merits-carousel-wrap {
	display: flex;
	gap: 50px;
	position: relative;
	transition: transform 0.5s ease;
	max-width: 1200px;
	margin: 0 auto;
}

/* カルーセルの中身（横に4つ並ぶ） */
.merits-carousel {
	display: flex;
	gap: 50px;
	position: relative;
	left: 0;
	transition: left 0.5s ease;
}

/* 各アイテム */
.merits-item {
	position: relative;
	width: 700px;
	background: var(--white-color);
	overflow: hidden;
}

/* 左上の三角シェイプ (140x140) */
.merits-item-triangle {
	position: absolute;
	top: 0;
	left: 0;
	width: 140px;
	height: 140px;
	background-color: var(--p_sub-color);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	z-index: 2;
}

/* アイテムの中身全体 (テキスト部分) */
.merits-item-inner {
	padding: 45px 40px 50px;
	position: relative;
	z-index: 3;
}

/* タイトルヘッダー */
.merits-item-header {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	line-height: 1;
	gap: 10px;
}

.merits-item-number {
	font-family: "EB Garamond", serif;
	font-size: 60px;
	font-weight: 600;
	color: var(--p_main-color);
}

.merits-item-title {
	font-size: 38px;
	font-weight: 500;
	color: var(--p_main-color);
}

/* テキスト */
.merits-item-text {
	font-size: 16px;
	font-weight: 400;
	color: var(--p_text-color);
	line-height: 1.8;
}

/* メリットセクション下部ボタン */
.merits-bottom-button {
	text-align: left;
	margin: 60px auto;
	z-index: 2;
	position: relative;
	max-width: 1200px;
}

.merits-bottom-button a {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 380px;
	height: 80px;
	border: 1px solid var(--white-color);
	border-radius: 40px;
	background: transparent;
	color: var(--white-color);
	text-decoration: none;
	padding: 0 2em;
	font-size: 18px;
	font-weight: 500;
}

.merits-bottom-button a img {
	width: 28px;
	height: 28px;
}

/*-------------------------------------------
カンパニーセクション
-------------------------------------------*/
.company-container {
	max-width: 1200px;
    margin: 100px auto 150px;
    display: flex;
}

.company-big-text {
	background: linear-gradient(to right, var(--bright-blue), var(--p_main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 160px;
    font-family: "EB Garamond", serif;
	line-height: 1.4;
	font-weight: 400;
}

.company-box-left h2 {
	background: linear-gradient(to right, var(--bright-blue), var(--p_main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 52px;
	line-height: 1;
	font-weight: 500;
	margin: 50px 0;
}

.company-box-left p {
	font-size: 20px;
    margin-bottom: 50px;
}

.company-navi {
	width: 416px;
}

.company-navi hr {
	background-color: var(--gray-color);
	height: 1px;
    border: none;
}

.company-navi a {
    justify-content: space-between;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--p_main-color);
    padding: 1em 0;
}

.company-navi img {
	width: 24px;
	height: 24px;
}

.company-box-right img {
	width: 850px;
    max-width: none;
	padding-top: 60px;
}

/*-------------------------------------------
リクルートセクション
-------------------------------------------*/
.recruit-careers {
    max-width: 1200px;
    margin: -220px auto 0;
    background-color: var(--p_main-color);
    text-align: center;
    padding: 70px 0;
    z-index: 2;
    position: relative;
}

.recruit-careers h2 {
	font-size: 52px;
    font-weight: 500;
    color: var(--white-color);
	line-height: 1;
}

.recruit-careers p {
	font-size: 20px;
    font-weight: 400;
    color: var(--white-color);
	margin: 50px 0;
}

.recruit-button a {
	display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 380px;
    height: 80px;
    border: 1px solid var(--white-color);
    border-radius: 40px;
    background: transparent;
    color: var(--white-color);
    text-decoration: none;
    padding: 0 2em;
    font-size: 18px;
    font-weight: 500;
}

.recruit-button img {
	width: 28px;
}

/*-------------------------------------------
お問い合わせセクション
-------------------------------------------*/
.contact-section {
	padding: 150px 0 0;
}

.contact-inner {
	background: url(../cocoon-child-master/images/contact_bg2.jpg) no-repeat;
    overflow: hidden;
    background-size: contain;
    background-position: right center;
	position: relative;
    overflow: hidden;
}

.contact-box {
	margin: 0 auto;
    max-width: 1200px;
	padding: 150px 0;
	position: relative;
    overflow: hidden;
}

.contact-box h2 {
	font-size: 52px;
    color: var(--p_main-color);
    font-weight: 500;
	line-height: 1;
	margin-bottom: 50px;
}

.contact-box h3 {
	font-size: 28px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--p_main-color);
	margin-bottom: 30px;
}

.contact-box p {
	font-size: 20px;
	margin-bottom: 50px;
}

.contact-phone {
	display: flex;
	align-items: center;
	gap: 0.6em;
	justify-content: center;
	margin-bottom: 30px;
}

.contact-phone img {
	width: 40px;
	height: 40px;
}

.contact-area {
	width: 380px;
}

.contact-tel p {
	margin: 0;
    font-size: 14px;
    line-height: 1;
}

.contact-tel span {
	font-size: 30px;
    font-weight: 400;
    line-height: 1;
    font-family: "EB Garamond", serif;
}

.contact-bottom-button a {
	display: flex;
    align-items: center;
    justify-content: space-between;
    width: 380px;
    height: 80px;
    border: none;
    border-radius: 40px;
    background-color: var(--p_main-color);
    color: var(--white-color);
    text-decoration: none;
    padding: 0 1.5em;
    font-size: 18px;
    font-weight: 500;
}

.contact-bottom-button img {
	width: 28px;
}

/*-------------------------------------------
フッターセクション
-------------------------------------------*/
.nishiogi-footer {
	background-color: var(--p_bg-color);
	padding: 150px 0;
}

.nishiogi-footer-inner {
	max-width: 1200px;
    margin: 0 auto;
	display: flex;
    justify-content: space-between;
	line-height: 1.6;
}

.footer-left-box p {
	font-size: 15px;
    font-weight: 400;
}

.footer-title {
	font-size: 17px !important;
    font-weight: 500 !important;
	margin-bottom: 1em;
}

.footer-menu a {
	font-size: 15px;
    text-decoration: none;
	color: var(--p_text-color);
	display: block;
    margin-bottom: 0.5em;
}

.footer-menu-box {
	display: flex;
	gap: 100px;
}

.nishiogi-copyright {
	max-width: 1200px;
    margin: 130px auto 0;
    display: flex;
    justify-content: space-between;
	font-size: 14px;
    font-weight: 400;
}

.nishiogi-copyright button {
	border: none;
    background-color: transparent;
    color: var(--p_text-color);
    font-family: "Shippori Mincho", serif;
    cursor: pointer;
}

.contact-phone a {
    text-decoration: none;
    color: var(--p_text-color);
    display: flex;
    align-items: center;
    gap: 0.6em;
}

/*-------------------------------------------
  ▼▼▼ メインビジュアル表示アニメーション用 ▼▼▼
-------------------------------------------*/

/* ▼ 初期状態：非表示 */
.mainvisual-slides,
.mainvisual-indicators,
.mainvisual-catch,
.nishiogi-header,
.mainvisual-sustainable,
.mainvisual-scroll {
  opacity: 0;                /* 透明 */
  pointer-events: none;      /* マウス操作も無効 */
  transition: all 1.8s ease; /* デフォルトのトランジション設定 */
}

/* .mainvisual-catch は「左から右へ」動かしたいので初期位置を左寄せ */
.mainvisual-catch {
  transform: translateX(-50px) translateY(-50%);
}

/* ▼ (1) .mainvisual-slides & .mainvisual-indicators を表示するクラス */
.mv-step1-show {
  opacity: 1;
  pointer-events: auto; 
}

/* ▼ (2) .mainvisual-catch を表示（左→右へ）するクラス */
.mv-step2-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) translateY(-50%);
}

/* ▼ (3) ヘッダー＆右下テキスト＆左下スクロールをふわっと表示するクラス */
.mv-step3-show {
  opacity: 1;
  pointer-events: auto;
}

/*===========================================

【下層ページ】

===========================================*/

.philosophy-page-bg {
	height: 730px;
    margin-top: -82px;
	background: url(../cocoon-child-master/images/philosophy_mainvisual_bg1.jpg) no-repeat;
    background-position: right center;
	position: relative;
}

.message-page-bg {
	height: 730px;
    margin-top: -82px;
	background: url(../cocoon-child-master/images/message_mainvisual_bg1.jpg) no-repeat;
    background-position: right center;
	position: relative;
}

.company-page-bg {
	height: 730px;
    margin-top: -82px;
	background: url(../cocoon-child-master/images/company_bg1.jpg) no-repeat;
    background-position: right center;
	position: relative;
}

.page-id-18 .second-mainvisual-catch {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-30%);
    z-index: 10;
}

.page-id-18 .second-mainvisual-catch h1 {
	text-align: center;
}

.page-id-18 .second-catch-line2 {
    background: linear-gradient(to right, var(--bright-blue), var(--p_main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 52px;
    line-height: 1;
    font-weight: 500;
    margin: 0.6em 0 0;
    display: block;
}

.page-id-18 .second-catch-line1 {
    background: linear-gradient(to right, var(--bright-blue), var(--p_main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 160px;
    font-family: "EB Garamond", serif;
    line-height: 1;
    font-weight: 400;
    display: block;
}

.page-id-18 .second-mainvisual-catch.second-mv-show {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
}

.recruit-page-bg {
	height: 600px;
    margin-top: -82px;
	position: relative;
}

.second-mainvisual-catch {
	position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.second-catch-line1 {
	background: linear-gradient(to right, var(--bright-blue), var(--p_main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 160px;
    font-family: "EB Garamond", serif;
	line-height: 1.4;
	font-weight: 400;
	display: block;
}

.second-catch-line2 {
	background: linear-gradient(to right, var(--bright-blue), var(--p_main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 52px;
	line-height: 1;
	font-weight: 500;
	margin: 50px 0;
	display: block;
}

.philosophy-message-section {
	background: url(../cocoon-child-master/images/philosophy_bg1.jpg) no-repeat;
    overflow: hidden;
    background-size: cover;
}

.philosophy-message {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
}

.philosophy-message h2 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    color: var(--white-color);
    margin-bottom: 0.8em;
}

.philosophy-message p {
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    line-height: 2;
    color: var(--white-color);
}

.mission-contents {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
	text-align: center;
}

.vision-contents {
	max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 150px;
	text-align: center;
}

.mission-contents h2, .vision-contents h2 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    color: var(--p_main-color);
    margin: 0.8em 0;
}

.mission-contents h3, .vision-contents h3 {
    font-size: 38px;
    font-weight: 500;
    color: var(--p_text-color);
	margin: 0 0 0.8em;
	line-height: 1.6;
}

.mission-contents p, .vision-contents p {
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
	margin: 0 0 1.8em
}

.mission-contents p:last-child, 
.vision-contents p:last-child {
    margin: 0;
}

.sdgs-section {
	background: url(../cocoon-child-master/images/philosophy_sdgs_bg.jpg) no-repeat;
    overflow: hidden;
    background-size: cover;
}

.sdgs-container {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
}

.sdgs-contents {
	background-color: var(--white-color);
	padding: 50px;
}

.sdgs-contents hr{
	background-color: var(--sdgs-blue);
    height: 1px;
    border: none;
	margin: 50px 0;
}

.sdgs-contents h2 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    color: var(--sdgs-blue);
    margin: 0.8em 0;
}

.sdgs-contents h3 {
    font-size: 38px;
    font-weight: 500;
    color: var(--p_text-color);
	margin: 0 0 0.5em;
	line-height: 1.6;
}

.sdgs-contents p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.8;
	margin: 0 0 2em;
}

.esg-box {
	background-color: var(--sdgs-bg);
	padding: 50px 50px 8em;
	margin: 0 0 1.2em;
	position: relative;
}

.esg-box:last-child {
	margin: 0;
}

.esg-box h4 {
    font-size: 38px;
    font-weight: 500;
    color: var(--sdgs-blue);
	margin: 0 0 0.8em;
	line-height: 1;
}

.itemization {
	display: flex;
    align-items: center;
	margin: 0 0 0.8em;
	gap: 0.5em;
}

.itemization:last-child {
	margin: 0;
}

.itemization img {
	width: 22px;
}

.itemization p {
	margin: 0;
}

.english-text {
    font-size: 160px;
    font-family: "EB Garamond", serif;
    line-height: 0.7;
    font-weight: 400;
	color: var(--white-color);
	position: absolute;
    bottom: 0;
    right: 0;
}

.csr-container {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
	text-align: center;
}

.csr-container h2 {
    background: linear-gradient(to right, var(--bright-blue), var(--p_main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 160px;
    font-family: "EB Garamond", serif;
    line-height: 1;
    font-weight: 400;
    display: block;
}

.csr-container h3 {
    background: linear-gradient(to right, var(--bright-blue), var(--p_main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 52px;
    line-height: 1;
    font-weight: 500;
    margin: 0.8em 0;
    display: block;
}

.csr-container h4 {
    font-size: 38px;
    font-weight: 500;
    color: var(--p_text-color);
    margin: 0 0 0.8em;
	line-height: 1.6;
}

.csr-container p {
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
    margin: 0 0 1.8em;
}

.csr-container p:last-child {
	margin: 0;
}

.nishiogi-footer-navi {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0 0;
}

.nishiogi-footer-navi h2 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    color: var(--p_main-color);
    margin: 0 0 1.2em;
}

.nishiogi-footer-navi-box {
	display: flex;
    align-items: center;
	justify-content: space-between;
}

.nishiogi-footer-navi-menu span, .nishiogi-footer-navi-menu a {
	display: flex;
    align-items: center;
	width: 380px;
    justify-content: space-between;
	text-decoration: none;
}

.nishiogi-footer-navi-menu span {
	border-bottom: 1px solid var(--p_main-color);
	padding-bottom: 1em;
    color: var(--dark-grey);
}

.nishiogi-footer-navi-menu span p {
    color: var(--dark-grey);
}

.nishiogi-footer-navi-menu a {
	border-bottom: 1px solid var(--gray-color);
	padding-bottom: 1em;
}

.nishiogi-footer-navi-menu img {
	width: 24px !important;
}

/*-------------------------------------------
  ▼▼▼ second-mainvisual-section: 白レイヤーアニメ ▼▼▼
-------------------------------------------*/
.second-mainvisual-section {
  position: relative;
  overflow: hidden; /* オーバーレイがはみ出さないように */
}

/* 初期状態: 白レイヤーが全面を覆う（translateX(0)） */
.second-mainvisual-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white-color);
  z-index: 2; /* 背景画像より前に表示 */
  transform: translateX(0);
  transition: transform 1.5s ease; /* 1.5秒かけて左→右に移動 */
}

/* クラス .second-bg-reveal が付与されたら → レイヤーを右端へ移動(translateX(100%)) */
.second-mainvisual-section.second-bg-reveal::before {
  transform: translateX(100%);
}

/*-------------------------------------------
  ▼ 下層ページ: second-mainvisual-catch 左→右フェードイン用
-------------------------------------------*/

/* 初期状態：非表示・左へずらす */
.second-mainvisual-catch {
  opacity: 0; 
  transform: translateX(-50px) translateY(-50%);
  transition: opacity 0.8s ease, transform 0.8s ease; 
}

/* 表示状態：フェードイン＆X=0 */
.second-mainvisual-catch.second-mv-show {
  opacity: 1;
  transform: translateX(0) translateY(-50%);
}

.ceo-message-section {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
}

.ceo-header {
	position: relative;
	width: 100%;
	height: 443px;
}

.ceo-header img {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: auto;
	object-fit: cover;
}

.ceo-header h2 {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 52px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--p_main-color);
	margin: 0;
	z-index: 1;
}

.ceo-message {
	background-color: var(--p_bg-color);
	padding: 50px;
}

.ceo-message p {
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
    margin: 0 0 1.8em;
}

.ceo-name {
	text-align: right;
	margin: 0 !important;
}

/*-------------------------------------------
  ▼▼▼ nishiogi-footer-navi-bg 画像アニメ ▼▼▼
  最初は白レイヤーで覆い、スクロール到達時に左→右へレイヤーをスライド
-------------------------------------------*/
.nishiogi-footer-navi-bg {
  position: relative;
  overflow: hidden; /* 画像上の白レイヤーがはみ出さないように隠す */
}

.nishiogi-footer-navi-bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* 初期状態：白いオーバーレイが画像全体を覆う（translateX(0)） */
.nishiogi-footer-navi-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white-color); /* 例: 白 */
  z-index: 2;
  transform: translateX(0);
  transition: transform 2s ease; /* 2秒かけて左→右へ */
}

/* .show-footer-bg クラスが付くとレイヤーを右端へ移動(= 画像が現れる) */
.nishiogi-footer-navi-bg.show-footer-bg::before {
  transform: translateX(100%);
}

/* 会社概要テーブルのスタイル */
.company-info-section {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
}

.company-info-header h2, .story-info-header h2 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    color: var(--p_main-color);
    margin: 0 0 1em;
}

.company-table, .application-table, .application-process-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 0;
}

.company-table th, .company-table td, .application-table th, .application-table td, .application-process-table th, .application-process-table td {
	padding: 2em 0;
	text-align: left;
	border-top: 1px solid var(--light-gray);
	border-bottom: 1px solid var(--light-gray);
    font-size: 20px;
    font-weight: 400;
    margin: 1.8em 0;
}

.company-table th, .application-table th, .application-process-table th {
  background-color: var(--white-color);
  font-weight: 500;
	width: 20%; /* ラベル部分を適度に小さく */
	vertical-align: top;
}

/* 沿革のスタイル */
.story-info-section {
	max-width: 1200px;
    margin: 0 auto;
	padding: 0 0 150px;
}

.story-list {
  width: 100%;
  margin: 20px 0 0;
}

.story-item {
  display: flex;
  align-items: flex-start;
  padding: 2em 0;
  border-top: 1px solid var(--light-gray);
	font-size: 20px;
}

.story-item:last-child {
  border-bottom: 1px solid var(--light-gray);
}

.story-item dt {
  width: 20%;
  font-weight: 500;
}

.story-item dd {
  width: 80%;
  margin: 0;
}

.story-item dd strong {
  font-size: 20px;
  display: block;
	font-weight: 500;
}

.story-item dd p {
  font-size: 18px;
  margin-top: 0.5em;
}

.recruit-message {
	background: url(../cocoon-child-master/images/recruit-page_bg.jpg) no-repeat;
    overflow: hidden;
    background-size: cover;
}

.recruit-message-contents {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
	text-align: center;
}

.recruit-message-contents h2 {
	font-size: 52px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--white-color);
    margin-bottom: 0.8em;
}

.recruit-message-contents p {
	font-size: 20px;
    font-weight: 400;
    line-height: 2;
    color: var(--white-color);
	margin: 0 0 1.8em;
}

.recruit-message-contents p:last-child {
	margin: 0;
}

.application-section {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
}

.application-header h2 {
	font-size: 52px;
    font-weight: 500;
    line-height: 1;
    color: var(--p_main-color);
    margin: 0 0 1.2em;
    text-align: center;
}

.join-us-section {
	background: url(../cocoon-child-master/images/recruit-page_1.jpg) no-repeat;
    overflow: hidden;
    background-size: cover;
}

.join-us-message h2 {
	font-family: "EB Garamond", serif;
    font-size: 300px;
    font-weight: 400;
    color: var(--p_main-color);
    mix-blend-mode: color-burn;
	line-height: 1;
}

.join-us-message h3 {
    font-size: 52px;
    font-weight: 500;
    color: var(--p_main-color);
    mix-blend-mode: color-burn;
	line-height: 1.6;
	margin-top: 1em;
}

.join-us-contents, .enthusiasm-contents {
	max-width: 1200px;
    margin: 0 auto;
    padding: 150px 0;
}

.application-process-contents {
	max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.join-us-message {
	text-align: center;
}

.enthusiasm-contents h2, .application-process-contents h2 {
	font-size: 52px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--p_main-color);
    margin: 1.2em 0 0.8em;
    text-align: center;
}

.enthusiasm-contents p, .application-process-contents p {
	font-size: 20px;
    font-weight: 400;
    line-height: 2;
	margin: 0 0 1.8em;
	text-align: center;
}

.enthusiasm-contents p:last-child {
	margin: 0 !important;
}

.application-process {
	max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.application-process-contents p {
    margin: 0 0 2.5em;
}

/* 白いオーバーレイ（初期状態） */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    transition: transform 1s ease-in-out;
    transform: translateX(0%);
    z-index: 2;
}

/* オーバーレイが左から右へ消えていく */
.overlay-active {
    transform: translateX(100%);
}

/* 画像のフェードイン（初期状態は非表示） */
.enthusiasm-contents img, .application-process-contents img {
    transition: opacity 1s ease-in-out;
}

/* 画像が左から右に表示される */
.image-reveal {
    opacity: 1;
}

/* お問い合わせの背景画像を覆う白いオーバーレイ */
.contact-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 2;
  transition: transform 1s ease-in-out;
  transform: translateX(0%);
}

/* 背景オーバーレイが左→右にスライドして消える */
.overlay-slide-out {
  transform: translateX(100%);
}

/* `contact-box` 初期状態（透明 + 下にずらす） */
.contact-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* `contact-box` がふわっと表示 */
.contact-show {
  opacity: 1;
  transform: translateY(0);
}

.results-section {
	max-width: 1200px;
    margin: 0 auto 150px;
}

.recruit-image {
	height: 620px;
    overflow: hidden;
}

.recruit-image img {
	margin: 0 auto;
    display: block;
    width: -webkit-fill-available;
    max-width: none;
	object-fit: cover;
}

.recruit-message-image img {
	margin: 0 auto;
    display: block;
    width: -webkit-fill-available;
    max-width: none;
	object-fit: cover;
}

.recruit-message-image {
	overflow: hidden;
    height: 600px;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (min-width: 2200px){
	.recruit-image, .recruit-message-image {
		height: 900px;
	}
}

/*1600px以下*/
@media screen and (max-width: 1600px){
	.feature-left-text {
		display: none;
	}
	
	.second-mainvisual-section {
		background-position: calc(50% + 360px) center;
	}
}

/*1500px以下*/
@media screen and (max-width: 1500px){
	.nishiogi-header {
		padding: 15px 30px;
	}
	
	.mainvisual-catch {
		left: 50px;
	}
	
	.mainvisual-scroll {
		left: 50px;
	}
	
	.service-scroll {
		left: 15px;
	}
	
	.service-scroll-line {
		height: 50px;
	}
	
	.second-mainvisual-catch {
        left: 50px;
    }
}

/*1400px以下*/
@media screen and (max-width: 1400px){
	.mainvisual-scroll {
		left: 10px;
	}
	
	.service-scroll {
		left: -12px;
	}
	
	.service-scroll-text {
		font-size: 30px;
	}
}

/*1300px以下*/
@media screen and (max-width: 1300px){
	.mainvisual-slide {
		background-size: cover;
		background-position: center center;
	}
	
	.mainvisual-sustainable {
		font-size: clamp(40px, 12vw, 130px);
		text-align: right;
	}
	
	.service-scroll-text {
		margin-top: clamp(10px, 1.8vw, 30px);
	}
	
	.service-container {
		max-width: none;
		padding: 0 clamp(10px, 4vw, 30px);
		width: 100%;
		margin: clamp(80px, 30vw, 200px) auto clamp(60px, 25vw, 150px);
	}
	
	.service-detail p {
		font-size: 15px;
	}
	
	.feature-container {
		max-width: none;
		padding: 0 clamp(10px, 4vw, 30px);
		width: 100%;
		margin: clamp(60px, 25vw, 150px) auto;
	}
	
	.merits-section {
		padding: 0 0 clamp(60px, 25vw, 150px);
	}
	
	.merits-carousel-wrap {
		padding: 0 clamp(10px, 4vw, 30px);
	}
	
	.company-container {
		margin: clamp(50px, 16vw, 100px) auto clamp(60px, 25vw, 150px);
	}
	
	.company-section {
		padding: 0 clamp(10px, 4vw, 30px);
	}
	
	.contact-box {
		padding: clamp(60px, 18vw, 150px) clamp(10px, 4vw, 30px);
	}
	
	.contact-section {
		padding: clamp(100px, 36vw, 200px) 0 0;
	}
	
	.nishiogi-footer {
        padding: clamp(60px, 18vw, 150px) clamp(10px, 4vw, 30px);
    }
	
	.nishiogi-copyright {
		margin: clamp(40px, 10vw, 130px) auto 0;
	}
	
	.philosophy-message {
		padding: clamp(60px, 25vw, 150px) clamp(10px, 4vw, 30px);
	}
	
	.mission-contents {
		padding: clamp(60px, 25vw, 150px) clamp(10px, 4vw, 30px);
	}
	
	.vision-contents {
		padding: 0 clamp(10px, 4vw, 30px) clamp(60px, 25vw, 150px);
	}
	
	.sdgs-container {
		padding: clamp(60px, 25vw, 150px) clamp(10px, 4vw, 30px);
	}
	
	.csr-container {
		padding: clamp(60px, 25vw, 150px) clamp(10px, 4vw, 30px);
	}
	
	.nishiogi-footer-navi {
		padding: clamp(60px, 25vw, 150px) clamp(10px, 4vw, 30px) 0;
	}
	
	.nishiogi-footer-navi-box {
		display: block;
	}
	
	.ceo-message-section {
		padding: clamp(60px, 25vw, 150px) clamp(10px, 4vw, 30px);
	}
	
	.company-info-section {
		padding: clamp(60px, 25vw, 150px) clamp(10px, 4vw, 30px);
	}
	
	.story-info-section {
		padding: 0 clamp(10px, 4vw, 30px) clamp(60px, 25vw, 150px);
	}
	
	.recruit-message-contents, .application-section, .join-us-contents, .enthusiasm-contents {
		padding: clamp(60px, 25vw, 150px) clamp(10px, 4vw, 30px);
	}
	
	.application-process-contents {
		padding: 0 clamp(10px, 4vw, 30px);
	}
	
	.application-process {
		padding: 0 clamp(10px, 4vw, 30px) 0;
	}
	
	.results-section {
		margin: 0 auto clamp(60px, 25vw, 150px);
		padding: 0 clamp(10px, 4vw, 30px) 0;
	}	
	
}

/*1200px以下*/
@media screen and (max-width: 1200px){
	.catch-line1 {
		font-size: clamp(18px, 6.0vw, 46px);
	}
	
	.catch-line2 {
		font-size: clamp(24px, 12vw, 88px);
	}
	
	.service-header-left h2, .feature-header h2 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.service-header-left p, .feature-header p, .merits-header-left p {
		font-size: clamp(12px, 3.2vw, 20px);
	}
	
	.service-header {
		display: block;
		margin-bottom: 3em;
	}
	
	.service-header-left {
		width: 100%;
	}
	
	.service-detail {
		padding: 1.2em;
	}
	
	.service-detail h3 {
		font-size: clamp(16px, 5vw, 28px);
		margin-bottom: clamp(10px, 3vw, 20px);
	}
	
	.service-header-right {
		justify-content: flex-start;
		margin-top: 3em;
		width: auto;
	}
	
	.service-items {
		display: block;
	}
	
	.service-item {
		width: 100%;
		margin-bottom: 1em;
	}
	
	.service-detail p {
        font-size: clamp(10px, 3vw, 15px);
    }
	
	.service-button, .feature-bottom-button a, .merits-bottom-button a, .recruit-button a, .contact-bottom-button a {
		width: clamp(200px, 68vw, 380px);
		height: clamp(40px, 15vw, 80px);
		font-size: clamp(12px, 3.4vw, 18px);
	}
	
	.service-button img, .feature-bottom-button a img, .merits-bottom-button a img, .recruit-button img, .contact-bottom-button img {
		width: clamp(16px, 5vw, 28px);
		height: clamp(16px, 5vw, 28px);
	}
	
	.feature-header {
		margin-bottom: 3em;
	}
	
	.feature-box {
		display: block;
		margin-bottom: 3em;
	}
	
	.feature-box1 .feature-box-left, .feature-box3 .feature-box-left, .feature-box2 .feature-box-right {
		width: 100%;
		height: auto;
	}
	
	.feature-box2 {
		display: flex;
		flex-direction: column-reverse;
	}
	
	.feature-box-left img, .feature-box-right img {
		width: 100%;
		height: auto;
	}
	
	.feature-box1 .feature-box-right, .feature-box3 .feature-box-right {
		padding-left: 0;
	}
	
	.feature-title-box {
		margin: 1em 0 1.2em;
	}
	
	.feature-title-main {
		font-size: clamp(18px, 8vw, 50px);
		padding-right: 0.2em;
	}
	
	.feature-title-num {
		font-size: clamp(40px, 18vw, 120px);
		margin-left: -0.2em;
	}
	
	.feature-box-title {
		font-size: clamp(16px, 4vw, 28px);
	}
	
	.feature-box-title span {
		padding: 0 5px 2px;
	}
	
	.feature-box-text {
		font-size: clamp(10px, 3vw, 16px);
		padding: 0 5px;
	}
	
	.merits-big-text {
        font-size: clamp(60px, 26vw, 330px);
        margin: clamp(10px, 4vw, 50px) 0 clamp(20px, 6vw, 100px);
    }
	
	.merits-header-left h2 {
		font-size: clamp(18px, 6.8vw, 52px);
		margin-bottom: 1em;
	}
	
	.merits-header-container {
		margin: 0 auto 3em;
		display: block;
		padding: 0 clamp(10px, 4vw, 30px);
	}
	
	.merits-header-left {
		max-width: 100%;
		margin-bottom: 2em;
	}
	
	.merits-header-right {
		gap: clamp(10px, 4vw, 30px);
	}
	
	.merits-slide-btn img {
		width: clamp(30px, 9vw, 50px);
		height: clamp(30px, 9vw, 50px);
	}
	
	.merits-bottom-button {
		margin: clamp(30px, 9vw, 60px) auto 0;
		padding: 0 clamp(10px, 4vw, 30px);
	}
	
	.merits-item-number {
		font-size: clamp(18px, 10vw, 60px);
	}
	
	.merits-item-title {
		font-size: clamp(16px, 6vw, 38px);
	}
	
	.merits-item-text {
		font-size: clamp(10px, 3vw, 16px);
	}
	
	.company-big-text {
		font-size: clamp(60px, 20vw, 160px);
	}
	
	.company-box-left h2 {
		font-size: clamp(18px, 6.8vw, 52px);
		margin: 1em 0;
	}
	
	.company-box-left p {
		font-size: clamp(12px, 3.2vw, 20px);
		margin-bottom: 3em;
	}
	
	.company-navi a {
		font-size: clamp(12px, 3.2vw, 18px);
	}
	
	.company-navi img {
		width: clamp(12px, 4.6vw, 24px);
		height: clamp(12px, 4.6vw, 24px);
	}
	
	.company-box-right img {
		margin-left: -70px;
	}
	
	.recruit-careers h2 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.recruit-careers p {
		font-size: clamp(12px, 3.2vw, 20px);
		margin: 1.5em 0;
	}
	
	.recruit-careers {
		margin: -4em clamp(10px, 4vw, 30px);
		padding: 2em clamp(10px, 4vw, 30px);
	}
	
	.contact-box h2 {
		font-size: clamp(18px, 6.8vw, 52px);
		margin-bottom: 1em;
	}
	
	.contact-box h3 {
		font-size: clamp(16px, 4vw, 28px);
		margin-bottom: 1em;
	}
	
	.contact-box p {
		font-size: clamp(12px, 3.2vw, 20px);
		margin-bottom: 2em;
	}
	
	.contact-inner {
		background-position: calc(100% - -150px) center;
		background-size: cover;
	}
	
	.contact-area {
		width: clamp(200px, 68vw, 380px);
	}
	
	.contact-tel span {
		font-size: clamp(16px, 5.4vw, 30px);
	}
	
	.contact-tel p {
		font-size: clamp(8px, 2.4vw, 14px);
		margin: 0;
	}
	
	.contact-phone img {
		width: clamp(20px, 6.6vw, 40px);
		height: clamp(20px, 6.6vw, 40px);
	}
	
	.contact-phone {
		margin-bottom: 1.5em;
	}
	
	.hamburger-icon {
		width: clamp(20px, 6.6vw, 40px);
	}
	
	.preloader-logo-wrap img {
		width: 90%;
	}
	
	.footer-title {
		font-size: clamp(14px, 3.8vw, 17px) !important;
	}
	
	.footer-left-box p {
		font-size: clamp(10px, 3vw, 15px);
	}
	
	.footer-menu a {
		font-size: clamp(10px, 3vw, 15px);
	}
	
	.nishiogi-copyright {
		font-size: clamp(10px, 3vw, 14px);
	}
	
	.second-catch-line1 {
        font-size: clamp(60px, 16vw, 160px);
    }
	
	.second-catch-line2 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.philosophy-message h2 {
		font-size: clamp(18px, 6.8vw, 52px);
		margin-bottom: 1em;
	}
	
	.philosophy-message p {
		font-size: clamp(12px, 3.2vw, 20px);
	}
	
	.mission-contents h2, .vision-contents h2 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.mission-contents h3, .vision-contents h3 {
		font-size: clamp(16px, 6vw, 38px);
	}
	
	.mission-contents p, .vision-contents p {
		font-size: clamp(12px, 3.2vw, 20px);
	}
	
	.sdgs-contents {
		padding: 1.3em;
	}
	
	.sdgs-contents hr {
		margin: 1.8em 0;
	}
	
	.sdgs-contents h2 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.sdgs-contents h3 {
		font-size: clamp(16px, 6vw, 38px);
	}
	
	.sdgs-contents p {
		font-size: clamp(12px, 3.2vw, 20px);
	}
	
	.esg-box {
		padding: 1.5em 1.5em 8em;
	}
	
	.esg-box h4 {
		font-size: clamp(16px, 6vw, 38px);
	}
	
	.itemization img {
		width: clamp(12px, 3.6vw, 22px);
	}
	
	.english-text {
		font-size: clamp(50px, 13vw, 160px);
	}
	
	.esg-box {
		padding: 1.5em 1.5em 3em;
	}
	
	.csr-container h2 {
		font-size: clamp(60px, 16vw, 160px);
	}
	
	.csr-container h3 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.csr-container h4 {
		font-size: clamp(16px, 6vw, 38px);
	}
	
	.csr-container p {
		font-size: clamp(12px, 3.2vw, 20px);
	}
	
	.nishiogi-footer-navi-bg img {
		max-width: 200%;
	}
	
	.nishiogi-footer-navi-menu span, .nishiogi-footer-navi-menu a {
		width: 100%;
		padding: 1em 0;
	}
	
	.ceo-header {
		height: clamp(100px, 34vw, 443px);
	}
	
	.ceo-header h2 {
        font-size: clamp(18px, 5.2vw, 52px);
    }
	
	.ceo-message p {
		font-size: clamp(12px, 3.2vw, 20px);
	}
	
	.ceo-message {
		padding: 2em;
	}
	
	.company-table th, .company-table td {
		font-size: clamp(12px, 3.2vw, 20px);
	}
	
	.story-item, .story-item dd strong {
		font-size: clamp(12px, 3.2vw, 20px);
	}
	
	.story-item dd p {
		font-size: clamp(10px, 2.8vw, 18px);
	}
	
	.mobile-menu-list li a {
		font-size: clamp(12px, 3.6vw, 20px);
	}
	
	.nishiogi-footer-navi h2 {
		font-size: clamp(18px, 6.8vw, 52px);
		margin: 0 0 0.6em;
	}
	
	.company-info-header h2, .story-info-header h2 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.page-id-18 .second-catch-line1 {
		font-size: clamp(60px, 16vw, 160px);
	}
	
	.page-id-18 .second-catch-line2 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.recruit-message-contents h2, .application-header h2, .enthusiasm-contents h2, .application-process-contents h2 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.recruit-message-contents p, .enthusiasm-contents p, .application-process-contents p {
		font-size: clamp(12px, 3.6vw, 20px);
	}
	
	.application-table th, .application-table td, .application-process-table th, .application-process-table td {
		font-size: clamp(12px, 3.6vw, 20px);
	}
	
	.application-table th {
		width: 25%;
	}
	
	.application-process-table th {
		width: 30%;
	}
	
	.join-us-message h2 {
		font-size: clamp(60px, 36vw, 300px);
	}
	
	.join-us-message h3 {
		font-size: clamp(18px, 6.8vw, 52px);
	}
	
	.recruit-image {
		height: 420px;
	}
	
	.recruit-message-image {
		height: 420px;
	}
	
}

/*1100px以下*/
@media screen and (max-width: 1100px){
	.sp-only2 {
		display: block;
	}
	
	.header-nav {
		display: none;
	}
	
	.header-nav {
		display: none !important;
	}
	
	.header-hamburger {
		display: block; 
		margin-left: auto;
		z-index: 10000;
		line-height: 1;
	}
	
}

/*1023px以下*/
@media screen and (max-width: 1023px){
	.company-box-right img {
		width: 700px;
		padding-top: 90px;
	}
	
	.contact-inner {
        background-position: calc(100% - -230px) center;
    }
	
	.recruit-image, .recruit-message-image {
        height: clamp(100px, 50vw, 420px);
    }
	
}

/*834px以下*/
@media screen and (max-width: 834px){
	.pc-only {
		display: none;
	}

	.sp-only {
		display: block;
	}

	.pc-image {
		display: none !important;
	}

	.sp-image {
		display: block !important;
	}
	
	.preloader-logo-wrap img {
		width: 80%;
	}
		
	.nishiogi-header {
        padding: 10px 15px;
    }
	
	.mainvisual-section {
		margin-top: -72px;
	}
	
	.mainvisual-catch {
        left: 25px;
    }
	
	.mainvisual-slide {
        background-position: calc(50% + 100px) center;
    }
	
	.indicator {
		width: 8px;
		height: 8px;
	}
	
	.service-scroll-text {
        font-size: 20px;
    }
	
	.service-scroll {
        left: 1px;
    }
	
	.merits-carousel {
		gap: 30px;
	}
	
	.merits-item {
		width: 500px;
	}
	
	.merits-item-inner {
		padding: 1.4em 1.8em 1.8em;
	}
	
	.merits-item-header {
		margin-bottom: 0.6em;
		gap: 0.4em;
	}
	
	.company-box-right img {
        display: none;
    }
	
	.company-box-left {
		width: 100%;
	}
	
	.company-navi {
		width: 100%;
	}
	
	.recruit-image {
		overflow: hidden;
		display: flex;
		justify-content: center;
	}
	
	.recruit-image img {
		max-width: 140%;
	}
	
	.contact-inner {
		background-position: calc(50% + 90px) center;
		position: relative;
	}
	
	.contact-inner::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
	}
	
	.contact-box { 
		z-index: 2;
		position: relative;
	}
	
	.nishiogi-footer-inner {
		display: block;
	}
	
	.footer-menu-box {
		display: block;
	}
	
	.footer-left-box {
		margin-bottom: 2em;
	}
	
	.nishiogi-copyright button {
		display: none;
	}
	
	.second-mainvisual-catch {
        left: 25px;
    }
	
	.second-mainvisual-section {
        height: clamp(300px, 150vw, 730px);
        background-size: auto clamp(300px, 150vw, 730px);
        background-position: calc(50% + clamp(100px, 35vw, 360px)) center;
    }
	
	.second-catch-line2 {
        margin: 0.5em 0 0;
    }
	
	.nishiogi-footer-navi-bg img {
		max-width: 200%;
		width: 200%;
	}
	
	.ceo-header h2 {
        top: 0;
        transform: none;
    }
	
	.recruit-page-bg {
		height: clamp(300px, 110vw, 600px) !important;
	}
	
	.recruit-message-image {
		display: flex;
		justify-content: center;
	}
	
	.recruit-message-image img {
		max-width: 160%;
	}

}

/*480px以下*/
@media screen and (max-width: 480px){
	.preloader-logo-wrap img {
		width: 70%;
	}
	
	.header-logo-img {
		width: 120px;
		height: auto;
		display: block;
	}
	
	.mainvisual-section {
        margin-top: -56px;
    }
	
	.service-scroll-line {
        height: 30px;
    }
	
	.merits-carousel {
		gap: 20px;
	}
	
	.merits-item {
		width: 340px;
	}
	
	.company-navi {
		width: 100%;
	}
	
	.contact-inner {
        background-position: calc(50% + 60px) center;
    }
}