@charset "UTF-8";
/* ========================================================================
   index.css
   - TOPページ専用スタイル
   - mv / company / news / service / works / faq
   ======================================================================== */

/* ============================================================
   mv（ファーストビュー）
   - 高さ100vh
   - 背景画像（仮：グレー）
   - "nousapo" 大型テキストが背景に透ける表現
   - 右下に3つのボタン
   ============================================================ */

.mv {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	background-color: #999;
	background-image: url("/img/index/bg_mv.jpg");
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

.mv__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0,0,0,.10);
	z-index: 1;
}

.mv__title {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 75%;
	max-width: 1000px;
	opacity: .5;
	pointer-events: none;
}
.mv__title img {
	display: block;
	width: 100%;
	height: auto;
}

/* ファーストビュー右下の3ボタン */
.mv__btns {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	z-index: 3;
}

.mv__btn {
	width: 255px;
	height: 77px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 31px;
	font-family: var(--font-base);
	font-size: 18px;
	font-weight: 700;
	transition: .25s;
	color: #FFF;
}
/* ボタン間マージン10px */
.mv__btn + .mv__btn {
	margin-left: 10px;
}
/* テキスト後ろの丸（35px）＋中の▶。色は各バリアントで個別指定 */
.mv__btn::after {
	content: "\25B6"; /* ▶ */
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	font-size: 16.5px;
	line-height: 1;
	padding-left: 1px;
	transition: .25s;
}

/* === 緑ボタン（introduction）：bg緑/文字白、丸=白/▶=緑。ホバー：bg白/文字緑、丸=緑/▶=白 === */
.mv__btn--introduction {
	background-color: var(--color-corp);
	color: #FFF;
}
.mv__btn--introduction::after {
	background-color: #FFF;
	color: var(--color-corp);
}
.mv__btn--introduction:hover {
	background-color: #FFF;
	color: #000;
}
.mv__btn--introduction:hover::after {
	background-color: var(--color-corp);
	color: #FFF;
}

/* === グレーボタン（download）：bgグレー/文字黒、丸=白/▶=黒。ホバー：bg白/文字緑、丸=緑/▶=白 === */
.mv__btn--download {
	background-color: var(--color-accent);
	color: #000;
}
.mv__btn--download::after {
	background-color: #FFF;
	color: #000;
}
.mv__btn--download:hover {
	background-color: #FFF;
	color: #000;
}
.mv__btn--download:hover::after {
	background-color: var(--color-corp);
	color: #FFF;
}

/* === 青ボタン（contact）：bg青/文字白、丸=緑/▶=白。ホバー：bg白/文字緑、丸=緑/▶=白 === */
.mv__btn--contact {
	background-color: var(--color-cta);
	color: #FFF;
}
.mv__btn--contact::after {
	background-color: var(--color-corp);
	color: #FFF;
}
.mv__btn--contact:hover {
	background-color: #FFF;
	color: #000;
}
.mv__btn--contact:hover::after {
	background-color: var(--color-corp);
	color: #FFF;
}

@media screen and (max-width: 1199px){
	.mv__btn {
		width: 200px;
		height: 70px;
		font-size: 14px;
		gap: 10px;
	}
	.mv__btn::after {
		width: 28px;
		height: 28px;
		font-size: 9px;
	}
}
@media screen and (max-width: 959px){
	.mv__btn {
		width: 160px;
		height: 60px;
		font-size: 13px;
	}
}
@media screen and (max-width: 767px){
	.mv {
		height: auto;
		min-height: 0;
		aspect-ratio: 1 / 1; /* 1:1 */
	}
	/* 3ボタンは画面下端にfixedで追従。CTA接近時にフェード */
	.mv__btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 8500;
		transition: opacity .3s, transform .3s;
	}
	body.is-cta-near .mv__btns {
		opacity: 0;
		pointer-events: none;
		transform: translateY(20px);
	}
	.mv__btn {
		width: calc(100% / 3);
		height: 50px; /* -10px */
		font-size: 16px;
		flex-direction: row;
		gap: 6px;
	}
	.mv__btn + .mv__btn {
		margin-left: 0;
	}
	/* ●▶ ボタンを 70% に縮小 (35*0.7=24.5) */
	.mv__btn::after {
		width: 18px;
		height: 18px;
		font-size: 10px; /* 16.5*0.7 */
	}
}

/* ============================================================
   thoughts（小見出し共通：→ Our thoughts のような）
   ============================================================ */

.thoughts {
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin-bottom: 60px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.thoughts::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 4px;
	background-color: #333;
	flex-shrink: 0;
}
@media screen and (max-width: 767px){
	.thoughts {
		margin-bottom: 25px; /* 半分 */
	}
}

