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



/*-------------------------------------------
Video
-------------------------------------------*/
/*
動画を全画面表示
*/
#video {
  width: 100%;
  padding-top:65px;
  /*height:100vh;*/
  /*background:url("../images/top.png") no-repeat 0 0;
  background-size:cover;
  margin-top:65px;*/
}

/*
「position: fixed;」で動画を固定し、「top: 65px;」で表示位置を調整
z-indexでマイナスを設定して、他のコンテンツの下に隠れるようにする
*/
#video .bg-video {
  /*position: fixed;*/
  width: 100%;
  /*height:100vh;*/
  /*top:65px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -10;*/
}


/*-------------------------------------------
YouTube
-------------------------------------------*/
iframe.youtube-16-9 {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;

/* 最大サイズの設定 */
max-width: 900px;
display: block;
margin: auto;

}


/*-------------------------------------------
PC 横幅狭くして見た場合
-------------------------------------------*/
@media screen and (max-width:1315px) {
  /*
  タブレットやスマホの場合は、動画が見切れすぎないよう高さを調整
  */
  #video {
	width:100%;
    /*height:65vh;*/
  }
	
#video .bg-video {
  width:100%;
  /*height:70vh;*/
  }
	
}


/*-------------------------------------------
タブレット　下は600pxまで確認
-------------------------------------------*/
@media screen and (max-width: 834px) {
  /*
  タブレットやスマホの場合は、動画が見切れすぎないよう高さを調整
  */
  #video {
	width:100%;
    /*height:54vh;*/
  }
	
#video .bg-video {
  width:100%;
  /*height:60vh;*/
  }
	
}


/*-----------------------------------------------------
パソコンとスマホの中間で画像を切り替える場合
----------------------------------------------------- */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc834 { display: block !important; }
.sp834 { display: none !important; }


/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 834px) {
    .pc834 { display: none !important; }
    .sp834 { display: block !important; }
}


/*-------------------------------------------
スマートフォン　下は360pxまで確認
-------------------------------------------*/
@media screen and (max-width: 414px) {
	
/*#video {
  height:30vh;	
}
	
#video .bg-video {
  height:40vh;
  }*/

	
}

/*-------------------------------------------
greeting 店主のご挨拶
-------------------------------------------*/
/* 背景*/
#greeting {
  background:url(../images/greeting_bk.png) repeat left top;
  width: 100%;
  padding:30px 0 10px 0;
}

#greeting .container {
  justify-content: center;
  flex-direction: row-reverse;
}

#greeting .item{
	width:45%;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-align:left;
}

#greeting .item span {
  text-combine-upright: all;
}

#greeting .item h3{
  font-weight:bold;
  color: #8d845d;
  font-size:150%;
  padding: 0 0 0 10%;
}

#greeting .item p{
    line-height: 1.7;
    padding:0 3%;
}

/*以下英語ページ用*/

#greeting .container_en {
  justify-content:space-between;
  flex-direction: row-reverse;
  margin-bottom: 20px;
}


#greeting .item_en{
	width:48%;
}

#greeting .item_en h3{
  font-weight:bold;
  color: #8d845d;
  font-size:130%;
  margin-bottom: 10px;
  line-height: 1.8;
}


#greeting .item_en p {
    line-height: 1.7em;
    padding:2% 0;
}

/*-------------------------------------------
タブレット　下は600pxまで確認
-------------------------------------------*/
@media screen and (max-width: 834px) {

#greeting .item{
	width:100%;
    -webkit-writing-mode:horizontal-tb;
    -moz-writing-mode:horizontal-tb;
    -ms-writing-mode:lr-tb;
    -ms-writing-mode:horizontal-tb;
    writing-mode:horizontal-tb;
    text-align:center;
}
	
#greeting .item_en{
	width:90%;
	margin:5px auto;
	}
	
#greeting .item h3{
  padding: 0;
  font-size:130%;
  margin:0 auto 3% auto;
}

#greeting .item p {
    line-height: 1.7;
    margin:0;
	padding: 10px 0;
}
	
#greeting .item img{
		margin: 15px 0;
	}
	
#greeting .container_en{
  margin-top: -30px;
}
	
#greeting .item_en p {
    line-height: 1.7;
    padding:5px 0;
}

	
	

}

/*-------------------------------------------
スマートフォン　下は360pxまで確認
-------------------------------------------*/
@media screen and (max-width: 414px) {
		
#greeting .item p{
	/*font-size:90%;*/
	text-align:left;
}
	
	
}


/*-------------------------------------------
menu
-------------------------------------------*/
#menu{
	background:url("../images/menu_bk.png") no-repeat left bottom;
    background-size:contain;
	background-repeat: no-repeat;
}

#menu ul.container{
	justify-content:space-between;
}

#lunch,#afternoontea,#dinner,#alacarte{
  /*親要素はrelativeに*/
  position: relative;
  margin-bottom: 50px;
  }


#alacarte a.click_area{
  display: block;
}

#menu a.click_area:hover{
  opacity: 0.7;
}

.menu_etc_box{
	margin: 0 auto;
	text-align: center;
	display: block;
}

.menu_etc_box ul {
	display: inline-block;
}
.menu_etc_box ul li {
	text-align: left;
	line-height: 1.5em;
}


/*メニューtab部分*/
.tab-wrap{
	width: 100%;
}

.tab-wrap ul{
  display: flex;
  flex-wrap: wrap;
  width:45%;
}

#dinner .tab-wrap ul,#afternoontea .tab-wrap ul{
  position: absolute;
  top:10%;
  right:0;
}

#lunch .tab-wrap ul{
  position: absolute;
  top:10%;
  left:0;
}

.tab-btn {
  display: block;
  width: 50%;
  padding: 10px 0;
  text-align: center;
  list-style: none;
  cursor: pointer;
  background:#ddd;
  border: solid 1px #b0a999;
  box-sizing: border-box;
  border-radius:10px 10px 0 0;
}

/*liにshowクラスがついた時の形状*/
.tab-btn.show {
  background:#3aad3a;
  color: #fff;
}

/*表示非表示と形状*/
.tab-contents {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  background: #fff;
}

/*.tab-contentsにshowというクラスがついた時の形状*/
.tab-contents.show {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.p_a1 {
  /*Seasonal→などの題名写真左*/
  position: absolute;
  top:0;
  right:0;
  color: #b0a999;
  font-size: 150%;
  font-weight:bold;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff,
    -1px 1px 0 #fff,  1px -1px 0 #fff,
    1px 0 0 #fff, -1px  0 0 #fff,
    0 1px 0 #fff,  0 -1px 0 #fff;
}

.p_a1 a,.p_a3 a{
	color: #8d845d; 
}

.p_a1 a:hover,.p_a3 a:hover{
	color:#4cb34b; 
}

#p_d_tab,#n_d_tab{
  /*topディナー枠*/
  position: absolute;
  top:22%;      /*タブがある場合*/
  /*top:10%;	/*タブがない場合*/
  right:0;
  width:45%;
  background: #fff;
  border: solid 1px #b0a999;
  padding: 25px;
  box-sizing: border-box;
  border-radius:0 0 5px 5px;
  z-index: 5000;
}

/*topアフタヌーンティーメニュー枠*/

#p_a_tab,#n_a_tab{
  position: absolute;
  top:22%;      /*タブがある場合*/
  /*top:10%;	/*タブがない場合*/
  right:0;
  width:45%;
  background: #fff;
  border: solid 1px #b0a999;
  padding: 25px;
  box-sizing: border-box;
  border-radius:0 0 5px 5px;
  z-index: 5000;
}

