@charset "UTF-8";

/*===============================================
●smart.css  画面の横幅が768pxまで
===============================================*/
@media only screen and (max-width: 768px) {	

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
header   {
	background-repeat: repeat-x;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
}
header h1  {
	color: #FFFFFF;
	font-size: 0.9em;
	font-weight: 200;
	letter-spacing: 5px;
	text-align: center;
	background-color: #506250;
	width: 100%;
	padding-top: 3px;
	padding-bottom: 3px;
}
header .icon {
	background-repeat: repeat;
	height: 42px;
	padding-top: 0px;
	padding-bottom: 0px;
	background-color: #000000;
	float: left;
	clear: both;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.icon li {
	display: inline;
	padding-left: 3px;
	padding-right: 3px;
}
header .headercontents {
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0px;
	max-width: 90%;
}
header h2 {
	padding-top: 10px;
	text-align: center;
}

header h2 img{
max-width: 60%;
height: auto;
width /***/:auto;　
}

header .right {
	text-align: center;
	clear: both;
}
header .subnav li {
	float: left;
	padding-top: 25px;
	padding-left: 5px;
	padding-right: 5px;
}

/* -----------------------------------------------

	ALL

//  Styling for layout sections like the header, nav, index body, and footer.

----------------------------------------------- */


#container {
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	max-width: 100%;
}
section {
width: 90%;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
clear: both;
text-align: left;
padding-top: 30px;
}
section h1 {
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0px 20px ;
}



section h2 {
letter-spacing: 3px;
background-image: url(../images/midashi_s_bg.jpg);
background-repeat: no-repeat;
color: #FFFFFF;
font-weight: bolder;
font-size: 1.5em;
text-align: left;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
max-width: 95%;
min-width: 95%;
background-position: right 0%;
}
section p {
	color: #717070;
	padding: 20px 0px;
}

section .main {
	padding: 50px 0px;
}

#contents .news {
	width: 100%;
	background-color: #F4F4F4;
}
.box {
	width: 94%;
	margin-left: auto;
	margin-right: auto;
	padding: 2%;
	margin-top: 2%;
	margin-bottom: 2%;
	clear: both;
	display: inline-block;
}
.box_waku {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5%;
	padding-right: 5%;
	padding-left: 5%;
	padding-bottom: 5%;
	margin-top: 2%;
	margin-bottom: 2%;
	clear: both;
	border: 1px solid #000000;
	line-height: 200%;
	display: inline-block;
	text-align: left;
}
.box_waku figure {
	text-align: center;
}
.light {
	font-size: 0.8em;
	color: #C2C2C2;
	word-spacing: 2em;
}
.alignleft {
	clear: both;
}
.alignright {
	clear: both;
}

.center {
	text-align: center;
}

.main h1, .main h2, .main h3 {
	padding-left: auto;
	padding-right: auto;
	text-align: center;
}

.PageNav  {
	margin-top: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
	clear: both;
	text-align: center;
}

.PageNav li  {
	margin: 2%;
}

/* 

// -------------------------------------------------------------------------

// NAVI

// -------------------------------------------------------------------------

*/

#nomal_menu {
	display: none;
}



/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

/* 

// -------------------------------------------------------------------------

//   PAGETOP

// -------------------------------------------------------------------------

*/

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
/* 

// -------------------------------------------------------------------------

//   FOOTER

// -------------------------------------------------------------------------

*/


footer {
	clear: both;
	width: 100%;
	background-image: url(../images/footer_bg.jpg);
	background-repeat: repeat;
}
.footerContents {
	max-width: 80%;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	padding-bottom: 20px;
	padding-left: 0px;
	text-align: center;
	background-repeat: repeat;
	padding-top: 10px;
	color: #FFFFFF;
}
.footerinfo {
	padding-top: 50px;
	padding-bottom: 50px;
}
.name {
	padding-bottom: 30px;
}

.footerNAV {
	margin-bottom: 20px;
	padding-right: 0px;
	text-align: center;
	background-image: url(../images/footernav_bg.jpg);
	background-repeat: repeat;
	padding-top: 20px;
	padding-bottom: 20px;
}
.footerNAV ul {
	clear: both;
}
.footerNAV li {
	font-size: 1em;
	color: #FFFFFF;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 1%;
	padding-bottom: 1%;
}
.footerContents a {
	color: #FFFFFF;
}
.copy  {
	color: #000000;
	clear: both;
	text-align: center;
	font-size: 0.8em;
}
.banner {
	width: 200px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: lowercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
	clear: both;
}
.banner a {
	color: #FFFFFF;
}
.banner:hover {
	background-color: #FEFEFE;
	color: #C4C4C4;
	cursor: pointer;
}
.footer_banner {
	background-color: #B3B3B3;
	padding-top: 30px;
	padding-bottom: 60PX;
	margin-bottom: 0px;
	background-image: url(../images/pattern.png);
	background-repeat: repeat;
	clear: both;
}
	
#otoiawase  {
	text-align: center;
	padding: 50px;
    align-items: center;
}

#otoiawase h3 {
	text-align: center;
	font-size: 1.5em;
	padding-bottom: 20px;
	letter-spacing: 10px;
}
#otoiawase .text {
	color: #000000;
	font-size: 1.2em;
	letter-spacing: 0.1em;
	text-align: center;
	font-weight: 600;
}
#otoiawase .tel a {
	text-align: center;
	font-size: 1.2em;
	color: #000000;
	font-weight: bolder;
}
#otoiawase .tel a:hover {
	color: #999999;
}
	
	
.hidden {
	display: none;
}

.main_bn li {
    text-align: center;
    display: inline-block;
    padding-top: 50px;
    width: 31%;
}


