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

/*========= スクロール途中でヘッダーが表示＆非表示するためのCSS ===============*/
*{
	border: 0;
	/*font-family: inherit;*/
	font-size: 100%;
	letter-spacing: 0.08em;/*SP用*/
	font-size:62.5%; /*1px=0.1rem
	親になる要素が16pxであれば、16px=100%ということになります。
	remを使う場合にはよくhtml要素のfont-sizeを62.5%にします。
	これはブラウザのデフォルトである16pxに対して62.5%にあたる10pxをhtml要素に指定することで、
	他の要素のfont-sizeの計算を簡単にする手法です。
	たとえば、30pxにしたい時は3rem、16pxにしたい時は1.6remというように、pxを使わず設定することが可能です*/
	font-style: inherit;
	font-weight: inherit;
	font-family: "Roboto";
	/*font-family: 'Quicksand', sans-serif;
	font-family: 'Roboto', sans-serif;			
	font-family: "Yu Gothic", YuGothic;*/
	padding: 0;
	margin: 0;
	outline: 0;
	vertical-align: baseline;
	text-decoration: none;
	/*letter-spacing: 0.2rem;*/
}
img{max-width:100%;  vertical-align:bottom;}
h1,h2,h3{border: 0;padding: 0;margin: 0;outline: 0;}

body{
	width: 100%;
	height: 100%;
	background-position: 0px 0px;
}
img{pointer-events: none;vertical-align:top;}

		:focus {
			outline: 0;
			padding:0;
			margin:0;
		}
ol, ul {list-style: none;}
dl,dt,dd {margin: 0;padding: 0;}

.scroll_on{}
.scroll_off{overflow: hidden;}

/* 全共通　  start------------------------------------------------------------------------------   */
/*フォントサイズ*/
.font_default{ font-size: 1.4rem;}/*14*/
.font13-12{font-size: 1.3rem;}
.font16-15{font-size: 1.6rem;}
.expedition{font-size: 1.6rem;color:rgba(251,16,105,1.00);}/*遠征　赤文字*/

/*hover opacity0.8*/
.hover_opacity:hover{ 	
		animation: hover_opacity 0.3s ease forwards;
	}
	@keyframes hover_opacity{
		to { opacity: 0.8; }
	}