.tab-contents h2{
	text-align: center;
	padding-bottom: 20px;
	font-size: 120%;
	color: #89835f;
}

/*文字色ゴールド*/

.f_c_gold{
	color: #89835f;
}


.tab-contents dt{
  /*メニュー名*/
	font-weight:bold;
	line-height:1.8em;
	font-size: 110%;
}

.tab-contents dt.narrow{
  /*メニュー名*/
	line-height:1em;
	font-size: 100%;}


.tab-contents a:hover{
	color: #c00;
}

.tab-contents dd,.p_a2_alc dd{
  /*値段*/
	text-align: right;
	margin: 3px 0 15px 0;
	font-size: 110%;
}

.p_a3 {
  /*Seasonal→などの題名写真右*/
  position: absolute;
  top:0;
  left:0;
  color: #b0a999;
  font-size: 150%;
  font-weight:bold;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff,
    -1px 1px 0 #fff,  1px -1px 0 #fff,
    1px 0 0 #fff, -1px  0 0 #fff,
    0 1px 0 #fff,  0 -1px 0 #fff;
}

.wrapper a.click_area:hover .p_a3{
  color:#4cb34b;
}

#p_l_tab,#n_l_tab{
  /*topランチメニュー枠*/
  position: absolute;
  
  top:22%;      /*タブがある場合*/
  /*top:10%;	/*タブがない場合*/
  
  left:0;
  width:45%;
  background: #fff;	
  border: solid 1px #b0a999;
  padding: 25px;
  box-sizing: border-box;
  border-radius:0 0 5px 5px;
  z-index: 5000;
}


#p_l_tab dt,#n_l_tab dt{
  /*メニュー名*/
	font-weight:bold;
	line-height:1.8em;
	font-size: 110%;
}

#p_l_tab dd,#n_l_tab dd{
  /*値段*/
	text-align: right;
	margin: 3px 0 15px 0;
	font-size: 110%;
}

.kakko {
	width: 80%;
	margin:0 auto;
	position: relative;
	box-sizing: border-box;
	font-size: 90%;
}
.kakko::before,
.kakko::after {
	content: '';
	width: 40px;
	height: 100%;
	position: absolute;
	top: 0;
	box-sizing: border-box;
	border-radius: 50%;
}
.kakko::before {
	border-left: solid 2px #333;
	left: 0;
}
.kakko::after {
	border-right: solid 2px #333;
	right: 0;
}
.kakko-02auto li{
	margin: 0;
}


/*-------------------------------------------
タブレット　下は600pxまで確認
-------------------------------------------*/
@media screen and (max-width: 834px) {

#lunch,#afternoontea,#dinner{
  	/*親要素はstaticに*/
  	position: static;
	margin-top: 0px;
  	margin-bottom: 20px;
 }	
	
#lunch{
  margin-top: 0px;
  margin-bottom:40px;
  }
	
#afternoontea{
  margin-top:0px;
  margin-bottom:40px;
  }
	
#dinner{
  margin-top:0px;
  margin-bottom:40px;
  }
	
#alacarte {
  margin-top:0px;
  margin-bottom:40px;
  }

.p_a1,.p_a3 {
	position: static;
	margin-bottom: 10px;
}
	
#dinner .tab-wrap ul,#lunch .tab-wrap ul,#afternoontea .tab-wrap ul{
  position:relative;
  top:0;
  left:0;
  width:90%;
  margin: -10% auto 0 auto;
}

	
#p_d_tab,#n_d_tab,#p_l_tab,#n_l_tab,#p_a_tab,#n_a_tab{
	/*メニュー枠*/
	position:relative;
	top:9%;
	left: 0;
  	width:90%;
  	padding: 15px;
  	margin:0 auto;
	background: #fff;
}
	

#p_d_tab dd,#n_d_tab dd,#p_l_tab dd,#n_l_tab dd,#p_a_tab dd,#n_a_tab dd, .p_a2_alc dd{
  /*値段*/
	margin: -1px 0 5px 0;
}
	

}

/*-------------------------------------------
スマートフォン　下は360pxまで確認
-------------------------------------------*/
@media screen and (max-width: 414px) {

.tab-contents dt.narrow{
  /*メニュー名*/
	line-height:1.5em;
	}
	
	
}

/*-------------------------------------------
occasion
-------------------------------------------*/

#occasion{
	background:url("../images/occasion_bk.png") no-repeat left top;
    background-size:cover;
	margin-bottom: 20px;
}

#occasion ul{
	margin: 20px auto 0 auto;
}

#occasion ul li,#column ul li{
	margin-bottom: 25px;
}

#occasion ul li:last-child{
	margin-bottom: 0px;
}


/*
ロールオーバー時画像半透明に
*/
#occasion ul li a:hover img,#column ul li a:hover img,#news a:hover img{
opacity: 0.8;
}

/*-------------------------------------------
room
-------------------------------------------*/

.content {
  width: 100%;
  margin: 0px auto 30px auto;
}

#slider {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/*
スライダー矢印（共通）
*/
#slider .prev,
#slider .next {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  position: absolute;
  top: 45%;
  transition: 0.5s;
  z-index: 10;
}
#slider .prev:hover,
#slider .next:hover {
  opacity: 0.5;
}
#slider .prev::before,
#slider .prev::after,
#slider .next::before,
#slider .next::after {
  content: "";
  display: block;
  width: 14px;
  height: 2px;
  background-color: #000;
  position: absolute;
}

/*
スライダー左矢印
*/
#slider .prev {
  left: 0;
}
#slider .prev::before,
#slider .prev::after {
  left: 12px;
}
#slider .prev:before {
  top: 37%;
  transform: rotate(-45deg);
}
#slider .prev:after {
  bottom: 37%;
  transform: rotate(45deg);
}

/*
スライダー右矢印
*/
#slider .next {
  right: 0;
}
#slider .next::before,
#slider .next::after {
  right: 12px;
}
#slider .next:before {
  top: 37%;
  transform: rotate(45deg);
}
#slider .next:after {
  bottom: 37%;
  transform: rotate(-45deg);
}

/*-------------------------------------------
タブレットとスマートフォン
-------------------------------------------*/
@media screen and (max-width: 834px) {
  #slider .prev,
  #slider .next {
    top: 40%;
  }
}

/*-------------------------------------------
news
-------------------------------------------*/
#news .item{
	width:50%;
	padding-bottom: 10px;
}

#news .item a{
	display: block;
	width:100%;
}

#news .item dl{
	font-size: 90%;
	color:#8d845d;
	padding-left: 15px;
	padding-right: 10px;
}

#news .item dl dt{
	padding-bottom: 15px;
}

#news .item dl dd{
	line-height: 1.5em;
}


/*-------------------------------------------
タブレット　下は600pxまで確認
-------------------------------------------*/
@media screen and (max-width: 834px) {

#news .container {
  display: block;
  margin-bottom: 15px;
}
	
#news .item,#news .item img{
	width:100%;
}
	
#news .item dl{
	padding-left:0px;
	padding-right:0px;
}


}

/*-------------------------------------------
スマートフォン　下は360pxまで確認
-------------------------------------------*/
/*
@media screen and (max-width: 414px) {
	
#news .container {
  display: block;
  margin-bottom: 15px;
}
	
#news .item,#news .item img{
	width:100%;
}
	
#news .item dl{
	padding-left:0px;
	padding-right:0px;
}
	

	
}
*/


