@charset "UTF-8";
/*------------------------
TOPイメージ
------------------------*/
/* マスクとテキストエリア（Pinされる部分） */
.intro-cover,
.location-cover,
.text-scroll {
  will-change: opacity, clip-path;
}

/* 実際にパララックス（y軸移動）する画像要素に限定 */
#topimg .mainimage img,
#intro .fx-steps__bg,
#location .fx-hero__media, /* imgタグではなくクラスで指定 */
#scene .img-area img {       /* scene内の3枚の画像に限定 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sc-effect {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(0.25, 1, 0.5, 1), 
              transform .7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.sc-show .sc-effect{
  opacity: 1;
  transform: translateY(0);
}




/* 初期状態：隠しておく */
#topimg .fx-hero__hero .ja,
#topimg .fx-hero__hero h1,
#topimg .fx-hero__hero .lead,
#topimg .fx-hero__hero .address,
#topimg .fx-hero__hero .btn {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px); /* 最初は少しぼかしておくと映画っぽくなります */
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); /* 高級感のあるイージング */
}
#topimg .fx-hero__hero .btn,
#topimg .fx-hero__hero .lead {
	transform: translateX(-50%) translateY(30px);
	opacity: 0;
	filter: blur(10px); 
	transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* is-showがついた時の状態 */
#topimg .fx-hero__hero.is-show .ja,
#topimg .fx-hero__hero.is-show h1,
#topimg .fx-hero__hero.is-show .address{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
#topimg .fx-hero__hero.is-show .lead,
#topimg .fx-hero__hero.is-show .btn {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	filter: blur(0);
}

/* 順番に出るようにディレイ（遅延）をかける */
#topimg .fx-hero__hero.is-show .ja {
  transition-delay: 0.2s;
}
#topimg .fx-hero__hero.is-show h1 {
  transition-delay: 0.2s;
}
#topimg .fx-hero__hero.is-show .address {
  transition-delay: 0.4s;
}
#topimg .fx-hero__hero.is-show .lead {
  transition-delay: 1.0s;
}
#topimg .fx-hero__hero.is-show .btn {
  transition-delay: 1.0s;
}
#topimg{
	background: #000;
	position: relative;
	height: 100vh;
}
#topimg .mainimage {
	position: relative;
	height: 100%;
}
#topimg .mainimage img {
	height: 100%;
	object-fit: cover;
}
#topimg .fx-hero__hero{
	height: 100%;
}
#topimg .fx-hero__content{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
	#topimg .top-title-outer {
		z-index: 5;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#topimg .top-title-outer .address {
		width: 420px;
		margin: auto;
	}
#topimg .top-title-outer .lead{
	color: #fff;
	letter-spacing: 0.16em;
	line-height: 1.9;
	text-align: center;
}
#topimg .btn{
	position: absolute;
	z-index: 2;
	bottom: 60px;
	left: 50%;
	background: #fff;
	border-radius: 50px;
	transform: translateX(-50%);
	border: 3px solid rgba(255,255,255,.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	width: fit-content;
}
#topimg .btn a{
	color: #fff;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	background-image: var(--goldgrad);
	background-size: 200% 100%;
	background-position: 0% 50%;
	border-radius: 50px;
	letter-spacing: 0.1em;
}
/* PC */
@media screen and (min-width:768px) {
	#topimg .mainimage img {
		position: absolute;
		height: 107%;
		top: -5%;
		left: 0;
		object-fit: cover;
	}
	#topimg .fx-hero__hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 35%);
	}
	#topimg .top-title-outer .top-title{
	margin-top: -126px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
	}
	#topimg .top-title-outer .lead{
		position: absolute;
		top: 77vh;
		left: 50%;
		transform: translateX(-50%);
	}
	#topimg .top-title .ja {
		width: fit-content;
		margin: 0 auto 11px;
	}
	#topimg .top-title .ja img {
		width: 140px;
	}
	#topimg .top-title h1 {
	width: fit-content;
	margin:0 auto 42px ;
	}
	#topimg .top-title h1 img {
		width: 462px;
	}
	#topimg .top-title-outer .lead{
			font-size: 24px;
	}
	#topimg .btn{
		width: 220px;
		height: 52px;
	}
	#topimg .btn a{
		font-size: 18px;
	}
	#topimg .btn a:hover{
		background-position: 100% 50%;
	}
}
/* SP */
@media screen and (max-width:767px) {
	/*メイン画像位置*/
	#topimg .mainimage{
		top:0;
		height: 91lvh;
		position: relative;
		overflow: hidden;
		}
		#topimg .mainimage img{
		height: 100%;
		object-fit: cover;
		object-position: 87%;
	}
	#topimg .mainimage::after {
		content: "";
		width: 100%;
		height: 110%;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 1;
		background: linear-gradient(
			to bottom,
			rgba(0,0,0,0) 75%,     /* 73%までは完全に透明 */
			rgba(0,0,0,0.4) 81%,   /* 85%で少し暗くなり始め... */
			rgba(0,0,0,0.95) 90%  /* 最後15%の距離で一気に漆黒に近づける */
		);
	}
	#topimg .top-title{
		position: absolute;
		top: 38vh;
		width: 100%;
		text-align: center;
	}
	#topimg .top-title .ja{
		width: 22vw;
		margin: 0 auto 1.6vw;
	}
	#topimg .top-title h1{
		width: 68vw;
		margin: 0 auto;
	}
	#topimg .top-title-outer{
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 100%;
	}
	#topimg .top-title-outer .lead{
		position: absolute;
		top:75vh;
		left: 50%;
		text-align: center;
		width: 100%;
		font-size: 4.53vw;
	}
	#topimg .top-title-outer .address{
			margin: 6vw auto;
			width: 40vw;
   }
	/* 初期状態：隠しておく */


		#topimg .btn{
		position: absolute;
		z-index: 10;
		bottom: 18vh;
		border:none;
	}
	#topimg .btn a{
		width: 34.7vw;
		height: 8vw;
	}
}