/* 

// -------------------------------------------------------------------------

//   INDEX

// -------------------------------------------------------------------------

*/
.main img {
max-width: 99%;
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}



.mapWaku {
	height: 90%;
}
.mapdetail {
width: 96%;
margin-left: auto;
margin-right: auto;
}
.mapdetail dt {
padding-bottom: 2%;
float: left;
width: 50%;
}
.mapdetail dd {
padding-bottom: 2%;
padding-left: 2%;
line-height: 130%;
text-align: left;
}
.googlemap {
	height: 400px;
	clear: both;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
#news  {
	clear: both;
}
.scroll  {
width: 90%;
height: 400px;
overflow-y: scroll;
overflow-x: hidden;
float: left;
}
#news dl  {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	padding: 10px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
#news dt {
	font-weight: 500;
	color: #AD102D;
	text-align: left;
}
#news dd {
	clear: both;
	text-align: left;
}

#news .date  {
	width: 6em;
	color: #818160;
	float: right;
	font-size: 0.9em;
	padding-bottom: 5px;
}

#shopinfo {
	clear: both;
	width: 95%;
	padding: 2%;
}

#picup  {
	clear: both;
	width: 90%;
	padding-right: 20px;
	overflow: scroll;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-bottom: 0px;
	text-align: left;
}

#picup dl  {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	padding-top: 20px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 20px;
	width: 90%;
}
#picup dt {
	font-size: 1.4em;
	font-weight: 500;
	color: #4D312A;
	border-left-width: medium;
	border-left-style: solid;
	border-left-color: #4D312A;
	padding-left: 10px;
}
#picup dd {
	clear: both;
	font-weight: 300;
}

#picup .date  {
	width: 6em;
	color: #7B6236;
	float: right;
	font-size: 0.9em;
	padding-bottom: 15px;
}
#picup .photo {
	float: left;
	padding-right: 20px;
}
/* 

// -------------------------------------------------------------------------

//   ABOUT

// -------------------------------------------------------------------------

*/

#about  {
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
}

#about p {
	text-align: left;
	padding: 0 10%;
	margin-left: auto;
	margin-right: auto;
}

#gaiyo  {
	margin-top: 50px;
}
#gaiyo h3 {
	margin-bottom: 50px;
}
.gaiyo {
	margin-top: 10%;
	margin-bottom: 5%;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
.gaiyo dl {
	border-bottom: 1px solid #C4C4C4;
	clear: left;
	margin-top: 2%;
	padding-bottom: 0px;
	height: 3em;
}
.gaiyo  dt {
	float: left;
}
.gaiyo dd {
	float: right;
}
.gaiyo .chu {
	font-size: 0.9em;
	color: #E62225;
}
.gaiyo h3 {
	text-transform: uppercase;
	letter-spacing: 3px;
}


/* 

// -------------------------------------------------------------------------

//   Class

// -------------------------------------------------------------------------

*/



.class_detail {
display: none;
}

.class_detail_small {
	border-bottom: 1px solid #000000;
	padding-bottom: 20px;
	margin-top: 10px;
}

.class_detail_small dt {
	float: left;
	width: 20%;
}
.class_detail_small dd {
float: left;
width: 80%;
text-align: left;
}

.Target {
	margin-top: 20px;
	font-size: 1em;
}


.belongings {
	margin-top: 20px;
	margin-bottom: 120px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border: 1px solid #cccccc;
	letter-spacing: 3px;
	text-align: left;
	margin-left: 20px;
	margin-right: 20px;
}


#class h3 {
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 50px;
}
#class {
	margin-top: 50px;
	margin-top: 10%;
	margin-bottom: 5%;
	margin-left: auto;
	margin-right: auto;
}
#class dl {
	border-bottom: 1px solid #C4C4C4;
	clear: left;
	margin-top: 2%;
	padding-bottom: 0px;
	height: 80px;
}
#class  dt {
	float: left;
}
#class dd {
}


/* 

// -------------------------------------------------------------------------

//   nyukai

// -------------------------------------------------------------------------

*/
.step  {
	text-align: left;
	color: #479C3D;
	font-size: 1em;
	letter-spacing: 3px;
	text-indent: 3%;
	width: 90%;
	border-bottom: 1px dashed #AAAAAA;
	padding-bottom: 5px;
	padding-top: 10px;
}
.exp {
	text-align: left;
	text-indent: 3%;
}

/* 

// -------------------------------------------------------------------------

//   MENU

// -------------------------------------------------------------------------

*/


/* 

// -------------------------------------------------------------------------

//   Contact

// -------------------------------------------------------------------------

*/

	.button01 {
  margin: 0 auto;
  padding: 1em 2em;
}
.button01 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 80%;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #DFC57E;
  transition: 0.3s;
}

.button01 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button01 a:hover {
  text-decoration: none;
  background-color: #FAECC5;
}


/* lisket-form */
 /* テーブルの横幅をピクセルで指定 */
.lisket-form-maker-form {
margin-left: auto;
margin-right: auto;
}
 /* テーブルの枠線のスタイルを指定 */
.lisket-form-maker-form td,
.lisket-form-maker-form th {
border: 1px solid #aaa;
} 
 /* 見出しセルの指定 */
.lisket-form-maker-form th {
background-color: #eee;
font-size: 0.8em;
width: 25%;
text-align: left;
} 
 /* テキストアラインを指定 */
.lisket-form-maker-form td {
text-align: left;
font-size: 0.8em;
} 
/* 例テキストの文字色を指定 */
.lisket-form-maker-form span.example  { 
color: #2C9AB7; 
}