/*-------------------------------------------
instagram
-------------------------------------------*/
#instagram .container {
    justify-content: flex-start;
}
/*
#instagram .item{
	width:49%;
	margin-right: 2%;
}

#instagram .item:nth-child(4n) {
  margin-right: 0;
}
*/

#instagram h3{
    color: #8d845d;
    font-size:130%;
    margin-bottom: -20px;
}





/*-------------------------------------------
タブレット　
-------------------------------------------*/
@media screen and (max-width: 834px) {
/*
#instagram .item{
	width:100%;
	margin-right: 0;
}

#instagram h3{
	padding-top: 30px;
}
*/


}






/*-------------------------------------------
column
-------------------------------------------*/
#column h3{
	text-align: center;
	line-height: 1.5em;
}

#column .item{
	width:50%;
	padding:40px 0;
}

#column .item60{
	width:55%;
	padding:40px 5% 40px 0;
}

#column .item40{
	width:40%;
	padding:40px 0;
}


/*-------------------------------------------
タブレット　
-------------------------------------------*/
@media screen and (max-width: 834px) {
#column .item{
	width:100%;
	padding:20px 0;
}

#column .item60{
	width:100%;
	padding:20px 0;
}

#column .item40{
	width:100%;
	padding:20px 0;
}

/*	
  #column h3{
      font-size:85%;
	}
	
p{
	font-size: 80%;
	}
*/

}

/*-------------------------------------------
スマートフォン　下は360pxまで確認
-------------------------------------------*/
/*
@media screen and (max-width: 414px) {
#column .item{
	width:100%;
	padding:20px 0;
}
	
  #column h3{
      font-size:85%;
	}
	
p{
	font-size: 80%;
	}
	
	
}
*/


/*-------------------------------------------
information
-------------------------------------------*/
/*
アクセス部分の背景
*/
#information{
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='90' height='90' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M0 0v90h90V0Zm3.735.72h5.628v8.644H.72V3.735Zm7.068 0h8.46v8.644h-8.46zm9.9 0h5.231v17.283h-8.309v7.554H.72v-4.854h10.083v-9.9h9.9zm6.671 0h6.822v10.25H44.28v7.033H27.374Zm28.43 0h6.821v17.283H45.72V10.97h10.083zm8.261 0h5.232v10.084h9.9v9.9H89.28v4.853H72.374v-7.554h-8.309zm6.672 0h8.46v8.644h-8.46zm9.9 0h5.628l3.015 3.015v5.629h-8.644Zm-45 0h18.726v8.81H35.636ZM.72 10.804h8.643v8.46H.72Zm79.916 0h8.644v8.46h-8.644zm-61.57 8.64h6.868v6.113h-6.869zm8.308 0H44.28v4.853H34.197v9.9h-9.9V44.28h-5.232V26.997h8.31zm18.346 0h16.905v7.553h8.31V44.28h-5.232V34.197h-9.9v-9.9H45.72Zm18.345 0h6.87v6.113h-6.87zm-28.429 6.293h8.644v8.46h-8.644zm10.084 0h8.643v8.46H45.72Zm-45 1.26h16.905V44.28H10.97V34.197H.72Zm71.654 0H89.28v7.2H79.031V44.28h-6.657ZM.72 35.637h8.809v18.727H.72Zm25.017 0h8.46v8.643h-8.46zm9.9 0h8.643v5.628l-3.015 3.015h-5.629zm10.083 0h8.643v8.643h-5.628l-3.015-3.015Zm10.083 0h8.46v8.643h-8.46zm24.668 0h8.809v18.727h-8.809ZM10.97 45.72h6.656v17.283H.72v-7.2h10.249zm8.096 0h5.232v10.084h9.9v9.9H44.28v4.853H27.374v-7.554h-8.309zm6.672 0h8.46v8.644h-8.46zm9.9 0h5.628l3.015 3.015v5.629h-8.644zm13.098 0h5.628v8.644H45.72v-5.629Zm7.068 0h8.46v8.644h-8.46zm9.9 0h5.231v17.283h-8.309v7.554H45.72v-4.854h10.083v-9.9h9.9zm6.671 0h6.657v10.084H89.28v7.2H72.374ZM35.636 55.804h8.644v8.46h-8.644zm10.084 0h8.643v8.46H45.72Zm-45 8.64h16.905v7.553h8.31V89.28h-5.232V79.197h-9.9v-9.9H.72Zm18.345 0h6.87v6.113h-6.87zm45 0h6.87v6.113h-6.87zm8.31 0H89.28v4.853H79.197v9.9h-9.9V89.28h-5.232V71.997h8.31zM.72 70.736h8.643v8.46H.72Zm79.916 0h8.644v8.46h-8.644zm-53.262 1.26H44.28v7.034H34.196v10.25h-6.822zm18.346 0h16.905V89.28h-6.822V79.031H45.72ZM35.636 80.47h18.727v8.809H35.636ZM.72 80.637h8.643v8.643H3.735L.72 86.265Zm10.083 0h8.46v8.643h-8.46zm59.934 0h8.46v8.643h-8.46zm9.9 0h8.643v5.628l-3.015 3.015h-5.629z'  stroke-width='1' stroke='none' fill='hsla(43, 81%, 61%, 0.21)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

#information .item{
	width:38%;
	padding:30px 0;
    margin-right: 2%;
}

#information .item:nth-child(2n){
	width:58%;
}


#instagram .item:nth-child(2n) {
  margin-right: 0;
}


#information h3{
	width: 200px;
	padding: 10px 0 30px 0;
}

#information iframe{
	height:500px;
}


#information ul{
	padding-bottom: 20px;
	font-size: 80%;
}

#information ul li{
	padding-bottom: 10px;
}

#information ul li a:hover{
	color: #c00;
}

#information ul.sns{
	display: flex;
}

#information ul.sns li{
	padding: 0 20px 0 0;
}

#information ul.sns img{
	width: 40px;
}

#information .item dl{
	padding: 10px 0;
	font-size: 80%;
}

#information .item dl dt{
	padding-bottom: 10px;
}

#information .item dl dd{
	line-height: 1.5em;
}


/*-------------------------------------------
タブレット　下は600pxまで確認
-------------------------------------------*/
@media screen and (max-width: 834px) {
	
#information .container {
  display: block;
}
	
	#information .item{
	width:100%;
	padding:0px;
}

#information .item{
	width:100%;
}

#information .item:nth-child(2n){
	width:100%;
}

	
	#information .item h3{
		margin: 0 auto;
	}
	
	#information .item ul{
		text-align: center;
	}
	
	#information ul.sns{
		justify-content: center;
	}
	
}

/*-------------------------------------------
タブレット　下は600pxまで確認
-------------------------------------------*/
@media screen and (max-width: 834px) {
#information iframe{
	margin-top: 15px;
	}	
}

/*-------------------------------------------
スマートフォン　下は360pxまで確認
-------------------------------------------*/
@media screen and (max-width: 414px) {
	
#information iframe{
	height:300px;
}
	
}

/*-------------------------------------------
ここからconcept　コンセプトページmain_v
-------------------------------------------*/

#main_v{
padding-top: 65px;	
}

#concept{
	text-align: center;
}

#concept h3{
    color: #8d845d;
    font-size:150%;
    margin:60px auto 40px auto;
}

#concept p{
	padding: 15px 0;
	line-height: 2em;
}



/*-------------------------------------------
タブレット
-------------------------------------------*/
@media screen and (max-width: 834px) {

#concept h3{
    margin:40px auto 30px auto;
}
	
	
}

