@charset "utf-8";

/*==================================================
  FV（.mv）
==================================================*/
.mv{
	width: 100%;
	height: auto;
	position: relative;
	background: #ffffff;
}
.mv_bg{
	width: 100%;
	height: 82.9rem;
	position: absolute;
	top: 0;
	left: 0;
	background-image: var(--mv-bg, url(../img/index/eye02.jpg));
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
/* .mv_bg の暗幕(#192b02 opacity0.808)は撤去＝FV画像をそのまま表示（2026-08-26 ユーザー指示） */
.mv_stage{
	width: 144rem;
	height: auto;
	margin: 0 auto;
	position: relative;
}
/* キャッチ(左)とオーバル(右)を、サイト中央基準の横並びflexで配置 */
.mv_hero{
	width: 100%;
	height: auto;
	padding-right: 0.4rem;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: relative;
}
/* キャッチ：flowで高さを持たせる（heightは中身なり） */
.mv_catch{
	width: auto;
	height: auto;
	margin: 0 -11.7rem 0 0;
	padding: 26.7rem 0 0 0;
	position: relative;
	z-index: 3;
	flex-shrink: 0;
}
.mv_catch .text01{
	margin-left: 0.8rem;
	font-size: 3.3rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #ffffff;
}
.mv_catch .text02{
	margin-top: 3.4rem;
	font-size: 9.7rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #ffffff;
}
.mv_catch .text03{
	margin-top: 3.5rem;
	margin-left: 1rem;
	font-size: 1.5rem;
	line-height: 2.9rem;
	letter-spacing: calc((40/1000)*1em);
	color: #ffffff;
}
/* 屋根帯写真：flowでキャッチの下に続き、下側の高さを持たせる */
/* 屋根帯＋YEARSラベルのグループ親：ここの指定で全体位置を制御 */
.mv_roof{
	width: calc(120.8rem + (100vw - 144rem) / 2);
	height: 38.4rem;
	margin: -9.2rem 0 0 calc(23.2rem + (100vw - 144rem) * 179 / 352);
	position: relative;
	z-index: 1;
}
.mv_photo{
	width: 100%;
	height: 100%;
	position: relative;
	background-image: url(../img/index/eye03.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 20rem 0 0 0;
}
/* オーバル画像：キャッチ／屋根帯に重なる装飾のためオーバーレイ（absolute限定） */
.mv_oval{
	width: 50.2rem;
	height: 69.9rem;
	margin: 13rem 0 0 -1.8rem;
	position: relative;
	flex-shrink: 0;
	z-index: 2;
}
.mv_oval img{
	width: 100%;
	height: auto;
	display: block;
}
.mv_scroll{
	position: absolute;
	top: 65.7rem;
	left: 44.4rem;
	z-index: 3;
}
.mv_scroll span{
	display: block;
	font-size: 1.1rem;
	letter-spacing: calc((10/1000)*1em);
	color: #ffffff;
}
.mv_scroll::after{
	content: '';
	width: 1px;
	height: 5.8rem;
	position: absolute;
	top: 2.2rem;
	left: 0;
	right: 0;
	margin: auto;
	background: #ffffff;
}
.mv_years{
	position: absolute;
	top: 38.4rem;
	left: -3.5rem;
	font-size: 1.3rem;
	letter-spacing: calc((27/1000)*1em);
	color: #235a32;
	white-space: nowrap;
	transform: rotate(-90deg);
	transform-origin: left top;
	z-index: 3;
}

/*==================================================
  SERVICES（.contents01）
==================================================*/
.contents01{
	width: 100%;
	height: auto;
	padding: 10.3rem 0 12.1rem;
}
.contents01_inner{
	width: 120rem;
	height: auto;
	margin: 0 auto;
}
.contents01_head_en{
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: calc((27/1000)*1em);
	color: #235a32;
}
.contents01_head_ttl{
	margin-top: 2.2rem;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contents01_head_lead{
	margin-top: 2.4rem;
	font-size: 1.5rem;
	line-height: 2.6rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}
.contents01_01{
	margin-top: 4.1rem;
	display: flex;
	justify-content: space-between;
}
.contents01_01_01{
	width: 39.9rem;
	height: 53.5rem;
	position: relative;
	display: block;
}
.contents01_01_01 .img{
	width: 39.9rem;
	height: 53.5rem;
	position: relative;
	overflow: hidden;
	border-radius: 0 10rem 0 0;
}
.contents01_01_01 .img .ph{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: transform .5s ease;
}
.contents01_01_01:hover .img .ph{
	transform: scale(1.08);
}
.contents01_01_01 .cap{
	width: auto;
	position: absolute;
	left: 5.2rem;
	right: 2.4rem;
	bottom: 3.6rem;
	z-index: 2;
}
.contents01_01_01 .cap .num{
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: calc((27/1000)*1em);
	color: #ffffff;
}
.contents01_01_01 .cap .ttl{
	margin-top: 1.4rem;
	font-size: 2.7rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #ffffff;
}
.contents01_01_01 .cap .txt{
	margin-top: 2rem;
	font-size: 1.4rem;
	line-height: 2.3rem;
	letter-spacing: calc((20/1000)*1em);
	color: #ffffff;
}
.contents01_01_01 .cap .arrow{
	width: 2.2rem;
	height: auto;
	position: absolute;
	right: 1rem;
	bottom: 1.8rem;
}
.contents01_01_01 .cap .arrow img{
	width: 100%;
	height: auto;
	display: block;
}

/*==================================================
  CASE（.contents02）
==================================================*/
.contents02{
	width: 100%;
	height: auto;
	padding: 0 0 11.4rem;
}
.contents02_inner{
	width: 120rem;
	height: auto;
	margin: 0 auto;
}
.contents02_head_en{
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: calc((27/1000)*1em);
	color: #235a32;
}
.contents02_head_ttl{
	margin-top: 2.2rem;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contents02_head_lead{
	margin-top: 2.4rem;
	font-size: 1.5rem;
	line-height: 2.6rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}
.contents02_01{
	margin-top: 3.9rem;
	display: flex;
	justify-content: space-between;
}
/* 最新3件のカードは一覧と共通（.contents01_card / inc/case_card.php / css/case_card.css）。
   ここでは配置コンテナ .contents02_01 のみ担当（PCはspace-betweenで3列・SPは縦積み） */
.contents02_more{
	margin-top: 3.2rem;
	display: flex;
	justify-content: center;
}
.contents02_more a{
	width: 22.9rem;
	height: 4.9rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #235a32;
	border-radius: 2.5rem;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: calc((20/1000)*1em);
	color: #165126;
	transition: all .3s;
}
.contents02_more a:hover{
	background: #235a32;
	color: #ffffff;
}

/*==================================================
  MESSAGE（.contents03）
==================================================*/
.contents03{
	width: 100%;
	height: auto;
	margin: -27.5rem 0 0;
	position: relative;
}
.contents03_inner{
	width: 120rem;
	height: auto;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.contents03_photo{
	width: 50.6rem;
	height: 74.5rem;
	position: relative;
	background-color: #b9b9b9;
	background-image: url(../img/index/contents03/item01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 22rem 0 0 0;
	overflow: hidden;
	z-index: 1;
	flex-shrink: 0;
}
.contents03_body{
	width: auto;
	height: auto;
	padding: 15.1rem 0 0 9.5rem;
	background-color: #ffffff;
	flex-grow: 1;
}
.contents03_body_en{
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: calc((27/1000)*1em);
	color: #235a32;
}
.contents03_body_ttl{
	margin-top: 1.9rem;
	font-size: 3.5rem;
	line-height: 5.5rem;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contents03_body_catch{
	margin-top: 4.4rem;
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contents03_body_txt{
	margin-top: 2.7rem;
	font-size: 1.5rem;
	line-height: 2.6rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}
.contents03_body_name{
	margin-top: 3rem;
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
}
.contents03_body_name .role{
	margin: 0 2.1rem 0 0;
	font-size: 1.3rem;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contents03_body_name .name{
	margin: 0 1.2rem 0 0;
	font-size: 1.7rem;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}

/*==================================================
  SP（max-width:767px）
==================================================*/
@media only screen and (max-width: 767px){
	/* ===== FV ===== */
	.mv{
		padding-bottom: 9.9rem;
	}
	.mv_bg{
		height: 64.7rem;
		background-image: var(--mv-bg-sp, url(../img/index/eye02_sp.jpg));
	}
	.mv_stage{
		width: 37.5rem;
	}
	.mv_hero{
		display: contents;
	}
	.mv_catch{
		margin: 0;
		padding: 34.5rem 0 0 2.8rem;
	}
	.mv_catch .text01{
		margin-left: 0;
		font-size: 2.2rem;
	}
	.mv_catch .text02{
		margin-top: 1.4rem;
		font-size: 5.3rem;
	}
	.mv_catch .text03{
		margin: 2.3rem 0 0;
		font-size: 1.2rem;
		line-height: 2.3rem;
	}
	.mv_oval{
		position: absolute;
		width: 25.3rem;
		height: 37.1rem;
		top: 6.5rem;
		left: 9.4rem;
		margin: 0;
	}
	/* 屋根帯グループ：PC同様にflowブロックで高さを持たせる（absolute不使用） */
	.mv_roof{
		width: 28.6rem;
		height: 16rem;
		margin: 4rem 0 0 8.9rem;
		position: relative;
	}
	.mv_photo{
		border-radius: 7rem 0 0 0;
		background-image: url(../img/index/eye03_sp.jpg);
	}
	.mv_scroll{
		top: 58.8rem;
		left: 4.1rem;
	}
	.mv_years{
		top: 16.9rem;
		left: 0;
		font-size: 1.2rem;
		transform: none;
	}
	/* ===== SERVICES ===== */
	.contents01{
		padding: 0 0 9.4rem;
	}
	.contents01_inner{
		width: 100%;
		padding: 0 2.8rem;
	}
	.contents01_head_ttl{
		margin-top: 1.7rem;
		font-size: 3.2rem;
	}
	.contents01_head_lead{
		margin-top: 1.7rem;
		line-height: 2.3rem;
	}
	.contents01_01{
		margin-top: 5.1rem;
		display: block;
	}
	.contents01_01_01{
		width: 100%;
		height: auto;
		margin-bottom: 3.4rem;
	}
	.contents01_01_01:last-child{
		margin-bottom: 0;
	}
	.contents01_01_01 .img{
		width: 100%;
		height: 18.2rem;
		border-radius: 0 7rem 0 0;
	}
	.contents01_01_01 .cap{
		position: static;
		margin-top: 1rem;
	}
	.contents01_01_01 .cap .num{
		position: absolute;
		top: 11.7rem;
		left: 2.2rem;
		margin-top: 0;
		font-size: 1.1rem;
	}
	.contents01_01_01 .cap .ttl{
		position: absolute;
		top: 13.8rem;
		left: 2.2rem;
		margin-top: 0;
		font-size: 2.3rem;
	}
	.contents01_01_01 .cap .txt{
		width: 100%;
		margin-top: 0;
		line-height: 2.3rem;
		color: #2b2b2b;
	}
	.contents01_01_01 .cap .arrow{
		position: absolute;
		top: 14.5rem;
		right: 3.5rem;
		bottom: auto;
		width: 1.7rem;
	}
	/* ===== CASE ===== */
	.contents02{
		padding: 0 0 7.8rem;
	}
	.contents02_inner{
		width: 100%;
		padding: 0 2.8rem;
	}
	.contents02_head_ttl{
		margin-top: 1.7rem;
		font-size: 3.2rem;
	}
	.contents02_head_lead{
		margin-top: 1.7rem;
		line-height: 2.3rem;
	}
	.contents02_01{
		margin-top: 3.6rem;
		display: block;
	}
	/* SPは縦積み。カード内部のSPは case_card.css。ここではカード間の余白のみ */
	.contents02_01 .contents01_card{
		margin-bottom: 3.2rem;
	}
	.contents02_01 .contents01_card:last-child{
		margin-bottom: 0;
	}
	/* .contents02_more の SP上書き(margin-top:0)は撤去＝base の margin-top:3.2rem をSPでも適用（2026-08-26 DevTools反映） */
	/* ===== MESSAGE ===== */
	.contents03{
		margin-top: -15.9rem;
	}
	.contents03_inner{
		width: 100%;
		padding: 0 0 0 2.7rem;
		display: block;
	}
	.contents03_photo{
		width: 100%;
		height: 23.3rem;
		background-image: url(../img/index/contents03/item01_sp.jpg);
		border-radius: 7rem 0 0 0;
	}
	.contents03_body{
		width: 100%;
		padding: 4.3rem 3rem 5.6rem 3.6rem;
	}
	.contents03_body_ttl{
		margin-top: 1.4rem;
		font-size: 3rem;
		line-height: 4rem;
	}
	.contents03_body_catch{
		margin-top: 2.2rem;
		font-size: 1.7rem;
		line-height: 2.3rem;
	}
	.contents03_body_txt{
		margin-top: 2.7rem;
		font-size: 1.4rem;
		line-height: 2.3rem;
	}
	.contents03_body_name{
		margin-top: 2.8rem;
	}
	.contents03_body_name .name{
		margin-right: 0;
	}
}