/*------------------------
イントロダクション
------------------------*/
.full-height{
  height: var(--vh-fixed, 100vh)!important;
}
#intro{
  position: relative;
	overflow: hidden;
	height: 100vh;
}
#intro .intro-cover{
  position: absolute;
  inset: 0;
  z-index: 85;
  pointer-events: none;

  background-color: #15292e;

  /* JSで更新 */
  --mask-radius: -1vmax;

  /* “ボヤ”の幅（大きいほどソフト） */
  --mask-feather: 8vmax;

  /* loaderと同じ考え方：中心が透明→外側が塗り */
  background-image: radial-gradient(
    circle at center,
    rgba(21,41,46,0) var(--mask-radius),
    rgba(21,41,46,0.25) calc(var(--mask-radius) + 2vmax),
    rgba(21,41,46,0.75) calc(var(--mask-radius) + 5vmax),
    #15292e calc(var(--mask-radius) + var(--mask-feather))
  );

  will-change: background-image, opacity;
}
#intro .fx-steps__bg{
background: url("../img/common/img-pers03.jpg") no-repeat center / cover;
  position: absolute;
  /* inset: 0; ではなく、上下に少し広げる */
  top: -10%; 
  bottom: -10%;
  left: 0;
  right: 0;
  
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  /* scaleは残してOK。少し拡大しておくとより安全 */
  transform: scale(1.1); 
  transform-origin: 50% 50%;
}
#intro .fx-steps__step{
  position: absolute;
  inset: 0;
  z-index: 1;
  color: #fff;
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  align-items: flex-end;       /* 下揃え */
}


#intro .text-scroll{
/*2行になったら
height: clamp(220px, 40vh, 680px);
	padding: 4vh 0;
  overflow: hidden;
  --fade: 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
	*/
}
#intro .text-scroll > .text-area{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#intro .text-scroll > .text-area + .text-area{
  margin-top: 24px;
}