/*ボタン関連*/
.line_reservation_btn{/*LINE予約*/
	color: rgba(255,255,255,1.00); 
	font-size: 2rem; 
	font-weight: bold;
	display: flex; 
	margin: 0 auto;
	justify-content: center;
	align-items: center; 
	max-width: 30rem;  
	background: rgba(6,199,85,1.00); 
	padding:0.5rem ;
	letter-spacing: 0.03em;  
	border-radius: 2rem;
}
.WeChat_reservation_btn{/*WeChat予約*/
	color: rgba(255,255,255,1.00); 
	font-size: 2rem; 
	font-weight: bold;
	display: flex; 
	margin: 0 auto;
	justify-content: center;
	align-items: center; 
	max-width: 30rem;  
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#02e26e+0,07c260+100 */
background: linear-gradient(to bottom,  #02e26e 0%,#07c260 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	padding:0.5rem ;
	letter-spacing: 0.03em;  
	border-radius: 2rem;
}
.WhatsAPP_reservation_btn{/*WhatsAPP予約*/
	color: rgba(255,255,255,1.00); 
	font-size: 2rem; 
	font-weight: bold;
	display: flex; 
	margin: 0 auto;
	justify-content: center;
	align-items: center; 
	max-width: 30rem;  
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#60fc7c+0,26d044+100 */
background: linear-gradient(to bottom,  #60fc7c 0%,#26d044 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	padding:0.5rem ;
	letter-spacing: 0.03em;  
	border-radius: 2rem;
}
.reservation_btn{
	color: rgba(59,55,102,1.00); 
	font-size: 2rem; 
	font-weight: bold;
	display: flex; 
	margin: 0 auto;
	justify-content: center;
	align-items: center; 
	max-width: 30rem;  
	background: rgba(255,255,255,1.00); 
	padding:0.5rem ;
	letter-spacing: 0.03em;  
	border-radius: 2rem;
}

.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}

/*きらんエフェクト*/
.kiran:hover::before {
  animation: kiran 0.8s linear;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/*ノンケ表示*/
.straight {display: block;}/*required = 必須項目*/
.straight:after {
  margin-left: 1.0em;
  padding: 1px 3px 1px 3px;
  border-radius: 4px;
  font-size: 0.5em;
  color: white;
  background-color:rgba(60,130,210,1.00);
  content: "ノンケ";
	}


/*レフトナビ　start********************/
	#left_nav{z-index: 999; width: 100%; height: 100vh; background:rgba(227,227,227,1.00);position: fixed;}
	/*レフトナビ　初期値　左で待機のため*/	
	.nav_start{left:-100%;}
	/*レフトナビ　左へスライド*/	
	.nav_slide_left{
		left:-100%;
		opacity: 0;
		animation: navigation_left 0.5s ease-out 0s both ;}
	@keyframes navigation_left{
		1%{ left:-100%; opacity: 0.8; }
		100%{ left:0; opacity: 1;}
	}
	/*レフトナビ　右へスライド*/	
	.nav_slide_right{
		left:0%;
		opacity: 1;
		animation: navigation_right 0.5s ease-out 0s both ;
	}
	@keyframes navigation_right{
		1%{ left:0%; opacity: 1; }
		100%{ left:-100%; opacity: 0.8;}
	}
.left_nav_div1{flex-direction: column;width: 800px;padding: auto; margin: auto; }
.left_nav_div1_1{width: 40px;  font-size: 40px;  margin: auto; padding: 3% 0 5% 2%;}
.nav_menu_li_top,.nav_menu_li_btm{font-size: 1.5rem;display: flex; justify-content: center; align-items: center;}
.nav_menu_li_top img{width:50px;}
.left_nav_div1_logo{width: 100%;  font-size: 30px; padding: auto; margin: auto;}	
.left_nav_div1_logo h1{display: flex;justify-content: center; align-items: center;}	

#nav_menu {
	/*padding-top: 5%;特に必要なし？*/
	list-style-type: none;
	width: 100%;
	height: 100%;/*追加*/
	background: linear-gradient(90deg,rgba(0,255,255,0.8) 0%,)/* ,url("")no-repeat */;
	opacity: 1;
	z-index: 990;
	/*display: ;*/
	/*filter: blur(6px);要素をモザイク処理*/
}
#nav_menu ul{display: flex;flex-wrap: wrap; list-style: none;}
#nav_menu li {
	/*text-align: center;*/
	width: calc(100% / 3);
	height: 100%;
	padding: 25px 0;
}

#nav_menu li a {
	text-decoration: none;
	display: block;
	padding: 0px;
	/*padding: 25px 0px;*/
	color:#000;
	opacity: 0.7;
}

#nav_menu li a:hover {
		animation: nav_menu_hover 0.3s ease-out 0s both ;
	}
	@keyframes nav_menu_hover{
		1%{ 	transform: translateY(0); opacity: 0.7; }
		100%{ 	transform: translateY(-3px); opacity: 1.0;}
	}

/*レフトナビ　end********************/


#header{
    /*fixedで上部固定*/
	position: fixed;
	height: 70px;
	width:100%;
    z-index: 990;/*最前面へ*/
	/*以下はレイアウトのためのCSS*/
	display: flex;
	background:#000;
	color:#fff;
	/*text-align: center;  メニューが崩れるため*/ 
	padding: 0;
	/*display: flex; justify-content: space-between;  ←HTML直接書いたけどいらない？*/
}


/*　上に上がる動き　*/
#header.UpMove{
	animation: UpAnime 0.5s forwards;
}

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


/*　下に下がる動き　*/
#header.DownMove,#sp-icon.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

/* 以下は検証用のレイアウトのための CSS*/
	
.header_div1{width: 800px;height: 70px; padding: auto; margin: auto; position: relative; display: flex; justify-content: space-between; }
.header_div1_1 h1{display: flex;justify-content: center; align-items: center;}
.header_div1_2{display: flex; justify-content: center; align-items: center;}	
#g-navi{display: flex; justify-content: center; align-items: center;}

nav ul{
list-style: none;
/*display: flex;
justify-content: flex-end;*/
}

nav ul li a{
text-decoration: none;
color: #FFF;
}

section{/*padding:300px 0;*/}

/*footer start********************/


#footer {
          background: linear-gradient(350deg,#CA3030,#000000, #000000,#000000);
          background-size: 400% 400%;
          animation: GradientBackground 10s ease-in-out infinite;
      /*          background: linear-gradient(329deg, #292648, #31493A);
          background-size: 400% 400%;
          animation: GradientBackground 5s ease-in-out infinite;*/
        }

