@charset "utf-8";

/*===========================================================
  不要になった「リロード/スプラッシュ」関係は削除しました
  （#splash, #splash-logo, .splashbg, body.appear など）
===========================================================*/

/* 透明ヘッダー → スクロールで白背景 */
#header.transparent { background: transparent; transition: background 0.3s; }
#header.scrolled { background: #7F7F7F !important; }

@media screen and (max-width:1270px){
	#header.transparent { background: #7F7F7F; }
}

/* --- 予約ボタン --- */
.floating-reserve-btn {
	position: fixed;
	top: 12px;
	right: 90px;
	z-index: 1000;
	background-color: #7F7F7F;
	color: white;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;

    opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.floating-reserve-btn.visible { opacity: 1; pointer-events: auto; }
.floating-reserve-btn.hidden { opacity: 0 !important; pointer-events: none; }
.floating-reserve-btn .reserve-icon { width: 20px; height: 20px; transform: rotate(180deg); }
.floating-reserve-btn .reserve-text { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.floating-reserve-btn .ja { font-size: 0.8rem; }
.floating-reserve-btn .en { font-size: 1.1rem; }

.floating-reserve-btn.scrolled {
	width: 180px;
	height: 80px;
	border-radius: 0px;
	box-shadow: none;
	flex-direction: row-reverse;
	padding: 0 12px;
}
.floating-reserve-btn.scrolled .reserve-icon { transform: rotate(90deg); margin-left:10px; }
.floating-reserve-btn.scrolled .reserve-text { align-items: center; margin: 0; }
.floating-reserve-btn.scrolled .ja { font-size: 0.8rem; }
.floating-reserve-btn.scrolled .en { font-size: 1.2rem; }

.floating-reserve-btn,
.floating-reserve-btn .reserve-icon,
.floating-reserve-btn .reserve-text,
.floating-reserve-btn .ja,
.floating-reserve-btn .en { transition: all 0.8s ease; }

@media screen and (max-width: 1080px) {
	.floating-reserve-btn {
	  top:10px;
	  right: 85px;
	  width: 60px !important;
	  height: 60px !important;
	  border-radius: 0 !important;
	  padding: 0 !important;
	  gap: 0 !important;
	  justify-content: center;
	  align-items: center;
	}
	.floating-reserve-btn .reserve-text { display: none !important; }
	.floating-reserve-btn .reserve-icon { width: 40px; height: 40px; transform: rotate(180deg); }
}

/*===========================================================
  5-1-12 ナビ（下から上に出現）
===========================================================*/
#g-nav{
    position:fixed;
    z-index: 100000;
	bottom:-120%;
	width:100%;
    height: 100vh;
	background:#e2a2b1;
	transition: all 0.6s;
}
#g-nav.panelactive{ bottom: 0; }
#g-nav #g-nav-list{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#g-nav ul {
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
#g-nav li{ list-style: none; text-align: center; }
#g-nav li a{
	color: #fff;
    text-shadow:
    0 0 5px rgb(0, 0, 0),
    0 0 5px rgb(0, 0, 0),
    0 0 5px rgb(0, 0, 0),
    0 0 5px rgb(0, 0, 0),
    0 0 5px rgb(0, 0, 0);
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*===========================================================
  5-2-5 MENUが×に
===========================================================*/
.openbtn{
	position:fixed;
    z-index: 1000000;
	top:0;
	right: 0;
	cursor: pointer;
    width: 80px;
    height:70px;
    border-left:2px solid #fff;
}
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
}
.openbtn span:nth-of-type(1),
.openbtn span:nth-of-type(3) {
    height: 2px;
	background: #fff;
  	width:30%;
    opacity: 0;
    top:22px;
    left:20px;
}
.openbtn span:nth-of-type(2) {
	top:22px;
	left:18px;
	text-transform: uppercase;
	color: #fff;
    font-size: 0.9rem;
}
@media screen and (max-width:550px){ .openbtn span:nth-of-type(2) { font-size: 0.8rem; } }
.openbtn span:nth-of-type(3) { top:35px; }

.openbtn.active span:nth-of-type(1),
.openbtn.active span:nth-of-type(3) { opacity:1; }
.openbtn.active span:nth-of-type(1) {
    top: 28px; left: 30px;
    transform: translateY(6px) rotate(-45deg);
}
.openbtn.active span:nth-of-type(2) { opacity:0; }
.openbtn.active span:nth-of-type(3){
    top: 40px; left: 30px;
    transform: translateY(-6px) rotate(45deg);
}

