@charset "UTF-8";

html { font-size: 62.5%; }

body{
	color: #474747;
}

a {
  color: #000;
  text-decoration: none;
 transition: 0.2s;
  cursor: pointer;
}

a:hover{opacity: 0.3;}

img {
  max-width: 100%;
}
li {
  list-style: none;
}

.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}

.mt5{margin-top: 10px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}


.font10{font-size: 1.0rem}
.font11{font-size: 1.1rem}
.font12{font-size: 1.2rem}
.font13{font-size: 1.3rem}
.font14{font-size: 1.4rem}
.font15{font-size: 1.5rem}
.font16{font-size: 1.6rem}

.lheight10{line-height: 1.0rem;}
.lheight11{line-height: 1.1rem;}
.lheight12{line-height: 1.2rem;}
.lheight13{line-height: 1.3rem;}
.lheight14{line-height: 1.4rem;}
.lheight18{line-height: 1.8rem;}
.lheight20{line-height: 2rem;}

.tdunder{text-decoration: underline;}
.tdunder5{text-decoration: underline;text-underline-offset: 5px;}

.tdunder_dobule{text-decoration:underline double}

.external-link-icon {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  stroke: #000; /* アイコンの色 */
  width: 1em;
  height: 1em;
}


#lang {
clear: both; 
  font-size: 0.9rem;
	z-index: 9;
 
}

#lang a{color: #585858;}

.language-switch{display: flex;
	justify-content:flex-end;}

#lang li{background:#F1F1F1;
margin-left: 8px;
padding: 3px 9px 3px 9px;
text-align: center;
}




.button a {
    background:#944a73;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 10px 25px;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	 color: #FFF;
}
.button a:hover {
    background:#944a73;
		 color: #fff;
   
}
.button a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button a:hover:after {
    border-color: #FFF;
}


section {
  margin: 40px 0 10px 0;
  padding-bottom: 50px;

}

.site-title{
	width:600px;

  animation-name: fadeInh1;
  animation-duration: 1.3s;
  animation-timing-function: ease;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
	
	/*animation: fadeIn 0.5s ease 0.3s 1 normal backwards;*/
}

@keyframes fadeInh1 {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title{
	display: flex;
	justify-content:center;
	margin-top:40px;
	font-size: 3rem;
	font-weight:100;
	border-bottom: 1px solid #C1C1C1;
}


.content-title {
  position: relative; /* ← これを追加 */
  margin-bottom: 20px;
  font-size: 2.0rem;
  font-weight: normal;
  text-align: center; /* 中央揃えにしたい場合 */
}

.content-title::after {
  content: "";
  position: absolute;
  bottom: -7px; /* タイトルの下に線を出す */
  left: 50%;
  transform: translateX(-50%);
  width: 60px; /* 線の長さ */
  height: 3px; /* 線の太さ */
  background-color:#A9D2D4; /* 線の色 */
}	


.p-title{
	position: relative; /* ← これを追加 */
	padding: 10px 0 0 15px;
	text-align: left;
	font-size: 1.4rem;

}

.p-title::after {
  content: "";
  position: absolute;
  top: 0.5;
  bottom: 0; /* ← 高さをタイトルと揃える */
  left: 0;
  width: 4px; /* 線の太さ */
  background-color:#A3A3A3; /* 線の色 */
	height: 22px;
}	



.p-title2{
	position: relative; /* ← これを追加 */
	padding: 10px 0 0 15px;
	text-align: left;
	font-size: 1.4rem;

}

.p-title2::after {
  content: "";
  position: absolute;
  top: 0.5;
  bottom: 0; /* ← 高さをタイトルと揃える */
  left: 0;
  width: 4px; /* 線の太さ */
  background-color:#D4EDE6; /* 線の色 */
	height: 22px;
}	



.h5-title{
	position: relative; /* ← これを追加 */
	padding: 5px 0 0 10px;
	text-align: left;
	font-size: 1.3rem;
	margin:10px 0 5px 0px;
	color: #4A4A4A;
}

.h5-title::before {
  content: "▪️ ";
	

}	








/*
コンテンツ幅を設定 共通クラス
*/
.wrapper {
  max-width: 100%;
  margin: 0 auto;
}



#header {
  width: 100%;
background-color: rgba(255, 255, 255, 0); 
  position: fixed;
  left: 0;
  z-index:1;
	top: 0;
}



#navi {
background-color: rgba(255, 255, 255, 0); 
 font-family: 'Gulim','Century Gothic','maaemo_regular',sans-serif;
	
}

#navi ul {
	
  display: flex;	
  justify-content: space-between;
  align-items: center;
	
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0.7s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
	
	/*animation: fadeIn 0.5s ease 0.3s 1 normal backwards;*/
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



#navi li {
	color: #000;
font-size: 1.7rem;
  padding: 30px 60px 0 60px;
}

#main_top{
  display: flex;
  align-items: center;
  justify-content: center;
   height: 100vh;
	
}



#main{
  display: flex;
     flex-direction: column;
  justify-content: center;
vertical-align: top;
	width:500px;
		

		animation: fadeIn 1s ease 1.2s 1 normal backwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


	
#main p{
		word-break: break-word;
	}


#logo{
	display: flex;
		justify-content:center;
	z-index: 1;
	margin-top:20px;

}



h1 {
	width: 200px;
	display: block;
	

}





#news .news1 .news_list{
  display: flex;
	  font-size: 1.5rem;
  color: #707070;
}
#news .news1 .news_list dd {
  padding:0 0 10px 10px;

}
#news .news1 .news_list dt{
  padding-bottom:10px;

}