@keyframes GradientBackground {
          0% {background-position: 25% 50%;}
          50% {background-position: 100% 70%;}
          100% {background-position: 25% 50%;}
        }
	
#footer{width: 100%; height:auto;padding: 0;  justify-content: center; display: flex;flex-direction:column; text-align: center; color: white;}
.footer_div1{width: 100%; height: auto; background: rgba(255,255,255,0.10);}
.footer_div1_1{width: 800px; height: 80px; padding: auto; margin: auto; display: flex;overflow: hidden;}
.footer_div1_1_1{width: 40%; height: 80px; display: flex; justify-content: center; flex-direction:column; text-align: center; font-size: 2rem}
.footer_div1_1_2{width: 60%; height: 40px; padding: 20px 0; display:flex;  justify-content: space-evenly; }
.footer_div1_1_2 a{width: 70px; height: 60px; color: white;display: block;}
.footer_div1_1_2_list{width: 70px; height: 60px;}/*←この記述いらない*/
.footer_div1_1_2_list div:nth-of-type(1) {width: 70px; height: 20px;}/*←この記述いらない*/
.footer_div2{width: 800px; height: auto; padding: 50px 0; display: flex; padding: auto; margin: auto;}
.footer_div2_1{width: 50%;　justify-content: center; flex-direction:column;text-align: center;  }
.footer_div2_2{width: 50%;　justify-content: center; flex-direction:column;text-align: left;  }
.footer_div2_2 div{justify-content: center;   line-height: 100px; font-size: 1.5rem;}
.footer_nav{padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.30);}
.footer_nav ul li{ padding: 0 1%;} 
.footer_nav ul li a{text-decoration: none;color: #FFF;}

/*footer end********************/

/*タイトルなど start********************/
.section_title{max-width: 800px;  height: auto; padding: 0 ; list-style-type: none; display: block; margin-left: auto;margin-right: auto;}
.section_title_div1{width: 800px; height: 88px; position: relative;}
.section_title_div1 div:nth-of-type(1) img{width: 100%;}
.section_title_div1 div:nth-of-type(1){z-index: 9; position: absolute; top:2.2rem;  width: 100%; height: 36px;}	
.section_title_div1 div:nth-of-type(2){z-index: 10; position: absolute; top:0px; left:5%; font-size: 4rem; color: rgba(255,255,255,1.00); overflow: hidden;}
.section_title_div1 div:nth-of-type(3){z-index:11;position: absolute; bottom:0px; left:6%; font-size: 2.5rem; color: rgba(255,255,255,0.80);}

.section_subtitle{width: 96%; font-size: 1.9rem; background: rgba(59,55,102,1.00); padding: 0.3% 2% 0.3% 2% ; color: rgba(255,255,255,1.00);}
.section_subtitle_bknone{background: rgba(59,55,102,0.00)!important; }
.section_subtitle2{font-size: 1.9rem;color: #FFF;	padding: 0.25em 0.5em;
background: transparent;/*背景透明に*/
border-left: solid 10px rgba(59,55,102,1.00);/*左線*/
border-bottom: solid 1px rgba(59,55,102,1.00);/*下線*/
/*background: -webkit-linear-gradient(to right, rgba(59, 55, 102,0.3), transparent);グラデーション
background: linear-gradient(to right, rgba(59, 55, 102,0.7), transparent);*/	
}/*サブタイトル2*/

/*タイトルなど end********************/


/* 全共通　  end------------------------------------------------------------------------------   */


/*index   start*******************************************************/
#area-1 {
	width: 100%; height:100vh; display: block;overflow: hidden;
/*ここ以下グラデーション切り替わり*/
	background: rgba(0,0,0,1.00);
/*          background: linear-gradient(60deg,#743B9C, #000000,#42A47B);
          background-size: 400% 500%;
          animation: GradientBackground 5s ease-in-out infinite;
	background: linear-gradient(51deg, #292648, #464667);
    background-size: 400% 400%;
    animation: GradientBackground1 5s ease infinite;*/
    }
@keyframes GradientBackground1 {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
/*ここまでグラデーション切り替わり*/	
    }