/* PC */
@media screen and (min-width:768px) {
	#intro .fx-steps__step{
		padding-left: clamp(
			50px,                                   /* 下限：1200px以下は 50px */
			calc(50px + (100vw - 1200px) * (50 / 720)), /* 可変：1200→1920で 50→100px */
			100px                                   /* 上限：1920px以上は 100px */
		);
		padding-bottom: 80px;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#intro{
		background: linear-gradient(60deg, #000000 0%, #15292e 50%);
		overflow: hidden;
		height: 100vh;
	}
	#intro .fx-steps__bg{
		background-size: auto 63lvh;
		background-position: top right 67%;
		background-repeat: no-repeat;
    inset: 0;
    /* マスクの設定（本体に直接かける） */
-webkit-mask-image: linear-gradient(
to bottom,
   black 0%,            /* 1：開始 */
    black 50%,           /* 2：ここまでは100%表示 */
    rgba(0,0,0,0.5) 54%,  /* 3：【追加】ここで少し透け始める（60%透過） */
    rgba(0,0,0,0.01) 59%,  /* 4：かなり薄くなる */
    transparent 100%     /* 5：完全に消える */
);
mask-image: linear-gradient(
to bottom,
   black 0%,            /* 1：開始 */
    black 50%,           /* 2：ここまでは100%表示 */
    rgba(0,0,0,0.5) 54%,  /* 3：【追加】ここで少し透け始める（60%透過） */
    rgba(0,0,0,0.01) 59%,  /* 4：かなり薄くなる */
    transparent 100%     /* 5：完全に消える */
);
    /* マスクが繰り返されないように固定 */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
}
#intro .fx-steps__step {
	padding-left: 5.33vw;
	padding-bottom: calc(5.33lvh + env(safe-area-inset-bottom));
	}
	#intro .text-scroll {
    height:48vh;
    padding: 2vh 0;
}
	#intro .sec-text{
		padding-right: 7vw;
	}
}
/*------------------------
SCENE
------------------------*/
/* PC */
@media screen and (min-width:768px) {
	:root{
		--container: 1200px;
		--side-margin: max(0px, calc((100vw - var(--container)) / 2));
	}
}
#scene{
  position: relative;
	/*background: #f7efe6;
	background: #f5f1f0!important;*/
	background: #141414;
	color: #fff;
	overflow-x: clip;
        overflow-y: visible;
}
#scene .img-area{
	position: relative;
	}
	.img-window {
    position: relative;
    overflow: hidden;
    background-color: #000;
}
#scene .img-area img{
	width: 100%;
	height: 130%;
	position: absolute;
	top: -15%;
	object-fit: cover;
}

#scene .img-window::after {
content: "";
  position: absolute;
  /* 上下左右を -2px 〜 -5px 程度にして、枠より一回り大きくする */
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  
  background-color: #141414; /* 幕の色 */
  z-index: 10;
  
  /* アニメーション設定 */
  transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
  transform-origin: right;
  pointer-events: none; /* 下の画像に触れるように */
}

/* is-show クラスがついた時 */
#scene .img-area.is-show .img-window::after {
transform: translateX(110%);
}
#scene .case h3{
	display: flex;
	align-items: center;
	line-height: 1;
}
#scene .case h3 .en{
	background-image: var(--goldgrad2);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 500;
	letter-spacing: 0.1em;
	display: inline-block;
}
#scene .case h3 .ja{
	font-weight: normal;
}
#scene .case .block{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #232323;
}
#scene .case .block .num{
		background-image: var(--goldgrad2);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 500;
	letter-spacing:0;
	line-height: 1;
	display: inline-block;
}
#scene .case .block .en{
	background-image: var(--goldgrad2);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 500;
	letter-spacing: 0.06em;
	display: inline-block;
}
#scene .case .block .text p{
	font-weight: bold;
}
/* PC */
@media screen and (min-width:768px) {
	#scene .inner{
		padding: 110px 0px;
		width: 1200px;
		margin: 0 auto;
		height: 100%;
	}
	#scene .sec-title{
		margin-bottom: 55px;
	}
	#scene .content-wrap{
		display: flex;
	}
	#scene .img-area{
		margin-left: calc(-1 * var(--side-margin));
		flex: 1;
	}
	#scene .img-area .img01{
		height: 468px;
		width: 100%;
	}
	#scene .img-area .img02{
		width: 30%;
		min-width: 190px;
		/* 【高さ】横幅に対して135%の比率を維持 (100:135 = 1:1.35) */
		aspect-ratio: 1 / 1.4;
		min-height: 200px;
		margin-top: -25px;
		margin-left: 14%;
		position: relative;
		overflow: hidden;
	}
