@charset "utf-8"; 
/* http://meyerweb.com/eric/tools/css/reset/  
v2.0 | 20110126 
License: none (public domain) 
*/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
		margin: 0; 
		padding: 0; 
		border: 0;  
		font-size: 100%; 
} 

body {
		background: #afeeee;
}

#container {
		width: 70%;
		margin: 0 auto;
		background: white;
		border-left: solid 1px #000;
		border-right: solid 1px #000;
}

.header_1 {
		width: 100%;
		height: 200px;
}

.title {
		font-size: 3rem;
		padding-top: 40px;
		padding-left: 100px;
}

.title a {
		text-decoration: none;
		color: #7fff00;
}

.menu {
		width: 100%;
		height: 30px;
		border-top: solid 1px #95c9c9;
		border-bottom: solid 1px #95c9c9;
		margin-bottom: 7px;
		background: #afeeee;
}

.menu li {
		width: 16%;
		height: 30px;
		line-height: 30px;
		float: left;
		text-align: center;
		list-style: none;
		border-right: solid 1px #95c9c9;
		border-top: solid 1px #95c9c9;
		border-bottom: solid 1px #95c9c9;
}

.menu li a {
		text-decoration: none;
		line-height: 30px;
}

.Wrap {
		width: 100%;
		display: flex;
}

.mainWrap {
		width: 70%;
		//border: solid 1px #000;
}

.sideWrap {
		width: calc(30% - 7px);
		margin-left: 7px;
		//border-left: solid 1px #000;
}

p {
		width: 100%;
		text-justify: inter-ideograph; 
}

.text_box {
		width: calc(100% - 7px);
		margin-left: 7px;
		margin-bottom: 40px;
}

.hello_photo {
		width: 150px;
		height: 150px;
		margin: 20px auto; 40px;
}

.hello {
		width: 80%;
		margin: 0 auto 40px;
		text-justify: inter-ideograph; 
}

.midasi {
		width: 100%;
		height: 34px;
		background: #afeeee;
		border-top: solid 1px #95c9c9;
		border-bottom: solid 1px #95c9c9;
		border-sizing: border-box;
}

/*====Hタグ====*/
h1, h2, h3 {
		padding-left: 14px;
		font-size: 16px;
		line-height: 34px;
		font-weight: normal;
}

/*====photo-text====*/
.flex {
		display: flex;
		margin-bottom :30px;
}

.photo_l {
		width: 170px;
		height: 170px;
		margin: 10px 7px 0px 7px;
}

.text_r {
		width: calc(100% - 170px - 7px - 7px);
		text-justify: inter-ideograph; 
		//margin-left: 27px;
		margin-top: 5px;
}

.flex_21 {
		display: flex;
		margin-bottom:7px;
}

.photo_l21 {
		width: 170px;
		height: 170px;
		margin: 7px 0px 7px 7px;
}

.text_r21 {
		width: calc(100% - 170px - 7px - 7px);
		text-justify: inter-ideograph;
		margin-top: 2px;
		margin-left: 7px;
		margin-bottom: 7px;
}

.flex_22 {
		display: flex;
		margin-bottom :30px;
}

.photo_l22 {
		width: 170px;
		height: 170px;
		margin: 0px 0px 0px 7px;
}

.text_r22 {
		width: calc(100% - 170px - 7px - 7px);
		text-justify: inter-ideograph; 
		margin: -7px 0px 0px 7px;
}

.side_box {
		margin-top: 5px;
		position: sticky;
		top: 0px;
}

.side_menu {
		width: calc(100% - 7px);
		height: 35px;
		text-align: center;
		line-height: 35px;
		border: solid 1px #000;
		box-sizing: border-box;
		margin: 0px 7px 7px 0px;
		background: white;
}

.side_menu_1 {
		width: calc(100% - 7px);
		height: 100px;
		text-align: center;
		line-height: 60px;
		border: solid 1px #000;
		box-sizing: border-box;
		margin: 0px 7px 7px 0px;
		background: white;
		padding-top: 20px;
}

.flex3 {
		display: flex;
		margin-bottom: 30px;
}

.box_3 {
		width: calc(33.33% - 7px);
		margin-top: 7px;
		margin-left: 7px;
}

/*====footer====*/
#footer {
		width: 100%;
		height: 150px;
		margin-top: 5px;
		background: #afeeee;
		padding-top: 10px;
}

.footer_Wrap {
		width: 100%;
		display: flex;
}

.footer_Wrap .rogo {
		width: 25%;
}

.footer_Wrap .rogo p {
		text-align: center;
		padding-top: 50px;
}

.footer1 {
		width: 25%;
}

.address {
		width: 25%;
}

.address p {
		margin-top: 35px;
		padding-left: 10px;
		line-height: 1.3rem;
		font-size: 1rem;
		text-align: left;
}

.reserved {
		width: 100%;
		height: 25px;
		padding-top: 35px;
}

.reserved p {
		text-align: center;
}

.scroll_up {
  transition: 1.0s ease-in-out;
  transform: translateY(70px);
  opacity: 0;
}

.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

.timing02 {transition-delay: 0.8s;}

.timing03 {transition-delay: 1.6s;}