.wanted_btn{color:rgba(240,240,225,1.00); border: solid 2px; border-color: rgba(240,240,225,1.00); }
.wanted_btn:hover{animation: WantedBackground 0.5s ease forwards;}
@keyframes WantedBackground {
    to {background: rgba(240,240,225,1.00); color: rgba(0,0,0,1.00);}
/*ここまでグラデーション切り替わり*/	
    }
.h2_p{font-size: 1.8rem; color: rgba(255,255,255,1.00);}
#news{height: auto;  list-style-type: none; display: block; margin-left: auto;margin-right: auto; }
#twitter{list-style-type: none; display: block; margin-left: auto;margin-right: auto; padding-top: 50px;}
.twitter-timeline{}
.news{ height: 200px; margin: 0; overflow-y: scroll;}
.news dl{
	display: flex;/*親要素以下を横並び*/
	justify-content: space-between;/*要素の間に間隔をもたせて横並びに配置*/ 
	border-bottom: solid 1px rgba(0,0,0,0.1); background-color: rgba(231,13,17,0.00); padding: 15px 0;
}
.news dd{ font-size: 1.5rem; color:rgba(251,25,29,1.00); width: 15%; margin-right: 15px;}
.news dt{ font-size: 1.5rem; width: 85%; }

/*スタッフ*/
	




/*STAFF*/		
	.stafflist{display: flex;
		flex-wrap: wrap;
		width: 99% ;
    padding: 0 0 0 1%;
    margin: 0;
    list-style: none;
    /*border: 1px solid #333;*/}
		
	.stafflist li{display: flex;
			width: calc(95% / 5);
			box-sizing: border-box;
			padding: 0 ;
			margin: 0 1% 1% 0;
    /*border: 1px solid #333;*/
			border-radius: 15px 0;
			overflow: hidden;
			background: rgba(255,255,255,1.00);
		}
		
	.stafflist li a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0px;
	color: rgba(0,0,0,1.00);
}
		
	@media(max-width:800px){
    .stafflist{flex-wrap: wrap;}
    .stafflist li{width: calc(100% / 3)}
		}
/*STAFF start*/	
.stafflist_main_none{
    display: none;
  }
		
.shiftlist_main_none{
    display: none;
  }
 .shiftlist_main_block{
    display: block;
    animation: rightslide 1s ease;
  }
		
  @keyframes rightslide {
  0%	{opacity: 0; transform: translateX(-25%); width: 800px;}
  100%	{opacity: 1; transform: translateX(0);}
  }		
/*STAFF end*/		
/*SHIFT start*/	
#staff_btn{font-weight: bold; color: rgba(89,84,156,1.00); border: solid 2px; border-color: rgba(89,84,156,1.00); width: 20%; padding: 10px; text-align: center;}
.staff_btn_after{ background: rgba(240,240,225,1.00); }
.staff_btn{ background: rgba(238,237,84,0.00);}
.staff_btn:hover{ background: rgba(240,240,225,1.00);}
#shift_btn{font-weight: bold; color:rgba(89,84,156,1.00); border: solid 2px; border-color: rgba(89,84,156,1.00);width: 20%;  padding: 10px; text-align: center;}
#shift_btn:hover{ background: rgba(240,240,225,1.00);}
.shift_btn{ background: rgba(238,237,84,0.00);}
.shift_btn_after{ background: rgba(240,240,225,1.00);}
.yoko-scroll_profile{height:auto!important;}
.yoko-scroll {
	width: 800px;
	height:80vh; 
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.yoko-scroll::-webkit-scrollbar {
  display: none;
}
.yoko-scroll ul {
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
  width: 100%;
  cursor: grab;
}
.yoko-scroll ul:active {
  cursor: grabbing;
}
.yoko-scroll li {
  width: 100%;
  padding: 0px;
  text-align: center;
  color: #ffffff;
  background: #1de6c7;
  border-right: 2px solid #ffffff;
}	
	
	
	
	
.scroll-box table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.scroll-box th,.scroll-box td {
  vertical-align: middle;
  padding: 0 5px;
  border: 1px solid #59549C;
  color: #000;
  font-size: 15px;
  text-align: center;
  white-space: nowrap;
}
.scroll-box th {
  /*background: #795548;*/
}
.scroll-box td {
  background: #F0F0E1;
  color: #000;
}
._sticky_a {
	min-width: 100px;
	height: 100px;
	padding: 0!important;
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-left: none;
  border-right: none;
}
._sticky_a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 1px solid #59549C;
  border-right: 1px solid #59549C;
  background: #3C3867;
  z-index: -1;
}
._sticky_b {
	height: 30px;
	font-size: 1.3rem!important;
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
  color: #F0F0E1!important;
}
._sticky_b:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #59549C;
  border-bottom: 1px solid #59549C;
  background: #3C3867;
  z-index: -1;
}
._sticky_ab {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  z-index: 1;
}
._sticky_ab:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #59549C;
  border-bottom: 1px solid #59549C;
  border-left: 1px solid #59549C;
  border-right: 1px solid #59549C;
  background: #3C3867;
  z-index: -1;
}
	