#scene .img-area .img03 {
  position: absolute;
	top: 520px;
  /* 【位置】右から49%の位置。ただし295pxより小さくならない */
  left: max(49%, 295px);
  
  /* 【幅】親の30.2%。ただし180pxより小さくならない */
  width: max(34.2%, 190px);
  
  /* 【高さ】横幅の74%を維持 */
  aspect-ratio: 1 / 0.6;

  /* パララックス用の設定 */
  overflow: hidden;
  z-index: 5; /* 必要に応じて調整 */
}

	#scene .text-area{
		width: 570px;
		margin-left: 80px;
	}
	#scene .sec-text{
		margin-bottom: 60px;
	}
		#scene .case h3{
			margin-bottom: 12px;
		}
	#scene .case h3 .en{
		font-size: 34px;
	}
	#scene .case h3 .ja{
		margin: 5px 0 0 5px;
	}
	#scene .case .block{
	padding-bottom: 16px;
	margin-bottom: 20px;
	}
	#scene .case .block .num{
		font-size: 58px;
		width: 1.5em;
		margin-top: -.3em;
	}
	#scene .case .block .text p{
		font-size: 18px;
	}
		#scene .case .block .en{
			font-size: 16px;
	}
	#scene .ew{
		margin-bottom: 30px;
	}
	#scene .btn.w-line a{
		width: 360px;
		height: 60px;
		font-size: 16px;
		margin-left: 0;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#scene .inner{
		padding: 16vw 5.33vw;
	}
	#scene .sec-title{
		margin-bottom: 55px;
	}
	#scene .content-wrap{
	}
	#scene .img-area{
		margin-right: -5.33vw;
		margin-bottom: 12vw;
	}
	#scene .img-area img{
	width: 100%;
	height: 140%;
	top: -18%;
}
	#scene .img-area .img01{
		height: 65vw;
		width: 91vw;
		margin-left: auto;
	}
	#scene .img-area .img02{
		width: 37vw;
		aspect-ratio: 1 / 1.5;
		margin-top: -8vw;
		margin-left: 0vw;
		position: relative;
		overflow: hidden;
	}
	#scene .img-area .img03 {
		position: absolute;
		top: 74vw;
		left: 45vw;
		width: 43vw;
		aspect-ratio: 1 / 0.6;
		overflow: hidden;
		z-index: 5;
	}
	#scene .text-area{
	}
	#scene .sec-text{
		margin-bottom:8vw;
	}
		#scene .case h3{
			margin-bottom:3.2vw;
		}
	#scene .case h3 .en{
		font-size:8vw;
	}
	#scene .case h3 .ja{
		font-size: 3.2vw;
		margin: 1.33vw 0 0 1.33vw;
	}
	#scene .case .block{
	padding-bottom:4.26vw;
	margin-bottom: 4.26vw;
	}
	#scene .case .block .num{
		font-size:13.33vw;
		width: 1.3em;
		margin-top: -.3em;
	}
	#scene .case .block .text p{
		font-size:4.27vw;
	}
		#scene .case .block .en{
			font-size: 3.47vw;
	}
	#scene .btn.w-line{
		margin-top: 9.33vw;	
	}
	#scene .btn.w-line a{
		width: 90%;
	}
}
/*------------------------
EXPERIENCE
------------------------*/
/* #experience 全体 */
#experience {
  background: #000;
	overflow: hidden;
}
#experience .container{
	width: 100%;
	position: relative;
}
#experience h2{
	color: #fff;
}
#experience .lead{
	color: #fff;
	letter-spacing: 0.08em;
	line-height: 2;
	text-align: center;
}
#experience .tokucho .text-area{
	background: #232323;
	color: #fff;
}
#experience .tokucho h3{
	background-image: var(--goldgrad2);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight:500;
	letter-spacing: 0.06em;
	line-height: 1;
	display: inline-block;
}
#experience .tokucho .text-area p{
	line-height: 2.1;
	letter-spacing: 0.04em;
}
#experience .tokucho.block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(0.25, 1, 0.5, 1), 
              transform .7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
