/* リセットCSS */


* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

::before , ::after {
	box-sizing: inherit;
}

button {
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	vertical-align: middle;
	text-align: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

*:focus {
outline: none;
/*クロームの青い線*/
}


/* リセットCSS */


html,
input,
textarea,
select,
button {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
}

/* IE10以降 游ゴシック文字ずれ対応 */
html.ie10,
.ie10 input,
.ie10 textarea,
.ie10 select,
.ie10 button,
html.ie11,
.ie11 input,
.ie11 textarea,
.ie11 select,
.ie11 button {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight: normal;
}


/**************** ブラウザスクロールバー問題 ****************/
@-ms-viewport {
	width: auto;
}

html {
	-ms-overflow-style: scrollbar;
}
/**************** ブラウザスクロールバー問題 ****************/

/**************** 以下、ハンバーガーボタンのスタイリング ****************/
.m-btn {
	/* ボタンの配置位置  */
	position: fixed;
	top: 20px;
	right: 20px;
	/* 最前面に */
	z-index: 98;
	/* ボタンの大きさ  */
	width: 35px;
	height: 35px;

	
}

/***** 真ん中のバーガー線 *****/
.m-btn-line {
	display: block;
	/* バーガー線の位置基準として設定 */
	position: relative;
	/* 線の長さと高さ */
	width: 100%;
	height: 2px;
	/* バーガー線の色 */
	background-color: #ffffff;
	transition: .2s;
}

/***** 上下のバーガー線 *****/
.m-btn-line::before , .m-btn-line::after {
	content: "";
	/* 基準線と同じ大きさと色 */
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	transition: .5s;
}

.m-btn-line::before {
	/* 上の線の位置 */
	transform: translateY(-16px);
}

.m-btn-line::after {
	/* 下の線の位置 */
	transform: translateY(16px);
}

/***** メニューオープン時 *****/
.m-btn-line.open {
	/* 真ん中の線を透明に */
	background-color: transparent;
}

.m-btn-line.open::before , .m-btn-line.open::after {
	content: "";
	background-color: #ffffff;
	transition: .2s;
}

.m-btn-line.open::before {
	/* 上の線を傾ける */
	transform: rotate(45deg);
}

.m-btn-line.open::after {
	/* 上の線を傾ける */
	transform: rotate(-45deg);
}

/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

/**************** 以下、メニューのスタイリング ****************/
.menu {
	/* メニューを縦に */
	display: flex;
	flex-direction: column;
	position: fixed;
	/* メニューの位置マイナス指定で画面外に */
	right: -100%;
	width: 100%;
	height:99vh;
	background-color: rgba(179, 179, 169, .8);
	color: #efefef;
	transition: .3s;
	z-index:90;
}

.menu-list {
	/* メニューテキスト位置をリスト内中心に */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	
}

.menu-list:hover {
	background-color: rgba(255, 255, 255, .5);
	color: #333;
	cursor: pointer;
	transition: .3s;
	
}

/***** メニューオープン時位置0にして画面内に *****/
.menu.open {
	position:fixed;/* 重要コンテンツの長さに追従しなくなる */
	right: 0;
	overflow: auto;/* 重要 */
    -webkit-overflow-scrolling: touch;
	right: 0;
}

/* 600px以上はハンバーガーボタン非表示、ヘッダー固定 */
@media screen and (min-width: 600px) {
	.m-btn {
		display: none;
	}

	.menu {
		/* メニューを横に */
		display: flex;
		flex-direction: row;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 45px;
	}
}
/**************** ここまで、メニューのスタイリング ****************/
/**************** delayANIMATION ****************/

/* css animation (prefixes are cut) */
.appear {
	transform-origin:center top;
	animation:show 1s both;
}
span.appear {display:inline-block;}
.d1 {animation-delay:.7s;}
.d2 {animation-delay:1.4s;}
.d3 {animation-delay:2.1s;}
.d4 {animation-delay:2.8s;}
.d6 {animation-delay:3.5s;}
.d8 {animation-delay:4.2s;}
.d10 {animation-delay:4.9s;}
.d12 {animation-delay:5.6s;}

@keyframes show {
	0% {
		transform:translate(0,2em);
		opacity:0;
/****************text-shadow:0 0 0 #fffff;****************/
	}
	50% {
/****************text-shadow:0 0 0.5em #fffff;****************/
	}
	100% {
		transform:translate(0,0);
		opacity:1;
/****************text-shadow:none;****************/
	}
}
/**************** delayANIMATION ****************/

/**************** content ****************/
.bbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 50vw;
  height:auto;
  text-align:center;
}