.scroll-box img{pointer-events: none;vertical-align:top;}

		:focus {
			outline: 0;
			padding:0;
			margin:0;
		}

		.shift_staff_name_jpn{font-size:14px; font-weight: bold;}		
		.shift_staff_name_eng{font-size:9px;}		
/*STAFF end*/		



/*index   end*******************************************************/
/*profile   start*******************************************************/

/*Swiper スライダー start*/
/* 全体のスタイル */
.swiper-wrapper{width: 100%;height: 100%;}
/* 全スライド共通スタイル */
.swiper-slide {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
	overflow: hidden;/*はみ出し防止*/
}
	
/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
	background-color: #EECB27;
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
	background-color: #E13239;
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
	background-color: #1F1762;
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
	background-color: #BEDAE5;
}
	

.staff_profile_img{width: 800px; height: auto; margin: auto; padding: auto; padding: 20px 0;}
.swiper-container{width: 375px; height: 500px;}/*縦横大きさ3:4*/
.swiper-slide{}
.img_top{display: flex;justify-content: flex-start;align-items: flex-start;}/*上寄り*/
.img_center{display: flex;justify-content: center;align-items: center;}/*中央*/
.img_bottom{display: flex;justify-content: flex-start;align-items: flex-end;}/*下寄り*/

/*Swiper スライダー end*/

#profile{width: 800px; height: auto;  list-style-type: none; display: block; margin-left: auto;margin-right: auto;padding-bottom: 0px; }
.profile{ width:auto; margin: 0; border-radius: 10px; padding: 20px 50px; border: solid 2px rgba(59,55,102,1.00);background: rgba(226,217,255,0.10);}
.profile dl{
	display: flex;/*親要素以下を横並び*/
	justify-content: flex-start;/*要素の間に間隔をもたせて横並びに配置*/ 
	border-bottom: solid 1px rgba(255,255,255,0.2); 
	background-color: rgba(231,13,17,0.00);
	padding: 15px 0;
	font-size: 2.3rem;
	color: beige;
}
.profile dd{ width: 27%;  border-radius: 5px; padding: 0.5% 1% 0.5% 2% ; text-align: center;font-size: 2.3rem;}
.profile dd div{  background: rgba(59,55,102,1.00); border-radius: 5px; padding: 0.5% 1% 0.5% 2% ; }
.profile dt{ width: 67%; padding: 0.5% 1% 0.5% 2% ;}

