/* index ---for forest English */

html{
height: 100%;
}

body{
text-align: center; 
height: 100%;
background-color: #725F43;
/*
background-color: f8f4d6; /*参考Tag index　配色パターン050　013も明るくていい*/
}

/*
* html div#container{
    height:100%;
}*/


/* 全体の設定 */

*{
margin: 0; 
padding: 0; 
font: normal normal normal 100% 2em; 
border: none; 
}

body{
font-style: normal; 

font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック  Medium", meiryo, sans-serif;
font-size: 90%; 
color: #000000; 
}



/* =====コンテナ===== */
#container {
position: relative; 
background-color: white; 
width: 70%;
margin: 0 auto;  /* センタリングの胆 */
text-align: left;
height: 100%; /* footer 下寄せ*/ 
min-height: 100%; /* footer 下寄せ*/
}

body > #container {
height: auto;
}

/* スマホ 後にされた命令に上書きされる*/
@media screen and ( max-width:750px )
{
	#container
	{
		width: 95%;
	}
}

/* =====ヘッダ===== */

#header {
/*display: table;*/
text-align: center;
  width: 100%;
  	color: white; 
	font-weight: bold; 
	font-size: 110%;
	height: 5.5em;
	background-color: #007548;
/*	background-color: #8fbc8f; */
}


/*.salon {
float: left;
font-size: 1.5em;
padding-left: 1em;
}
.salon img{
	height: 3em; 
	border: none; 
	vertical-align: middle;
	margin-right: 0.3em;
	margin-top: 0.3em;
}




p.since {
margin-top: -1.3em;
font-size: 0.6em;

}
*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; /*marginより先に書くのがコツ*/
	margin-left: auto;
	margin-right: auto;
	height: 5.5em;
	border: none; 
}
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 479px) {
.pc { display: none !important; }
.sp { display: block !important; 
	width: 100%;
	border: none; 
	 vertical-align: middle;
	 margin-top: 0.3em;
	 }
}


@media screen and ( max-width:479px )
{
	#header
	{
	text-align: left;
	width: 100%;
	height: auto;
	}
	.salon {
padding-left: 0.5em;
}

}





#header a{
color: white;
text-decoration: none;
}
/*
.follow,
.logo,
.call {
  display: table-cell;
  vertical-align: middle;
}


.follow{
  width: 30%;
}


.logo{
text-align: left;
padding-left: 2em;
}
.logo a:link {
	text-decoration: none; 
	color: white; 
}
.logo a:visited{
	color: white; 
}

.follow img{
	height: 4.5em; 
	border: none; 
float: right;
}


.call {
  width: 160px;
  text-align: left; 
  padding-left: 0.5em;
}
*/



.logo-2 img{
	height: 9em; 
	border: none; 
	vertical-align: top; 
	float: left; 
	margin-right: 1em; 
}





/* MENU*/
.menu-table {
	display: table; 
	table-layout: fixed; 
	text-align: center;
	width: 100%;
	background-color: white;
	height: 4em; 
	border-bottom: 1px solid #007548; 
	 /*font-size: 120%;*/
	 color: #2f4f4f;
}

.menu-table li {
 display: table-cell;
 vertical-align: middle; 
}

.menu-table li a {
  color: black;
  display: block;
  text-decoration: none;
  padding: 10px 0;
  font-weight: bold; 
}

.menu-table li a:hover {
color: #f89734;
}


/* =====中央部===== */
#center {
width: 100%; 
height: auto;
line-height: 1.5em; 
background-color: white; 
padding-top: 0em;
padding-bottom: 40px;
}




/* =====main img box===== */
#mainimg img{
	width: 100%;		/* 横幅 */
	height: auto
}



/* =====sub-box===== */
#boxwrap{
display: flex; /* Flex box--float 使わずに横並び*/
justify-content:center;　/*flex boxの水平位置指定*/

}

div.box{
background-color: white;
width: calc(25% - 10px);
margin: 5px; 
height: auto;
font-size: 1em;
padding: 0.5em 0.5em 1em;/*上　左右　下*/
border-radius: 5px; /*角を丸くする*/
text-align: center; 
border: 1.5px solid #91c846;
/*border: 1.5px solid #c5b66d or #d7f7ad;*/
font-weight: bold; 
/*background-color: #d7f7ad;*/

}

div.box img{
width: 100%;
margin-bottom: 1em; 
}

@media screen and ( max-width:479px )
{
	#boxwrap
	{
	display: inline;		/* 横並びを無効する */
		width: auto;
		background-color: none;
		padding: 0;
		margin: 0;

	}
	div.box{
	width: 92%;
	}
}



/*  sub-main */
.sub-main {
width: 100%; 
height: auto; 
}

div.greetings {
margin: 1em; 
padding: 1em; 
background-color: white;
font-size: 1em; 
}

@media screen and ( max-width:479px ){
	div.greetings{
	padding: 0.5em;
	}
}