#experience .tokucho.block.is-show {
  opacity: 1;
  transform: translateY(0);
}
#experience .tokucho.block .img {
  position: relative;
}
#experience .tokucho.block .img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  transition: opacity .8s ease .2s; 
  z-index: 2;
}
#experience .tokucho.block.is-show .img::before {
  opacity: 0;
  pointer-events: none;
}
/* PC */
@media screen and (min-width:768px) {
	#experience{
	padding: 110px 0px;
	min-width:1200px;
	background: #000;
	}
	#experience .sec-title{
		margin-bottom: 25px;
	}
	#experience .lead{
		font-size: 20px;
		margin-bottom:40px;
	}
	#experience .tokucho-outer {
		width: clamp(1200px, 100vw, 1480px);
		padding: 0 50px;
		margin: 0 auto;
	}
	#experience .tokucho{
		display: flex;
		align-items: stretch;
		margin-bottom: 8px;
	}
	#experience .tokucho .img{
		min-height: 300px;
		height: 60vh;
		flex: 1;
	}
	#experience .tokucho .img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#experience .text-area{
		width: 52%;
		min-width:580px;
		display: flex;
		flex-direction: column;
		justify-content: center; /* 例：縦中央寄せ */
		padding: 20px 6% 20px 6%;
	}
	#experience .tokucho h3{
		font-size: 52px;
		margin-bottom: 35px;
	}
	#experience .tokucho.private h3{
		font-size: 44px;
	}
	#experience .tokucho .text-area p{
		font-size: 17px;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#experience{
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上から詰める */
		padding: 16vw 5.33vw;
	}
	#experience .sec-title{
		margin-bottom:4vw;
	}
	#experience .lead{
		margin-bottom:6.4vw;
	}
	#experience .tokucho .img{
		height: 38.5vh;
	}
	#experience .tokucho .img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#experience .text-area{
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 6vw 5.33vw 15vw;
		min-height:48vw;
	}
	#experience .tokucho h3{
		font-size:7.47vw;
		text-align: center;
		margin-bottom:4vw;
	}
		#experience .tokucho.private h3{
		font-size:5.8vw;
	}
	#experience .tokucho-outer {
		padding-left: 2.67vw;
		padding-right: 2.67vw;
	}
  #experience .tokucho {
    display: flex;
    flex-direction: column;
		font-size: 3.43vw;
    margin-bottom:2.13vw;
  }


  /* テキストエリア：残りの高さをすべて使う */
  #experience .tokucho .text-area {
		width: 100%;
		padding: 8vw 5.33vw 11vw;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
  }
}
/*------------------------
LOCATION
------------------------*/
#location{
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}
.location-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 10;
  pointer-events: none;
  /* 最初は完全に不透明 */
  opacity: 1;
  will-change: opacity;
}
#location .fx-hero__media-wrap{
	position: relative;
}
#location .sec-title{
	text-align: left;
}
#location .fx-hero__hero{
	width: 100%;
	height: 100%;
}
#location .fx-hero__content{
	width: 100%;
	position: absolute;
	 inset: 0;
	z-index: 2;
	color: #fff;
	display: flex;
	justify-content: flex-start; /* 左寄せ */
	align-items: flex-end;       /* 下揃え */
	height: 100%;
}
#location .fx-hero__media{
	width: 100%;
	height: 115%; 
	object-fit: cover;
	position: absolute;
	bottom: 0%; 
	left: 0;
	will-change: transform;
}
#location .text-scroll{
/*2行になったら*/	
/*height: clamp(300px, 52.8vh, 680px);
	padding: 4vh 0;
  overflow: hidden;
  --fade: 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
*/
}
/* PC */
@media screen and (min-width:768px) {
	#location .fx-hero__content{
		padding-left: clamp(
			50px,
			calc(50px + (100vw - 1200px) * (50 / 720)),
			100px
		);
	}
	#location .sec-head,
	#location .location-step-item .text{
 text-shadow:
    0 0 10px rgba(0,0,0,1),
    0 0 8px rgba(0,0,0,1),
		 0 0 4px rgba(0,0,0,0.5);
	}
	#location .fx-hero__hero {
	position: relative;
	overflow: hidden; /* ハミ出た画像を隠す */
	background-color: #000; /* ★ここに追加。グラデーションの開始色と同じ色を敷く */
}	
	#location .fx-hero__hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -5px; 
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 35%);
}
	#location .location-step-item{
	padding-bottom: 50px;
	}
	#location .fx-hero__content .btn.w-line{
		width: 220px;
		height: 50px;
		font-size: 15px;
		margin-top: 20px;
	}

}
/* SP */
@media screen and (max-width:767px) {
	#location .fx-hero__content{
		padding: 0 0 calc(8.24lvh + env(safe-area-inset-bottom)) 5.33vw;
	}
	#location .sec-head,
	#location .location-step-item .text{
		text-shadow: 0 0 10px rgba(0, 0, 0,1);
	}
	#location .fx-hero__media {
    object-position: right;
		height: 109%;
	}
	#location .fx-hero__hero::after{
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 1;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 70%);
	}
	#location .location-step-item{
		padding-top: calc(52px + 14.33vw);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}
		#location .fx-hero__content .in{
    display: flex;
    height: 100%;
    flex-direction: column;
	}
	#location .fx-hero__content .in .bottom-block{
		margin-top: auto;
	}
		#location .fx-hero__content .btn.w-line{
		width: 53.33vw;
		height: 12vw;
		margin-left: 0;
		font-size:4vw;
		margin-top: 6.66vw;
	}
}
/*------------------------
STEP
------------------------*/
#sec-step{
	background: url("../img/index/bg_step.jpg") repeat center / 640px auto;
}
#sec-step h2{
	color: #fff;
}
#sec-step .steps .block{
	background: #fff;
	text-align: center;
}
#sec-step .steps .en{
	background-image: var(--goldgrad);
	background-size: 200% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent; /* フォールバック */
	font-weight:bold;
	letter-spacing: 0.1em;
	line-height: 1;
	display: inline-block;
}
#sec-step .steps .block .img {
	text-align: center;
}
#sec-step .steps .text-area{
	text-align: center;
}
#sec-step .steps .text-area p{
	line-height: 1.625;
	letter-spacing: 0.04em;
}
/* PC */
@media screen and (min-width:768px) {
	#sec-step{
  padding: 100px 0 60px;
	}
	#sec-step .inner{
		min-width: 1200px;
		width: 100%;
		max-width: 1480px;
		margin: 0 auto;
	}
	#sec-step .steps{
		display: flex;
		gap: 60px;
		width: 100%;
		max-width: 1480px;
		margin: 0 auto 45px;
	}

	#sec-step .steps .block{
		position: relative;
		flex: 1 1 0;
		/* 必要なら最低幅（崩れ防止） */
		/* min-width: 0; */
		padding: 35px 0 25px;
		border-radius: 15px;

		opacity: 0;
	  transform: translateY(40px);
	  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
	              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	  will-change: opacity, transform;
	}
	#sec-step .is-show .steps .block {
		opacity: 1;
		transform: translateY(0);
	}

	#sec-step .is-show .steps .block:nth-child(1) { transition-delay: 0.2s; }
	#sec-step .is-show .steps .block:nth-child(2) { transition-delay: 0.3s; }
	#sec-step .is-show .steps .block:nth-child(3) { transition-delay: 0.4s; }
	#sec-step .is-show .steps .block:nth-child(4) { transition-delay: 0.5s; }

	#sec-step .steps .block .en{
		font-size: 22px;
		margin-bottom: 35px;
	}
	#sec-step .steps .block .en b{
		font-size: 38px;
		vertical-align: -.1em;
	}
	#sec-step .steps .block .img{
		margin-bottom: 20px;
	}
	#sec-step .steps .block .img img{
		height: 80px;
		width: auto;
	}
	#sec-step .steps .block h3{
		font-size: 20px;
		margin-bottom: 13px;
	}
	#sec-step .steps .text-area p{
		font-size: 16px;
		height: 5em;
	}
	/* 要素間の矢印（最後以外） */
	.steps .block:not(:last-child)::after{
		content: "";
		position: absolute;
		top: 50%;
		right: -30px; /* gap60の半分 = 30px */
		transform: translate(50%, -50%);
		width: 40px;  /* 矢印の表示サイズ */
		height: 40px;
		background: url("../img/index/arrow_step.svg") no-repeat center / contain;
		pointer-events: none;
	}
}