#profile_premier{width: 800px; height: auto;  list-style-type: none; display: block; margin-left: auto;margin-right: auto;padding-bottom: 0px; }
.profile_premier{ width:auto; margin: 0; border-radius: 10px; padding: 20px 50px; border: solid 2px rgba(234,192,116,1.00);/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#262e41+0,191d26+100 */
background: radial-gradient(ellipse at center,  #262e41 0%,#191d26 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.profile_premier dl{
	display: flex;/*親要素以下を横並び*/
	justify-content: flex-start;/*要素の間に間隔をもたせて横並びに配置*/ 
	border-bottom: solid 1px rgba(255,255,255,0.2); 
	background-color: rgba(231,13,17,0.00);
	padding: 15px 0;
	font-size: 2.3rem;
	color: white;
}
.profile_premier dd{ color:black; width: 27%;  border-radius: 5px; padding: 0.5% 1% 0.5% 2% ; text-align: center;font-size: 2.3rem;}
.profile_premier dd div{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dba857+0,fde1a0+21,fceecf+44,fceecf+44,eac074+79 */
background: linear-gradient(135deg,  #dba857 0%,#fde1a0 21%,#fceecf 44%,#fceecf 44%,#eac074 79%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */




 border-radius: 5px; padding: 0.5% 1% 0.5% 2% ; }
.profile_premier dt{ width: 67%; padding: 0.5% 1% 0.5% 2% ;}


/*profile   end*******************************************************/
/*wanted   start*******************************************************/
#area-wanted-1{width: 100%; padding: 100px 0; background: rgba(0,0,0,1.00); justify-content: center;display: flex;flex-direction:column; }
.wanted_title_font{font-size: 1.5rem;}

#wanted{width: 800px; height: auto;  list-style-type: none; display: block; margin-left: auto;margin-right: auto; padding: 5% 0 4% 0;}
.wanted_dd1{width: 25%;  border-radius: 5px; padding: 1% 0% 0.5% 0% ; text-align: center;font-size: 2.3rem;}
.wanted_dd2{width: 35%;  border-radius: 5px; padding: 1% 0% 3% 0% ; text-align: center;font-size: 2.3rem;}
.wanted_dd1 div,.wanted_dd2 div{background: rgba(255,255,255,1.00); color: rgba(0,0,0,1.00); border-radius: 5px; padding: 0.5% 1% 0.5% 2% ;}

.wanted_div2_1{width:auto; margin: 0; color:rgba(255,255,255,0.9);padding: 1% 2%; }

#wanted dt{font-size: 1.5rem; }/*padding: 0.5% 1% 0.5% 2% ;*/
#wanted_form dl{display: flex;}
#wanted_form dd{display: flex;}
#wanted_form dt{display: flex;}

#wanted_form{width: 800px; height: auto;  list-style-type: none; display: block; margin-left: auto;margin-right: auto; }
.wanted_form_div1{width:100%; margin: 0; border-radius: 5px; padding:0px; color: white;}
.wanted_form_div2{width:100%; background: rgba(227,227,227,1.00);  padding:0px; color: white;}
.wanted_form_div2 dl:nth-of-type(2n){background: rgba(240,240,240,1.00)!important;}
/*要素名:nth-of-type(odd) or (2n + 1)偶数*/
/*要素名:nth-of-type(even) or (2n)奇数*/
.wanted_form_div2 dl{height: 70px; padding: 1%4%;}
.wanted_form_div2 dd{width: 26%; padding: 2% 0%;  text-align: center;}
.wanted_form_div2 dd div{color: rgba(0,0,0,1.00); font-size: 1.6rem;}
.wanted_form_div2 dt {width: 66%; padding: 2% 0; }
.form_div2_dt{width:66%;overflow: hidden; }
.focus_text1{height: 40px;}
.focus_text2{width: 60%; height: 40px;}
.wanted_div_daytime{width: 100%; display: flex;}
.wanted_div_daytime div:nth-of-type(1),.wanted_div_daytime div:nth-of-type(2){width: auto; }
.focus_day,.focus_time{height: 40px;}


input,select,textarea{background-color: snow; border-radius: 0.3em;/* 角丸 */ }

	
.focus{padding: 0.4rem 1rem; font-size: 1.6rem; border: 1px solid rgba(86,120,83,0.50);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}
.focus:focus{ padding: 0.4rem 1rem;	animation: inputfocus 0.5s forwards; animation-direction:alternate;
}
@keyframes inputfocus{
  from {opacity: 1; box-shadow: 0 0 0 3px rgba(86,120,83,0.00) ; border: 1px solid rgba(86,120,83,1.00)!important;}
  to {opacity: 1; box-shadow: 0 0 0 3px rgba(86,120,83,0.50) ; border: 1px solid rgba(86,120,83,1.00)!important;}
}
			
.submit_button{}
.submit_button:hover{opacity: 0.8;}
/*wanted   end*******************************************************/
/*wanted_completion   start*******************************************************/
.wanted_completion_btn{color:rgba(240,240,225,1.00);  }
.wanted_completion_btn:hover{opacity: 0.8;}
#wanted_completion{width: 800px; height: 100vh; padding: auto; margin: auto;}
.wanted_completion_div2{width: 800px; height: auto; padding: auto; margin: auto;}

/*wanted_completion   end*******************************************************/
/*access_   start*******************************************************/


.access_iframe{
		width: 100%;
		aspect-ratio: 16/9; /*アスペクト比（縦横比）を指定*/
		border-radius: 0.5rem;
}
.staff_profile_img,.swiper-container_div{width: 800px; height: auto; margin: auto; padding: auto; padding: 20px 0;}/*暫くしたらstaff_profile_img削除*/
.swiper-container,.swiper-container_staff{width: 375px; height: 500px;}/*縦横大きさ3:4*//*暫くしたらswiper-container削除*/
.swiper-container_access{max-width: 500px; height: auto!important;}
	@media(max-width:500px){
.swiper-container_access{width: 100%!important;}
	}
.swiper-slide{}
		


/*access_   end*******************************************************/
/*service/price   start*******************************************************/
.price_table{ max-width: 800px;}	
.price_table table{
	width: 100%;
	border-collapse:separate;
	border-spacing: 2px;
	width: 100%;
}
.price_table table th,
.price_table table td
{
	border-radius: 0.2rem;
	text-align: center;
	padding: 0.5rem 0;
}
.price_table table th{
	font-weight: bold;
	font-size: 1.5rem;
	background-color: rgba(59,55,102,1.00)	;
	color: white;
	border:solid 1px rgba(0,0,0,0.00) ;
}
.price_table table td{
	font-size: 1.6rem;
	background-color:rgba(230,228,223,1.00);
	border:solid 1px #af9d85;
	position: relative;
}
.price_table_time::after{content: "　";}
.price_table_time{font-size: 1.6rem;}

.price_table_price{	
	font-size: 1.5rem;
	position: absolute;
	padding: 2%;
	width: 96%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform:translateY(-50%) translateX(-50%);
}

.price_div_option{background: rgba(0,0,0,1.00); max-width: 760px; height: auto; padding: 0px 20px;}	
	
.option_table_div div:nth-of-type(1){width: 20%;font-size: 1.6rem; margin: auto 0; font-weight: bold;}	
.option_table_div div:nth-of-type(2){width: 51%;font-size: 1.4rem; margin: auto 0; padding: 0.7% 0% 0.7% 4% ; text-align: left; height: 100%; background: rgba(250,248,243,1.00); }	
.option_table_div div:nth-of-type(3){width: 25%;font-size: 1.6rem; margin: auto 0;}	
	
/*service/price   end*******************************************************/
/*reservation   start*******************************************************/

.tab-002 {display: flex;flex-wrap: wrap;gap: 0 10px;max-width: 800px;}
.tab-002 > label {
    flex: 1 1;
    order: -1;
    opacity: .5;
    min-width: 70px;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    background-color: #3b3766;
    color: #fff;
    text-align: center;
    cursor: pointer;
	font-size: 2rem;
	overflow-wrap:normal;
}
.tab-002 > label:hover {opacity: .8;}
.tab_input  {display: none;}/*タブのボタンの非表示*/
.tab-002 > div {display: none;width: 100%;  /* background-color: #fff;*/}

.tab-002 label:has(:checked) {opacity: 1;}
/*.tab-002 label:has(:checked) + div {display: block;}*/	
.tab-002 label:has(:checked) + div {
    opacity: 0;
	display: block;		
	animation: tramform_tab 0.5s ease 0.1s both ;
	}
	@keyframes tramform_tab{
		1%{ opacity: 0;	transform: translateY(20px); }
		100%{ opacity: 1;	transform: translateY(0); }
	}
	
.required {display: block;}/*required = 必須項目*/
.required:after {
  margin-left: 1.0em;
  padding: 0px 6px 0px 6px;
  border-radius: 4px;
  font-size: 0.6em;
  color: white;
  background-color: #C44;
  content: "必須";
	}
	
/*切り替えタブのボックス設定*/	
.boxes {
  /*margin: auto;*/
  /*padding: 50px;*/
  /*background: #484848;*/
}

/*Checkboxes styles*/
.boxes input[type="checkbox"] { display: none; }

.boxes input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: rgba(0,0,0,1.00);/*文字カラー*/
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.boxes input[type="checkbox"] + label:last-child { margin-bottom: 0; }

.boxes input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0,0,0,1.00);/*チェック枠カラー*/
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.boxes input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
	
}	
.hover_transform_top:hover{ 	
		animation: hover_transform_top 0.3s ease 0s both ;
	}
	@keyframes hover_transform_top{
		1%{ 	transform: translateY(0); }
		100%{ 	transform: translateY(-0.3rem); }
	}


	
	
