@charset "UTF-8";



/*PC・タブレット・スマホ共通設定
---------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
* {
	margin: 0px;
}
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: center;
	-webkit-text-size-adjust: 100%;	
	font-size:16px;
}


/*申込みボタン設定
---------------------------------------------------------------------------*/
.btn_line{
z-index:999;
font-size:1.8em;
font-weight:500;
width:100%;
max-width:600px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.btn_line a{color:#fff;display:block;padding:10px;background:#00b900;border:2px solid #00b900;}
.btn_line a:hover{color:#00b900;display:block;padding:10px;background:#fff;border:2px solid #00b900;text-decoration:none;}


.btn_blue{
z-index:999;
font-size:1.8em;
font-weight:500;
width:100%;
max-width:600px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.btn_blue a{color:#fff;display:block;padding:10px;background:blue;border:2px solid blue;}
.btn_blue a:hover{color:blue;display:block;padding:10px;background:#fff;border:2px solid blue;text-decoration:none;}

.btn_orange{
z-index:999;
font-size:1.8em;
font-weight:500;
width:100%;
max-width:600px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.btn_orange a{color:#fff;display:block;padding:10px;background:orange;border:2px solid orange;}
.btn_orange a:hover{color:orange;display:block;padding:10px;background:#fff;border:2px solid orange;text-decoration:none;}

.btn_red{
z-index:999;
font-size:1.8em;
font-weight:500;
width:100%;
max-width:600px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.btn_red a{color:#fff;display:block;padding:10px;background:red;border:2px solid red;}
.btn_red a:hover{color:red;display:block;padding:10px;background:#fff;border:2px solid red;text-decoration:none;}

.btn_green{
z-index:999;
font-size:1.8em;
font-weight:500;
width:100%;
max-width:600px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.btn_green a{color:#fff;display:block;padding:10px;background:green;border:2px solid green;}
.btn_green a:hover{color:green;display:block;padding:10px;background:#fff;border:2px solid green;text-decoration:none;}

.btn_foot{
font-size:1.4em;
margin:15px auto;
width:100%;max-width:450px;
}
.btn_foot a:link{border:2px solid #fff;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
padding:18px 10px;
color:#fff;
 /*       border-radius:7px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;*/
}
.btn_foot a:hover{border:2px solid #fff;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
padding:18px 10px;
background:#fff;
color:#333;
  /*      border-radius:7px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;*/
}

.a:hover img,.a:active img{
filter:alpha(opacity= 70); /* IE */
-moz-opacity:0.70; /* Firefox CSS3以前 */
opacity:0.70; /* CSS3 */
}

.nobr{white-space: nowrap;}

#seminar{
width:100%;
max-width:650px;
margin:0 auto;
}
#seminar th{
width:20%;
padding:10px;
font-weight:bold;
border-bottom:2px solid #fff;
}
#seminar td{
text-align:left;
width:80%;
padding:10px;
border-bottom:2px solid #fff;
}

/*背景画像設定
---------------------------------------------------------------------------*/
.image1 {
  background: url('https://www.spi-test.online/kanri/wp-content/uploads/2017/10/head.jpg') no-repeat fixed 0% 0% transparent;
background-size: contain;
min-height:400px;
}

.image2 {
  background: url('https://www.spi-test.online/kanri/wp-content/uploads/2017/10/middle_bg.jpg') no-repeat fixed 0% 0% transparent;
background-size: contain;　
min-height:400px;
}
.image3 {
  background: url('https://www.spi-test.online/kanri/wp-content/uploads/2017/10/egao.jpg') no-repeat fixed 0% 0% transparent;
background-size: contain;
min-height:400px;
}

.image-base{
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#head_box{
height:auto;
margin:0 auto;
max-width:700px;
}
.foryou{
text-align:left;
max-width:800px;
margin:0 auto;
padding:15px 8%;
background:url('images/foryou_bg.png')no-repeat;background-size:cover;background-position:top center;}

.content_even {
	background:#fff; 
}
.content_even a:link {
	color: #000000;
	-webkit-transition: color 0.3s ease-in-out 0s;
	-moz-transition: color 0.3s ease-in-out 0s;
	-ms-transition: color 0.3s ease-in-out 0s;
	-o-transition: color 0.3s ease-in-out 0s;
	transition: color 0.3s ease-in-out 0s;
}
.content_even a:visited {
	color: #000000;
}
.content_even a:hover {
	color: #767676;
}
.content_odd {
	background:#1e73be; /* 背景画像 */
	color: #FFFFFF;
}
.content_odd a:link {
	color: #FFFFFF;
	-webkit-transition: color 0.3s ease-in-out 0s;
	-moz-transition: color 0.3s ease-in-out 0s;
	-ms-transition: color 0.3s ease-in-out 0s;
	-o-transition: color 0.3s ease-in-out 0s;
	transition: color 0.3s ease-in-out 0s;
}
.content_odd a:visited {
	color: #FFFFFF;
}
.content_odd a:hover {
	color: #A7A7A7;
}
.content_foot {
	background:#333333; /* 背景画像 */
	color: #FFFFFF;
	margin:0 auto;
}
.content_foot a:link {
	color: #FFFFFF;
	-webkit-transition: color 0.3s ease-in-out 0s;
	-moz-transition: color 0.3s ease-in-out 0s;
	-ms-transition: color 0.3s ease-in-out 0s;
	-o-transition: color 0.3s ease-in-out 0s;
	transition: color 0.3s ease-in-out 0s;
}
.content_foot a:visited {
	color: #FFFFFF;
}
.content_foot a:hover {
	color: #A7A7A7;
}
footer a:link {
	text-decoration: none;
}
footer a:visited {
	text-decoration: none;
}
div[class^="bg-text"] {
	padding: 20px;
	z-index: 1;
	height:auto;
	overflow:hidden;
	max-width:1000px;
	margin:0 auto;
	text-align:left;
}
div[class^="bg-text"] h2 {
	font-size: 140%;
	font-weight: normal;
	padding-bottom: 5px;
	text-align:center;
}

h3 {
	font-size: 130%;
	font-weight: normal;
	padding-bottom: 5px;
	text-align:left;
border-bottom:7px solid #eee;
}
h4{
	text-align:center;font-weight:bold; 
	font-size:1.2em; border:2px solid #1e73be; 
	padding:5px;margin:10px;
        border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

.osusume{font-size:130%;}

.voice{border:1px solid #fff;padding:10px;background-color:rgba(0,0,0,0.3);}

.bg-footer {
	text-align:center;
	padding: 30px 5px 30px 5px;
	max-width:1000px;
	margin:0 auto;
	font-weight:normal
}
.color1 {
	color: #FF0000; /* 赤色 */
}
.color2 {
	color: #FF6600; /* 橙色 */
}


.youtube {
  position: relative;
  width: 100%;
  max-width:850px;
  margin:0 auto;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
max-height:550px;
}

.google-maps {
position: relative;
padding-bottom: 35%; // これが縦横比
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

#pageTop{
	background:#1e73be;
	border-radius:5px;
	color:#FFF;
	padding:10px 15px;
	position:fixed;
	bottom:10px;
	right:20px;
	}
#pageTop:hover{
	background:#DDD;
	color:#333;
	}



/* ブラウザW330pxまで
---------------------------------------------------------------------------*/
@media only screen and (max-width: 330px) { 
.copybox{padding:7px;float:none;color:#fff;width:96%;background-color: rgba(0,0,0,0.35);margin:0 auto;line-height:1.5;min-height:180px;text-align:left;}
.nayami{min-height:400px;line-height:2.0;text-align:left;padding:60px 20px 10px 20px;width:100%;color:#333;background:url('images/board.png')no-repeat;background-size:contain;background-position:top center;}
.headarea{height:740px;}
#container{margin-top:-30px;}
.menu {display:none;}
}
/* ブラウザW331pxからW360pxまで
---------------------------------------------------------------------------*/
@media only screen and (min-width: 331px) and (min-width: 360px) { 
.copybox{padding:7px;float:none;color:#fff;width:96%;background-color: rgba(0,0,0,0.35);margin:0 auto;line-height:1.5;min-height:180px;text-align:left;}
.prof_img{float:none;padding:5px;}
.prof_img2{float:none;padding:10px;}
.nayami{min-height:470px;line-height:2.6;text-align:left;padding:60px 20px 10px 10%;width:100%;color:#333;background:url('images/board.png')no-repeat;background-size:contain;background-position:top center;}
.headarea{height:680px;}
#container{margin-top:-30px;}
.menu {display:none;}
}
/* ブラウザW480px以上
---------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) { 
.copybox{padding:7px;float:none;color:#fff;width:96%;background-color: rgba(0,0,0,0.35);margin:0 auto;line-height:1.5;min-height:180px;text-align:left;}
.prof_img{float:none;padding:5px;}
.prof_img2{float:none;padding:10px;}
.nayami{min-height:500px;line-height:2.6;text-align:left;padding:40px 20px 10px 20px;width:100%;color:#333;height:auto;background:url('images/board.png')no-repeat;background-size:cover;background-position:top center;}
.headarea{height:500px;}

#menu_button {
	position:fixed;
	top:0px;
	left:0px;
	cursor: pointer;
	z-index:3;
	background:#1e73be; /* 背景画像 */
}
#nav {display:block;
	position:fixed;
	top:0px;
	margin-left:-200px;
	width:200px;
	z-index:2;
}
#nav ul {
	padding: 0px;
	background:#1e73be; /* 背景画像 */
}
#nav ul li {
	list-style-type: none;
}
#nav ul li a:link {
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #fff;
	display:block;
	text-align:left;
	color: #FFFFFF;
	text-decoration: none;
	-webkit-transition: color 0.3s ease-in-out 0s;
	-moz-transition: color 0.3s ease-in-out 0s;
	-ms-transition: color 0.3s ease-in-out 0s;
	-o-transition: color 0.3s ease-in-out 0s;
	transition: color 0.3s ease-in-out 0s;
}
#nav ul li a:visited {
	color: #FFFFFF;
	border-bottom: 1px solid #fff;
	text-decoration: none;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	display: block;
}
#nav ul li a:hover {
	color: #E0471D;
	text-decoration: none;
}


#title_small {
	display: none;
}
#title_big {
	display: inline-block;
}
/* テーブル　ブラウザW481px以上
---------------------------------------------------------------------------*/
.Table{
		width: 100%;
		max-width:700px;
		border-top:1px solid #a09e98;
		border-left:1px solid #a09e98;
		border-right:1px solid #a09e98;
		margin:10px auto;
		padding:0;
		font-size:0.95em;
		line-height: 1.6em;
	}
.Table th,
.Table td{
		border-bottom:1px solid #a09e98;
		border-collapse:collapse;
		padding:10px;
		margin:0;
		text-align:left;
	}
.Table th{
		_background:#e2f2e4;
	}
.w20{
		width: 20%;
	}

}
/* テーブル　ブラウザW480pxまで
---------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) { 
.Table{
		width: 100%;
		border-collapse:collapse;
		border-top:1px solid #a09e98;
		border-left:1px solid #a09e98;
		border-right:1px solid #a09e98;
		margin:10px auto;
		padding:0;
		font-size:0.95em;
		line-height: 1.6em;
	}
.Table th,
.Table td{
		width:auto;
		padding:10px;
		display: block;
		border-top: none;
}
.osusume{padding:5px 0;font-size:100% !important;}
}
/* ブラウザW768px以上
---------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) { 
.copybox{padding:7px;float:left;color:#fff;max-width:350px;background-color: rgba(0,0,0,0.35);margin:15px 5px 5px 5px;line-height:1.5;min-height:180px;text-align:left;}
.prof_img{float:right;padding:5px;margin-top:10px;}
.prof_img2{float:left;padding:10px;}
.nayami{min-height:450px;line-height:2.6;padding:60px 20px 20px 60px;width:80%;margin:0 auto;color:#333;max-width:600px;height:580px;background:url('images/board_.png')no-repeat;background-size:contain;background-position:top center}

div[class^="bg-text"] {
	font-size: 130%;
	padding: 50px;
}
div[class^="bg-text"] h2 {
	font-size: 200%;
	padding-bottom: 10px;
}

.bg-text-footer {
	padding-top: 50px;
	padding-bottom: 50px;
.osusume{font-size:130%;}
.headarea{height:400px;}

}

/* ブラウザW950px以上
---------------------------------------------------------------------------*/
@media only screen and (min-width: 950px) { 
.copybox{padding:7px;float:left;color:#fff;max-width:350px;background-color: rgba(0,0,0,0.35);margin:15px 5px 5px 5px;line-height:1.5;min-height:180px;text-align:left;}
.prof_img{float:right;padding:5px;}
.prof_img2{float:left;padding:10px;}
.nayami{font-size:1.2em;min-height:450px;line-height:2.6;padding:60px 20px 20px 70px;width:80%;margin:0 auto;color:#333;max-width:600px;height:580px;background:url('images/board_.png')no-repeat;background-size:contain;background-position:top center}


#menu_button {
	display: none;
}
#nav {
	top:auto;
	position: static;
	margin-left: 0px;
	width: auto;
}
#nav ul {
	background-color:rgba(0,0,0,0);
}
#nav ul li {
	float: left;
}
#nav ul li a:link {
	padding:8px 30px;
	border: 1px solid #fff;
	/*border-bottom: 1px solid #1e73be;*/
	color: #FFFFFF;
}

#nav ul li a:visited {
	color: #FFFFFF;
	padding:8px 30px;
	border: 1px solid #fff;
	/*border-bottom: 1px solid #1e73be;*/
}
#nav ul li a:hover {
	border: 1px solid #fff;
	background:#E0471D;
	text-decoration: none;
	color: #B9B9B9;
}

#footer_nav {
	display: block;
}
}
 /*Sticky-Menu
---------------------------------------------------------------------------*/
.menu {
      background: white;
      height: 50px;
      width: 100%;
      position: fixed;
      left: 0;
      line-height: 50px;
      text-align: center;
      display: flex;
      cursor: pointer;
      justify-content: space-around;
  }
.menu_container {
      margin:0 auto;
      max-width:1000px;
}
  .menu:hover {
      opacity: 1;
  }
   
  .menu a {
      padding:0 30px;
      color: black;
      font-family: Quicksand;
      text-decoration: none;
      font-weight: bold;   
      font-size: calc(2vh + 1px);
  }
  .menu a:hover {
      text-decoration: none ! important;
   }
  .active {
      top: 0;
      opacity: 0.5;
      position: fixed;
      z-index: 9999;    
      -webkit-transition: opacity .55s;
      -moz-transition: opacity .55s;
      -o-transition: opacity .55s;
      transition: opacity .55s;
  }
.menu a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
.menu a::after {
 position: absolute;
  bottom: 12px;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #333;
  transition: .3s;
}
.menu a:hover::after {
  width: 100%;
}

#container{margin-top:50px;}
}