@charset "utf-8";

img{
	max-width: 100%;
	height: auto;
}

/******************************
/* First View
******************************/
.main-container{
	position: relative;
}
#main_sd{
	width: 100%;
	height: 100vh;
	position: relative;
	min-height: 500px;
	top: 0;
	left: 0;
	z-index: 2;
}
/* 中央寄せにtransformを使わない：transformを持つ祖先の中では
   子孫のposition:fixedがビューポート基準にならず、mv_txt1の固定が破綻するため */
.mv_txt_block{
	width: 92.307%;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	bottom: 50px;
	color: #fff;
}
.mv_txt{
	width: 95.1428%;
	max-width: 333px;
	margin-bottom: 3.846rem;
}
.mv_txt1{
	font-size: 3.928rem;
	line-height: 1;
	letter-spacing: -0.03em;
}
.mv_txt2{
	font-size: 0.6428rem;
	letter-spacing: 0.05em;
	line-height: 1.75;
	opacity: 0.8;
}
/* 位置の基準は#main_sd（.mv_txt_blockの外に置いているため）。
   right値は.mv_txt_blockの左右余白と揃えて、見た目の右端を他のテキストに合わせる */
.mv_txt3{
	font-size: 1.607rem;/* 22.5px */
	color: #fff;
	display: block;
	white-space: nowrap;
	/* 約物（、。）が持つ左右の余白を詰める。これがないと文末の「。」のぶん右端が空く */
	font-feature-settings: "palt" 1;
	transform: scaleX(0.9);
	transform-origin: right center;
}
@media screen and (min-width: 768px) {
	.mv_txt1{
		font-size: 5.714rem;/* 80px */
	}
	.mv_txt2{
		font-size: 0.714rem;/* 10px */
	}
	.mv_txt3{
		font-size: 1.607rem;/* 22.5px */
	}
}
@media screen and (min-width: 992px) {
	.mv_txt_block{
		width: 90%;
		height: 100%;
		top: 0;
		bottom: unset;
	}
	.mv_txt1 {
		position: absolute;
		left: 0;
		bottom: 1.1428rem;
	}
	.mv_txt2{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.mv_txt3{
		position: absolute;
		right: 5%;/* .mv_txt_block（width:90%・左右中央）の右端に合わせる */
		bottom: 1.428rem;
	}
}
@media screen and (min-width: 1200px) {
	.mv_txt1{
		font-size: 6.66rem;/* 100px */
		bottom: 1.93rem;
	}
	.mv_txt2{
		font-size: 0.7rem;/* 10.5px */
	}
	.mv_txt3{
		font-size: 1.75rem;/* 26.25px */
		bottom: 2.4rem;
	}
}
@media screen and (min-width: 1400px) {
	.mv_txt1{
		font-size: 8rem;/* 120px */
		bottom: 1.93rem;
	}
	.mv_txt2{
		font-size: 0.733rem;/* 11px */
	}
	.mv_txt3{
		font-size: 2rem;/* 30px */
		bottom: 2.4rem;
	}
}
@media screen and (max-width: 991px) {
	/* #main_sd（高さ100vh）の上下中央に置く */
	.mv_txt3{
		position: absolute;
		right: 3.846%;/* .mv_txt_block（width:92.307%・左右中央）の右端に合わせる */
		top: 44%;/* #main_sdの高さ基準。上下中央より少し上 */
		/* transformは後勝ちで全体が置き換わるため、上下中央寄せのtranslateYと
		   水平比率90%のscaleXを1つにまとめて指定する（片方だけ書くともう片方が消える） */
		transform: translateY(-50%) scaleX(0.9);
	}
}
@media screen and (max-width: 767px) {
	.mv_txt2{
		margin-top: 1.214rem;
	}
}
/* mv_txt1の追従（状態切り替えはtop.jsがクラスで行う）
   is-fixed     … 画面中央に固定
   is-fixed-end … .about_blockの終わりに置いて一緒にスクロール
   left / top の実数値はJSが実測してインラインで指定する */
@media screen and (min-width: 992px) {
	.mv_txt1.is-fixed{
		position: fixed;
		top: 50%;
		/* bottomが残るとtop/bottom両指定になり高さが引き伸ばされるため必ず解除する */
		bottom: auto;
		transform: translateY(-50%);
		z-index: 3;
	}
	.mv_txt1.is-fixed-end{
		position: absolute;
		left: 0;
		bottom: unset;
		z-index: 3;
	}
}
/******************************
/* ABOUT US
******************************/
.about{
	margin-top: 3.285rem;
	padding-bottom: 14.285rem;
}
.about_block{
	color: #fff;
	text-align: right;
}
.about_block .en_tit{
	opacity: 0.6;
	margin-bottom: 4.428rem;
}
.about_block .txt_block{
	font-feature-settings: "palt" 1;
	/* 1.285rem＝18px。極端に狭い端末でだけ画面幅に追従させ、はみ出しを防ぐ */
	font-size: min(1.285rem, 5.2vw);
	line-height: 2;
}
.about_block .txt_block p + p{
	margin-top: 2.57rem;
}
/* スクロールに応じて濃くなる1行（opacityはtop.jsがインラインで指定） */
/* 水平比率90%：Noto Sans JPは幅軸を持たずfont-stretchが効かないためscaleXで縮める */
.about_block .txt_block .line{
	display: block;
	/* scaleXは見た目だけを縮め折り返し判定には効かないため、明示的に折り返しを止める */
	white-space: nowrap;
	transform: scaleX(0.9);
	transform-origin: right center;
	will-change: opacity;
}
@media screen and (min-width: 1200px) {
	.about{
		margin-top: 6.66rem;
		padding-bottom: 14.66rem;
	}
	.about_block .en_tit{
		margin-bottom: 12.4rem;
	}
}
/******************************
/* top-contents
******************************/
.top-contents.bg_white{
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	overflow: hidden;
}
.top-contents{
	padding-bottom: 10.714rem;
}
@media screen and (min-width: 768px) {
	.top-contents.bg_white{
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
	}
}
@media screen and (min-width: 1200px) {
	.top-contents.bg_white{
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}
	.top-contents{
		padding-bottom: 20rem;
	}
}
/******************************
/* MARQUEE
******************************/
/* font-sizeは.marquee側で持つ（下のpadding/marginをemで文字サイズに追従させるため） */
.marquee{
	width: 100%;
	overflow: hidden;
	color: #f0f0f0;
	font-size: 6.4rem;/* 89.6px */
	/* line-height:1で帯を詰めると、はみ出したディセンダ（g/p/y）や
	   アセンダをoverflow:hiddenが切ってしまう。
	   クリップ範囲（padding box）だけ上下に広げ、同量の負マージンで
	   レイアウト上の占有高さは詰めたまま戻す */
	padding: 0 0 0.35em;
	margin: 0 0 -0.35em;
}
/* .f-cgなので水平比率105%。ただしanimationがtransformを上書きするため
   .sq105クラスは効かない。@keyframes側にscaleXを含めて指定する */
.marquee_inner{
	display: flex;
	width: max-content;
	animation: marquee 200s linear infinite;
	transform-origin: left center;
	will-change: transform;
	margin-top: 1.21rem;
}
.marquee_txt{
	white-space: nowrap;
	padding-right: 1em;
	letter-spacing: -0.03em;
	font-size: 6.4rem;/* 89.6px */
	/* Cormorant Garamondは既定のline-height（normal）が大きく、上下に余白が付いて帯が高くなる。
	   1.05はディセンダ（g/p/y）が切れない最小限の値 */
	line-height: 1.05;
}
/* 同じ文言が6個並ぶので、半分（3個ぶん）動いた時点で4〜6個目が1〜3個目の位置に来て継ぎ目なく繋がる。
   scaleXを先に書くと、translateXの%は変形前の幅で計算されたあとに拡大されるため、
   移動量も同じ倍率で伸び、105%のままでも継ぎ目はズレない */
@keyframes marquee{
	from{
		transform: scaleX(1.05) translateX(0);
	}
	to{
		transform: scaleX(1.05) translateX(-50%);
	}
}
@media screen and (min-width: 1200px) {
	.marquee_inner{
		margin-top: 1.9rem;
	}
	.marquee_txt{
		font-size: 9.333rem;/* 140px */
	}
}
@media (prefers-reduced-motion: reduce) {
	.marquee_inner{
		animation: none;
		/* animationを止めると@keyframes側のscaleXも消えるので、ここで水平比率105%を維持する */
		transform: scaleX(1.05);
	}
}
/******************************
/* SERVICE
   下層ページでも使うため、スタイルはcontents.css（全ページ共通）へ移動した。
   マークアップは parts/service.php、追従画像のJSは contents.js。
******************************/
/******************************
/* CASE
******************************/
.case{
	margin-top: 10.714rem;
}
.case_title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.case_title.c-title1{
	margin-bottom: 3.785rem;
}
.case_title.c-title1 h3, .case_title.c-title1 .f-cg{
	margin: 0;
}
/* カードの見た目。スライダー時（.swiper-slide兼用）と1件表示時のどちらにも当てる */
.case .case_item{
	overflow: hidden;
	border-radius: 10px;
	position: relative;
}
.case .case_item::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(240,240,240,0.9);
	z-index: -1;
}
.case .case_item a{
	display: block;
	position: relative;
	padding: 2.071rem 1.714rem 2.28rem;
}
.case .case_item a:hover{
	text-decoration: none;
}
.cace_num{
	background-color: #AF09F1;
	color: #fff;
	position: absolute;
	width: 49px;
	height: 23px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-bottom-left-radius: 10px;
	font-size: 0.714rem;
	top: 0;
	right: 0;
}
.cace_to{
	color: #AF09F1;
	margin-bottom: 2.78rem;
}
/* .sq90（水平比率90%）が付くため、幅は1.111倍で持たせる。
   0.9倍された見た目が.case_item aの幅ぴったりになり、折り返し位置も見た目どおりになる */
