@charset "utf-8";
/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");
/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
/*Bootstrap Iconsの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");
/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");
/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");
@import url("inview.css");
/*ACフォント読み込み
---------------------------------------------------------------------------*/
@font-face {
  font-family: 'EisuiKaisho';
  src: url('../fonts/EisuiKaisho.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	font-size: 14px;
	height: 100%;
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:769px) {
		html, body {
			font-size: 15px;	/*基準となるフォントサイズ。*/
		}
	}
	/*画面幅900px以上の追加指定ここまで*/
body {
	font-family: 'EisuiKaisho', serif;
	-webkit-text-size-adjust: none;
	background: #fcfcfc;
	color: #333;	
	line-height: 2;		/*行間*/
}
/* .top-pattern {
  height: 100vh;
  overflow: hidden;
} */
/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}
/*table全般の設定*/
table {border-collapse:collapse;}
/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
/*videoタグ*/
video {max-width: 100%;}
/*iframeタグ*/
iframe {width: 100%;}
/*ul,olタグ*/
ul, ol {
  margin-bottom: 30px;
}
.page-section {
	max-width: 1140px;
  margin: 200px auto 0;
  padding: 0 20px;
}
.page-section-bottom-a {
	margin-bottom: 200px;
}
.page-section-bottom-b {
	margin-bottom: 100px;
}
/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #333;
	transition: 0.3s;
}
/*container
---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 1800px;	
	min-height: 100%;
}
/*header
---------------------------------------------------------------------------*/
header {
	  padding: 0 30px;
    margin-top: 35px;
    background: #fcfcfc;
}
.home header {
	padding: 40px 60px;	
	margin-top: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#logo img {
	display: block;
	object-fit: contain;
}
#logo {
	margin: 0;
	width: 200px;
}
.home #logo {
  height: 215px;
}
.home #logo img {height: 100%;}
.logo-mark {
	width: 80px;
}
/*トップページのヘッダー
---------------------------------------------------------------------------*/
header ul {
	margin: 0; 
	padding: 0;
  text-align: left;
} 
.top-nav {
  margin-top: 20px;
}
.page-nav {
	margin-top: 10px;
}
header nav.top-nav,header nav.page-nav {
	writing-mode: vertical-lr;
  text-orientation: upright;
  letter-spacing: 0.2em;	
}
header nav.top-nav a,header nav.page-nav a {
  display: inline-block;
  text-decoration: none; 
  position: relative;
	transition: all 0.5s ease-out;
  font-size: 14px;
  padding: 8px 6px;
}
header nav.top-nav a:hover,header nav.page-nav a:hover {
  transform: translateY(-5px);
}
.top-nav a::before,.page-nav a::before {
    content: "";
    position: absolute;
    left: 16px;
    top: -7px;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: #ec1c2a;
    border-radius: 50%;
}
/*マウスオン時*/
header nav a:hover {
	opacity: 1;					
}

/*main
---------------------------------------------------------------------------*/
main {
	 flex: 1;
}
h2.top-title {
	margin: 0;
	font-weight: normal;	
	font-size: 22px;	
	letter-spacing: 0.2em;	
	/* text-indent: 0.3em;		 */
	text-align: center;		
	/* writing-mode: vertical-lr;
  text-orientation: upright; */
	/* margin-top: 120px; */
	line-height: 39px;
  padding-bottom: 10px;
}
.top-title-sub {
  color: #797979;
  display: block;
  text-align: center;
  font-size: 14px;
}
.top-space {	
  margin: 30px 0;
}
.top-main {
width: 100%;
}
/*縦書き用の設定
---------------------------------------------------------------------------*/
.title-bg {
	/* display: flex;
	align-items: center; */
	/* flex-direction: column; */
	justify-content: space-between;
	/* padding: 60px 0; */
	padding: 100px 0px 0px 0px;
	background: #fcfcfc;
}
.title-bg.title-bg-admin {
	display: flex;
	justify-content: center;
	padding: 60px 0;
}
.title-bg h1 {
	font-size: 30px;
	margin: 0;
  padding-bottom: 5px;
  white-space: nowrap;
  padding-right: 20px;
}
.page-head-title .en {
	color: #ec1c2a;
}
.page-head-title {
padding-left: 150px;
}
.head-img {
	width: 50%;
	height: 400px;
	object-fit: cover;
}
/*縦書きにする指定*/
.tate {
	writing-mode: vertical-lr;
	text-orientation: upright;
}
.page-title {
	letter-spacing: 10px;
  font-weight: normal;
}
.page-logo-back {
  position: static;
  z-index: -1;        
}
.page-logo-back::before {
	content: "";
    position: fixed;
    /* top: 5rem; */
    bottom: -8rem;
    right: 6rem;
    width: 800px;
    height: 800px;
    background-image: url(../img/logo-back-big-top.webp);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -2;
}

.contact-section,
.top-page-logo-back {
  position: relative;
  z-index: 2;
}
/* footer内の背景ロゴ設定 */
.top-page-logo-back::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 6rem;
    width: 800px;
    height: 100vh;
    background-image: url(../img/logo-back-big-top.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    z-index: -2;
    pointer-events: none;
}


/*menubarブロック初期設定
---------------------------------------------------------------------------*/
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar {display: none;}
#menubar.db {display: block;}
#menubar.dn {display: none;}
/*メニューブロック*/
#menubar {
	position: fixed;
	overflow: auto;
	z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 200px 140px 10px;
	background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(.98);
	transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .6s;
  will-change: opacity, transform;
}
#menubar.is-open {
 opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .6s cubic-bezier(.16,1,.3,1),
    visibility 0s;
}

/* アクセシビリティ：動きを減らす環境では瞬時表示 */
@media (prefers-reduced-motion: reduce) {
  #menubar {
    transition: none;
    transform: none;		
  }
  #menubar.is-open {
    transition: none;
  }
}
.body-no-scroll { overflow: hidden; }
	@media screen and (min-width:769px) {
		#menubar {
			width: 100%;					
		}
	}
#menubar a {
	display: block;text-decoration: none;
	text-align: left;	
	padding: 16px 10px;	
	color: #333;
	position: relative;
  display: inline-block;
	padding-left: 28px;
}
#menubar a::before {
  content: "";
  position: absolute;
  top: 50%;            
  left: 8px;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background-color: #ec1c2a;
  border-radius: 50%;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*開閉用のスタイル*/
#menubar_hdr.db {display: flex;}
#menubar_hdr.dn {display: none;}