/*-------------------------------------------
コンセプトページguidance
-------------------------------------------*/

#guidance h2,#careers_detail h2{
	width:100%;
	text-align: center;
	padding-bottom:15px;
}

#guidance h2 img{
    width: 150px;
	margin:15px auto;
}

#guidance ol{
	width: 100%;
	padding:5% 6% 5% 7%;
	color: #8d845d;
	box-sizing: border-box;
	background: #f9f9f7;
	margin: 15px 0;
	font-weight: bold;
}

#careers_detail ul{
	width: 100%;
	padding:5% 0 5% 7%;
	color: #8d845d;
	box-sizing: border-box;
	background: #f9f9f7;
	margin: 15px 0;
	font-weight: bold;

}

#careers_detail img{
	width:100%;
}

#careers_detail h3{
    color: #8d845d;
    font-size:150%;
    margin:30px auto 10px auto;
    line-height: 150%;
}

#guidance ol li{
	list-style: decimal;
	padding: 10px 0;
	line-height: 1.3em;
}

#careers_detail ul li{
	width: 96%;
	margin: auto;
	list-style:square;
	padding: 10px 0;
	line-height: 1.3em;

}

table.careers_t {
      width:100%;
      border-collapse: collapse;
    }
table.careers_t th,table.careers_t td {
      padding: 12px;
      border: 1px solid #ddd;
      /*vertical-align: top;*/
	box-sizing: border-box;
    }

table.careers_t th{
	color:#fff;
	background: #8d845d;
}

 .cta {
      text-align: center;
      margin-top: 40px;
	 font-weight: bold;
    }





/*-------------------------------------------
コンセプトページconceptdetail
-------------------------------------------*/
#conceptdetail h3,#careers h3{
    color: #8d845d;
    font-size:150%;
    margin:30px auto 40px auto;
    line-height: 150%;
}


#conceptdetail .conceptdetail_txt{
    line-height: 170%;
    margin-bottom: 5%;
}

#conceptdetail .container{
  justify-content:space-between;
  align-items: center;
  margin-bottom: 10px;
}


#conceptdetail .container .item{
	width:49%;
}

#conceptdetail .container p{
	line-height: 170%;
	margin-bottom: 1em;
}

#conceptdetail .container:nth-child(even) {
  flex-direction: row-reverse;
}


/*-------------------------------------------
タブレット
-------------------------------------------*/
@media screen and (max-width: 834px) {

#conceptdetail h3,#careers_detail h3{
    margin:20px auto 30px auto;
}

#conceptdetail .container .item{
	width:100%;
	margin-bottom: 15px;
}
	
	
#careers_detail ul,#careers_detail img{
	width:100%;
	}
	
	
table.careers_t tr {
  display: block;
  width:100%;
}
table.careers_t th,table.careers_t td{
  display: block;
  width:100%;
  box-sizing: border-box;
}


	
}




/*-------------------------------------------
コンセプトページvisual
-------------------------------------------*/
#visual{
	background: url("../images/wall.png") no-repeat left top;
	width: 100%;
	padding: 20px 0;
}

#visual .container,#dining .container,#private .container,#powder .container{
  justify-content:space-between;
}

#visual .item1,#visual .item2{
	width:46%;
}

#visual .item2{
	padding-top:15%;
}

/*-------------------------------------------
ここからroomページ
-------------------------------------------*/

#dining h4,#private h4{
	text-align: center;
	margin: 15px auto;
	color:#8d845d;
	border-bottom: 1px solid #8d845d;
	padding-bottom: 10px;
	
}

#dining .container,#private .container{
	border-bottom: 1px solid #8d845d;
}

#dining .item,#private .item,#powder .item{
	width: 32%;
}

#dining .item dl,#private .item dl,#powder .item dl{
	font-size: 90%;
	padding-bottom: 10px;
}

#dining .item dt,#private .item dt,#powder .item dt{
	padding-bottom:5px;
}

#dining .item dd,#private .item dd,#powder p{
	padding: 10px 0;
	line-height: 1.5em;
}

#private h5,#powder h5{
	color: #8d845d;
	font-size: 90%;
	text-align: center;
	margin: 15px auto 10px auto;
}


/*-------------------------------------------
タブレット
-------------------------------------------*/
@media screen and (max-width: 834px) {
	
#dining .item,#private .item,#powder .item{
	width: 49%;
}


}



/*-------------------------------------------
スマホ
-------------------------------------------*/
@media screen and (max-width: 414px) {
	
#dining .item,#private .item,#powder .item{
	width: 100%;
}


}





/*-------------------------------------------
ここからmenuページ
-------------------------------------------*/

#s_menu .container{
  justify-content:space-between;
  align-items: center;
  margin-bottom: 20px;
}

#s_menu .item{
	width:45%;
	margin: 15px 0;
	border: 1px solid #8d845d;
	box-shadow: 8px 8px 0px 0px rgba(150, 141, 95, 0.4);
	padding: 15px 0;
	text-align: center;
	display: block;
}

#s_menu .item img{
	width:70%;
}

/*アコーディオンメニューボタン部*/

#s_menu .accordion_container{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content:space-between;
  margin-bottom: 15px;
  align-items: flex-start;
}

#s_menu .accordion_item{
	width:47%;
	margin: 10px 0;
	text-align: center;
	display: block;
}

.menu-box {
}
 
.menu-box .menu-label-title {
  display: block;
  padding: 10px 0px;
  cursor: pointer;
  position: relative;
  background: #3aad3a;
  color: #fff;
  font-size: 120%;
  font-weight: bold;
}
 
.menu-box .menu-title {
  display: block;
　color: #fff;
}
 
.menu-box .menu-label-title span:nth-child(2),
.menu-box .menu-label-title span:nth-child(3) {
  display: block;
  width: 16px;
  border-bottom: solid 1px #fff;
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
 
.menu-box .menu-label-title span:nth-child(2) {
  transform: rotate(45deg);
  right: 36px;
}
 
.menu-box .menu-label-title span:nth-child(3) {
  transform: rotate(-45deg);
}
 
.menu-box .menu-text {
  display: none;
  background: #BCE3BF;
}

.menu-box .menu-text ul li{
	padding: 15px 0;
	border-top:1px #8AC789 dotted;
}

.menu-box .menu-text ul li a{
	display: block;
	font-weight: bold;
    color:#276F3D;
}

.menu-box .menu-text ul li a:hover{
	color:#AD6742; 
}

 
/* 折り畳みメニューを追加する場合 */
.menu-box #check-box,
.menu-box #check-box2,
.menu-box #check-box3/*,
.menu-box #check-box4*/{
  display: none;
}
 
.menu-box #check-box:checked ~ .menu-text,
.menu-box #check-box2:checked ~ .menu-text,
.menu-box #check-box3:checked ~ .menu-text/*,
.menu-box #check-box4:checked ~ .menu-text*/{
  display: block;
}
 
.menu-box #check-box:checked ~ .menu-label-title span:nth-child(2),
.menu-box #check-box2:checked ~ .menu-label-title span:nth-child(2),
.menu-box #check-box3:checked ~ .menu-label-title span:nth-child(2),
.menu-box #check-box4:checked ~ .menu-label-title span:nth-child(2){
  transform: rotate(-45deg);
}
 
.menu-box #check-box:checked ~ .menu-label-title span:nth-child(3),
.menu-box #check-box2:checked ~ .menu-label-title span:nth-child(3),
.menu-box #check-box3:checked ~ .menu-label-title span:nth-child(3),
.menu-box #check-box4:checked ~ .menu-label-title span:nth-child(3){
  transform: rotate(45deg);
}
/* アコーディオンメニューボタンここまで */