/*===========================================================
  5-1-26 追従メニューの現在地ハイライト
===========================================================*/
#header{
	position: fixed;
	height: 100px;
	width:100%;
    z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
    background: #fff;
}
@media screen and (max-width:990px){ #header{ height: 75px; } }

#pc-nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
    text-transform: uppercase;
    margin: 0;
}
#pc-nav li a{
	display: flex;
	text-decoration: none;
	color: #fff;
	padding:0 15px;
	transition:all 0.3s;
}
#pc-nav li .tel{ opacity: 1; transition: opacity 0.8s ease; font-size: 1.5rem; }
#pc-nav li .telicon{ opacity: 1; transition: opacity 0.5s ease; font-size: 1.5rem; color:#fff;}
@media screen and (max-width:990px){
	#pc-nav li .tel{ opacity: 0; transition: opacity 0.8s ease; }
	#pc-nav li .telicon{ font-size: 3.0rem; color:#fff;}
}
@media screen and (max-width:820px){
	#pc-nav li .tel{ font-size: 0rem; }
	#pc-nav li .telicon{ position: fixed; top: -4px; right: 150px; color:#fff;}
}
#pc-nav ruby{ opacity: 1; transition: opacity 0.5s ease; font-size: 1rem; letter-spacing: 0.05em; color:#fff;}
#pc-nav rt{ margin-bottom: 1px; font-size: 0.8em; flex-direction: column; text-align: center; opacity: 1; transition: opacity 0.5s ease; }

#pc-nav li.current a, #pc-nav li a:hover{ color:#e2a2b1; }

/*===========================================================
  9-1-5 スクロールで線が伸びる
===========================================================*/
.scrollgress{ z-index:99; color: #e2a2b1; }

/*===========================================================
  7-1-35 下線が伸びて背景に変わる
===========================================================*/
.btnlinestretches3{ position:relative; color:#333; padding: 5px 30px; display:inline-block; text-decoration: none; outline: none; }
.btnlinestretches3 span{ position:relative; z-index: 2; }
.btnlinestretches3:hover span{ color: #fff; }
.btnlinestretches3::after {
	content:''; position:absolute; z-index:1; bottom:0; left:0;
	background:#333; width:100%; height:3px; transition:all 0.3s ease-in-out;
}
.btnlinestretches3:hover::after { height:100%; }

/*===========================================================
  8-1-3 ページトップボタン
===========================================================*/
#page-top a{
	display: flex; justify-content:center; align-items:center;
	background:#e2a2b1; width: 60px; height: 50px; color: #fff;
	text-align: center; text-transform: uppercase; text-decoration: none;
	font-size:0.6rem; transition:all 0.3s;
}
#page-top a:hover{ background: #777; }
#page-top { position: fixed; right: 0; bottom:0; z-index: 2; opacity: 0; transform: translateX(100px); }
#page-top.LeftMove{ animation: LeftAnime 0.5s forwards; }
@keyframes LeftAnime{ from{ opacity: 0; transform: translateX(100px);} to{ opacity: 1; transform: translateX(0);} }
#page-top.RightMove{ animation: RightAnime 0.5s forwards; }
@keyframes RightAnime{ from{ opacity: 1; transform: translateX(0);} to{ opacity: 1; transform: translateX(100px);} }

/*===========================================================
  9-2-2 アコーディオン
===========================================================*/
.accordion-area{ list-style: none; width: 96%; max-width: 900px; margin:0 auto; }
.accordion-area li{ margin: 10px 0; }
.accordion-area section { border: 1px solid #ccc; }
.title {
    position: relative; cursor: pointer; font-size:1rem; font-weight: normal;
    padding: 3% 3% 3% 50px; transition: all .5s ease;
}
@media screen and (max-width:768px){ .title{ font-size:0.9rem; } }
.title::before, .title::after{
    position: absolute; content:''; width: 15px; height: 2px; background-color: #333;
}
.title::before{ top:48%; left: 15px; transform: rotate(0deg); }
.title::after{ top:48%; left: 15px; transform: rotate(90deg); }
.title.close::before{ transform: rotate(45deg); }
.title.close::after{ transform: rotate(-45deg); }
.box { display: none; background: #f3f3f3; margin:0 3% 3% 3%; padding: 3%; }

/*===========================================================
  印象編 最低限の動き
===========================================================*/
.bgextend{ animation-name:bgextendAnimeBase; animation-duration:1s; animation-fill-mode:forwards; position: relative; overflow: hidden; opacity:0; }
@keyframes bgextendAnimeBase{ from{ opacity:0; } to{ opacity:1; } }
.bgappear{ animation-name:bgextendAnimeSecond; animation-duration:1s; animation-delay: 0.6s; animation-fill-mode:forwards; opacity: 0; }
@keyframes bgextendAnimeSecond{ 0%{opacity: 0;} 100%{opacity: 1;} }
.bgLRextend::before{
	animation-name:bgLRextendAnime; animation-duration:1s; animation-fill-mode:forwards;
    content: ""; position: absolute; width: 100%; height: 100%; background-color: #e2a2b1;
}
@keyframes bgLRextendAnime{
	0% { transform-origin:left; transform:scaleX(0); }
	50% { transform-origin:left; transform:scaleX(1); }
	50.001% { transform-origin:right; }
	100% { transform-origin:right; transform:scaleX(0); }
}

/* スマホ表示補助 */
#concept, .service-area{ transform: translate3d(0, 0, 0); }

/* スクロール出現の初期状態 */
.bgLRextendTrigger, .bgappearTrigger, .fadeUpTrigger, .flipLeftTrigger{ opacity: 0; }

.fadeUpTrigger.fadeUp {
	animation: fadeUp .6s ease forwards;
  }
  @keyframes fadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
  }