/*３本バーを囲むブロック*/
#menubar_hdr {
	position: absolute;
	 z-index: 101;
	 cursor: pointer;
	 right: 30px;
	 top: 30px;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 padding: 10px 5px;
   transition: 0.3s;
}

/*３本バーのマウスオン時に色を50%にする*/
#menubar_hdr:hover {
	opacity: 0.5;
}

/*バー１本あたりの設定*/
#menubar_hdr span.menu-sen {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1px solid #333;	
	width: 70px;
	padding-bottom: 5px;
}
.menu {
	position: relative;
  top: 3px;
}
span.menu-mokuzi {
  padding-right: 15px;
}

/*変形の起点。センターに。*/
#menubar_hdr.ham span.menu-sen {
	transform-origin: center center;
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span.menu-sen:nth-of-type(1){
	transform: rotate(25deg) translate(5px, 3px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span.menu-sen:nth-of-type(2){
	transform: rotate(-25deg) translate(5px, 1px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {
	font-size: 100%;
}
.footer-cts {
	padding: 160px 20px 80px 20px;
	max-width: 1140px;
	margin: 0 auto;
	/* background-color: #fff; */
}
.footer-tate {
	display: inline-block;
	writing-mode: vertical-lr;
  text-orientation: upright;
} 
.top-footer {
  z-index: 2;    
}
footer a {
	text-decoration: none;
}
.copy {
	padding: 20px;
	font-size: 11px;
	text-align: right;
  max-width: 1140px;
  margin: 0 auto;
}
.copy-top {
	padding: 5px;
}
.footer-menu {
	margin: 0;
	display: grid;
	padding-left: 0;
}
.footer-menu li {
	display: inline-block;
	position: relative;
	padding: 6px 0px 6px 18px;
	font-size: 14px;
}
.footer-menu li::before,#menuBtn::before,.menuBtn-item::before,.slide-menu li::before {
	  content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ec1c2a;
}
#menuBtn::before,.menuBtn-item::before {
	    left: -18px;
}
.footer-logo-img {
	width: 90px;
}
.footer-link {
  display: flex;
  flex-direction: column;
}
.fot-btn {
	margin-bottom: 15px;
}
.footer-item {
	padding-bottom: 15px;
	display: block;
	font-size: 12px;
	color: #999;
}
.footer-access-text {
	padding-bottom: 30px;
	font-size: 14px;
}
/*「NEWS」ブロック
---------------------------------------------------------------------------*/
/*NEWSブロック*/
.new dl {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
}

/*日付(dt)設定*/
.new dt {
	width: 8rem;			/*幅。8文字(rem)分。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	display: flex;			/*flexボックスを使う指定*/
	justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
	padding: 10px 0;	/*上下、左右への余白。下のddのpaddingと揃える。*/
}

/*記事(dd)設定*/
.new dd {
	padding: 10px 0;	/*上下、左右への余白。上のdtのpaddingと揃える。*/
	width: calc(100% - 8rem);	/*「8rem」は上の「.new dt」のwidthの値です。*/
}


	/*画面幅900px以上の追加指定ここまで*/
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}
/*ボタンの設定*/
.pagetop a {
    display: block;
    text-decoration: none;
    text-align: center;
    z-index: 99;
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 50px;
    line-height: 50px;
}
/*アニメーションボタン。（枠線をぐるっとなぞるアニメーション）
---------------------------------------------------------------------------*/
@keyframes w {0% {width: 0px;} 100% {width: 100%;}}
@keyframes h {0% {height: 0px;} 100% {height: 100%;}}
/*ボタンの一番の外側のボックス*/
.animation-btn {
	position: relative;		/*枠線をアニメーションさせる為に必要な指定*/
	display: inline-block;
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2) inset;	/*デフォルトで見えている枠線の設定。0,0,0は黒の事で0.2は色が20%出た状態。*/
}
/*上のanimation-btnの内側にあるボックス*/
.animation-btn-inner {
	display: block;text-decoration: none;
	padding: 0.5em 3em;		/*ボタン内の余白。上下、左右へ。emは文字の単位。1emが1文字分という事です。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	text-indent: 0.1em;		/*letter-spacingを設定するとその分全体のテキスト位置がずれるので、戻す設定。同じ数字にしておけばOKです。*/
}
/*ボタン内でiタグを使う場合の設定*/
.animation-btn-inner i {
	display: inline-block;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/
	padding-left: 1em;		/*テキストと、iタグの間の余白*/
}
.animation-btn-inner:hover i {
	transform: translateX(5px);	/*マウスオン時にiタグを5pxだけ右に移動する*/
}
/*枠線共通*/
.animation-btn::before,
.animation-btn::after,
.animation-btn-inner::before,
.animation-btn-inner::after {
	content: "";
	position: absolute;
	background-color: #000;		/*background(背景)スタイルですが、ここでは枠線の色に使われます。*/
	animation-duration: 0.2s;	/*アニメーションにかける時間。１辺あたり0.2秒。*/
	animation-fill-mode: forwards;	/*アニメーション完了時に最後のフレームを維持。この１行を外してみると別の動作になって面白い動きになります。*/
	animation-timing-function: linear;	/*アニメーションの速度のタイプ。同じ速度にする。*/
}
/*ラインアニメーション１（左上→右上）*/
.animation-btn:hover::before {
	left: 0px;	/*開始地点の指示*/
	top: 0px;	/*開始地点の指示*/
	height: 1px;		/*線の幅の代わりになります*/
	animation-name: w;	/*上の「@keyframes」で使うアニメーション名の指定。*/
}
/*ラインアニメーション２（右上→右下）*/
.animation-btn:hover::after {
	right: 0px;	/*開始地点の指示*/
	top: 0px;	/*開始地点の指示*/
	width: 1px;			/*線の幅の代わりになります*/
	animation-name: h;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.2s;	/*アニメーションを0.2秒遅れてスタートさせる。*/
}
/*ラインアニメーション３（右下→左下）*/
.animation-btn-inner:hover::before {
	right: 0px;		/*開始地点の指示*/
	bottom: 0px;	/*開始地点の指示*/
	height: 1px;		/*線の幅の代わりになります*/
	animation-name: w;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.4s;	/*アニメーションを0.4秒遅れてスタートさせる。*/
}
/*ラインアニメーション４（左下→左上）*/
.animation-btn-inner:hover::after {
	left: 0px;		/*開始地点の指示*/
	bottom: 0px;	/*開始地点の指示*/
	width: 1px;			/*線の幅の代わりになります*/
	animation-name: h;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.6s;	/*アニメーションを0.6秒遅れてスタートさせる。*/
}
/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #cf2003 !important;}
.color-theme, .color-theme a {color: #88291a !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mt30 {margin-top: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 3em; letter-spacing: 0.2em;}
.pc {display: none;}
.dn {display: none !important;}
	@media screen and (min-width:769px) {
		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}
	}
		@media screen and (min-width:769px) {
			#menubar_hdr.top {
				display: none;
			}
			#menubar_hdr span.menu-sen {
				width: 70px;
			}
			span.menu-mokuzi {
    		padding-right: 20px;
			}
		}