.case_item__tit, .case_item__txt{
	color: #000;
	width: 111.111%;/* 100 / 0.9 */
}
.case_item__tit{
	font-size: 1.1428rem;
	line-height: 1.5;
	margin-bottom: 0.928rem;
}
.case_item__tit span{
	border-bottom: 1px solid #000;
}
.case_item__txt{
	font-size: 0.857rem;
	margin-bottom: 0;
}
/* 投稿が1件だけのときはスライダーを組まず、カードを1枚そのまま置く（PHP側で.case-singleを出力） */
.case-single .case_item{
	margin-left: auto;
	margin-right: auto;
}
@media screen and (min-width: 768px) {
	.case-single .case_item{
		max-width: 600px;
	}
}
/* ページネーション。.case-swiperは768px以上で画面幅いっぱいまで広げているため、
   中に入れるとその広げた幅が基準になりコンテナ幅で中央に揃わない。
   .case直下（スライダーの外）に置き、.container_90の幅で中央寄せする。
   Swiper側の .swiper-pagination-bullets.swiper-pagination-horizontal（絶対配置）を
   上書きするため、クラス3つぶんの詳細度で指定する */
.case-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{
	position: relative;
	top: unset;
	bottom: unset;
	left: unset;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 2.5rem;
}
.case-pagination .swiper-pagination-bullet{
	width: 6px;
	height: 6px;
	margin: 0 !important;/* 間隔はgapで持つ。Swiper既定の左右marginを消す */
	background-color: #e7e7e7;
	opacity: 1;
	transition: background-color .3s ease;
}
.case-pagination .swiper-pagination-bullet-active{
	background-color: #AF09F1;
}
.case .vm{
	margin-top: 5.142rem;
}
/* 767px以下は1件ずつ（幅100%＝Swiperの既定）。スライド間の10pxはJS側のspaceBetweenで指定 */
@media screen and (min-width: 768px) {
	/* 中央のスライドをアクティブにし、左右を見切れさせる（JS側 centeredSlides + slidesPerView:'auto'）。
	   --case-slide-w を小さくするほど左右の見切れが増える。
	   親の.container_90（92.307%）から画面幅いっぱいへ広げる。
	   100vwだとスクロールバー幅ぶん横スクロールが出るため、%で割り戻している */
	.case-swiper{
		--case-slide-w: 60%;
		width: 108.3336%;/* 100 / 0.92307 */
		margin-left: -4.1668%;/* (108.3336 - 100) / 2 */
	}
	/* 幅は600pxで頭打ち。全スライドに同じ幅を持たせる（中央に来たスライド＝activeも600pxが上限）。
	   activeだけ幅を変えるとSwiperの位置計算が毎回変わり、切り替えのたびにガタつくため。
	   ただし1764px超では600px固定をやめて34vwで伸ばす。600pxのままだと画面内に4枚入ってしまい、
	   ループに必要なスライド枚数（slidesPerView + loopedSlides）が投稿5件を超えて破綻するため。
	   34vwなら常に3枚見え（＝必要枚数5）に収まる */
	.case-swiper .swiper-slide{
		width: min(var(--case-slide-w), max(600px, 34vw));
	}
}
@media screen and (min-width: 992px) {
	/* .container_90が90%になるぶん、割り戻す値も変わる */
	.case-swiper{
		width: 111.111%;/* 100 / 0.9 */
		margin-left: -5.5555%;/* (111.111 - 100) / 2 */
	}
}
@media screen and (min-width: 1200px) {
	.case{
		margin-top: 15.8rem;
	}
	.case_title.c-title1{
		margin-bottom: 5.66rem;
	}
	.case .case_item a{
		padding: 2.066rem 2.66rem 2.266rem;
	}
	.cace_num{
		width: 70px;
		height: 32px;
		font-size: 1rem;
	}
	.cace_to{
		font-size: 1.066rem;
	}
	.case_item__tit{
		font-size: 1.266rem;
	}
	.case_item__txt{
		font-size: 1rem;
	}
	.case-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{
		margin-top: 4rem;
	}
	.case .vm{
		margin-top: 6.266rem;
	}
}
@media screen and (max-width: 767px) {
	.case_title{
		align-items: flex-start;
	}
	.case_title.c-title1 h3{
		margin-top: 7px !important;
	}
}

/******************************
/* CONTACT
******************************/
.contact{
	margin-top: 14.28rem;
	overflow: hidden;
}
.contact .c-title1{
	margin-bottom: 3.785rem;
}
.contact .vm{
	margin-top: 3.928rem;
}
@media screen and (min-width: 992px) {
	.contact {
		display: flex;
		justify-content: space-between;
	}
	.contact .c-title1{
		margin-bottom: 0;
	}
}
@media screen and (min-width: 1200px) {
	.contact {
		margin-top: 25.6rem;
	}
	.contact .vm{
		margin-top: 5.733rem;
	}
}