/* SP */
@media screen and (max-width:767px) {
	#sec-step{
		padding: 14.66vw 5.33vw 14.66vw;
	}
  #sec-step .inner {
    display: flex;
    flex-direction: column;
    height: 100%; /* 画面いっぱい */
  }
  #sec-step .steps-outer {
    flex: 1;
    position: relative;
    padding-bottom: 100px; /* 最後のボタンが見える余白 */
  }
  /* 初期状態：各ブロックを縮小・透過させておく */
	#sec-step .steps .block {
	    transform: scale(0.85); /* 非アクティブ時は少し小さく */
	    transition: opacity 0.2s ease;
	    will-change: transform, opacity;
	}
	#sec-step .steps-outer{
		padding: 0 4vw;
	}
	#sec-step .steps{
		display: flex;
		flex-direction: column;
		gap: 4vw;
		width: 100%;
		margin: 0 auto 8vw;
	}
	#sec-step .steps .block{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 2vw;
		padding: 8vw;
		min-height: 56svh;
	}
	#sec-step .steps .block .en{
		margin-bottom: 6.33vw;
		font-size: 4.27vw;
	}
	#sec-step .steps .block .en b{
		font-size:6.93vw;
		vertical-align: -.1em;
	}
	#sec-step .steps .block .img{
		margin-bottom:5.33vw;
	}
	#sec-step .steps .block .img img{
		height:17.33vw;
		width: auto;
	}
	#sec-step .steps .block h3{
		font-size: 4.53vw;
		margin-bottom:2.13vw;
	}
	#sec-step .steps .block h3 span{
		display: block;
		font-size: 4vw;
	}
	#sec-step .steps .text-area p{
		line-height: 1.57;
		min-height: 3.5em;
	}
}
/*ノートPC対策*/
@media screen and (min-width:768px) and (max-height:800px){
  #topimg .top-title .ja img{
    width: clamp(110px, 14vh, 130px);
  }
	#topimg .top-title h1{
		margin-bottom:clamp(25px, 4.375vh, 35px);
	}
	#topimg .top-title-outer .lead{
		font-size: clamp(18px, 3vh, 24px);
	}
  #topimg .top-title h1 img{
    width: clamp(300px, 56vh, 390px);
    height: auto;
	}
	#topimg .top-title-outer .address {
		width: 380px;
	}

	.sec-title .en{
		font-size: clamp(38px, 6.25vh, 50px);
  }
  .sec-title h2{
    font-size: clamp(13px, 2.0vh, 16px);
  }
  .sec-title{
    margin-bottom: clamp(18px, 3.5vh, 28px);
  }
  .sec-head{
		font-size: clamp(20px, 3.25vh, 26px);
    margin-bottom: clamp(12px, 2.6vh, 22px);
  }
	.sec-text{
		font-size: clamp(14px, 2.25vh, 18px);
	}

