@charset "UTF-8";
/* CSS Document */

html {
 	height: 100%;
	
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
body {
	font-family: "Zen Kaku Gothic New", sans-serif;
	
	background-image: url("");
	background-repeat: no-repeat;
	background-size: 100%;
	background-attachment: fixed;
	
	margin: 0;
	padding: 0;
	
	text-align:justify;
	word-break:break-all; 
	text-justify:inter-ideograph;
	text-justify:inter-character;
	word-wrap:break-word;
	overflow-wrap:break-word;
	
	font-size: 16px;
}

#page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* wrapが伸びるように */
#wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@font-face{

}

h1,h2 {
	all: unset;
	display: block;
	font-weight: normal;   /* 太字を解除 */
	font-size: 1rem;       /* 通常サイズに */
	font-weight: 800;
	margin: 0;
	padding: 0;
	line-height: 1;
}
img {
	display: block;
	vertical-align: bottom;
	margin: 0 auto;
}
svg {
	vertical-align: bottom;
	line-height: 1;
	overflow-x: hidden;
	overflow-y: hidden;
}
a:link{ color: #555555; }
a:visited { color: #555555; }
a:hover { color: #555555; }
a:active { color: #555555; }

a {
	text-decoration: none;
  	display: block;
  	transition: .3s;
  	-webkit-transform: scale(1);
  	transform: scale(1);
}
a:hover {
  	-webkit-transform: scale(1.03);
 	transform: scale(1.03);
	opacity: 0.6;
	filter: alpha(opacity=60);
}
a {
  -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
       -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
}


/* PC none */
@media screen and (min-width: 801px) {
	.pc-none{ display:none; }
	}
/* SP none */
@media screen and (max-width: 800px) {
	.sp-none{ display:none; }
	}




/********** navi**********/
.navi-pc-links {
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	color: #333333;
	font-size: 0.7rem;
	font-weight: 400;
}
.navi-pc-links a:link{ color: #333333; }
.navi-pc-links a:visited { color: #333333; }
.navi-pc-links a:hover { color: #000000; }
.navi-pc-links a:active { color: #000000; }

.navi-wrapper {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.navi {
	width: 100%;
	height: 50px;
	margin: 0 auto;  
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 100;
	background-color: rgba(255,255,255,1);
}

.navi-logo {
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-family: serif;
	color: #999999;
}
.navi-logo h1{
	font-size: 1.5rem;
}
.navi-logo-title {
	font-family: serif;
	font-size: 1.5rem;
	color: #333333;
}

.navi-right {
	margin-right: auto;
	display: flex;
	align-items: center;
	gap: 0;
	margin-right: 70px;
}
.navi-right-pc {
	margin-right: 0px;
}

.navi-recruit, .navi-access {
	width: 100px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-weight: 400;
	font-size: 0.9rem;
}
.navi-recruit {
	background-color: #FF0F0F;

}
.navi-access {
	background-color: #333333;
}

/********** mail icon **********/
.dli-mail {
  display: inline-block;
  vertical-align: middle;
  color: #ffffff;
	margin-right: 3px;
  line-height: 1;
  position: relative;
  width: 1.06667em;
  height: 0.8em;
  border: 0.1em solid currentColor;
  border-radius: 0.1em;
  box-sizing: content-box;
  overflow: hidden;
}
.dli-mail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.75425em;
  height: 0.75425em;
  border: 0.1em solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 0 0.1em;
  box-sizing: content-box;
  transform: translate(-50%, -50%) rotate(-45deg) skew(10deg, 10deg);
}

/* =============== タイトルテキストエフェクト =============== */
/* ベース */
.bg-video-text {
  position: relative;
  overflow: hidden;
}

.bg-video-text-inner {
  display: inline-flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 12px);
  line-height: 1.1;
}

/* 行アニメーション */
.bg-video-text-inner p {
  margin: 0;
  opacity: 0;
  transform: translate3d(60px,0,0);
  animation: waveIn 900ms cubic-bezier(.2,.8,.2,1) forwards;
  will-change: transform, opacity, filter;
  filter: blur(6px);
}

.wave-text .char {
  letter-spacing: -0.05em;
  display: inline-block;

}

/* 行ごとの遅延（波のリズム）*/
.bg-video-text-inner p:nth-child(1) { animation-delay: 0ms; }
.bg-video-text-inner p:nth-child(2) { animation-delay: 120ms; }
.bg-video-text-inner p:nth-child(3) { animation-delay: 240ms; }
.bg-video-text-inner p:nth-child(4) { animation-delay: 420ms; } /* 説明文は少し遅らせる */

@keyframes waveIn {
  0% {
    opacity: 0;
    transform: translate3d(60px,0,0) rotate(0.001deg);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    transform: translate3d(-6px, -8px, 0); /* いったん通り過ぎて上へ */
    filter: blur(2px);
  }
  75% {
    transform: translate3d(2px, 4px, 0);  /* 下へ */
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
    filter: blur(0);
  }
}

/* 動きが強いと感じたらここで調整 */
@media (max-width: 480px) {
  .bg-video-text-inner p { animation-duration: 800ms; }
}

/* アクセシビリティ：動きを減らす設定の人には静止表示 */
@media (prefers-reduced-motion: reduce) {
  .bg-video-text-inner p {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* =============== タイトルテキストエフェクト =============== */

/* move-up */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2.0s ease, transform 2.0s ease;
}
.fade-in.inview {
  opacity: 1;
  transform: translateY(0);
}
/* move-up */


/* move-side */
.mph-recruit-sub {
  opacity: 0;
  transform: translateX(100%); /* 右の外からスタート */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.mph-recruit-sub.inview {
  opacity: 1;
  transform: translateX(0); /* 元の位置まで移動 */
}
/* move-side */

/* Waving text */
.wave-text {
	font-family: "futura-pt", sans-serif;
	font-size: min(19vw, 300px);
	text-align: left;
	font-weight: 1000;
	white-space: nowrap;
	 color: #000;
	line-height: 1;
	overflow: hidden;
	opacity: 0;
}

.wave-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(90px);
  animation: riseAndSettle 0.5s ease forwards;
  vertical-align: bottom;
}

@keyframes riseAndSettle {
  0%   { opacity: 0; transform: translateY(90px); }
  60%  { opacity: 1; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Waving text */



/********** footer **********/
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 20px;
	background: #999999;
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 400;
	}		
.footer-links{
	padding: 0 10px 0 10px;
}
.footer a:link{ color: #dddddd; }
.footer a:visited { color: #dddddd; }
.footer a:hover { color: #333333; }
.footer a:active { color: #333333; }
@media screen and (max-width:801px){
	.footer { flex-flow: column; }
	.footer-links{ text-align: center; }
 	 }

/* button line */
.button_line001 {
	padding: 10px;
	font-family: "futura-pt", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 15px;
}
.button_line001 a {
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
	max-width: 90px;
	padding: 10px 0px;
	color: #313131; /* 黒文字 */
	transition: 0.3s ease-in-out;
}
.button_line001 a:before {
	position: absolute;
	bottom: 0px;
	left: 50%;
	content: '';
	width: 100%;
	height: 2px;
	background: rgba(0,0,0,.1); /* 薄い黒ライン */
	transform: translateX(-50%);
}
.button_line001 a:after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #000; /* 黒ライン */
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
.button_line001 a:hover {
	opacity: 0.7;
}
.button_line001 a:hover:after {
	transform: scale(1, 1);
}

/* 黒背景用（白文字 + 白ライン） */
.button_line001.white a {
	color: #fff;
}
.button_line001.white a:before {
	background: rgba(255,255,255,.3); /* 薄い白ライン */
}
.button_line001.white a:after {
	background: #fff; /* 白ライン */
}

/* scroll button */
.scroll_down a {
  color: inherit; /* ← ここ */
  position: absolute;
  bottom: 60px;
  left: 50%;
  display: block;
  background-size: 14px auto;
  z-index: 2;
  text-decoration: none;
  transform: translate(-50%, -50%);
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

/* 白黒切り替え用 */
.scroll_down_wh a {
  color: #ffffff;
}
.scroll_down_bk a {
  color: #666666;
}

.scroll_down a::before {
  position: absolute;
  top: calc(50% + 24px);
  left: calc(50% - 8px);
  transform: rotate(-45deg);
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid currentColor;  /* ← ポイントはココ */
  border-width: 0 0 2px 2px;
  animation: bounce 2s linear infinite;
}

.scroll_down a::after {
  position: absolute;
  width: 32px;
  height: 32px;
  content: "";
  border: 2px solid currentColor;  /* ← ココも */
  border-radius: 50%;
  top: calc(50% + 16px);
  left: calc(50% - 19px);
}

@keyframes bounce {
  0%, 20%, 50%, 70%, 100% {
    transform: translateY(0) rotate(-45deg);
  }
  40% {
    transform: translateY(-8px) rotate(-45deg);
  }
  60% {
    transform: translateY(-4px) rotate(-45deg);
  }
}
/* scroll button */













/* relair */
.top-movie {
    position: relative;
    width: 100%;
    height: 100vh;
	min-height: 500px;
    overflow: hidden;
    background-color: #000; /* 動画がなければ黒背景 */
}
.top-movie video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.top-movie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0px,
    rgba(255, 255, 255, 0.3) 2px, /* ← 同じ透明度で線を固定 */
    transparent 2px,
    transparent 8px /* ← 2px線 + 6px間隔＝8px周期 */
  );
  pointer-events: none;
}
.top-movie h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.top-movie h1 img {
  display: block;
}
.fade-in-loaded {
  opacity: 0;
  transform: translateY(150px); /* 下から上へ */
  transition: opacity 2s ease, transform 2s ease;
  display: block;
}
.fade-in-loaded.inview {
  opacity: 1;
  transform: translateY(0); /* 中央に移動 */
}
/* relair */
.relair-logosize{
	display: block;
	width: 50vw;
	max-width: 500px;
}
.garage-logosize{
	display: block;
	width: 100vw;
	max-width: 1000px;
}
@media screen and (max-width: 750px) {
	.relair-logosize{}
	.garage-logosize{}
}


  /* タイプライター用 */
.top-movie-type {
    position: relative;
    width: 100%;
    height: 100vh;
	min-height: 500px;
    overflow: hidden;
    background-color: #000; /* 動画がなければ黒背景 */
}
.top-movie-type video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.top-movie-type::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0px,
    rgba(255, 255, 255, 0.3) 2px,
    transparent 2px,
    transparent 8px
  );
  pointer-events: none;
}
.typewriter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  font-family: serif;

  color: #fff;
  text-align: center;
	mix-blend-mode: overlay;
	color: #ffffff;
}

.typewriter h1 {
  display: inline-block;
  margin: 0;

	width: 0;
	font-size: 12vw;
	font-weight: 800;
  line-height: 1;
  overflow: hidden;
	border-right: 2px solid transparent;
  border-right: 2px solid #fff;
  animation: typing 1.5s steps(13, end) forwards, blink 0.7s step-end infinite;
	animation-delay: 1s, 1s;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%,100% { border-color: transparent; }
  50% { border-color: #fff; }
}

.scroll-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* ======================================================================== */
.mph-top-wrapper{
	width: 100%;
	height: 100dvh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	
}
.bg-video-wrapper{
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    z-index: -1;
}
.bg-video-wrapper > video{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}
.bg-video-text{
	padding: 20px;
	font-family: serif;
	background-color: rgba(0,0,0,0.3);
	
	transition: transform 0.1s linear; /* 擬似パラ滑らかさ */
}

.bg-video-text-inner{
	border-left: solid 10px #ffffff;
	padding-left: 20px;
}
.bg-video-text-inner p{
	margin: 0 0 20px 0;
	color: #ffffff;
	font-size: 5rem;
	font-weight: 800;
	line-height: 1.2;
}
.bg-video-text-inner p span{
	color: #ffffff;
	display: inline-block;
	
	font-size: min(5vw,2rem);
	
	font-weight: 500;
	line-height: 1.8;
}
@media screen and (max-width: 750px) {
	.bg-video-text-inner p{ font-size: 10vw;}
}



.mph-section-1{
	width: 100%;
	height: auto;
	background-color: #eeeeee;
	padding-bottom: 100px;
}
.mph-service{
	padding-top: 50px;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.mph-service p{
	text-align: center;
	margin: 0;
	line-height: 1;
	font-size: 3rem;
	font-weight: 400;
	color:#555555;
}
.mph-service span{
	font-size: 2rem;
	color: #333333;
}

.mph-service-contents-assy {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	margin-top: 50px;
}
.mph-service-contents {
	background-color: #ffffff;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	
	margin-bottom: 50px;
}
.mph-service-contents-pic {
	width: 250px;
	height: 250px;
	max-width: 300px;
	min-width: 250px;
	
	background-repeat: no-repeat;
	background-size: cover;
}
.mph-secretbase {
	background-image: url("../images/secretbase.jpg");
}
.mph-garage666 {
	background-image: url("../images/nail.jpg");
}
.mph-service-contents-text {
	padding: 20px 40px;
	background-color: #ffffff;
}
.mph-service-contents-text p {
	font-size: 1rem;
	line-height: 1.5;
}
.mph-service-contents-text span {
	display: inline-block;
	font-size: 1.5rem;
	padding-bottom: 10px;
}
@media screen and (max-width: 700px) {
	.mph-section-1{ padding-bottom: 10px;}
	.mph-service-contents-assy { width: 100%;}
	.mph-service-contents { flex-direction: column;}
	.mph-service-contents-pic { width: 100%; max-width: 100%; height:90vw;}
}



/* =============== セクション2 =============== */
.mph-section-2{
	width: 100%;
	height: auto;
	background-color: #ffffff;
	padding: 50px 0;
}
.mph-section-2-inner{
	margin: 0 auto;
	width: 80%;
	width: 100%;
}
.mph-recruit-assy {
	position: relative;
	margin-top: 50px;
	padding-bottom: 50px;

}

/* スクロールテキスト */
.mph-recruit-text {
	position: absolute;
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
	/* background-color: rgba(255,255,255,0.9); */
	padding: 50px 0;

	position: absolute;					/* top を効かせるため */
	transition: transform 0.1s linear;	/* なめらかに動かす */
	
	top: 1200px;
	
	z-index: 2;
	mix-blend-mode: screen;
}

.mph-recruit-text-s {
	width: 80%;
	margin: 0 auto;

	color: #000000;

	font-weight: 500;
	font-size: min(4vw,1.7rem);
	text-align: center;
	
	padding: 20px;
	padding-top: 50px;
	background-color: rgba(255,255,255,0.9);
}
.mph-recruit-text span {
	font-size: 12vw;
	font-weight: 900;
	line-height: 1;
	display: block;
  	text-align: left;
	color: #ffffff;
}


.mph-recruit-image {
	width: 100%;
	height: auto;
}







/* =============== セクション3 =============== */
.mph-section-3{
	width: 100%;
	height: auto;
	background-color: #ffffff;
	padding: 0px 0;
	background: linear-gradient( to bottom,#eeeeee 0%,#ffffff 100%);
}
.mph-section-3-inner{
	margin: 0 auto;
	width: 80%;
	width: 100%;
}
.mph-news {
	position: relative;
	width: 100%;
	height: auto;

	
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.mph-news-bg-L {
	width: 200px;
	position: absolute;
	top: 0;
	left: 0;
}
.mph-news-bg-R {
	width: 150px;
	position: absolute;
	top: 0;
	right: 0;
}

.mph-news-title {
	width: 100%;
	height: 200px;
	
	display: flex;
	justify-content: center;
	align-items: center; 
	
	position: absolute;
	top: 70px;
	left: 50%;
	transform: translate(-50%, -50%);
}




/*=============== TOPIC ===============*/

.topics-contents {
	display: flex;
	justify-content: center;
	
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 150px 0 0 0;
	margin-top: 50px;
	margin-bottom: 50px;

	text-align: center;
}
.topics{
	width: 100%;
	height: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
	font-family: "M PLUS 1p";
	font-size: 1rem;
	font-weight: 400;
	color: #333333;
	}

@media screen and (max-width:480px){
	.topics{ padding-bottom: 10px; }
 	 }

.topics_wrapper{
	width: auto;

	text-align: left;
	padding: 0px;
	display: inline-block;

	}
.topics_inner{

	width: auto;
	
	margin: 0 auto;
	box-sizing: border-box;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	
	font-family: "Zen Kaku Gothic New";
	font-size: 0.9rem;
	font-weight: 400;
	color: #333333;	

	}
.topics_date{

	width: 90px;
	min-width: 90px;
	height: 25px;

	text-align: left;
	vertical-align: top;
	padding: 2px 2px 2px 10px;
	display: inline-block;

	}
.topics_date p{

	font-family: "Zen Kaku Gothic New", sans-serif;
	line-height: 1.3; margin: 0.2em 0px;
}
.topics_text{

	max-width: 400px;
	height: 25px;

	text-align: left;
	vertical-align: top;
	padding: 2px 2px 2px 10px;
	display: inline-block;

	}
.topics_text p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.topics_text p { line-height: 1.3; margin: 0.2em 0px;}
@media screen and (max-width:600px){
	.topics_date{ padding: 2px 0px 2px 0px;}
	.topics_text{ max-width: 180px; padding: 2px 0px 2px 0px;}
 	 }

.topics_wrapper a:link p { color: #888888; }
.topics_wrapper a:visited p { color: #888888; }
.topics_wrapper a:hover p { color: #444444; }
.topics_wrapper a:active p { color: #444444; }







/* ========== company ========== */
.mph-sub-section-1{
	width: 100%;
	height: auto;
	background-color: #eeeeee;
	padding-bottom: 50px;
	padding-top: 50px;
	
	background-image: url("../images/terra.jpg");
	background-size: cover;
	background-position: center bottom;
	
	text-align: center;
}
.mph-sub-section-2{
	width: 100%;
	height: 100vh;
	min-height: 1000px;
	background-color: #ffffff;
	padding-bottom: 100px;
	
	background-image: url("../images/candle.jpg");
	background-size: cover;
	background-position: center bottom;
	
	text-align: left;
	color: #ffffff;
}
.mph-sub-section-3{
	width: 100%;
	height: auto;
	background-color: #B2C6FF;
	background-color: #eeeeee;
	padding-bottom: 0px;
}

.mph-sub-wrapper{
	margin: 0 auto;

	padding-top: 10px;
	padding-bottom: 10px;
	font-family: "Zen Kaku Gothic New", sans-serif;
}

.mph-sub-wrapper p{

	margin: 0;
	line-height: 1;
	font-size: 3rem;
	font-weight: 400;

}
.mph-sub-wrapper span{
	font-size: 2rem;

}

.mph-sub-contents-assy {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	margin-top: 50px;
}
.mph-sub-contents {
	background-color: rgba(255,255,255,0.3);
	width: 100%;
	margin: 0 auto;
	margin-bottom: 50px;
}
.mph-sub-contents-message , .mph-sub-contents-company {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 50px;
}

.mph-sub-contents-title {
	padding: 20px 40px;

}
.mph-sub-contents-title p {
	font-size: 1rem;
	line-height: 1.5;
}
.mph-sub-contents-title span {
	display: inline-block;
	font-size: 3rem;
	padding-bottom: 10px;
}
.mph-sub-contents-title.orange span {
	color: #FF6500;
}
.mph-sub-contents-title.blue span {
	color: #007DF1;
}
.mph-sub-contents-title.gray span {
	color: #888888;
}

.mph-sub-contents-text {
	padding: 20px 40px;
}
.mph-sub-contents-text p {
	font-size: 1rem;
	line-height: 1.5;
}
.mph-sub-contents-text span {
	display: inline-block;
	font-size: 1.5rem;
	padding-bottom: 10px;
}

@media screen and (max-width: 700px) {
	.mph-sub-section-1{ padding-bottom: 10px;}
	.mph-sub-contents-assy { width: 100%;}
	.mph-sub-contents { flex-direction: column;}
	.mph-sub-contents-text {padding: 20px 20px;}
	.mph-sub-contents-title {padding: 20px 20px;}
}


.company-info-flex{
	border-bottom: solid 1px #888888;
}
.company-info-flex img{
	padding-left: 10px;
}
.company-info-flex .row {
  display: flex;
  padding: 0px 0;
}
.company-info-flex .label {
	width: 30%;
	text-align: left;
	border: solid 1px #888888;
	border-right: none; /* ★右側の線を消す */
	border-bottom: none;
	padding: 10px 0;
	
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #eeeeee;
}
.company-info-flex .value {
    flex: 1;
    text-align: left;
    border: solid 1px #888888;
    border-bottom: none;
    padding: 10px;

    display: flex;
    flex-direction: column;  /* 縦並び */
    align-items: flex-start; /* 左寄せ */
    gap: 4px;                /* 要素間の隙間 */
}
.company-info-flex .value > div {
    display: flex;            /* 横並びに */
    align-items: center;      /* 垂直方向中央揃え */
    gap: 5px;                 /* 文字とアイコンの間隔 */
}

.mph-googlemap-wrapper{
	margin: 0 auto;
	width: 100%;
	max-width: 440px;
	padding-top: 30px;
	padding-bottom: 50px;

}
.mph-address{
	margin: 0 auto;
	width: 100%;
	max-width: 500px;
	text-align: left;

}
.mph-googlemap {
  	position: relative;
  	width: 100%;
	max-width: 700px;
  	padding-bottom: 56.25%; /* 16:9 の比率 */
  	height: 0;
  	overflow: hidden;
}

.mph-googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ========== company ========== */




/* ========== restrant ========== */
.restrant-wrapper{
	padding-top: 0px;
}
.restrant-wrapper-padding{
	padding-top: 50px;
}
.restrant-wrapper .white-bg {
	background-color: #ffffff;
	background-image: 
		linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.8)),
		url("../images/garage666-image.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.restrant-wrapper .beauty-bg {
	background-color: #ffffff;
	background-image: 
		linear-gradient(rgba(10,186,181,0.1), rgba(255,255,255,0.5)),
		url("");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.restrant-fv-title-bg{
    padding: 20px 20px;
    background-color: #000000;
}
.restrant-fv-title{
	display: inline-block;
	font-family: "Zen Kaku Gothic New", sans-serif;

}
.restrant-fv-title h1 {
    text-align: left;
    font-size: 3rem;
    font-weight: 400;
    color: #888888;
    margin: 0;
    line-height: 1;
}
.restrant-fv-title p {
    text-align: left;
    margin: 0;
	margin-top: 10px;
    line-height: 1;
    font-size: 2rem;
    color: #888888;
}

.restrant-fv-title span{
	font-size: 2rem;
	color: #666666;
	
}

.restrant-fv-read{
	margin: 0 auto;
	width: 95%;
	max-width: 700px;
	text-align: center;
	padding-bottom: 30px;
}
.restrant-fv-read span{
	font-size: 2rem;
}

.restrant-secretbase{
	position: relative;	
}
.restrant-secretbase-title{
	position: absolute;
	top: 20px;
	left: 20px;
	
	padding: 0px 20px;
	font-family: serif;
	color: #ffffff;
	font-size: min(5vw,3rem);
	font-weight: 400;
	line-height: 1;
	border-left: solid 1vw #fff;
	background-color: rgba(0,0,0,0);
}
.restrant-secretbase-title span{
	font-size: min(4vw,2rem);
}
.restrant-fv-text{
	margin: 0 auto;
	width: 100%;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	color: #ffffff;
	line-height: 2;
	background-color: #333;
}
.restrant-address{
	position: absolute;
	bottom: 0;
	right: 0;
	color: #ffffff;
	padding: 20px;
	font-size: min(3vw,1rem);
}



.restrant-fv-title-logo{
	display: block;
	margin: 0 auto;
	width : 100%;
	height: auto;
	max-width: 400px;
}
.restrant-fv-title-logo-666{
	display: block;
	margin: 0 auto;
	width : 100%;
	height: auto;
	max-width: 700px;
	padding: 30px 0;
}
.restrant-fv-title-logo-relair{
	display: block;
	margin: 0 auto;
	width : 50%;
	height: auto;
	max-width: 700px;
	padding: 30px 0 0px 0;
}
.restrant-menu-container{
	background-color: #000;
	padding-bottom: 50px;
}
.restrant-menu-container-white{
	background-color: #C87B2F;
	background-color: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
}
.restrant-menu{
	width: 95%;
	max-width: 700px;
	display: flex;
	margin: 0 auto;
	justify-content: center;
	padding: 20px 0;
}
.restrant-menu-inner{
	width: 50%;
	color: #fff;
	text-align: center;
	font-size: 1.3rem;
	line-height: 1;	
}
.restrant-menu-inner-white{
	width: 50%;
	color: #333;
	text-align: center;
	font-size: 1.3rem;
	line-height: 1.5;	
}
.restrant-course{
	width: 70%;
	margin: 0 auto;
	padding: 15px 0;
	margin-top: 20px;
	margin-bottom: 10px;
	border: 1px solid #fff;
}
.restrant-course-white{
	width: 70%;
	margin: 0 auto;
	padding: 15px 0;
	margin-top: 20px;
	margin-bottom: 10px;
	border: 1px solid #333;
}
.order1 { order: 1; }
.order2 { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }

.restrant-menu-inner p , .restrant-menu-inner-white p {
	font-size: 1rem;
	line-height: 1.5;
}
.restrant-menu-inner p span , .restrant-menu-inner-white p span{
	font-size: 1.6rem;
}
@media screen and (max-width: 700px) {
	.restrant-menu{ flex-direction: column;}
	.restrant-menu-inner{width: 100%;}
	.restrant-menu-inner-white{width: 100%;}
	.order3 { order: 4; }
	.order4 { order: 3; }
}

.restrant-shop-container{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: #888;
	background: linear-gradient(to right, #333 55%, #888 45%);
	width: 100%;
	height: 70vw;
	max-height: 700px;
}
.restrant-shop-container-relair{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: #888;
	background: linear-gradient(to right, #83BAB8 55%, #9EE0DE 45%);
	width: 100%;
	height: 70vw;
	max-height: 700px;
}

.restrant-shop-inner{
	margin: 0 auto;
	position: relative;
	width: 100%;
	max-width: 1000px;
	height: 20px;
}
.restrant-shop-pic{
	display: block;
	width: 70%;
	max-width: 700px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	
}
.restrant-shop-text{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 45%;
	height: 35vw;
	max-height: 300px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background: rgba(0,0,0,0.2);
	color: #fff;
	font-size: 1.1rem;
	outline: 1px solid #fff;
    outline-offset: -10px;
}
.restrant-shop-text-white{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 45%;
	height: 35vw;
	max-height: 300px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 1.1rem;
	outline: 1px solid #fff;
    outline-offset: -10px;
}
.restrant-shop-text-tiffany{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 45%;
	height: 35vw;
	max-height: 300px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background: rgba(10,186,181,0.5);
	color: #fff;
	font-size: 1.1rem;
	outline: 1px solid #fff;
    outline-offset: -10px;
}
.restrant-shop-text-inner , .restrant-shop-text-inner-white , .restrant-shop-text-inner-tiffany{
	width: 100%;
	height: 70%;
	display: block;
	padding: 40px;
}

.restrant-shop-text p , .restrant-shop-text-white p , .restrant-shop-text-tiffany p{
	font-size: 1rem;
}

@media screen and (max-width: 700px) {
	.restrant-shop-text{ height: 250px; width: 60%;}
	.restrant-shop-text-white , .restrant-shop-text-tiffany{ height: 260px; width: 60%;}
	.restrant-shop-text-inner{ padding: 30px;}
	.restrant-shop-text-inner-white , .restrant-shop-text-inner-tiffany{ padding: 20px;}
}

.restrant-insta{
	position: relative;
	background-image: url("../images/insta-bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 50vw;
	max-height: 400px;

}
.restrant-insta-white{
	position: relative;
	background-image: url("../images/insta-bg2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 50vw;
	max-height: 400px;
}
.restrant-insta-beauty{
	position: relative;
	background-image: url("../images/beauty-insta.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 50vw;
	max-height: 400px;
}
.restrant-insta-beauty .tiffany p{
	color: #0ABAB5;
}
.restrant-insta-inner{
	display: flex;
	gap: 50px;
	height: min(20vw,60%);
	position: absolute;
	top: min(20vw,60%);
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-weight: 800;
}
.restrant-insta-inner img{
	width: 20vw;
	max-width: 100px;
}
.restrant-insta-inner p{
	text-align: center;
	line-height: 0.5;
	font-size: min(3vw,1.2rem);
	white-space: nowrap;
}
.restrant-insta-inner a:link{ color: #fff; }
.restrant-insta-inner a:visited { color: #fff; }
.restrant-insta-inner a:hover { color: #fff; }
.restrant-insta-inner a:active { color: #fff; }


.restrant-data-container{
	width: 95%;
	max-width: fit-content;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}
.restrant-data-container .title{
	font-size: 1.5rem;
	text-align: center;
	padding: 20px 0;
}
.restrant-data-container hr{
	border: none;
	border-top: 1px solid #ccc;
	height: 0;
}
.restrant-data{
	display: flex;
	align-items: center;

}
.restrant-data-L{
	padding: 10px 20px;
	width: 15vw;
	box-sizing: border-box;
	font-weight: 500;
}
.restrant-data-R{
	padding: 10px 20px;
	box-sizing: border-box;
}
.restrant-data-R a{
	display: inline-flex;
	white-space: nowrap;
}
.restrant-data-R span{
	font-size: 0.8rem;
}
@media screen and (max-width: 700px) {
	.restrant-data{ flex-direction: column;}
	.restrant-data-L{ width: 100%; text-align: center; padding-bottom: 0;}
}

.restrant-map{
	padding: 20px 0;
}
.restrant-access{
	text-align: center;
	font-size: 0.8rem;
	padding-bottom: 50px;
}
/* ========== restrant ========== */



/* ========== beauty ========== */
.beauty-images{
	margin: 0 auto;
	display: flex;
	gap: 20px; 
	width: 90%;
	max-width: 700px;
}
.beauty-images-inner{
	margin: 0 auto;
	width: 50%;
	flex-shrink: 1;
}
.shopdata-address{
	margin: 0 auto;
	width: 90%;
	max-width: 700px;
	text-align: right;
}
.beauty-logo{
	margin: 0 auto;
	width: 50%;
	max-width: 300px;
	padding-top: 50px;
	padding-bottom: 20px;
}
/* ========== beauty ========== */