/* ローディング */
	:root{
    --logo-duration: 1600ms;
    --fadeout-duration: 600ms;
    --reveal-duration: 1200ms;
    --easing: cubic-bezier(.22,.61,.36,1);
    --bg: #fcfcfc;
  }
  body.loading .first-view {
    opacity: 0;
  }
  /* Loader */
  #loader {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background: var(--bg);
    z-index: 9999;
  }
  .loader-logo{
    width: 80px;
    opacity: 0;
    transform: translateY(40px) scale(.96); /* ←下から現れる */
    animation: logoFade var(--logo-duration) var(--easing) forwards;
  }
  #loader.fadeout{
    animation: loaderOut var(--fadeout-duration) var(--easing) forwards;
  }
  body.show-first .first-view{
    animation: reveal var(--reveal-duration) var(--easing) forwards;
  }
  /* Keyframes */
  @keyframes logoFade{
    0%   { opacity: 0; transform: translateY(40px) scale(.96); }
    35%  { opacity: 1; transform: translateY(0) scale(1); }
    70%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-20px) scale(.98); }
  }
  @keyframes loaderOut{
    to{ opacity: 0; }
  }
  @keyframes reveal{
    0%   { opacity: 0; transform: translateY(60px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .first-view {
    min-height: 100vh;
  }
  .first-view h1 {
    font-size: clamp(28px, 6vw, 56px);
    margin: 0 0 .6rem;
  }
  .first-view p {
    /* font-size: clamp(14px, 2.4vw, 18px); */
    margin: 0;
  }
	/* 好みで調整できる変数 */
:root{
  --fade-ease: cubic-bezier(.22,.61,.36,1);
  --d-logo: 1.8s;   /* ロゴが出る時間（ゆっくり） */
  --d-title: 1.6s;  /* 見出しが出る時間 */
  --d-nav: 1.6s;    /* メニューが出る時間 */

  /* 順番のディレイ（開始の待ち時間） */
  --delay-logo: .2s;
  --delay-title: 2.0s;   /* ロゴが出てから少し待つ */
  --delay-nav: 3.8s;     /* 見出しの後にさらに待つ */
}
/* 初期は非表示（下へ少しオフセット） */
#container.first-view #logo img,
#container.first-view h2,
#container.first-view nav {
  opacity: 0;
  transform: translateY(48px);
  will-change: transform, opacity;
}
/* 表示トリガーが付いたら順番にアニメーション */
body.fv-ready #container.first-view #logo img {
  animation: fvFadeUp var(--d-logo) var(--fade-ease) var(--delay-logo) forwards;
}
body.fv-ready #container.first-view h2 {
  animation: fvFadeUp var(--d-title) var(--fade-ease) var(--delay-title) forwards;
}
body.fv-ready #container.first-view nav {
  animation: fvFadeUp var(--d-nav) var(--fade-ease) var(--delay-nav) forwards;
}
/* ふわっと下→上へ */
@keyframes fvFadeUp {
  0%   { opacity: 0; transform: translateY(48px); }
  60%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
/* 動きを控えるユーザーに配慮（アクセシビリティ） */
@media (prefers-reduced-motion: reduce){
  #container.first-view #logo img,
  #container.first-view h2,
  #container.first-view nav {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
.logo-back {
  background-image: url(../img/logo-back.webp);
  background-repeat: no-repeat;      
  background-position: center center;
  background-size: cover;            
  width: 100%;                       
  height: 100vh;                     
	position: absolute;
	top: 0;
  /* right: -20%; */
  /* z-index: -2; */
}
.stay-top {
	margin-top: 250px;
}
.stay-title {
	font-weight: normal;
	position: relative;
	top: -80px;
  left: 240px;
  line-height: 59px;
  font-size: 22px;
  text-indent: 34px;
}
.stay-img {
	width: 45%;
	object-fit: cover;
}
.stay-text {
	max-width: 847px;
  margin: 100px auto 0;
  font-size: 16px;
  line-height: 42px;
}
/* 初期状態 */
.fadeUp {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}
/* アニメーション開始状態（JSで付与） */
.page-ready .fadeUp {
  animation: fadeUp 1.0s ease-out forwards;
  animation-delay: calc(var(--order, 0) * 1.70s); /* 順番に少しずつ */
}
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* 画面に入ったらアニメーション開始 */
.fadeUp.inview {
  animation: fadeUp 1s ease-out forwards;
  animation-delay: calc(var(--order, 0) * 1.3s);
   opacity: 1;
  transform: translateY(0);
}


.page-sub-title {
    margin: 0 auto 90px;
    text-align: center;
}
.title-kakko {
  position: relative;
  padding: 12px 40px;
  text-align: center;
  display: inline-block;
}
/* 丸の共通スタイル */
.title-kakko::before,
.title-kakko::after,
.title-kakko span::before,
.title-kakko span::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #ec1c2a;
  border-radius: 50%;
}
/* 左上 */
.title-kakko::before {
  top: 0;
  left: 0;
}
/* 右上 */
.title-kakko::after {
  top: 0;
  right: 0;
}
/* 左下 */
.title-kakko span::before {
  bottom: 0;
  left: 0;
}
/* 右下 */
.title-kakko span::after {
  bottom: 0;
  right: 0;
}
.page-sub-title .ja {
    text-align: center;
    font-size: 21px;
		font-weight: normal;	
		margin: 0;
		display: inline-block;		
    letter-spacing: 0.2em;
}
.page-sub-title .en {
	text-align: center;
	display: block;
	font-size: 12px;
	letter-spacing:.06em;
	color: #797979;
}
.stay-info,.safety-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}
.stay-item {
	border-top: solid 1px #dadada;
  position: relative;
  padding: 35px 0 20px 0;
}
.stay-item .item {
	border: solid 1px #999;
	padding: 3px 20px;
  border-radius: 20px;
  display: inline-block;
	margin-bottom: 20px;
	font-size: 14px;
}
.stay-item .name {
	font-size: 16px;
}
.safety-item {
	border: solid 1px #dadada;
  padding: 30px;
  border-radius: 5px;
}
p {
	margin: 0;
}
.peri-img {
	width: 45%;
}
section.stack { height: 200vh; position: relative; }
    .frame {
      position: sticky; top: 0; height: 100vh; overflow: clip;
    }
    .stage { position: relative; width: 100%; height: 100%; }
    .img-base,
    .img-next {
      position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			/* ← ゆらゆら原因になる変形・フィルタは使わない */
			transform: none;
			filter: none;
			will-change: clip-path; /* clip-path だけに絞る */
    }
    /* 上下方向のめくりに変更 */
    .img-next {
      z-index: 2;
      --reveal: 0%;
      clip-path: polygon(
        0 0,
        100% 0,
        100% var(--reveal),
        0 var(--reveal)
      );
    }
    .edge-shadow {
      position: absolute; left: 0; right: 0; top: var(--reveal);
      height: calc(var(--edge-softness) * 2);
      transform: translateY(-50%);
      pointer-events: none; z-index: 3;
      background: radial-gradient(closest-side, var(--turn-shadow), rgba(0,0,0,0) 70%);
      filter: blur(8px); opacity: .65;
      display: none;
    }
    .stage[data-revealed="true"] .edge-shadow { display: block; }
    .caption {
      position: absolute; left: 2rem; bottom: 2rem; z-index: 4;
      padding: .6rem .8rem .55rem; border-radius: 12px;
      background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
      font-size: clamp(12px, 1.6vw, 16px);
    }
    @media (prefers-reduced-motion: reduce) {
      section.stack { height: 120vh; }
      .edge-shadow { display: none !important; }
    }