/*intro*/
	#intro .fx-steps__step{
			padding-bottom: clamp(50px, 10vh, 80px);
		}
/*scene*/
  #scene .block .en{
    font-size: clamp(16px, 2.2vh, 18px);
    margin-bottom: 10px;
  }
  #scene .block .textarea p{
    font-size: clamp(12px, 1.8vh, 14px);
  }
	#scene .block .img{
		height: clamp(200px, 34vh, 270px);
	}
  #scene .block .textarea h3{
    font-size: clamp(17px, 2.6vh, 20px);
		margin-bottom: 7px;

  }
	/*experience*/
	#experience .lead{
		font-size: clamp(14px, 2.2vh, 18px);
	}
	#experience .tokucho h3,
	#experience .tokucho.private h3{
    font-size: clamp(42px, 6.0vh, 50px);
    margin-bottom: 30px;
  }
  #experience .tokucho .text-area p{
    font-size: clamp(14px, 2.0vh, 16px);
  }
/*step*/
  #sec-step .steps .block h3{
    font-size: clamp(16px, 2.2vh, 18px);
    margin-bottom: 10px;
  }
  #sec-step .steps .block .img img{
    height: clamp(60px, 9vh, 80px);
  }
		#sec-step .steps .text-area p{
		font-size: clamp(13px, 1.9vh, 16px);
	}
}