#reservation2{width: 800px; height: auto;  list-style-type: none; display: block; margin-left: auto;margin-right: auto; }

.reservation2_div2_1{width:auto; margin: 0; color:rgba(255,255,255,0.9);padding: 1% 2%; }

#reservation2 dt{font-size: 1.5rem; }/*padding: 0.5% 1% 0.5% 2% ;*/
#reservation2_form dl{display: flex;}
#reservation2_form dd{display: flex;}
#reservation2_form dt{display: flex;}

#reservation2_form{width: 800px; height: auto;  list-style-type: none; display: block; margin-left: auto;margin-right: auto; }
.reservation2_form_div1{width:100%; margin: 0; border-radius: 5px; padding:0px; color: white;}
.reservation2_form_div2{width:100%; background: rgba(227,227,227,1.00);  padding:0px; color: white;}
.reservation2_form_div2 dl:nth-of-type(2n){background: rgba(240,240,240,1.00)!important;}
/*要素名:nth-of-type(odd) or (2n + 1)偶数*/
/*要素名:nth-of-type(even) or (2n)奇数*/
.reservation2_form_div2 dl{height: 70px; padding: 1% 4%;}
.reservation2_form_div2 dd{width: 26%; padding: 2% 0%;  text-align: center;}
.reservation2_form_div2 dd div{color: rgba(0,0,0,1.00); font-size: 1.6rem;}
.reservation2_form_div2 dt {width: 66%; padding: 2% 0; }
.form_div2_dt{width:66%;overflow: hidden; }
.reservation2_focus_text1{height: 40px; width: 100%;}
.reservation2_div_daytime{width: 100%; display: flex;}
.reservation2_div_daytime div:nth-of-type(1),.reservation2_div_daytime div:nth-of-type(2){width: auto; }