/*======▼mobile======*/  
 @media screen and (max-width: 764px) {
	#container {
		width: calc(100% - 7px);
		//margin-right: 7px;
		background: white;
	}

	.header_1 {
		width: 100%;
		height: 150px;
}

	.title {
		font-size: 2rem;
		padding-top: 40px;
		padding-left: 30px;
	}

	.title a {
		text-decoration: none;
		color: #7fff00;
	}

	.menu {
		width: 100%;
		height: 30px;
		border-top: solid 1px #95c9c9;
		border-bottom: solid 1px #95c9c9;
		margin-bottom: 7px;
		background: #afeeee;
	}

	.menu li {
		width: 100%;
		height: 30px;
		line-height: 30px;
		float: none;
		text-align: center;
		list-style: none;
		//border-right: solid 1px #95c9c9;
		//border-top: solid 1px #95c9c9;
		//border-bottom: solid 1px #95c9c9;
		//border-collapse: collapse;
	}

	.menu li a {
		text-decoration: none;
		line-height: 30px;
	}

	.Wrap {
		width: 100%;
		//display: flex;
		flex-direction: column;
	}

	.mainWrap {
		width: 100%;
		//border: solid 1px #000;

	}

	.sideWrap {
		width: 100%;
		//margin-left: 7px;
		//border-left: solid 1px #000;
	}

	p {
		width: 100%;
		text-justify: inter-ideograph; 
	}

	.text_box {
		width: calc(100% - 7px);
		margin-left: 7px;
		margin-bottom: 40px;
	}

	.hello_photo {
		width: 150px;
		height: 150px;
		margin: 20px auto; 40px;
	}

	.hello {
		width: 80%;
		margin: 0 auto 40px;
		text-justify: inter-ideograph; 
	}

	.midasi {
		width: 100%;
		height: 34px;
		background: #afeeee;
		border-top: solid 1px #95c9c9;
		border-bottom: solid 1px #95c9c9;
		border-sizing: border-box;
	}

/*====Hタグ====*/
	h1, h2, h3 {
		padding-left: 14px;
		font-size: 16px;
		line-height: 34px;
		font-weight: normal;
	}

/*====photo-text====*/
	.flex {
		display: flex;
		margin-bottom :30px;
	}

	.photo_l {
		width: 170px;
		height: 170px;
		margin: 10px 10px 0px 7px;
	}

	.text_r {
		width: calc(100% - 170px - 10px - 7px);
		text-justify: inter-ideograph; 
		margin-left: 27px;
		margin-top: 5px;
	}

	.flex_21 {
		display: flex;
		margin-bottom:7px;
	}

	.photo_l21 {
		width: 170px;
		height: 170px;
		margin: 7px 0px 7px 7px;
	}

	.text_r21 {
		width: calc(100% - 170px - 7px - 7px);
		text-justify: inter-ideograph;
		margin-top: 2px;
		margin-left: 37px;
		margin-bottom: 7px;
	}

	.flex_22 {
		display: flex;
		margin-bottom :30px;
	}

	.photo_l22 {
		width: 170px;
		height: 170px;
		//margin-top: 7px;
	}

	.text_r22 {
		width: calc(100% - 170px - 7px - 7px);
		text-justify: inter-ideograph; 
		margin: -7px 7px 0px 7px;
	}

	.side_box {
		margin-top: 5px;
		position: relative;
		//top: 5px;
	}

	.side_menu {
		width: calc(100% - 7px);
		height: 35px;
		text-align: center;
		line-height: 35px;
		border: solid 1px #000;
		box-sizing: border-box;
		margin: 0px 7px 7px 0px;
		background: white;
	}

	.side_menu_1 {
		width: calc(100% - 7px);
		height: 100px;
		text-align: center;
		line-height: 60px;
		border: solid 1px #000;
		box-sizing: border-box;
		margin: 0px 7px 7px 0px;
		background: white;
	}

	.flex3 {
		display: flex;
		margin-bottom: 30px;
	}

	.box_3 {
		width: calc(33.33% - 7px);
		margin-top: 7px;
		margin-left: 7px;
	}

/*====footer====*/
	#footer {
		width: 100%;
		height: 50px;
		background: #afeeee;
	}

	.footer_Wrap {
		width: 100%;
		display: none;
	}
/*
	.footer_Wrap .rogo p {
		text-align: center;
		padding-top: 50px;
	}

	.footer1 {
		width: 50%;
	}

	.address {
		width: 50%;
	}

	.address p {
		margin-top: 35px;
		line-height: 1.3rem;
		font-size: 1rem;
		text-align: left;
	}
*/
	.reserved {
		width: 100%;
		height: 25px;
		padding-top: 25px;
	}

	.reserved p {
		text-align: center;
	}

}
/*======▼タブレット======*/  
@media screen and (min-width: 765px) and (max-width: 1024px) {


















}

/*======▼PC======*/  
@media screen and (min-width: 1025px) {


}

/*======▼画像の伸縮設定======*/  
p img { 
		width: 100%; 
		height: auto; 
} 


/*======▼背景画像======*/
/*
#content{ 
	background-size:cover;/*背景画像で全体を覆う
} */
/*OR*/
#content{ 
	background-size:100% auto;/*背景画像を横幅いっぱいに表示*/
} 

/*======▼コンテンツは共通で、横向き用デザイン、縦向きデザインの2種類用意する場合======*/ 
div.landport { 
   /* 共通の装飾 */
} 

@media screen and (orientation: landscape) { 
	div.landport { 
      /* 横向き専用の追加装飾 */
   } 
} 

@media screen and (orientation: portrait) { 
	div.landport { 
      /* 縦向き専用の追加装飾 */
   } 
}