/*------------------------
系列店
------------------------*/
#group-store{
	position: relative;
	background: #000;
	color: #fff;
}
#group-store .lead {
	letter-spacing: 0.04em;
	line-height: 2;
	text-align: center;
}
	#group-store .logo-area .g-lead{
		letter-spacing: 0;
		font-weight: 500;
	}
	#group-store .shiten{
		flex: 1;
	}
	#group-store .shiten h4{
		letter-spacing: 0.04em;
	}
	#group-store .shiten .in{
		display: flex;
		flex-wrap: wrap;
		letter-spacing: 0.04em;
	}
	#group-store .shiten .in .val{
		flex: 1;
	}
	#group-store .shiten .in .item{
		font-weight: 500;
	}
	#group-store .logo-area .gr{
	background-image: var(--goldgrad2);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight:500;
	letter-spacing: 0.025em;
	line-height: 1;
	display: inline-block;
}
#group-store .shiten .web a{
		font-weight: normal;
		color: #ffffff;
		background:#9d894e;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		border-radius: 20px;
}
/* PC */
@media screen and (min-width:768px) {
	#group-store{
		margin-top: -1px;
		padding: 110px 0px;
	}
	#group-store .inner{
		width: 1200px;
		margin: 0 auto;
	}
	#group-store .sec-title {
		margin-bottom: 20px;
	}
	#group-store .sec-title h2 {
		font-size: 16px;
	}
	#group-store .sec-title .en {
		font-size: 48px;
	 }
	 #group-store .lead {
		font-size: 18px;
		margin-bottom: 50px;
	}
	#group-store .group-outer{
		width: fit-content;
		margin: 0 auto;
	}
	#group-store .group{
		display: flex;
		margin-bottom:75px;
	}
	#group-store .logo-area{
		width: 430px;
		padding-right: 20px;
		text-align: center;
	}
	#group-store .logo-area .gr{
		font-size: 16px;
		margin-bottom: 18px;
	}
	#group-store .logo-area .logo-wrap .logo:first-of-type{
		margin-bottom:22px;
	}
	#group-store .logo-area .logo{
		margin-bottom: 18px;
	}
	#group-store .logo-area .logo img{
		height: 70px;
		width: auto;
	}
	#group-store .group.haru .logo-area .logo img {
		height: 90px;
	}
	#group-store .logo-area .g-lead{
			font-size: 15px;
	}
	#group-store .shiten{
		border-left: 1px solid rgba(255,255,255,.2);
		padding-left: 50px;
	}
		#group-store .shiten .block{
			margin-bottom: 30px;
		}
	#group-store .shiten h4{
		font-size: 20px;
		font-weight: 500;
		margin-bottom: 8px;
	}
	#group-store .shiten .in {
		margin-bottom: 5px;
	}
	#group-store .shiten .item{
		min-width: 5em;
	}
		#group-store .shiten .web{
			margin-top: 12px;
		}
	#group-store .shiten .web a{
		width: 100px;
		height: 30px;
		font-size: 14px;
		font-weight: normal;
		margin-left: 0;

	}
}
/* SP */
@media screen and (max-width:767px) {
	#group-store{
	}
	#group-store .sec-title .en {
		font-size: 7.46vw;
	}
	#group-store .inner{
		padding:16vw 5.33vw;
		margin: 0 auto;
	}
	#group-store .lead{
		font-size: 3.2vw;
		margin-bottom: 10vw;
	}
	#group-store .group-outer{

		margin: 0 auto;
		}
	#group-store .group{
		margin-bottom:12.6vw;
	}
	#group-store .logo-area{
		text-align: center;
	}
	#group-store .logo-area .gr{
		margin-bottom:3.74vw;
		font-size: 3.47vw;
	}
	#group-store .logo-area .logo-wrap{
		display: flex;
		flex-direction: column;
	}
	#group-store .logo-area .logo img{
		height: 14vw;
		width: auto;
	}
	#group-store .logo-area .logo{
		margin-bottom: 5.5vw;
	}
		/*#group-store .logo-area .logo-wrap .logo:first-of-type{
			margin-bottom: 4.74vw;
	}*/

	/*#group-store .logo-area .logo img{
		height:15vw;
		width: auto;
	}*/
	#group-store .haru .logo-area .logo img{
			height: 20vw;
		}
	#group-store .logo-area .g-lead{
		margin-bottom:4vw;
		font-size: 3.47vw;

	}
	#group-store .shiten{
		width: 100%;
	}
	#group-store .shiten .block{
		font-size: 3.2vw;
		padding: 3.74vw 4vw;
		color: #000;
		background: #f0f0f0;
		position: relative;
	}
	#group-store .shiten .block::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,.1);
/*	box-shadow:0px -1px 0px rgba(0, 0, 0, .3);*/
}
		#group-store .shiten .block:first-of-type{
			border-top-left-radius: 1.9vw;
			border-top-right-radius: 1.9vw;
		/*box-shadow:inset 0px 2px 7px rgba(0, 0, 0, 0.4);*/
		}
		#group-store .shiten .block:last-of-type{
			border-bottom-left-radius: 1.9vw;
			border-bottom-right-radius: 1.9vw;
		}

	#group-store .shiten h4{
		font-size:4.53vw;
		margin-bottom:.8vw;
	}
	#group-store .shiten .in {
		margin-bottom:.8vw;
	}
	#group-store .shiten .item{
		min-width: 5em;
		font-weight: 500;
	}
	
		#group-store .shiten .web{
			margin-top:2.1vw;
		}
	#group-store .shiten .web a{
	width: 20%;
	height: 5.33vw;
	font-size: 3.2vw;
	}
}