/* ===== stay-text の左右に半円を背景として配置 ===== */
:root{
  /* --stay-circle-size: clamp(360px, 45vw, 680px);  */
	 --stay-circle-size: clamp(300px, 38vw, 560px);
  --stay-circle-color: #F2F2F2;
  --stay-circle-opacity: .85;         
}
.back-en {
  position: relative;
  isolation: isolate;  /* 擬似要素を“この箱の内側だけ”で背面化 */
  overflow: visible;   /* 親のoverflowで切れないように */
  z-index: -1;          /* 背景円より上にテキストを出すための基準 */
}
/* 左側の半円 */
.back-en::before,
.back-en::after {
  content: "";
  position: absolute;
  width: var(--stay-circle-size);
  height: var(--stay-circle-size);
  border-radius: 50%;
  /* background: radial-gradient(circle at 50% 50%, #F2F2F2, var(--stay-circle-color) 65%, #F2F2F2 100%); */
	background: #fff;
	border: 1px solid #eaeaea;
  opacity: var(--stay-circle-opacity);
  pointer-events: none;
  z-index: -1;     /* テキストより背面に */
  transform: translateY(-50%);
}
/* 左半円：中心を左端の外側へ（ちょうど半分見せる） */
.back-en::before{
	left: -12rem;
  transform: translate(-50%, -50%);
  top: -52%;
}
/* 右半円：中心を右端の外側へ（ちょうど半分見せる） */
.back-en::after{
  right: -15rem;
  transform: translate(50%, -50%);
	top: 100%;
}
/* スマホでは少し小さく */
@media (max-width: 768px){
  :root{ --stay-circle-size: clamp(240px, 70vw, 420px); }
}
/* 画像版 半円背景 */
:root{
  --stay-circle-size: clamp(300px, 38vw, 560px); /* 円の直径（お好みで） */
  --stay-circle-opacity: .85;                    /* 濃さ */
  --stay-circle-image: url("../img/en.webp");
}
.develop-top {
	margin-top: 150px;
}
.develop-title {
	font-weight: normal;
  line-height: 59px;
  font-size: 22px;
	padding-bottom: 10px;
}
.develop-img {
	width: 40%;
	object-fit: cover;
		position: relative;
  top: 100px;
}
.develop-top-text {
  font-size: 16px;
  line-height: 42px; 
}
.develop-cts {
	width: 50%;
  padding: 0 6% 0 6%;
}
  .eyebrow {
		display:inline-block;
		/* color:var(--muted); */
		font-size:13px;
		letter-spacing:.06em;
    color: #ec1c2a;
	}
	.eyebrow-num {
		font-size: 15px;
		/* color: #ec1c2a; */
		font-weight: bold;
	}
  /* ===== layout ===== */
  .feature {
		display:grid;
		grid-template-columns:min(48vw,500px) 1fr;
		gap: 81px;
	}
  /* 左：固定ステージ */
  .left {
		position:sticky;
		top: 25%;
    /* height: 60vh; */
		height: 500px;
		overflow:hidden;
    box-shadow:0 20px 60px rgba(2,6,23,.12);
	}
  .stages {
		position:relative;
		width:100%;
		height:100%;
	}
  .stages img {
		position:absolute;
		inset:0;width:100%;
		height:100%;
		object-fit:cover;
		opacity:0;
    transition:opacity .6s ease}
  /* 表示中の画像 */
  .left.show-1 .img1,
  .left.show-2 .img2,
  .left.show-3 .img3,
  .left.show-4 .img4,
  .left.show-5 .img5{opacity:1}
  /* 右：文章 */
  .right{padding-block:8px}
  .panel{
		min-height:60vh; /* 1画面弱ごとに切替が気持ちよく起きる */ 
		border-top: solid 1px #dadada;
		position: relative;
		padding: 35px 0 20px 0;
	}
  .panel .cta {
		margin-top:10px;
		display:inline-block;
		padding:.6em 1em;
		border-radius:999px;
    border:1px solid var(--border);
		text-decoration:none;
	}
  .panel .cta.primary {
		background:var(--accent);color:#fff;
		border-color:transparent;
	}
  /* スクロール位置の目安（任意の装飾） */
  .dots{position:sticky;top:12px;display:flex;gap:10px;margin:6px 0 20px}
  .dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;transition:transform .2s}
  .dot.active{background:var(--accent);transform:scale(1.2)}