.focus_day,.focus_time{height: 40px;}/*wantedと同じ*/
input,select,textarea{background-color: snow; border-radius: 0.3em;/* 角丸 */ }/*wantedと同じ*/
.focus{padding: 0.4rem 1rem; font-size: 1.6rem; border: 1px solid rgba(86,120,83,0.50);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}/*wantedと同じ*/
.focus:focus{ padding: 0.4rem 1rem;	animation: inputfocus 0.5s forwards; animation-direction:alternate;
}/*wantedと同じ*/
@keyframes inputfocus{
  from {opacity: 1; box-shadow: 0 0 0 3px rgba(86,120,83,0.00) ; border: 1px solid rgba(86,120,83,1.00)!important;}
  to {opacity: 1; box-shadow: 0 0 0 3px rgba(86,120,83,0.50) ; border: 1px solid rgba(86,120,83,1.00)!important;}
}/*wantedと同じ*/
			
.submit_button{}/*wantedと同じ*/
.submit_button:hover{opacity: 0.8;}/*wantedと同じ*/
.able_submit1,.able_submit2,.able_submit3{background: rgba(86,120,83,0.80);}
.disable_submit1,.disable_submit2,.disable_submit3{background: rgba(89,89,89,0.50)!important; opacity: 0.8; color: rgba(200,200,200,0.50)!important;}
.submit_div{width:100%; height:auto; background: rgba(240,240,240,0.00); padding: 3% 0;}

/*reservation   end*******************************************************/
/*termsofservice   start*******************************************************/
/*prohibited matters = 禁止事項*/

.prohibite2 tr{ width: 100%; }
.prohibite2 th{ width: 5%; padding: 0.3rem 0 0.2rem 0; text-align: right;font-size: 1.5rem;border-bottom: 1px solid rgba(255,255,255,0.1);}
.prohibite2 td{ width: 93%; padding: 0.3rem 0 0.2rem 2%; font-size: 1.5rem;border-bottom: 1px solid rgba(255,255,255,0.1);}

/*termsofservice   end*******************************************************/



/* -- div#sp-icon  */

div#sp-icon {
	width: 40px;
	height: 40px;
	background: #000000;
/*	position: fixed;
	top: 1%;
	right: 1%;
	z-index: 999;
*/
}

div#sp-icon:hover {
	cursor: pointer;
	opacity: 0.8;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: inline-block;
	width: 30px;/*横棒の長さ*/
	height: 2px;/*横棒の太さ*/
	background: #FFFFFF;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.3s;
}

div#sp-icon span {
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
}

div#sp-icon span:before {
	content: "";
	transform: translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
	content: "";
	transform: translateY( 10px ) rotate( 0deg );
}

/* メニューアイコンを変更する意味がないため削除
div.sp-open span {
	background: transparent !important;
}

div.sp-open span:before {
	transform: rotate( 45deg ) !important;
}

div.sp-open span:after {
	transform: rotate( -45deg ) !important;
}
*/