.main{
	position:relative;
	left: 0;
    top: 0;
	width: 100%;
	
	padding-bottom::60px;
	box-sizing:border-box;
	
	
	
	
	
	
}

.container{
	position: relative;
	top:100px;
	max-width:767px;
	overflow:hidden;
	z-index:2;
	
	

}

.content-inner2{
	position: relative;
	width:100%;
	height:auto;
	text-align:center;
	
	
}

/**************** footerかぶりダミー ****************/
.content-inner1{
	position: relative;
	width:100%;
	height:50px;
	text-align:center;
	
	
}
/**************** footerかぶりダミー ****************/



	
html{
	
	font-size: 16px;
	font-family: 'Source Sans Pro', sans-serif;
}
	
@media(max-width: 980px){
	html{
		font-size: 17px;
	}
}


html,body{
	margin:0;
	padding:0;
    width: 100%;]
	
 
}

body{
	
    align-items: center;
	background-color: #E5E4D7;
	
}



}

/**************** Table下線 ****************/
table{
  width: 100%;
  height:auto;
  border-spacing: 0;
}

table th{
  border-bottom: solid 2px #fff;
  
}

table td{
  border-bottom: solid 2px #fff;
 
  
}


/**************** Table下線 ****************/


/**************** TOP用以下、背景画像 ****************/
.bga {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-image: url('../PIC/sea02.jpg');
	background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}


/**************** TOP用以上、背景画像 ****************/
.bg {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-image: url('../PIC/REpeople-2588192_1920.jpg');
	background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
/**************** TOP用以上、背景画像 ****************/	
.bgsw {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
/**************** TOP用以上、背景画像 ****************/	
.bg2{position: relative;
	z-index: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
			
}
 .bg2 .bgimg{position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  
 }
 
 /* --- 段差で背景画像のアニメーションを実行 ----------------- */
.bgimg .src1{
  background-image : url('../PIC/ordeve_2.jpg');   /* 背景の画像を指定 */
}
.bgimg .src2 {
  background-image : url('../PIC/tool_4.jpg');   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.bgimg .src3 {
  background-image : url('../PIC/coziy_window1.jpg');   /* 背景の画像を指定 */
  animation-delay  : 10s;
}




/**************** TOP用以上、背景画像 ****************/	



/**************** TOP用以上、背景画像 ****************/	
.bgCarousel {
  height: auto;
  width: 100vw;
}

.bgCarousel__item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.bgCarousel__item:nth-child(1) {
  background-image: url('../PIC/coziy_window1.jpg');
}

.bgCarousel__item:nth-child(2) {
  background-image: url'../../PIC/tool_4.jpg');
}

.bgCarousel__item:nth-child(3) {
  background-image: url('../PIC/ordeve_2.jpg');
}

/**************** TOP用以上、背景画像 ****************/	


/****************  a　タグ用 ****************/	
a.noline,a.noline:Link{
  text-decoration:none;
  color:#ffffff;
  
}

a.noline:hover,a.noline:active{
	color:#717071;
}

a.svg:link{
	outline:none;
	-moz-outline-style: none;
}


	
a.svg:hover {
  transition: .4s;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  /*画像を70%の不透明度に
  もし50%にしたいときは
  上から50、0.5、0.5にします*/
}
/****************  a　タグ用 ****************/	
/****************  menupage color ****************/	
.bg-be{
	background-color:#C4BB9C;
}

.bg-li{
	background-color:#BFDDF5;
}

.bg-ch{
	background-color:#C0D22B;
}

.bg-pi{
	background-color:#E6B9B5;
}

.bg-re{
	background-color:#C83B2D;
}

.bg-ka{
	background-color:#BE9533;
}

.bg-dy{
	background-color:#F1CE33;
}

.bg-sk{
	background-color:#099FE6;
}

.bg-dp{
	background-color:#CD7175;
}

.bg-dg{
	background-color:#6DA23B;
}

.bg-ye{
	background-color:#F6ED36;
}

.bg-or{
	background-color:#E7B53E;
}

.bg-lg{
	background-color:#B8C932;
}

.bg-yel{
	background-color:#F1CE33;
}

.bg-bg{
	background-color:#67B6CF;
}

.bg-bb{
	background-color:#0068B3;
}

.bg-rp{
	background-color:#8C135C;
}

.bg-pu{
	background-color:#541F82;
}

.bg-bbb{
	background-color:#232E84;
}

.bg-rr{
	background-color:#c83B2D;
}

.bg-db{
	background-color:#302300;
}


.bg-lb{
	background-color:#A5814C;
}






/****************  menupage color ****************/	

.btn-r span {
	border: 1px solid #fff;
	border-radius: 0.3em; 
    color: #F7CBCD;
	padding: 5px 0;
	
}









.menu_1 {
	border: 2px solid #E6B9B5;
	border-radius: 0.3em;
	background-color:#B3B3A9; 
    color: #E5E4D7;
	padding: 10px 10px;
	margin:10px auto;

}






#footertop{
	position: fixed; 
	bottom: 0;
	width:100%;
    color: #E5E4D7;
    padding: 5px 10px;
    font-size: 11px;
    text-align: center;
    background: transparent;
	z-index: 999;
}



#footer{
	position: fixed; 
	bottom: 0;
	width:100%;
    color: #E5E4D7;
    padding: 5px 10px;
    font-size: 11px;
    text-align: center;
    background: #B3B3A9;
	z-index: 999;
	
}