.strength-title {
	font-size: 20px;
  padding: 5px 0 20px 0;
}
.strength-top {
	padding-top: 100px;
}
.flow-design {
  display: flex;
  justify-content: center;
  align-items: center;
}
.delelop-flow {
  padding-left: 0;
}
.delelop-flow > li {
  list-style-type: none;
  position: relative;
  padding-left: 150px;
}
.delelop-flow > li:not(:last-child) {
  padding-bottom: 10px;
}
.delelop-flow > li .icon {
  display: inline-block;
  color: #ec1c2a;
  position: absolute;
  left: 0;
  font-size: 13px;
}
.delelop-flow > li:not(:last-child)::before {
  content: '';
  background: #dadada;
  width: 1px;
  height: 66%;
  position: absolute;
  top: calc(50% - -21px);
  left: 19px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.delelop-flow > li dl dt {
  font-size: 18px;
	padding-bottom: 15px;
}
.delelop-flow > li dl dd {
  margin-left: 0;
	padding-bottom: 50px;
}
.company-text {
  font-size: 17px;
  line-height: 58px;
   width: 67%;
}
.message-post {
	font-size: 14px;
}
.message-name {
	font-size: 23px;
	padding-bottom: 30px;
}
.message-text,.strength-text {
	line-height: 41px;
}
.message-img {
	width: 39%;
	object-fit: contain;
}
.message-cts {
	padding: 0 5% 0 6%;
	position: relative;
	top: 50px;
}
.overview {
	max-width: 700px;
	margin: 0 auto;
}
.overview-item {
  border-top: solid 1px #dadada;
  position: relative;
  padding: 30px 0;
  font-size: 15px;
  display: flex;
}
.overview-item .item {
  width: 200px;
}
.contact-form {
  max-width: 740px;
  margin: 0 auto 50px;
  padding: 0 20px;
}
.confirm-form {
	max-width: 700px;
	margin: 70px auto;
	padding-bottom: 70px;
}
.contact-name {
	padding-bottom: 20px;
}
.contact-item {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 25px 0 10px;	
	font-size: 15px;
}
.contact-input {
	width: 100%;
	display: block;
	border: 1px solid #999;
	outline: none;
	height: 3.5rem;
	line-height: 1.4rem;
	background:#f9f9f9;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	font-size: 15px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 5px;
}
input[type="date"].contact-input {
  -webkit-appearance: none; /* Safariのデフォルトスタイルを無効化 */
  appearance: none;
  line-height: normal;       /* 固定されているline-heightをリセット */
  height: auto;              /* 高さ指定を解除して自然な高さに */
}
textarea.contact-input {
	height: 200px;
}
::placeholder {
	color:  #878787;
}
.checkbox {
	accent-color: #ec1c2a;
	margin-right: 5px;
}
sup {
	color: #ec1c2a;
	font-size: 12px;
	margin-left: 10px;
}
.inquiry label {
	margin-right: 20px;
}
.contact-form input[type="radio"] {
  accent-color: #ec1c2a;
  transform: scale(1.2);
  margin: 0 5px 0px 0;
}
.contact-btn {
font-size: 14px;
padding: 15px 10px;
border: 1px solid #999;
background-color:#fff;
color: #111;
letter-spacing: .2em;
margin-top: 30px;
width: 240px;
cursor: pointer;
position: relative;
transition: all 0.8s;
cursor: pointer;    
font-family: 'EisuiKaisho', serif;
}
.contact-btn:before {
	position: absolute;
	content: " ";
	display: block;
  border-left: solid 1px #333;
	bottom: 43px;
	width: 2%;
	height: 10px;
	left: 0;
}
.contact-btn:after {
  position: absolute;
  content: " ";
  display: block;
  border-top: solid 1px #333;
  bottom: 52px;
  width: 4%;
  left: 0;
}
.contact-btn:hover:after {
	border-top: 1px solid #ec1c2a;
}
.contact-btn:hover:before {
	border-left: solid 1px #ec1c2a;
}
.contact-btn:hover {
	color: #ec1c2a;
}
.confirm-text {
	margin-bottom: 0;
  padding: 10px 10px 10px 20px;
}
.confirm-title,.confirm-p {
	text-align: center;
}
.contact-item.confirm {
	width: 200px;
	margin: 0;
	padding: 10px;
}
.confirm-p { 
	padding: 0 0 80px 0;
}
.confirm-title {
	font-size: 23px;
	font-weight: normal;
}
.confirm-name {
	border-top: solid 1px #dadada;
  position: relative;
  padding: 30px 0;
  font-size: 15px;
}
.page-sub-title.confirm {
	margin: 0 auto 50px;
}
.cotact-back {
  padding: 10px;
  display: block;
  text-align: center;
  text-decoration: none;
	padding: 20px 10px 10px 10px;
	font-size: 14px;
}
.cotact-back.button {
	background: #fff;
  border: none;
}
.contact-btn.confirm {
	margin-top: 60px;
}
.comple-box {
	max-width: 700px;
	margin: 50px auto;
  padding: 0 20px
}
a.back-btn {
	margin: 0 auto;
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 10px;
	position: relative;
}
.back-btn:before {
  bottom: 38px;
  left: -1px;
}
.back-btn:after {
  bottom: 48px;
  left: -1px;
}
a.link-btn,.link-btn.contact {
	text-decoration: none;
	text-align: center !important; 
	padding: 10px;
	position: relative;
	margin-top: 0;
  height: 50px;
	border-radius: 33px;
  display: inline-block;
  padding-left: 20px;
	font-size: 14px;
	padding: 15px 10px;
	border: 1px solid #999;
	color: #111;
	letter-spacing: .2em;
	width: 240px;
	cursor: pointer;
	transition: all 0.8s;
	cursor: pointer;    
	font-family: 'EisuiKaisho', serif;
	line-height: 17px;
  transition: transform 0.3s ease-out;
  background-color: transparent;
}
a.link-btn:hover,.link-btn.contact:hover {
  transform: scale(1.05);
}
.link-btn.contact {
	margin-top: 30px;
}
.link-btn::before {
  content: "";
  position: absolute;
  left: 37px !important; 
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ec1c2a;
}
.link-btn.contact::before {
	display: none;
}
.link-btn.contact-back {
	margin: 0 auto;
  display: block;
}
.news-list {
	width: 100%;
	max-width: 740px;
	padding: 0 20px;
	margin: 50px auto 0;
}
.news-list th {
	text-align: left;
	padding: 15px 0 10px 0;
	font-weight: normal;
  border-top: solid 1px #dadada;
}
.news-list td {	
	padding-bottom: 15px;
}
.news-list td .news-text {
	font-weight: bold;
	margin-bottom: 0;
	display: block;
	text-decoration: none;
	font-weight: normal;
}
.news-day {
	margin-right: 10px;
	font-size: 16px;
}
.news-tab {
	background-color: #fff;
	border-radius: 32px;
	color: #ec1c2a;
	border: 1px solid #ec1c2a;
	padding: 3px 10px;
	font-size: 12px;
}
.news-title {
	font-size: 18px;
	padding: 15px 0 5px 0;
	margin: 0;
}
.news-article {
	font-size: 15px;
	font-weight: normal;
	padding: 20px 0 100px 0;
}
.pagination {
	margin: 30px 0 0 0;
  display: flex;
  justify-content: center;
}
	.pagination a {
	background-color: #F0F0F0;
  border-radius: 23px;
  text-decoration: none;
  transition: background-color .3s;
  margin: 0 4px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination a.active {
	background-color: #FF8337;
	color: #fff;
}
.pagination a:hover:not(.active) {
	background-color: #3C2211;
	color: #fff;
	opacity: 1;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.admin-footer {
	text-align: center;
}
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrapper i {
  position: absolute;
  right: 20px;
  cursor: pointer;
  color: #888;
}
.admin-menu li {
	padding: 0 15px;
}
.admin-menu li a {
  text-decoration: none;
}
.confirm-title {
	text-align: center;
	font-size: 18px;
	padding-bottom: 30px;
}
.confirm {
	max-width:960px;
	margin:24px auto;
	padding:16px;
}
.confirm .row {
	border-bottom:1px solid #e5e7eb;
	padding: 0 0 10px 0;
}
.confirm .row p {
	margin: 0;
}
.done-text {
	text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 4rem 0;
}
/*スクロールバー（縦）*/
/*スクロールバー全体の背景*/
.scroll-box_y::-webkit-scrollbar {
  width: 5px;
}
.scroll-box_y::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box_y::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box_y::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.scroll-box_y {
  overflow-y: scroll;
	height: 15rem;
}
/*===========
  scrollbar
  ===========*/
  /*スクロールバー全体の高さ*/
  .scroll-box::-webkit-scrollbar {
    height: 4px;
  }
  /*スクロールバー全体の背景*/
  .scroll-box::-webkit-scrollbar-track {
    background: #eee;
  }
  /*スクロールバーの動く部分*/
  .scroll-box::-webkit-scrollbar-thumb {
    background: #aaa;
    border: none;
  }
  /*スクロールバーの動く部分のホバー（マウスオーバー）*/
  .scroll-box::-webkit-scrollbar-thumb:hover {
    background: #999;
  }
  @media screen and (max-width: 2560px) {
    .scroll-box {
      overflow-x: auto;
    }}
.table-space {
	padding: 0 20px;
}
.news-list-table {
	width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
	min-width: 900px;
	max-width: 1200px;
  margin: 70px auto;
}
.news-list-table th,.news-list-table td {
  padding: 12px;
  text-align: left;
}
.news-list-table th {
	background: #fff;
	border-bottom: 0.5px solid #545454;
	background: #f9f9f9;
}
.news-list-table td {
	border-bottom: 0.5px solid #545454;
	vertical-align: middle;
}
.blog-table-btn {
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
	border-radius: 3px;
	font-weight: bold;
	white-space: nowrap;
}
.table-id {
	width: 50px;
}
.table-btn {
	width: 170px;
}
.table-title {
	width: 300px;
}
.table-tag {
	width: 100px;
}
.table-date {
	width: 150px;
}
.table-img {
	width: 150px;
}
.btn-edit {
  background-color: #fff;
	color: #1E56BE;
	border: 1px solid #1E56BE;
	margin-right: 10px;
}
 .btn-delete {
   color: #108861;
	 border: 1px solid #108861;
	background-color: #fff;
	padding: 6px 16px;
}
.admin-font {
	font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, sans-serif !important;
}
.page-title.admin {
	font-weight: bold;
	font-size: 32px;
}
.btn-circle {
  display: inline-block;
  text-decoration: none;
  color: #fcfcfc;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  transition: .4s;
  position: fixed;
  bottom: 40px;   
  right: 40px;    
  z-index: 90;  
	display: flex;
  justify-content: center;
  align-items: center;
	flex-direction: column;
	font-size: 17px;
	transition: transform 0.3s ease-out;
  background-color: #ec1c2a;
}
.btn-circle .en {
  color: #fcfcfc;
	font-size: 11px;
}
/* ホバー時のスタイル */
.btn-circle:hover {
  transform: scale(1.1);
}
.privacy-title {
	padding: 30px 0 10px 0;
	font-size: 17px;
}
.privacy-ul {
	margin: 0;
  padding-top: 10px;
  padding-left: 16px;
}
.privacy-ul li::marker {
  color: #ec1c2a;  
  font-size: 1em; 
}
.privacy-ul.address {
	list-style: none;
	padding-left: 0;
}
.en {
	font-family: 'Helvetica Now Display'!important;
}
.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: bottom;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.slide.active {
  opacity: 1;
}
th.border-none {
  border-top: none;
}
.partner-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  gap: 20px;
  margin: 0 auto;
}
.logo-item {
  border: solid 1px #dadada;
  padding: 30px;
  border-radius: 5px;
}
p.partner-name {
  font-size: 16px;
  padding-bottom: 8px;
}
p.partner-address {
    font-size: 14px;
}
.top-about {
  max-width: 1140px;
  margin: 150px auto 0;
  padding: 0 20px;
}
.top-about-img {
   object-position: left;
   width: 34%;
   object-fit: cover;
}
.top-about-cts {
  width: 50%;
  padding: 0 10%;
}
.top-about-title {
  display: inline-block;
  position: relative;
  font-size: 50px;
  color: #ec1c2a;  
  font-weight: normal;
  margin-bottom: 10px;
}
p.about-top-text {
	font-size: 15px;
	line-height: 41px;
  padding-top: 50px;
}
 .top-about-message {
	font-weight: normal;
  line-height: 59px;
  font-size: 22px;
  writing-mode: tb;
  text-indent: -34px;
  letter-spacing: 0.2em;
  position: relative;
  top: 200px;
}
p.about-top-text-en {
  font-size: 10px;
  color: #797979;
}
a.top-about-btn {
  margin-top: 40px;
}
a.top-about-btn::before {
  left: 26px !important;
}
.news-section {
  position: relative;
  background: url("../img/logo-black.webp") no-repeat;
  background-position: bottom right;
  margin: 150px 0px 0 0px;
}
.news-overlay {
  background-color: rgba(0, 0, 0, 0.83);
  padding: 70px 20px;
}
.news-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}
.top-news-title {
  font-size: 50px;
  font-weight: normal;
  margin: 0;
  margin-bottom: 5px;
  color: #F2F2F2;
}
p.news-top-text-en {
  font-size: 10px;
  color: #F2F2F2;
  margin-bottom: 60px;
}
.top-news-list {
  margin: 0 0 40px 0; 
}
.top-news-list th ,.top-news-list td {
  font-size: 14px;
  color: #F2F2F2;
}
.top-news-list th {
  border-top: solid 0.4px #F2F2F2;
}
.top-news-list td .news-text {
    color: #F2F2F2;
}
.news-list a {
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.3s ease;
}
.news-list a:hover {
  opacity: 0.8;
}
.news-more {
  margin-top: 20px;
}
.top-news-tab {
  color: #F2F2F2;
  border: 1px solid #F2F2F2;
  background-color: initial;
}
.top-news-day {
  font-size: 13px;
}
a.top-news-btn {
  color: #f2f2f2;
  border: 1px solid #f2f2f2;
  background-color: initial;
}
.top-service {
  margin-top: 200px;
}
.top-eyebrow {
  color: #ec1c2a;
}
a.top-service-btn {
  margin-top: 40px;
  margin-bottom: 40px;
  border: solid 1px #969696;
}
.partner-text {
  font-size: 22px;
  padding-top: 16px;
}
a.top-contact-btn {
  width: 320px;
}

@media screen and (max-width:1100px) {
.page-head-title {
    padding-left: 40px;
}
}

@media screen and (min-width:769px) {
	.flex {
		display: flex;	
	}
	.jc-between {
	  justify-content: space-between;
	}
	.jc-around {
		justify-content: space-around;
	}
	.jc-center {
		justify-content: center;		
	}
	.jc-end {
		justify-content: flex-end;
	}
	.ai-start {
		align-items: flex-start;
	}
	.ai-center {
		align-items: center;
	}
  .ai-end {
		align-items: flex-end;
	}
	.sp-img {
		display: none;
	}	
	.column {
		flex-direction: column;
	}
	#menubar_hdr.admin {
		display: none;
	}
	.sp-menubar {
		display: none;
	}
  	main {
			margin-bottom: 100px;
		}
    .sp-br {
		display: none;
	}	
}

