@charset "utf-8";

:root{
  --hero-h: 85vh;  /* 動画エリアの高さ（好みで調整） */
  --hero-min-h: 520px; /* 最低高さ */
  --hero-max-h: 900px; /* 最大高さ */
  --img-w: min(480px, 70vw);   /* はみ出す画像の幅 */
  --img-over: 240px;/* 下にどれくらいはみ出すか */
  --pad-x: clamp(16px, 4vw, 48px);
}

/* ヒーロー全体（動画＋テキスト＋はみ出し画像） */
.hero{
  position: relative;
  width: 100%;
  height: clamp(var(--hero-min-h), var(--hero-h), var(--hero-max-h));
  overflow: visible; /* 画像を下に“はみ出させる”ため visible */
  background:#000;
  padding-top: 50px;
}

/* 動画（赤のエリアに相当） */
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* 文字の可読性を上げたい場合（任意） */
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

/* テキスト */
.hero__content{
  position: relative;
  z-index: 4;
  height: 100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  padding: clamp(40px, 8vh, 88px) var(--pad-x) 0;
  color:#fff;
}
.hero__inner{
  max-width: 980px;
  width: 100%;
}
.hero__titleRow{
  display:flex;
  gap: clamp(18px, 4vw, 44px);
  justify-content:center;
  align-items:baseline;
  margin: 0 0 18px;
}
.hero__title{
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 700;
  font-family: var(--font-serif);
  letter-spacing: .06em;
  line-height: 1;
  margin: 0;
}
.hero__lead{
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.9;
  opacity: .9;
  margin: 0 auto;
  max-width: 760px;
  letter-spacing: .04em;
}

/* はみ出し画像（青の四角に相当） */
.hero__floating{
  position:absolute;
  left: 50%;
  bottom: calc(var(--img-over) * -1); /* 下にはみ出す */
  transform: translateX(-50%);
  z-index: 3;
  width: var(--img-w);
  background: transparent;
  overflow:hidden;
}
.hero__floating img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}

/* 下のセクションがはみ出し画像と重ならないように余白を確保 */
.after-hero{
  padding-top: calc(var(--img-over) + 240px);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  max-width: 1100px;
  margin: 0 auto;
}

/* モバイル微調整 */
@media (max-width: 520px){
  :root{
    --hero-min-h: 460px;
    --img-over: 140px;
  }
}

#sec_01 {
	clear: both;
	padding-top: 170px;
}

#sec_01 h2 {
	text-align: left;
}
#sec_01 h2 .sub1 {
	font-size: 0.6em;
	display: block;
	padding-bottom: 10px;
}
#sec_01 h2 .sub2 {
	font-size: 0.8em;
	display: block;
	padding-bottom: 10px;
}
/* === Spec grid (table-like) === */
.spec-grid{
  --bg: #2f2f2f;
  --cell: #3a3a3a;
  --line: #1f1f1f;
  --text: #ffffff;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg);
  border: 3px solid var(--line);
  overflow: hidden;
  max-width: 1100px;   /* お好みで */
  margin: 0 auto;
}

.spec-grid .cell{
  background: var(--cell);
  color: var(--text);
  text-align: center;

  /* 罫線 */
  border-right: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
  padding: 18px 14px;

  /* 縦中央寄せ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;

  min-height: 84px; /* 行の高さ感 */
}

.spec-grid .cell:nth-child(3n){
  border-right: none; /* 右端 */
}
.spec-grid .cell:nth-last-child(-n+3){
  border-bottom: none; /* 最下段 */
}

.spec-grid .title{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .2px;
}

.spec-grid .desc{
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  opacity: .95;
}

/* === Responsive === */
@media (max-width: 720px){
  .spec-grid{
    grid-template-columns: 1fr; /* スマホは縦積み */
  }
  .spec-grid .cell{
    border-right: none;
  }
  .spec-grid .cell:not(:last-child){
    border-bottom: 3px solid var(--line);
  }
  .spec-grid .cell:nth-last-child(-n+3){
    border-bottom: 3px solid var(--line);
  }
  .spec-grid .cell:last-child{
    border-bottom: none;
  }
}

#sec_02 {
	clear: both;
	padding-top: 10px;
}

#sec_03 {
	clear: both;
	padding-top: 10px;
}
#sec_03 h4.gray {
	background: #666;
	text-align: center;
	padding: 10px;
	margin-bottom: 10px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}
#sec_03 h4.orange {
	background: #E95504;
	text-align: center;
	padding: 10px;
	margin-bottom: 10px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

#sec_04 {
	clear: both;
	padding-top: 10px;
}

#sec_05 {
	clear: both;
	padding-top: 10px;
}

#sec_06 {
	clear: both;
	padding-top: 10px;
}

#sec_07 {
	clear: both;
	padding-top: 10px;
}
#sec_07 .proc{
	--h-pc: 76px;
	--h-sp: 60px;

	/* PCの「右だけ尖り」を鈍角にする調整つまみ */
	--tip: 14px;				/* 大きいほど鈍角（おすすめ 28?42） */

	/* SPの「下向きV字」の深さ */
	--v: 14px;					/* おすすめ 10?18 */

	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
	font-weight: 700;
}

/* ========== PC (default) ========== */
#sec_07 .proc{
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

#sec_07 .proc__item{
	background: var(--bg);
	height: var(--h-pc);
	display: flex;
	align-items: center;

	/* ← 文字を左揃えに */
	justify-content: flex-start;
	text-align: left;

	padding: 0 10px;
	font-size: 1em;
	letter-spacing: .01em;
	white-space: nowrap;

	/* 右だけ尖り（鈍角） */
	clip-path: polygon(
		0 0,
		calc(100% - var(--tip)) 0,
		100% 50%,
		calc(100% - var(--tip)) 100%,
		0 100%
	);
}

/* ========== SP ========== */
@media (max-width: 640px){
	#sec_07 .proc{
		grid-template-columns: 1fr;
		gap: 8px; /* 画像の白い間隔っぽく */
	}

	#sec_07 .proc__item{
		height: var(--h-sp);

		/* 中央ぞろえ */
		justify-content: center;
		text-align: center;

		padding: 0 18px;
		font-size: clamp(18px, 1.7vw, 34px);
		white-space: normal;

		/* 下向きの谷（V字） */
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - var(--v)),
			50% 100%,
			0 calc(100% - var(--v))
		);
	}
	
#sec_07 .proc .sp {
	display: none;
}
}

/* Media Queries */
@media screen and (min-width:568px) {

#sec_01 {
	clear: both;
	padding-top: 270px;
}
#sec_01 .feature_list {
	font-size: 1em;
}

}

@media screen and (min-width:768px) {



#sec_01 {
	clear: both;
	padding-top: 300px;
}
#sec_01 .feature_list li {
	width: 33%;
}

#sec_02 {
	clear: both;
	padding-top: 40px;
}

#sec_03 {
	clear: both;
	padding-top: 40px;
}

#sec_04 {
	clear: both;
	padding-top: 40px;
}

#sec_05 {
	clear: both;
	padding-top: 40px;
}

#sec_06 {
	clear: both;
	padding-top: 40px;
}

#sec_07 {
	clear: both;
	padding-top: 40px;
}


}

@media screen and (min-width:1000px) {



}

@media screen and (min-width:1200px) {



}