@media(max-width: 767px){
        
    #section02,#section04,#section06{
        padding: 40px 0;
    }
}
/****************  menupage color ****************/	

.menu-container .menu-flex {
	border-bottom:2px solid #fff
}
.menu-container .menu-etc-text {
	color:#888
}
.menu-container .menu-time {
	color:#888
}

.menu-container .menu-price {
	color:#888
}
.menu-container .menu-other-text {
	color:#888;
	background-color:#f5f5f5
}


.menu-container {
	max-width:99%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px
}

.menu-container:hover .menu-container:active{

	color:#717071;
	
}
.menu-container .menu-flex {
	padding-top:5px;
	padding-bottom:5px;
	border-bottom:2px solid #fff
}
@media (min-width:768px) {
.menu-container .menu-flex {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	width:100%;
	margin-right:1em;
	padding-top:5px;
	padding-bottom:5px
}
}
@media (min-width:768px) {
.menu-container .menu-left {
	flex:1 1 0%
}
}
.menu-container .menu-left span {
	display:block
}
.menu-container .menu-name {
	font-size:18px;
	font-weight:bold;
}
.menu-container .menu-name i {
	margin-right:6px
}
@media (min-width:768px) {
.menu-container .menu-name {
	font-size:18px
}
}
.menu-container .menu-etc-text {
	padding-top:5px;
	font-weight:normal;
	font-size:16px;
	color:#888
}
.menu-container .menu-right {
	display:flex;
	justify-content:flex-start;
	align-items:center
}
@media (max-width:767px) {
.menu-container .menu-right {
	margin-top:12px
}
}
@media (min-width:768px) {
.menu-container .menu-right {
	flex-direction:column;
	align-items:flex-end;
	margin-left:auto;
	padding-left:20px
}
}
@media (min-width:769px) and (max-width:991px) {
.menu-container .menu-right {
	flex-direction:column;
	align-items:flex-end
}
}
@media (min-width:992px) {
.menu-container .menu-right {
	width:200px
}
}
.menu-container .menu-time {
	display:flex;
	flex-direction:column;
	font-size:16px;
	font-weight:normal;
	color:#888
}
@media (max-width:767px) {
.menu-container .menu-time {
	margin-right:1em;
	text-align:center
}
}
@media (min-width:768px) {
.menu-container .menu-time {
	flex-direction:row;
	align-items:center;
	margin-bottom:10px
}
}
@media (min-width:769px) and (max-width:991px) {
.menu-container .menu-time {
	margin-bottom:16px
}
}
.menu-container .menu-time span {
	line-height:1
}
@media (max-width:767px) {
.menu-container .menu-time-text {
	font-weight:normal;
	margin-bottom:6px
}
}

@media (min-width:768px) {
.menu-container .menu-time-num {
	margin-left:12px
}
}
.menu-container .menu-price {
	margin-left:auto;
	font-size:18px;
	color:#888
}
@media (min-width:768px) {
.menu-container .menu-price {
	font-size:18px
}
}

/****************  menupage color ****************/