@media screen and (max-width:768px) {
.title-bg h1 {
  font-size: 22px;
}
.title-bg {
  padding: 50px 0px 0px 0px;
}
.title-kakko.top {
  padding: 0px 36px;
}
.page-logo-back::before,.top-page-logo-back::before {
  width: 300px;   
  height: 300px;
  right: 0rem;
  transform: translate(-50%, -50%);   
   top: 70%;
  left: 50%; 
}
.top-page-logo-back::before {
  top: 80%;
  left: 56%;
}
.stay-title {
  top: -80px;
  left: 40px;
  line-height: 40px;
  font-size: 16px;
	order: 1;
}
.stay-img {
  width: 100%;
	order: 2;
}
.stay-text {
  margin: 60px 20px 0;
  font-size: 14px;
  line-height: 36px;
}
.page-section {
  margin: 120px auto 0;
}
.page-sub-title .ja {
	font-size: 18px;
	--dot-size: 6px;
	--dot-x: -8px;
  --dot-y: 4px;
}
.page-sub-title {
  margin-bottom: 70px;
}
.stay-info,.safety-info {
  display: block;
  margin: 0;		
}
.stay-item .name {
  font-size: 14px;
}
.stay-item .item {
	font-size: 13px;
	margin-bottom: 15px;
}
.stay-item {
	position: relative;
  padding: 30px 0;
}
.stay-item:after {
  bottom: 169px;
}
.page-sub-title .ja.photo {
  --dot-x: -12px;
}
.page-sub-title .ja.access {
	--dot-x: -12px;
}
:root{
    --stay-circle-size: clamp(200px, 60vw, 360px);
  }
	.back-en-img.en-a::before {
		left: -16rem;
	}
	.back-en-img.en-b::before {
    left: -14rem;
	}
	.back-en-img.en-b::after {
    right: 0rem;
	}
	.sp-none {
		display: none;
	}
	.stay-top {
    margin-top: 150px;
		display: flex;
    flex-direction: column;
}
.develop-img {
    width: 95%;
		top: 0;
}
.develop-cts {
    width: 100%;
    padding: 0 5% 0 5%;
		order: 1;
		margin-bottom: 50px;
}
.develop-top {
	margin-top: 90px;
  display: flex;
  flex-direction: column;
}
  .feature{grid-template-columns:1fr}
    .panel{
			min-height:auto;
			border-top: 0;
			border-bottom: solid 1px #e9e9e9;
			position: relative;
			padding: 0 0 30px 0;
			margin-bottom: 50px;
		}
		.panel:after {
    bottom: -1px;
	}
   .sp-develop-order {
      display: flex;
      flex-direction: column;
   }
   .sp-develop-order-img {
    order: 2;
   }
		.stages img{transition:none
		}
		.strength-top {
			padding-top: 0px;
		}
		.page-sub-title .ja.strength {
    --dot-x: -12px;
		}
		.develop-img {
			width: 95%;
			height: 100%;
			order: 2;
		}
	.eyebrow {
		padding-top: 20px;
	}
	.strength-title {
    font-size: 16px;
		padding: 3px 0 15px 0;
	}
	.develop-img {
    height: 280px;
    width: 100%;
    object-fit: cover;
	}
	.delelop-flow > li {
		padding-left: 80px;
	}
	.delelop-flow > li dl dt {
    font-size: 16px;
	}
	.delelop-flow {
    padding: 0 20px;
}
.sp-panel-mg-none {
	margin-bottom: 0;
}
.safety-item,.logo-item {
  margin-bottom: 20px;
}
.safety-item::before {
  bottom: 113px;
}
.safety-item:after {
	bottom: 123px;
}
.company-text,.develop-top-text {
  font-size: 14px;
  line-height: 36px;
  width: 100%;
}
.develop-title {
  line-height: 40px;
  font-size: 16px;
}
.overview {
	max-width: 100%;
}
.overview-item {
  padding: 20px 0;
  font-size: 14px;
	align-items: center;
}
.overview-item:after {
  bottom: 103px;
}
.overview-item .item {
  width: initial;
  min-width: 110px;
}
.message-img {
  width: 100%;
  object-fit: contain;
}
.message-post {
  font-size: 13px;
}
.message-name {
  font-size: 19px;
  padding-bottom: 25px;
}
/* .message-text,.strength-text {
	line-height: 32px;
} */
.message-cts {
  padding: 0;
}
.contact-item,.confirm-name {
	font-size: 14px;
}
.confirm-name {
	position: relative;
	padding: 28px 20px;
}
.confirm-text {
  padding: 15px 0 0 0;
}
.confirm-form {
  padding: 0 20px 60px 20px;
}
.contact-btn.confirm {
	margin: 0 auto;
  display: block;
	margin-top: 50px;
}
.confirm-p {
  text-align: left;
}
.contact-btn {
	width: 100%;
}
.contact-item.admin {
	margin: 10px 0 10px;
}
.cotact-back.button {
  margin: 0 auto;
}
.page-title.admin {
  font-size: 23px;
}
main h2.top-title {	
	font-size: 16px;
  line-height: 32px;
	margin-top: 0;
	text-align: left;
}
.top-title-sub {
  text-align: left;
  font-size: 10px;
}
.top-space {
  margin: 30px;
}
.home header {
	padding: 30px;
}
.footer-tate {
  display: block;
  writing-mode: initial;
}
.footer-cts {
  padding: 100px 20px 80px;
}
.footer-menu {
  padding-left: 20px;
	padding-bottom: 20px;
}
.footer-menu li {
  padding: 5px 0px 6px 0px;
  font-size: 14px;
}
.footer-logo-img {
  width: 60px;
}
.footer-logo-img-sp {
  width: 50px;
}
.footer-logo {
	display: flex;
	margin-top: 60px;	
  margin-bottom: 50px;
}
.footer-logo-sp {
    display: flex;
    margin-left: 20px;	
}
.footer-item {
  padding-bottom: 5px;
}
.footer-access-text {
    padding-bottom: 20px;
}
 .first-view {
 	place-items: baseline;
  }
	.home #logo {
		height: 160px;
	}
	#container.top-page {
    flex-direction: column;
		justify-content: space-between;
	}
	.back-en-img.en-f::before {
    top: 104%;
	}
	header {
		padding: 30px;	
		margin-top: 25px;
	}
	.inquiry label {
    padding-bottom: 8px;
		display: block;
	}
	.footer-menu li::before {
		content: "";
		position: absolute;
		top: 50%;            
		left: -18px;
		transform: translateY(-50%);
		width: 8px;       
		height: 1px;      
		background-color: #ec1c2a; 		
	}
	a.fot-btn {
    margin-bottom: 10px;
    margin-top: 5px;
}
	.logo-mark {
		width: 60px;
	}
	#menubar_hdr  {
		padding: 13px 5px;
	}
	.contact-item.confirm { 
		width: 100%;
		padding: 0px 0px 15px 0px;
	}
	.top-main {
		flex: initial;
		padding-bottom: 30px;
	}
	#menubar {
		padding: 250px 40px 10px;
	}
	.btn-circle {
		display: none;
	}
	.page-section-top-sp-a {
		margin: 50px auto 0;
}
.page-nav {
	display: none;
}
.hp-sp-header {
	display: none;
}
a.head-btn {
	display: none;
}
.head-img {
  width: 100%;
  height: 200px;
}
.page-head-title {
  padding-bottom: 40px;
}
.page-head-title .en {
  font-size: 12px;
}
a.sp-menu-btn {
	margin-top: 30px;
}
/* 下部固定ナビ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #ccc;
  z-index: 1000;
}
.bottom-nav a,
.bottom-nav button {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border: none;
  background: none;
  font-size: 14px;
  color: #333;
}
.bottom-nav i {
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
}

/* 下からスライドするメニュー */
.slide-menu {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background: #fff;
  transition: bottom 0.3s ease;
  z-index: 1100;
  padding: 20px;
}
.slide-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.slide-menu li {
  margin: 6px 0;
	display: inline-block;
  position: relative;
	width: 100%;
	padding-left: 16px;
}
.slide-menu a {
  text-decoration: none;
  font-size: 13px;
}