/* ============================================================
   company（会社について）
   - 背景に大型 NOUSAPO ロゴ（ブルーグレー）が右に見切れる形
   ============================================================ */

.company {
	position: relative;
	overflow: hidden;
}

/* 背景画像：横幅100%、アスペクト維持、縦中央 */
.company__bg {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.company__inner {
	position: relative;
	z-index: 1;
}

/* 黒いロゴ：幅436px、上下70pxマージン */
.company__logo {
	display: block;
	width: 436px;
	max-width: 100%;
	margin: 70px auto;
}

/* 説明文：最大690px、中央揃え、line-height 2.4 */
.company__txt {
	font-size: 16px;
	line-height: 2.4;
	max-width: 690px;
	margin: 0 auto 50px;
	text-align: left;
}

/* btn：セクション中央揃え */
.company__btn {
	display: flex;
	margin: 0 auto;
}

@media screen and (max-width: 767px){
	.company__logo {
		width: 80%;
		margin: 50px auto;
	}
	.company__txt {
		font-size: 14px;
		line-height: 2.2;
	}
}

/* ============================================================
   news（NEWS / TOPICS）
   ============================================================ */

.news__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 55px;
}

.news__head-left .h2 {
	margin-bottom: 0;
}

.news__head-right a,
.faq__head-right a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-base);
	font-size: 18px;
	color: #333;
	font-weight: 700;
}
.news__head-right a::after,
.faq__head-right a::after {
	content: "\25B6"; /* ▶ */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #333;
	color: #FFF;
	font-size: 12.6px;
	padding-left: 2px;
}

.news__list {
	/* 1つ目には上線を入れない（各itemのbottomで罫線を作る） */
}

.news__item {
	display: flex;
	align-items: center;
	padding: 35px 60px;
	border-bottom: 1px solid #333;
	gap: 40px;
}

.news__item-date {
	width: 110px;
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	flex-shrink: 0;
}

.news__item-cat {
	display: inline-block;
	min-width: 130px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #FFF;
	background-color: var(--color-corp);
	padding: 6px 14px;
	border-radius: 999px;
	flex-shrink: 0;
}

.news__item-title {
	flex: 1;
	font-size: 16px;
	color: var(--color-text);
}

@media screen and (max-width: 767px){
	/* 「一覧はこちら」「詳細はこちら」 SP仕様：右寄せ維持・14px・●▶を50%に */
	.news__head {
		margin-bottom: 30px;
	}
	.news__head,
	.faq__head {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 10px;
	}
	.news__head-right a,
	.faq__head-right a {
		font-size: 14px;
		gap: 8px;
	}
	.news__head-right a::after,
	.faq__head-right a::after {
		width: 18px; /* 36*0.5 */
		height: 18px;
		font-size: 7.2px;
		padding-left: 1px;
	}
	.news__item {
		flex-wrap: wrap;
		padding: 16px 4px;
		gap: 12px;
	}
	.news__item-date {
		width: auto;
		font-size: 14px;
	}
	.news__item-cat {
		min-width: 100px;
		font-size: 14px;
		padding: 4px 10px;
	}
	.news__item-title {
		flex: 1 0 100%;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ============================================================
   service（支援内容）
   - 左にコピー、右にダミー画像（グレー＋グリーンのボックス）
   ============================================================ */

.service {
	border-bottom: 1px solid #999;
	position: relative;
}
/* 左半分(50%)に #d9e1ec の帯（背景） */
.service::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #d9e1ec;
	z-index: 0;
}
.service__wrapper {
	position: relative;
	z-index: 1;
}
.service__inner {
	position: relative;
	z-index: 1;
}

.service__content {
	width: 50%;
	position: relative;
	z-index: 10;
}

.service__txt {
	font-size: 16px;
	line-height: 2.2;
	margin-bottom: 50px;
	width: 90%;
}

.service__btn {
	display: flex;
	margin: 50px auto 0 0;
}

/* placeholder：wrapper_smallに対し幅62.5%、float right、テキストは下に回り込む */
.service__placeholder {
	position: absolute;
	right: 0;
	top: 0;
	width: 58%;
	aspect-ratio: 10 / 7.5;
	z-index: 0;
}
/* グレー：幅75%、アスペクト10:8.66。z-index 上(2) */
.service__placeholder-gray {
	position: absolute;
	left: 0;
	top: 0;
	width: 75%;
	aspect-ratio: 10 / 8.66;
	background-color: #c8ccd1;
	background-image: url("/img/index/img_service.jpg");
	background-size: cover;
	background-position: center;
	z-index: 2;
}
/* グリーン：幅43%、アスペクト1:1。グレーの背面(z-index 1)。あしらい */
.service__placeholder-green {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 43%;
	aspect-ratio: 1 / 1;
	background-color: var(--color-corp);
	z-index: 1;
}

/* SP系：service__content と __placeholder を縦積みに */
@media screen and (max-width: 959px){
	.service::before {
		width: 100%;
	}
	.service__inner {
		display: block;
	}
	.service__content {
		width: 100%;
	}
	.service__txt {
		width: 100%;
	}
	.service__btn {
		margin: 30px auto 0;
	}
	/* placeholder：通常フローに戻して content の下に */
	.service__placeholder {
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
		margin-top: 50px;
	}
}

@media screen and (max-width: 767px){
	.service__txt {
		font-size: 14px;
		line-height: 2;
		margin-bottom: 30px;
	}
	.service__btn {
		margin-bottom: 10px;
	}
	.service__placeholder {
		margin-top: 30px;
	}
}

/* ============================================================
   works（支援事例 / WORKS）
   - slick スライドショー
   - SP時：中央1件＋右に次の案件少しだけ見える
   ============================================================ */

.works {
	background-color: #FFF;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid #999;
}
/* 背景画像（仮グレー）：幅58.5%、アスペクト10:7.12、左上基準 */
.works::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 58.5%;
	aspect-ratio: 10 / 7.12;
	background-color: #d6d6d6;
	background-image: url("/img/index/bg_works.jpg");
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.works > .works__inner {
	position: relative;
	z-index: 1;
}

/* works セクションは背景に写真が入るため、見出し・装飾は全て白 */
.works .h2,
.works .h2__en,
.works .h2__ja,
.works .thoughts {
	color: #FFF;
}
.works .thoughts::before {
	background-color: #FFF;
}

.works__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 90px;
	position: relative;
}