/*
#s_seasonal h3{
	text-align: center;
	padding:40px 0 15px 0;
	color:#8d845d;
	font-weight: bold;
	line-height: 1.5em;
	font-size: 160%;
}
*/

#s_seasonal .lunch_titlebox, #s_seasonal .afternoontea_titlebox, #s_seasonal .dinner_titlebox{
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
}

#s_seasonal .titlebox{
	text-align: center;
	border: 1px solid #8d845d;
	box-shadow: 8px 8px 0px 0px rgba(150, 141, 95, 0.4);
	padding: 10px 0;
	font-weight: bold;
	margin: 20px 0;
}

.bg_cream{
	background: #f9f6d8;
}


#s_seasonal h3{
	padding:40px 0 5px 0;
	color:#8d845d;
	line-height: 1.5em;
	font-size: 160%;
}

#s_seasonal h3.h3_s{
	padding: 0;
	line-height: 1.3em;
	font-size: 140%;	
}

#s_seasonal h3.h3_s span.di{
	color:#ef852e;
}

#s_seasonal h3.h3_s span.dilu{
	color:#d92c5f;
}

#s_seasonal h3.h3_s span.lu{
	color:#3aad3a;
}

#s_seasonal h3.h3_s span.afternoonteatxt{
	color:#e8d168;
}

#s_seasonal h3.h3_s span.f-purpletxt{
	color:#968ada;
}

#s_seasonal h3.h3_s span.f-blue2txt{
	color:#57bacb;
}

#s_seasonal .m_lunch_txt{
	color:#39a32f;
	font-family: '游ゴシック Medium', sans-serif;
	font-size: 110%;
}

#s_seasonal .m_dinner_txt{
	color:#e94669;
	font-family: '游ゴシック Medium', sans-serif;
	font-size: 110%;
}

#s_seasonal .lunch_titlebox p, #s_seasonal .afternoontea_titlebox p, #s_seasonal .dinner_titlebox p{
	font-size: 100%;
}

#s_seasonal .tab-wrap{
	width: 100%;
}

#s_seasonal .tab-wrap ul{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  margin-top: 20px;
}


/*
メニュー偶数番目container2
*/

#s_seasonal .container2{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

#s_seasonal .container,#s_seasonal .container2{
  flex-wrap:nowrap;
  justify-content:space-between;
	margin-bottom: 35px;
}

#s_seasonal .container_s3,#s_seasonal .container_s4{
  display: flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  margin-bottom: 10px;
}

#s_seasonal .container2{
  flex-direction : row-reverse;
}

#s_seasonal .mini_container{
  display: flex;
  width: 100%;
  flex-wrap:wrap;
  justify-content:space-between;
}

#s_seasonal .grid_container3_2 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}


#s_seasonal .grid_container4_2 {
  padding: 10px;
  border: 1px solid #3aad3a;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}


#s_seasonal .grid_container4_2 .g_item img,#s_seasonal .grid_container3_2 .g_item img{
	width: 100%;
}





#s_seasonal .item{
	width:80%;
}

#s_seasonal .item_btn,#s_seasonal .container_s3 .item_btn,#s_seasonal .container_s4 .item_btn{
	width:49%;
}

#s_seasonal .item3col,#s_seasonal .container_s3 .item3col{
	width: 32%;
	margin-bottom: 25px;
}

#s_seasonal .item3col45{
	width: 45%;
}

#s_seasonal .item3col35{
	width: 35%;
}

#s_seasonal .item3col20{
	width: 20%;
}


#s_seasonal .item3col35 table{
	width:100%;
}

#s_seasonal .item3col35 table td{
	padding: 10px;
}


#s_seasonal .item3col45.bg_green{
   background: url("../images/frame_green_top_left.png") no-repeat left top;
   background-size: 100px;
}


#s_seasonal .container .frame_green .p_a5{
   width:100%;
   background: url("../images/frame_green_top_left.png") no-repeat left top;
   background-size: 100px;
}

#s_seasonal .container2 .frame_green .p_a5{
   width:100%;
   background: url("../images/frame_green_top_right.png") no-repeat right top;
   background-size: 100px;
}

#s_seasonal .container .frame_blue .p_a5{
   width:100%;
   background: url("../images/frame_blue_top_left.png") no-repeat left top;
   background-size: 100px;
}

#s_seasonal .container2 .frame_blue .p_a5{
   width:100%;
   background: url("../images/frame_blue_top_right.png") no-repeat right top;
   background-size: 100px;
}

#s_seasonal .container .frame_blue2 .p_a5{
   width:100%;
   background: url("../images/frame_blue2_top_left.png") no-repeat left top;
   background-size: 100px;
}

#s_seasonal .container2 .frame_blue2 .p_a5{
   width:100%;
   background: url("../images/frame_blue2_top_right.png") no-repeat right top;
   background-size: 100px;
}

#s_seasonal .container .frame_pink .p_a5{
   width:100%;
   background: url("../images/frame_pink_top_left.png") no-repeat left top;
   background-size: 100px;
}

#s_seasonal .container2 .frame_pink .p_a5{
   width:100%;
   background: url("../images/frame_pink_top_right.png") no-repeat right top;
   background-size: 100px;
}

#s_seasonal .container .frame_yellow .p_a5{
   width:100%;
   background: url("../images/frame_yellowk_top_left.png") no-repeat left top;
   background-size: 100px;
}

#s_seasonal .container2 .frame_yellow .p_a5{
   width:100%;
   background: url("../images/frame_yellow_top_right.png") no-repeat right top;
   background-size: 100px;
}

#s_seasonal .container .frame_orange .p_a5{
   width:100%;
   background: url("../images/frame_orange_top_left.png") no-repeat left top;
   background-size: 100px;
}

#s_seasonal .container2 .frame_orange .p_a5{
   width:100%;
   background: url("../images/frame_orange_top_right.png") no-repeat right top;
   background-size: 100px;
}

#s_seasonal .container .frame_purple .p_a5{
   width:100%;
   background: url("../images/frame_purple_top_left.png") no-repeat left top;
   background-size: 100px;
}

#s_seasonal .container2 .frame_purple .p_a5{
   width:100%;
   background: url("../images/frame_purple_top_right.png") no-repeat right top;
   background-size: 100px;
}




#s_seasonal .p_a5 dl{
  /*メニュー枠*/
	/*border: solid 1px #b0a999;
	border-radius: 5px;*/
	padding: 40px 20px 20px 45px;
}

#s_seasonal .item3col45.bg_green p.menu_text{
	padding: 40px 0 20px 45px;
}

#s_seasonal .p_a5 dt,#s_seasonal .item3col45.bg_green p.menu_text{
  /*メニュー名*/
	width: 100%;
	font-weight:bold;
	line-height: 1.5em;
	padding-right: 10px;
	font-size: 130%;
}

#s_seasonal .p_a5 .fukurokuju_logo img{
	width: 22%;
	padding-right: 10px;
	vertical-align: middle;
}


#s_seasonal .container .p_a5 dt p{
  /*値段部分*/
	padding: 10px 0 0 0px;
	text-align: right;
}

#s_seasonal .item3col45.bg_green p.nedan{
	font-size: 130%;
	text-align: right;
	margin-top: -10px;
	padding-right:40px;
}

#s_seasonal .container2 .p_a5 dt p{
  /*値段部分*/
	padding: 10px 20px 0 0px;
	text-align: right;
}