#news{
float: right;
margin-top: 1.5em;
padding: 0.5em;
background-color:  #f89734;
color: white;
border-radius: 5px; /*角を丸くする*/
text-align: center; 
/*border: 1.5px solid #91c846;*/
/*border: 1.5px solid #c5b66d;*/
font-weight: bold; 
}

@media screen and ( max-width:479px ){
	#news{
	float: none;
	}

}


.prof img{
	height: 12em; 
	border: none; 
	vertical-align: top; 
	float: right; 
	margin-left: 1em; 
	}

@media screen and ( max-width:479px ){
	div.prof img {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
}

ul.career{
list-style-type: square;
margin-left: 2em;
}

@media screen and ( max-width:479px ){
 ul.career{
 margin-left: 1em;
 }
}

div.description{
	margin: 1em; 
	padding: 1em; 
}

div.description-c{
	margin: 1em; 
	padding: 1em 1em 1.5em 1em; 
	border: 1.5px double #f89734;
	
	/*border: 1.5px double #c5b66d;*/
}

@media screen and ( max-width:479px ){
div.description-c{
	margin: 1em 0.5em 1em 0.5em;
}
}

p.midashi{
width: 100%; 
text-align: center;
margin-bottom: 0.5em;
font-weight: bold;
}

p.course{
margin: -0.5em 2em 1em 0.5em;/*上右下左*/  	
padding: 0.5em; 
background-color:  #91c846; 
color: white; 
text-align: justify; /*両端揃え IE only*/
text-justify: auto; /*両端揃え IE only*/
letter-spacing: 0.3em; 
font-weight: bold;
font-size: 110%;
line-height: 1.5em;
}

@media screen and ( max-width:479px )
{
p.course{
width: 93%;
margin-left: 0.2em;
}
}




h2{
margin: 1em 0em;  	
padding: 0.5em; 
background-color:  #007548; 
color: white; 
text-align: justify; /*両端揃え IE only*/
text-justify: auto; /*両端揃え IE only*/
letter-spacing: 0.3em; 
line-height: 1.3em;
}

h3{
margin: 1em 0em;  	
padding: 0.5em; 
background-color:  #fbf0f1; 
width: 9em; 
letter-spacing: 0.1em; 
}




img.right{
float: right; 	
}



div.coubic img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

@media screen and ( max-width:479px )
{
	div.coubic img
	{
	width: 100%;
	}
}



/* ====site map===== */
#sitemap {
width: 100%; 
background-color: #007548;
/*background-color: #EFE3AF; */
color: white;
padding-top: 1em; 
}

/* =====sitemap-box===== */

div.boxwrap02{
background-color: none;
}


div.sitebox{
float: left;
width: auto;
margin: 0em; 
height: auto;
font-size: 1em;
padding: 0.5em 1em 1em;/*上　左右　下*/
/*border-radius: 5px; /*角を丸くする*/
/*border: 1.5px solid #c5b66d;*/

}


div.sitemap-menu{
width: auto;
clear: both;
text-align: center;
margin: 0em; 
height: auto;
font-size: 1em;
padding: 0.5em;

}

@media only screen and (max-width: 750px) {
div.sitebox{
clear: both;
}

div.sitemap-menu{
clear: both;
}

}



/* =====フッタ===== */
#footer {
bottom: 0; 
width: 100%; 
height: 40px; 
background-color: #007548; 
/*	background-color: #8fbc8f; */
color: white; 
text-align: center;
padding-top: 1em;
padding-bottom: 0.5em;
font-size: 90%; 
}

/* =====Link===== */

#menu a{
color: black; 
text-decoration: none; 
}


#menu a:hover{
color: #f89734; 
text-decoration: none; 
}

div.description-c a, div.greetings a {
color: black; 
text-decoration: underline; 
}

div.description-c a:hover,div.greetings a:hover {
color: #f89734; 
text-decoration: underline; 
}


#news a {
color: white;
text-decoration: none;
}


#boxwrap a {
color: black;
text-decoration: none;
}


#sitemap a {
color: white;  
text-decoration: underline; 
}



 

/*★★ navigation for Pagetop★★*/

.pagetop { display: none !important; }

@media only screen and (max-width: 750px) {
.pagetop { 
display: block !important; 
position: fixed; /*IE6だめ*/
width: 25px;
height: 35px;
bottom: 30px;
right: 16px;
font-size: 200%;
background-color: #725F43;
border-radius: 5px; /*角を丸くする*/
padding: 2px;
filter:alpha(opacity=70);/*透過IE*/
    -moz-opacity: 0.7;/*透過Mozilla*/
    opacity: 0.7;/*透過Safari Opera*/
    text-align: center;

}
.pagetop a{
display: block;
text-decoration: none;
color: white;
}

.pagetop:hover
{
opacity: 0.50; 
}
}


/*---
https://ics.media/entry/13117
http://degitekunote.com/blog/2014/12/05/css3-display-flex/
http://delaymania.com/201410/web/css-table-cell-03/
https://www.tam-tam.co.jp/tipsnote/html_css/post4559.html
https://saruwakakun.com/html-css/reference/nav-drawer
https://q-az.net/hamburger-menu-only-css/
---*/