/* 背景のオーバーレイ */
.overlay {
  position: fixed;
  top: 0; 
	left: 0;
  width: 100%; 
	height: 100%;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1050;
}

/* 表示時 */
.slide-menu.active {
  bottom: 0;
}
.overlay.active {
  opacity: 1;
  pointer-events: auto;
}
/* 閉じるボタン */
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 13px;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  z-index: 1200;
}
#menuBtn,.menuBtn-item {
	position: relative;
}
.menuBtn-item {
	text-decoration: none;
	display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pagetop a {
	left: 10px;
  bottom: 10px;
}
.page-sub-title .en {
	font-size: 10px;
}
.title-kakko {
  --x-gradient: linear-gradient(90deg, #ec1c2a 0 10px, transparent 0 calc(100% - 10px), #ec1c2a calc(100% - 10px));
  padding: 12px 40px;
}
.frame {
  height: 50vh;
}
header nav.top-nav a {
  font-size: 13px;
  padding: 8px 6px;
}
header nav.top-nav a::before {
     left: 18px;
     top: -13px;
   }
   .privacy-title {
    font-size: 15px;
}
  .admin-menu {
    display: none;
  }
  .admin-header {
    padding: 3px 30px;
  }
  .admin-sp-btn {
    display: flex;
    justify-content: center;
  }
  .admin-sp-btn-confirm {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .slider {
    height: 50vh;
  }
  .top-about {
    margin: 100px auto 0;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .top-about-title,.top-news-title {
    font-size: 30px;
  }
  .top-about-message {
    order: 1;
    top: 0;
    line-height: 40px;
    font-size: 16px;
  }
  .sp-top-about-cts {
    order: 2;
    width: 100%;
  }
  .top-contact {
    margin: 0 auto;
  }
  .news-section {
    margin: 100px 0px 0 0px;
  }
  .news-overlay {
    padding: 40px 20px;
}
.logo-grid {
    display: block;
}
.partner-text {
    font-size: 20px;
}
.logo-item img {
    width: 200px;
    margin-bottom: 20px;
}
p.about-top-text,.message-text,.strength-text  {
    font-size: 14px;
    line-height: 36px;
}
p.partner-name {
    font-size: 15px;
    padding-bottom: 5px;
}
.news-day {
    margin-right: 10px;
    font-size: 13px;
}
.top-sp-develop-section {
    margin: 80px auto 0;
}
.news-title {
	font-size: 15px;
	padding: 15px 0 0 0;
}
.news-article {
	font-size: 14px;
}
.table-space {
	padding: 0 10px;
}
.sp-margin {
  overflow-x: hidden;
}
}
@media screen and (min-width:500px) {
.sp-br-s {
  display: none;
}
}

@media screen and (max-width:500px) {
	main h2.top-title {
    font-size: 14px;
    line-height: 31px;
  }
  .home #logo {
     height: 130px;
   }
   header nav.top-nav a {
    font-size: 12px;
    padding: 8px 5px;
  }
  header nav.top-nav a::before {
    left: 15px;
    top: -4px;
  }
  .top-nav a::before, .page-nav a::before,.footer-menu li::before,#menuBtn::before,.menuBtn-item::before,.slide-menu li::before,.top-about-title::before {
    width: 4px;
    height: 4px;
  }
  .loader-logo {
    width: 55px;
  }
  a.top-contact-btn,a.link-btn, .link-btn.contact {
    width: 100%;
}
}