#s_seasonal .item3col20{
	margin-top: 10px;
}


#s_seasonal .p_a5 dd,#s_seasonal .item3col20 ul li{
  /*メニューの中身*/
	width: 100%;
	padding-top:10px;
}

#s_seasonal .p_a5 dd ul li{
	margin-bottom:10px; 
	padding-left: 5px;
}

#s_seasonal .p_a5 dd ol {
  /*メニューの①②の数字部分*/
    counter-reset: my-counter;
}

#s_seasonal .p_a5 dd ol li,.p_a5 dd p{ 
  margin-bottom:10px;
  padding-left:15px;
  position: relative;
  line-height:1.2em;
  text-align: left;
}

#s_seasonal .p_a5 dd ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  border:solid 1px #b0a999;
  color: #222;
  font-size: 80%;
  display: block;
  float: left;
  line-height:15px;
  margin-left: -25px;
  margin-top: 1px;
  text-align:center;
  height:15px;
  width:15px;
  border-radius: 50%;
}

#s_seasonal .p_a5 dd li img,#s_seasonal .item3col20 img{
	width: 17px;
	padding-left: 2px;
}


#s_seasonal .mini_container{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content:flex-start;
  margin:10px auto;
}

#s_seasonal .mini_container2{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
}


#s_seasonal .m_item{
	width:16%;
	padding-right:3px;
}

#s_seasonal .item2{
	width:96%;
	margin-left: 15px;
}

#s_seasonal .container2 .item2{
	width:96%;
	margin-left: 0px;
}


#s_seasonal .item2 dd{
	text-align: center;
	padding:10px 0 30px 0;
	font-family: '游ゴシック Medium', sans-serif;
	font-size:90%;
}

/*
横2つ並びメニューcontainer_s
*/

#s_seasonal .container_s{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  justify-content: space-between;
  margin-bottom: 60px;
}

#s_seasonal .item_s{
	width: 50%;
}

#s_seasonal .item_s dl{
	text-align: center;
	padding: 20px;
}

#s_seasonal .item_s dt{
	padding: 10px 0;
	margin:20px 0;
	font-size: 120%;
	font-weight: bold;
}

#s_seasonal .item_s dt.pink{
	border-top: 1px #d92c5f solid;
	border-bottom: 1px #d92c5f solid;
	color: #d92c5f;
}

#s_seasonal .item_s dt.green{
	border-top: 1px #3aad3a solid;
	border-bottom: 1px #3aad3a solid;
	color:#3aad3a;
}

#s_seasonal .item_s dt.orange{
	border-top: 1px #ef852e solid;
	border-bottom: 1px #ef852e solid;
	color:#ef852e;
}

#s_seasonal .item_s dt.red{
	border-top: 1px #d81916 solid;
	border-bottom: 1px #d81916 solid;
	color:#d81916;
}

#s_seasonal .item_s dt.huku{
	background: url("../images/bnr_fuku.png") no-repeat 15px center;
	background-size: 50px;
}

#s_seasonal .item_s dt.roku{
	background: url("../images/bnr_roku.png") no-repeat 15px center;
	background-size: 50px;
}

#s_seasonal .item_s dt.jyu{
	background: url("../images/bnr_ju.png") no-repeat 15px center;
	background-size: 50px;
}





#s_seasonal .item_s dt p{
	color: #333;
	text-align: right;
	margin: 10px 0 -5px 0;
}

#s_seasonal .item_s dd ul{
	margin-bottom: 15px;
}

#s_seasonal .item_s dd ul li{
	font-size: 100%;
	padding: 5px 0;
}

#s_seasonal .item_s dd ul li img{
	width: 15px;
	padding-left: 2px;
}

#s_seasonal .item_s .menuphototxt{
	text-align: center;
	font-family: '游ゴシック Medium', sans-serif;
	font-size:90%;
}


/*メニュー表*/


#s_alacarte{
	width: 100%;
	background: url(../images/alacalt_up.png) no-repeat center bottom;
	margin-bottom:50px;
}

#s_drink{
	width: 100%;
	/*background:#未設定;*/
}


#s_alacarte .container,#s_drink .container{
  border:solid 1px #b0a999;
  border-radius: 5px;
  padding:0 20px;
  box-sizing: border-box;
  background: #fff;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: flex-start;
}

/*メニューtableを横に２つ並べている*/

#s_alacarte .item,#s_drink .item{
	width:48.5%;
	padding: 20px 0 20px 0;
}

#s_alacarte table th,#s_drink table th{
	font-weight:bold;
	padding: 15px 0;
	text-align: left;
	font-size: 120%;
}

#s_alacarte table td, #s_drink table td{
	padding-bottom: 10px;
	line-height: 130%;
}

#s_alacarte table td:nth-child(even), #s_drink table td:nth-child(even) {
	text-align: right;
	width: 95px;
}

#s_alacarte table td:nth-child(3), #s_drink table td:nth-child(3) {
	text-align: right;
	font-size: 70%;
	width: 40px;
}


#s_alacarte table td img{
	width: 17px;
	padding-left: 3px;
}


/*-----------------------
/* メニュー説明文
/*---------------------*/
.menu_txt {
	text-align:center;
	margin-top: -50px;
}

.menu_txt .mt_hsub{
	font-size: 110%;
	font-weight: bold;
	color:#2aa738;
	margin-top: 15px;
	font-feature-settings:"palt" 1;
}

.menu_txt .mt_htxt1{
	font-size: 115%;
	margin-top: 30px;
}

.menu_txt .mt_htxt2{
	font-size: 115%;
	margin-top: 20px;
	margin-bottom: 40px;
}




/*-------------------------------------------
タブレット　下は600pxまで確認
-------------------------------------------*/
@media screen and (max-width: 834px) {
	
#s_menu .container{
	justify-content:center;	
	}
	
#s_menu .item{
	width:80%;
	}
	
#s_seasonal .container,#s_seasonal .container2{
  flex-wrap:wrap;
  justify-content:center;	
  margin-bottom: 15px;
}
	
#s_seasonal .item,#s_seasonal .item2,#s_seasonal .item_btn{
	width:100%;
	margin-bottom: 20px;
}
	
#s_seasonal .item2{
	width:100%;
	margin-left:0px;
	text-align: center;
}
	
#s_seasonal .m_item{
	width:16%;
	padding:0 3px 5px 0;
}
	
#s_seasonal .item_s dl.no_pa{
	padding: 20px 0;
}

	
#s_menu .accordion_item,#s_seasonal .item_s,#s_seasonal .item3col,#s_seasonal .item3col45,#s_seasonal .item3col20{
	width:100%;
}
	
	#s_seasonal .item3col35{
		width: 80%;
		margin: 0 auto;
	}
	
#s_seasonal .mini_container2 .m_item{
	width:100%;
	padding-right:0px;
	text-align: center;
}
	
#s_seasonal .item3col20 ul{
	margin: -10px 0 20px 0;
	}
	
	
#s_seasonal .grid_container4_2,#s_seasonal .grid_container3_2 {
  grid-template-columns: repeat(2, 1fr);
}


	
/*メニュー名スマホでは中央寄せ*/	
	
.p_a5 dd ul li{
		text-align: center;
	}

	



/*メニューtableを縦並べに*/
	
#s_alacarte .item,#s_drink .item{
	width:100%;
}


/*-----------------------
/* メニュー説明文
/*---------------------*/
.menu_txt .mt_htxt1{
	font-size: 110%;
	margin-top: 25px;
}