.works__head-left .h2 {
	margin-bottom: 0;
}

.works__nav {
	display: flex;
	gap: 12px;
	transform: translateY(50px);
}

.works__nav-arrow {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid #333;
	background-color: #FFF;
	color: #333;
	cursor: pointer;
	transition: .2s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	padding: 0;
}
.works__nav-arrow:hover {
	background-color: #333;
	color: #FFF;
}
.works__nav-prev::before {
	content: "\25C0"; /* ◀ */
}
.works__nav-next::before {
	content: "\25B6"; /* ▶ */
}

.works__slider-area {
	position: relative;
	margin-bottom: 50px;
	/* スライダー左端は wrapper_small 左端、右端はブラウザ右端まで延伸 */
	margin-right: calc(-1 * (100vw - var(--sidebar-width) - 960px) / 2);
	overflow: hidden;          /* 左端を超えた1枚目を非表示 */
}
@media screen and (max-width: 1010px){
	.works__slider-area {
		margin-right: calc(-1 * ((100vw - var(--sidebar-width)) * 0.025));
	}
}
.works__slider {
	margin: 0;
	display: flex;
	will-change: transform;
}

/* スライド間隔5px：itemの padding-right で作る。幅はJSで設定 */
.works__item {
	flex-shrink: 0;
	box-sizing: border-box;
}


.works__item-thumb {
	width: 100%;
	aspect-ratio: 10 / 7;
	background-color: #c8ccd1;
	margin-bottom: 16px;
}

.works__item-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-corp);
	line-height: 1.5;
	margin-bottom: 15px;
	padding-right: 50px;
}

.works__item-desc {
	font-size: 16px;
	color: #333;
	line-height: 1.7;
	margin-bottom: 12px;
	padding-right: 50px;
}

.works__item-cat {
	display: inline-block;
	font-size: 16px;
	color: var(--color-corp);
}

.works__btn {
	display: flex;
	margin: 30px auto 0;
}

@media screen and (max-width: 767px){
	/* 背景画像のグレーボックス：幅80%、アスペクト維持 */
	.works::before {
		aspect-ratio: 10/10;
		width: 75%;
	}
	/* h2 → スライダー間 マージンを30pxに */
	.works__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 0px;
	}
	.works__nav {
		align-self: flex-end;
		transform: translateY(-10px);
		gap: 5px;
		
	}
	/* next/prev サイズ50% (56→28) */
	.works__nav-arrow {
		width: 28px;
		height: 28px;
		font-size: 14px;
		border-width: 1px;
	}
	/* スライダー：中央1件＋右に20%チラ見せ → slidesToShow 1.2 (JS側で対応済) */
	/* サムネはアスペクト10:7維持（PCと同じ） */
	.works__item-thumb {
		aspect-ratio: 10 / 7;
		height: auto;
	}
	
	.works__item-cat {
		font-size: 14px;
	}
	.works__item-desc {
		font-size: 14px;
	}
	
}