#CREATERNA{
text-align: center;
}


#CREATERNA p{
	text-align: left;
	line-height: 3rem;
	font-size: 1.5rem;
	color: #707070;
}













#artist{
text-align: center;
}


#artist .content {
  display: flex; /* ← スペルミス修正 */
  align-items: top; /* ← 垂直中央に揃える（任意） */
  /* gap: 10px; ← 画像とテキストの間のスペース */

}

#artist p{
	text-align: left;
	line-height: 3rem;
	font-size: 1.4rem;
	color: #707070;
	margin: 5px 0 20px 4px;

}

#artist img{
	width:80px;
	height:80px;
	border-radius:50%;
	margin:15px 5px 5px 10px;
}


#artist .text{
	text-align:left;
		margin: 15px 0 30px 0;
	padding-left: 15px;
	padding-top: 5px;
}


#artist .text{
	text-align:left;
		margin: 15px 0 30px 0;
	padding-left: 15px;
	padding-top: 5px;
}



.artli li {
	text-align: left;
  margin-top: 10px;
  font-size: 1.3rem;
  position: relative;
  padding-left: 24px;
	
	
}


.artli li a{color: #9C046E;}


.artli li::before{
	 content: "・";
  margin-right: 5px; 
	  position: absolute;
	  left: 0;
	
}










#open .mb{margin-bottom: 15px;}

#open .p1{
	font-size: 1.3rem;
	margin: 10px 0 0 20px;
}

#open .p2{
	font-size: 1.3rem;
	margin: 3px 0 0 20px;
}







#seat .p1{
	font-size: 1.3rem;
	margin: 10px 0 0 20px;
}

#seat .p2{
	font-size: 1.3rem;
	margin: 3px 0 0 20px;
}















#access .mb{margin-bottom: 15px;}

#access .p1{
	font-size: 1.3rem;
	margin: 10px 0 0 20px;
}

#access .p2{
	font-size: 1.3rem;
	margin: 3px 0 0 20px;
}






#recruit{
	text-align: left;
	line-height: 3rem;
	font-size: 1.4rem;
	color: #707070;
}


#recruit a {
  color: #6F6F6F;
  text-decoration:underline;
  transition: 0.2s;
  cursor: pointer;
	
}

#recruit a:hover{opacity: 0.3;}





.sec_sns{
	margin-bottom: 30px;
}


#sns li {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  margin-top: 10px;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.4; 
}

#sns img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle; 
}


#sns a {
  color: #6F6F6F;
  text-decoration: underline;
  transition: 0.2s;
  cursor: pointer;
}

#sns a:hover{opacity: 0.3;}






#footer {
  position: fixed;
background-color: rgba(255, 255, 255, 0);
  left: 0;
  bottom: 0;
  width: 100%;
}

#navi2 {
	 font-family: 'Gulim','Century Gothic','maaemo_regular',sans-serif;
	background-color: rgba(255, 255, 255, 0); 
		
}
#navi2 ul {
  display: flex;	
  justify-content: space-between;
  align-items: center;

	font-size: 1.8rem;
  animation-name: fadeIn2;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0.7s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
	
	/*animation: fadeIn 0.5s ease 0.3s 1 normal backwards;*/
}

@keyframes fadeIn2 {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



#navi2 li {
	color: #000;
  font-size: 1.8rem;
    padding: 0 60px 30px 60px;
}






















#lunch .fsmaller {

  font-size: 1.1rem;
	color: #A5A5A5;
		padding-left: 8px;

}

.line-heightsmall{
	line-height: 1.4rem;
}

#lunch p{
	text-align: left;
	line-height: 3rem;
	font-size: 1.5rem;
}

#lunch .mlist{
	font-style: italic;
}

#lunch .minfo{
	font-size: 1.3rem;
	margin-bottom: 30px;
}

#lunch .minfobt{
	font-size: 1.3rem;
}
	








#dinner .fsmaller {

  font-size: 1.1rem;
	color: #A5A5A5;
		padding-left: 8px;

}

.line-heightsmall{
	line-height: 1.4rem;
}

#dinner p{
	text-align: left;
	line-height: 3rem;
	font-size: 1.5rem;
}

#dinner .mlist{
	font-style: italic;
}

#dinner .minfo{
	font-size: 1.3rem;
	margin-bottom: 30px;
}

#dinner .minfobt{
	font-size: 1.3rem;
}
	
	







#payment p{
	text-align: left;
	line-height: 3rem;
	font-size: 1.5rem;
}



#payment .pinfo{
	font-size: 1.3rem;
	margin-bottom: 30px;
}










#reserv p{
	text-align: left;
	line-height: 3rem;
	font-size: 1.4rem;
	
}


.reservli li {
	text-align: left;
  margin-top: 18px;
  font-size: 1.3rem;
  position: relative;
  padding-left: 24px;
  line-height: 2.5rem;
	
	
}


.reservli li a{color: #9C046E;}


.reservli li::before{
	 content: "・";
  margin-right: 5px; 
	  position: absolute;
	  left: 0;
	
}





#consultant p{
	text-align: left;
	line-height: 3rem;
	font-size: 1.5rem;
	color: #707070;
}



#contact p{
	text-align: left;
	line-height: 3rem;
	font-size: 1.5rem;
	color: #707070;
}


/* スマートフォン対応 */
@media screen and (max-width: 768px) {

#main_top{
  display: flex;
  align-items: center;
  justify-content: center;
   height: 90vh;
	
}



}