.menu_txt .mt_htxt2{
	font-size: 110%;
	margin-top: 15px;
}




}



/*-------------------------------------------
スマートフォン　下は360pxまで確認
-------------------------------------------*/

@media screen and (max-width: 414px) {
#s_seasonal .container_s4{
  flex-wrap:wrap;
  justify-content:center;	
  margin-bottom: 15px;
}
	
#s_seasonal .container_s4 .item_btn{
	width:100%;
	margin-bottom: 20px;
}
	
	
	
}
/*-------------------------------------------
会員登録
-------------------------------------------*/
#m_form {
  padding-top:65px;
  font-family: '游ゴシック Medium', sans-serif;
  
}

.form_midashi {
	padding: 0.5em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #fffaf4;/*背景色*/
	border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
	font-size:110%;
	font-weight: bold;
	margin-bottom:15px;
}

.mf_sectxt{
	font-weight: bold;
	margin-bottom: 5px;
}

.mf_sectxt img{
	position: relative;
	top: 3px;
	padding-right: 2px;
}

/* ------ 会員登録にあたって ------ */
#m_form table.beige{
	border-collapse: collapse; /* 枠線の表示方法 */ 
	border: 1px #ccc solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
	width:100%;
	margin-top: 5px;
}
	
#m_form table.beige td{
	padding:8px 10px;
	border:1px #ccc solid;
}
	
#m_form table.beige td.be{
	background:#FDF3EE;
}

#m_form table.beige p{
	line-height:160%;
}

#error {
	margin-bottom: 15px;
	width: 100%;
	font-weight: bold;
	color: #F00;
	background: #FEE;
	border: 1px solid #F00;
	padding: 1.5%;
}


/* ---------------------------------- */
/* ------ 入力フォーム ------ */
/* ---------------------------------- */
table.formtbl{
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 15px;
}

table.formtbl img{
	position: relative;
	top: 4px;
	padding-left: 2px;
}


table.formtbl th, table.formtbl td{
	border: 1px solid #CCCCCC;
	padding: 1% 1%;
	vertical-align: middle;
}

table.formtbl th{
	background: #d7fadc;
	text-align: center;
	width: 18%;
}

table.formtbl ul li{
	list-style: disc;
	margin-left: 3%;
}


table.formtbl .privacy{
	overflow: auto;
	height: 200px;
	font-size: 90%;
	padding: 2%;
	border: 1px solid #AAAAAA;
	width:95%;
}

table.formtbl .privacy .p_cmttitle{
	font-size: 110%;
	font-weight: bold;
	margin-bottom:15px;
}

table.formtbl .privacy .p_cmt{
	font-size: 105%;
	font-weight: bold;
	margin-top: 10px;
}

table.formtbl div.agree {
	background: #FFF5EC;
	text-align: center;
	margin-top: 5px;
	padding: 5px 0;
	border: 1px dotted #F30;
	width:99%;
}


/* ----------------------------- */
/* ------ ステップバー ------ */
/* ----------------------------- */
@media only screen and (min-width: 768px) {
.stepBar {
  position: relative;
  list-style: none;
  margin: 15px 0;
  padding: 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
  *zoom: 1;
}
.stepBar .step {
  position: relative;
  float: left;
  display: inline-block;
  line-height: 40px;
  padding: 0 40px 0 20px;
  background-color: #edeff0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.stepBar .step:before, .stepBar .step:after {
  position: absolute;
  left: -15px;
  display: block;
  content: '';
  background-color: #edeff0;
  border-left: 4px solid #FFF;
  width: 20px;
  height: 20px;
}
.stepBar .step:after {
  top: 0;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.stepBar .step:before {
  bottom: 0;
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
.stepBar .step:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.stepBar .step:first-child:before, .stepBar .step:first-child:after {
  content: none;
}
.stepBar .step:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.stepBar .step.current {
  color: #FFF;
  background-color: #36ac48;
}
.stepBar .step.current:before, .stepBar .step.current:after {
  background-color: #36ac48;
}
.stepBar.step2 .step {
  width: 50%;
}
.stepBar.step3 .step {
  width: 33.333%;
}
.stepBar.step4 .step {
  width: 25%;
}
.stepBar.step5 .step {
  width: 20%;
}


}


/* -------------------------------------- */
/* ------ form要素 ------ */
/* -------------------------------------- */
/* Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.inputText30 {   
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 16px/100% Verdana, Tahoma, sans-serif;
    width: 30%;  
    background: #FFFFFF;
    height: 100%;
    vertical-align: middle;
}

.inputText25 {   
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 16px/100% Verdana, Tahoma, sans-serif;
    width: 25%;  
    background: #FFFFFF;
    height: 100%;
    vertical-align: middle;
} 

.inputText85 {   
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    width: 85%;  
    background: #FFFFFF;  
}

.inputText95 {   
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    width: 95%;  
    background: #FFFFFF;  
}

.inputText100 {   
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    width: 100%;  
    background: #FFFFFF;  
}


.formtbl select {   
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 100%; 
}  

.tarea95 {   
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 95%; 
}  

.tarea100 {   
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 100%; 
}  

#combobox15 {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 15%; 
}  

#combobox20 {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 20%; 
}  

#combobox30 {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 30%; 
}  

#combobox40 {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 40%; 
}  

#combobox40nc {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 40%; 
}  

#combobox50 {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 50%; 
} 

#combobox60 {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 60%; 
}  

#combobox60nc {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 60%; 
}  

#combobox70 {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 70%; 
}

#combobox80 {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 80%; 
}  

#combobox80nc {
    padding: 6px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    background: #FFFFFF;
    width: 80%; 
}  


.inputText30:focus, .inputText25:focus, .inputText85:focus, .inputText95:focus {
	background: #FEFCD8;
}

.formtbl input, .formtbl textarea, .formtbl select {
    font-size: 16px;
}


/* ------ ラジオボタン ------ */
.formtbl input[type=radio] {
    display: inline-block;
    margin-right: 6px;
}

.formtbl input[type=radio] + label {
    position: relative;
      
    display: inline-block;
    margin-right: 12px;
      
    cursor: pointer;
}
  
.formtbl input[type=radio] {
	display: none;
    margin: 0;
}

.formtbl input[type=radio] + label {
	padding: 0 0 0 24px;
}

.formtbl input[type=radio] + label::before {
	content: "";
    position: absolute;
    top: 50%;
    left: 0;
          
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
          
    background: #FFF;
}

.formtbl input[type=radio] + label::before {
	border: 2px solid #ccc;
    border-radius: 30px;
}

.formtbl input[type=radio]:checked + label::after {
	content: "";
    position: absolute;
    top: 50%;
          
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
}

.formtbl input[type=radio]:checked + label::after {
	left: 5px;
          
    width: 8px;
    height: 8px;
    margin-top: -4px;
          
    background: #EC7506;
    border-radius: 8px;
}


/* ------------------ チェックボックス = START ------------------ */
.formtbl input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}

.formtbl input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    margin-right: 12px;
    line-height: 25px;
    cursor: pointer;
}

@media (min-width: 1px) {
    .formtbl input[type=checkbox] {
        display: none;
        margin: 0;
    }

    .formtbl input[type=checkbox] + label {
        padding: 0 0 0 24px;
    }

   .formtbl input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 18px;
        height: 18px;
        margin-top: -9px;
         
        background: #FFF;
    }

    .formtbl input[type=checkbox] + label::before {
        border: 2px solid #CCC;
    }

    .formtbl input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }

    .formtbl input[type=checkbox]:checked + label::after {
        left: 3px;
         
        width: 16px;
        height: 8px;
        margin-top: -8px;
         
        border-left: 3px solid #EC7506;
        border-bottom: 3px solid #EC7506;
         
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}