/* ============================================================
   faq
   ============================================================ */

.faq.container {
	padding-bottom: 120px;
}

.faq__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 60px;
}

.faq__head-left .h2 {
	margin-bottom: 0;
}

.faq__list {
	margin-bottom: 50px;
}

.faq__item {
	border: 1.5px solid var(--color-corp);
	border-radius: 35px;
	margin-bottom: 50px;
	overflow: hidden;
}

.faq__item-q {
	padding: 18px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	gap: 20px;
}

.faq__item-q-left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
}

.faq__item-q-mark {
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-corp);
	flex-shrink: 0;
	width: 24px;
}

.faq__item-q-txt {
	font-size: 16px;
	color: var(--color-corp);
	font-weight: 500;
	line-height: 1.6;
}

/* アコーディオンボタン：「＞」の回転で表現。
   2本の16pxの線が95度の鈍角を成す。閉時=∨(下向き)、開時=∧(上向き)。 */
.faq__item-q-toggle {
	width: 24px;
	height: 12px;
	position: relative;
	flex-shrink: 0;
	transition: transform .25s;
}
.faq__item-q-toggle::before,
.faq__item-q-toggle::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 1.5px;
	background-color: var(--color-corp);
	top: 50%;
	transform-origin: 0 50%;
}
/* 右腕（vertex から右上へ）：rotate(-42.5deg) */
.faq__item-q-toggle::before {
	left: 50%;
	transform: translate(0, -50%) rotate(-42.5deg);
}
/* 左腕（vertex から左上へ）：rotate(180+42.5)deg、原点を右にして反転 */
.faq__item-q-toggle::after {
	left: 50%;
	transform: translate(0, -50%) rotate(-137.5deg);
	transform-origin: 0 50%;
}
/* 開いた時：トグル全体を180度回転して∧に */
.faq__item.open .faq__item-q-toggle {
	transform: rotate(180deg);
}

.faq__item-a {
	max-height: 0;
	overflow: hidden;
	padding: 0 30px;
	border-top: 1px solid transparent;
	transition: max-height .35s ease, padding .35s ease, border-top-color .25s;
}
.faq__item.open .faq__item-a {
	max-height: 500px;
	padding: 18px 30px;
	border-top-color: var(--color-corp);
}

.faq__item-a-inner {
	display: flex;
	gap: 16px;
}
.faq__item-a-mark {
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-corp);
	flex-shrink: 0;
	width: 24px;
}
.faq__item-a-txt {
	font-size: 16px;
	color: var(--color-corp);
	line-height: 1.8;
	flex: 1;
}

@media screen and (max-width: 767px){
	.faq.container {
		padding-bottom: 30px; /* セクション下70px */
	}
	.faq__head {
		/* news と同じ横並びレイアウトを維持 */
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 30px;
	}
	.faq__item {
		margin-bottom: 20px; /* 詰める */
	}
	.faq__item-q {
		padding: 14px 20px;
	}
	.faq__item-q-txt {
		font-size: 14px;
	}
	/* アコーディオン矢印：60% (24x12 → 14.4x7.2) */
	.faq__item-q-toggle {
		width: 14.4px;
		height: 7.2px;
	}
	.faq__item-q-toggle::before,
	.faq__item-q-toggle::after {
		width: 9.6px;
	}
	.faq__item-a {
		padding: 0 20px;
	}
	.faq__item.open .faq__item-a {
		padding: 14px 20px;
	}
	.faq__item-a-txt {
		font-size: 14px;
	}
}


/* === company SP: 下マージン（news との間隔）を半分に === */
@media screen and (max-width: 767px){
	.company.container {
		padding-bottom: 40px;
	}
}


/* === 自動生成: PC→SPフォントマッピング統一 === */
@media screen and (max-width: 767px){
	/* ============================================================
   thoughts（小見出し共通：→ Our thoughts のような）
   ============================================================ */

.thoughts {
		font-size: 14px;
	}
	/* 説明文：最大690px、中央揃え、line-height 2.4 */
.company__txt {
		font-size: 14px;
	}
	.news__head-right a,
.faq__head-right a {
		font-size: 18px;
	}
	.works__item-title {
		font-size: 16px;
	}
	.faq__item-q-mark {
		font-size: 16px;
	}
	.faq__item-a-mark {
		font-size: 16px;
	}
}