/* ====================================== */
/* --------------- ボタン --------------- */
/* ====================================== */
.button_box{
	padding: 10px 0 55px 0;
	
}

.button_left{
	width:47%;
	float:left;
}

.button_right{
	width:47%;
	float:right;
}

.cnt_button_left{
	width:20%;
	float:left;
}

.cnt_button_center{
	width:59%;
	float:left;
}

.cnt_button_right{
	width:20%;
	float:right;
}


.css3Nextbutton {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	font-size: 105%;
	font-weight: bold;
	color: #FFFFFF;
	padding: 8px 16px;
	width:100%;

	background: rgb(234,160,2); /* Old browsers */

	background: -ms-linear-gradient(top,  rgba(234,160,2,1) 0%,rgba(254,166,84,1) 50%,rgba(253,140,34,1) 51%,rgba(234,114,2,1) 100%); /* IE10+ */

	background: -moz-linear-gradient(
		top,
		#eaa002 0%,
		#fea654 50%,
		#fd8c22 50%,
		#ea7202);

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#eaa002),
		color-stop(0.50, #fea654),
		color-stop(0.50, #fd8c22),
		to(#ea7202));

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaa002', endColorstr='#ea7202',GradientType=0 ); /* IE6-9 */
	
	border: 1px solid #A75001;
	-moz-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow:
		0px -1px 0px rgba(255,255,255,0.2),
		0px 1px 0px rgba(255,255,255,0.1);
}

.css3Returnbutton {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	font-size: 105%;
	font-weight: bold;
	color: #666666;
	padding: 8px 16px;
	width:100%;

	background: rgb(255,255,255); /* Old browsers */

	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(199,217,95,1) 50%,rgba(173,209,54,1) 51%,rgba(184,199,84,1) 100%); /* IE10+ */

	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#c7d95f 50%,
		#add136 50%,
		#b8c754);

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffffff),
		color-stop(0.50, #c7d95f),
		color-stop(0.50, #add136),
		to(#b8c754));

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b8c754',GradientType=0 ); /* IE6-9 */
	
	border: 1px solid #6d8000;
	-moz-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow:
		0px -1px 0px rgba(255,255,255,0.2),
		0px 1px 0px rgba(255,255,255,0.1);
}


.css3Joybutton {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	font-size: 100%;
	font-weight: bold;
	color: #FFFFFF;
	padding: 4px 8px;
	width:100%;

	background: rgb(234,160,2); /* Old browsers */

	background: -ms-linear-gradient(top,  rgba(234,160,2,1) 0%,rgba(254,166,84,1) 50%,rgba(253,140,34,1) 51%,rgba(234,114,2,1) 100%); /* IE10+ */

	background: -moz-linear-gradient(
		top,
		#eaa002 0%,
		#fea654 50%,
		#fd8c22 50%,
		#ea7202);

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#eaa002),
		color-stop(0.50, #fea654),
		color-stop(0.50, #fd8c22),
		to(#ea7202));

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaa002', endColorstr='#ea7202',GradientType=0 ); /* IE6-9 */
	
	border: 1px solid #A75001;
	-moz-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow:
		0px -1px 0px rgba(255,255,255,0.2),
		0px 1px 0px rgba(255,255,255,0.1);
}


.css3estkeisanbutton {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding: 8px 10px;
	
	background: rgb(163,163,163); /* Old browsers */

	background: -ms-linear-gradient(top,  rgba(163,163,163,1) 0%,rgba(59,59,59,1) 50%,rgba(36,36,36,1) 51%,rgba(0,0,0,1) 100%); /* IE10+ */
	
	background: -moz-linear-gradient(
		top,
		#a3a3a3 0%,
		#3b3b3b 50%,
		#242424 50%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#a3a3a3),
		color-stop(0.50, #3b3b3b),
		color-stop(0.50, #242424),
		to(#000000));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #453a45;
	-moz-box-shadow:
		0px 1px 3px rgba(099,092,099,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	-webkit-box-shadow:
		0px 1px 3px rgba(099,092,099,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	box-shadow:
		0px 1px 3px rgba(099,092,099,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow:
		0px -1px 0px rgba(000,000,000,1),
		0px 1px 0px rgba(255,255,255,0.2);
	margin-top: -8px;
}






/*IE9hack*/
:root .css3Nextbutton {border-radius:0px \0/IE9; }  
:root .css3Returnbutton {border-radius:0px \0/IE9; }  
:root .css3Joybutton {border-radius:0px \0/IE9; }  
:root .css3estkeisanbutton {border-radius:0px \0/IE9; }  

.css3Nextbutton:hover {
	filter:alpha(opacity="90");
	-moz-opacity:0.8;
	opacity:0.8;
	cursor:pointer;
}

.css3Returnbutton:hover {
	filter:alpha(opacity="90");
	-moz-opacity:0.8;
	opacity:0.8;
	cursor:pointer;
}

.css3Joybutton:hover {
	filter:alpha(opacity="90");
	-moz-opacity:0.8;
	opacity:0.8;
	cursor:pointer;
}

.css3estkeisanbutton:hover {
	filter:alpha(opacity="90");
	-moz-opacity:0.8;
	opacity:0.8;
	cursor:pointer;
}




/*-----------------------------------------------------	*/
/*	for 767px			*/
/*-----------------------------------------------------	*/
@media screen and (max-width: 767px) {

/* ---------------------------------- */
/* ------ 入力フォーム ------ */
/* ---------------------------------- */
/* ------ form_TABLE（スマホ時に縦に並べ替える）------ */
table.formtbl{
    border-top: 1px solid #CCCCCC;
}

table.formtbl td {
    display: block;
    padding: 2% 1%;
}

table.formtbl th {
    display: block;
    border-top: none;
    border-bottom: none;
	width: 100%;
	-moz-box-sizing: border-box;
    box-sizing: border-box;	
}

table.formtbl ul li{
	margin-left: 4.5%;
}

table.formtbl .privacy{
	margin: 0 auto 1% auto;
}

table.formtbl div.agree {
	margin: 0 auto;
}

table.formtbl .nonpctdc {
	text-align:center;
}


/* -------------------------------------- */
/* ------ form要素 ------ */
/* -------------------------------------- */
.inputText30 {   
    padding: 1.5%;  
} 

.inputText25 {   
    padding: 1.5%;  
} 

.inputText85, .inputText95 {   
    padding: 1.5%;  
}

.formtbl select {   
    padding: 1.5%;
}  

.tarea95, .tarea100 {   
    padding: 1.5%;  
}  



/* ----------------------------- */
/* ------ ステップバー ------ */
/* ----------------------------- */
.stepBar {
  width: 97%;
  max-width: 768px;
  padding: 0.5% 1.5%;
  margin: 1em auto;
  background-color: #edeff0;
  border-radius: .25em;
}
.stepBar::after{
  clear: both;
  content: "";
  display: table;
}
.stepBar li {
  display: inline-block;
  float: left;
  margin: 0.5em 0;
}
.stepBar li::after{
  /* this is the separator between items */
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #2c3f4c;
}
.stepBar li:last-of-type::after{
  /* hide separator after the last item */
  display: none;
}
.stepBar li > *{
  /* single step */
  display: inline-block;
  color: #2c3f4c;
}
.stepBar li.current {
  /* selected step */
  color: #36ac48;
}
}