@charset "UTF-8";

html {
	font-size: 80%
}

*, *::before, *, *::after {
	box-sizing: border-box;
}

body {
	/* background: #000000 url('../images/bg.png') repeat; */
	font-size: 1.6rem;
	font-family: "M PLUS 1p";
}

h2{
	font-size: 2.0rem;
	margin:0px;
	font-family: "M PLUS 1p";
	line-height:1.5;
}

h3{
	font-size: 16px;
	margin:0px;
	font-family: "M PLUS 1p";
}

h4{
	font-size: 14px;
	margin:0px;
	font-family: "M PLUS 1p";
	line-height: 18px;
    text-align: center;
}

p{
	font-family: "M PLUS 1p";
    line-height: 1.8;
}

.strike {
  color: red;
  text-decoration: line-through;
  }

.indent{
      text-indent: -1em;
      padding-left: 2em;
}

.heading {
	width:100%;
	position: relative;
	margin: 10px auto 10px;
	letter-spacing: 2px;
	display: block;
	height:auto;
	padding:7px 0 7px;
	margin-bottom: 10px;
	border-radius: 6px;
    border: 6px outset #21b6bf;
    text-align: center;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 2.0rem;
    background-color: #5dbfc5;
    color: white;
    transition: all 0.3s;
  vertical-align: middle;
        text-shadow: -1px -1px 1px rgba(255, 255, 255, .44), 1px 1px 1px #4a0a11;

}

.shien{
    background-color:#b4d680;
        border: 6px outset #8dc339;

}

.jinzai{
    background-color:#74d2b8;    
    border: 6px outset #2ab790;
}

.senmon{
    background-color:#5bb4f8;
    border: 6px outset #2291e5;
}

.wrap{
    display: block;
    width: 1000px; 
    margin: 0 auto;
}

.red{
    color:red;
    line-height:1.5;
}
.headline {
	margin: 0px;
	letter-spacing: 2px;
}

.text {
	margin: 10px 0;
	line-height: 1.5;
	opacity: 1.0;
	text-align: justify;
	width:100%;
}

.blacktext{
    font-size:1.4rem;
    line-height:1.2;
    color:black;
}

.small {
    font-size:1.2rem;
}


.header {
    text-align: center;
    font-weight: bold;
    margin: 0px;
}

.footer{
	font-size: 0.6em;
	text-align:center;
	color:#000;
}

.obi{
    display: block;
    width:500px;
    height: 50px;
    margin:10px auto;
    background-color: orangered;
    text-align: center;
    padding-top:10px;
    color:white;
}
.obiblue{
    background-color: #285ee7;
    margin-top:20px;
}

/* 下向きの矢印
  =============================================================== */

/* 長方形 */
.arrow_down {
	font-size: 50px;
	position: relative;
	width: 0.3em;
	height: 0.5em;
	background-color: #39a9d6;
    margin: 0px auto;
}
/* 三角 */
.arrow_down::before {
	position: absolute;
	top: 0.4em;
	left: -0.25em;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.4em solid #39a9d6;
	border-left: 0.4em solid transparent;
	border-right: 0.4em solid transparent;

}

/* 角丸ボタン */
.kadomaru {
    background: linear-gradient(#00D 0%, #000081 50%, #00005B 51%, #000039 100%);
    border: solid 1px #000039;
    box-shadow: 0 1px 2px #606060, 0 0 2px #FFF inset;
    text-shadow: 3px 0 3px #003900, 0 3px 3px #003900, -3px 0 3px #003900, 0 -3px 3px #003900;
    width:100px;
  font-size:20px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:5px 0 5px;
  border-radius: 20px;
  margin: 20px auto;
　text-decoration: none;
}
.kadomaru:hover{
	opacity: 0.5;
}

/* テーブル処理
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
table{
	margin-top:10px;
	width:100%;
    font-size:1.2rem;
}

.table2{
    width:60%;
    margin:0px auto;
}
.td1{
	background-color: white;
	padding: 10px;
	border: solid 5px white;
	text-align: left;
    font-size:1.6rem;
    font-weight: bold;
}

.td4{
	background-color: white;
	padding: 10px;
	border: solid 5px white;
	text-align: left;
    font-size:1.6rem;
}

.th1{
	width:20%;
	background-color: orangered;
	padding: 10px;
	border: solid 5px white;
    text-align: center;
    color: white;
}

.th1blue{
    font-size:2rem;
	width:20%;
	background-color: #21b8ce;
	padding: 10px;
	border: solid 5px white;
    text-align: center;
    color: white;
}

.shienprice{
    font-size:3rem;
    font-weight: 900;
    padding-left:20px;
}

.th2{
    width:20%;
	background-color: #21b8ce;
	padding: 5px;
	border: solid 1px #5c8d94;
    text-align: center;
    color: white;
}
.th3{
    width:20%;
	background-color: #a0f3ff;
	padding: 5px;
	border: solid 1px #5c8d94;
    text-align: center;
    color: #21b8ce;
}

.th4{
    width:80%;
}

.th5{
    width:60%;
}

.th6{
    width:10%;
}

.th7{
    width:10%;
    background-color: #a0f3ff;
    color: #21b8ce;
}

.th8{
	background-color: black; 
    color:white;
    font-size:28px;
    padding: 5px;
}

.th9{
	background-color: #fffbbe; 
    color:black;
    font-size:24px;
    padding: 5px;
}
.th10{
 	padding: 20px;
    background-color: #fffef0;
    font-size:20px;
    text-align: center;
}

.td2{
 	padding: 5px;
   border: solid 1px #5c8d94;
}

.td3{
 	padding: 5px;
   border: solid 1px #5c8d94;
    text-align: right;
}


/*============================================================*/
.resize {
	width:100%;
	max-width: 1000px; /* 最大幅 */
	min-width: 240px; /* 最小幅 */
		}

.resize_middle {
	width:100%;
	max-width: 600px; /* 最大幅 */
	min-width: 150px; /* 最小幅 */
		}

.centering{
	text-align: center;
		}

.centered{
    display: inline-block;
    width:100%;
    text-align: center;
}
.whitebox {
	display: block;
	padding:20px;
	width:100%;
	margin: 20px auto;
	background-color: rgba(255,255,255,1.0);
	border-radius: 10px;
}


.smallbox {
	display: block;
	padding:5px 10px 5px 10px;
	width:100%;
	margin: 10px auto;
	background-color: rgba(255,255,255,0.6);
	border-radius: 10px;

}


.shienbox {
	display: inline-block;
	width: 100px;
	height:auto;
	padding:7px 0 7px;
	color: white;
	font-size: 1.5rem;
    text-align: center;
    background-color: orangered;
    float:left;
    margin-right:10px;
}

.shientext{
    display: inline-block;
    width:300px;
    height:auto;
    color:black;
    text-align: justify;
    float: left;
}


.bar {
    display: block;
	width:90%;
    height:auto;
    margin:10px auto;
    padding:5px;
	color:black;
    text-align: center;
	text-decoration: none;
    border-bottom:black solid 1px;
    font-size: 1.6rem;
    line-height: 1.5;
}

.bar:hover{
	opacity: 0.5;
}

.plan{
    width:100%;
    margin:10px auto;
    padding:10px; 
    text-align: center;
}

.plan:hover{
	opacity: 0.5;
}


.seminar{
    background-color:#66cdaa;
    text-align: left;
}


.sample {
	display: inline-block;
	width: 280px;
	height: 150px;
	text-decoration: none;
	font-size: 1rem;
}


.samplebox {
    display: inline-block;
	width:280px;
    height:380px;
    margin:20px;
	color:#fff;
	text-decoration: none;
	font-size: 1.0rem;
    line-height: 1.5;
    float: left;
}

.samplebox2 {
    display: inline-block;
	width:280px;
    height:420px;
    margin:20px;
	color:#fff;
	text-decoration: none;
	font-size: 1.0rem;
    line-height: 1.5;
    float: left;
}


.samplebox3 {
    display: inline-block;
	width:280px;
    height:480px;
    margin:20px;
	color:#fff;
	text-decoration: none;
	font-size: 1.0rem;
    line-height: 1.5;
    float: left;
}

.sample:hover{
	opacity: 0.5;
}

.modelbox {
    display: inline-block;
	width:440px;
    height:440px;
    margin:20px;
	color:#fff;
	text-decoration: none;
	font-size: 1.0rem;
    line-height: 1.5;
    float: left;
}

.model{
	display: inline-block;
	width: 440px;
	height: 220px;
}

.model2{
	display: inline-block;
	width: 440px;
	height: 220px;
}

.model:hover{
	opacity: 0.5;
}

.shiryou {
    text-align: center;
}

.award {
	display: inline-block;
	width: 280px;
	height: 200px;
	text-decoration: none;
	font-size: 1rem;
}

.award:hover{
	opacity: 0.5;
}

.award2 {
	display: inline-block;
	width: 280px;
	height: 200px;
	text-decoration: none;
	font-size: 1rem;
}


.company{
     display: inline-block;
   font-size:1.5rem;
    line-height: 1.5;
    color:black;
    font-weight: bold;
    margin:0;
    text-align: justify;
}

.point{
    display: inline-block;
    font-size:1.3rem;
   font-weight: bold;
    color:royalblue;
    margin: 0;
    line-height: 1.4;
    text-align: justify;
}

.detail{
    display: inline-block;
    font-size:1rem;
    color:black;
    margin-top: 5px;
    line-height: 1.4;
    text-align: justify;
}


.clearfix::after{
	content: '';
	display: block;
	clear:both;
}


.name {
	margin: 0px 0 3px;
	font-size: 1.5rem;
	line-height: 1.2;
	font-family:sans-serif;
	margin-left:1.5rem;
}

.menuarea{
	display: block;
    width:100%;
    position: fixed;
    top:0;
}

.menubtn {
	display: block;
	width:20%;
	padding:3px;
	color:#fff;
    background-color:#5dbfc5;
	text-decoration: none;
	font-size: 1.5rem;
	top:10px;
    float: left;
    text-align: center;
 }

 .menubtn:hover{
    background-color:#fcff00;
    color:black;
 }

.ask {
  background: linear-gradient(#0D0 0%, #008100 50%, #005B00 51%, #003900 100%);
    border: solid 1px #003900;
    box-shadow: 0 1px 2px #606060, 0 0 2px #FFF inset;
    text-shadow: 3px 0 3px #003900, 0 3px 3px #003900, -3px 0 3px #003900, 0 -3px 3px #003900;
    display: block;
	width:150px;
    height:auto;
    margin:10px auto;
    padding:10px;
    text-align: center;
	text-decoration: none;
	border-radius: 10px;
	font-size: 1.4rem;
    color:white;
}

.ask:hover{
	opacity: 0.5;
}

.askred{
    width: 250px;
    padding:5px;
    background: red;
    text-shadow:none;
    border:none;
}


.backbtn {
	 display: block;
	 width:150px;
	 padding:3px;
	 border-radius:4px;
	 background-color:red;
	 color:#fff;
	 text-decoration: none;
	 font-size: 1.5rem;
	 opacity: 0.5;
	 position:fixed;
	 bottom:20px;
	 right:20px;
 }
 
 .backbtn:hover{
	 opacity: 1.0;
 }

/* 更新情報
  =============================================================== */

.update{
	display:inline-block;
	width:100%;
	height:auto;
	padding:0px;
	background-color: white;
	overflow-y: auto;
}

.new {
    width: 50%;
    height: auto;
    text-align: center;
    margin: 0 auto 10px;
    padding:2px;
    border-radius: 10px;
    background-color: red;
	color:white;
    font-size:1.5rem;
	}


.news{
    width:100%;
    line-height: 1.2em;
	text-overflow:ellipsis;
}
/*
dl#news dt{
    clear:left;
    float:left;
    margin:0;
    padding:1px 0 2px 0.5em;
    width:1em;
	color:red;
    line-height:1.2em;
}

dl#news dd{
	text-align: left;
    margin:0;
    padding:1px 0.5em 1px 7em;
    border-bottom:1px solid #CCC;
    line-height:1.2em;
    width:100%;
}
  */
.news a{
    padding: 1px 20px 1px 0;
    color:#000000;
    text-decoration:none;
}
 
.news a:hover{
    color:blue;
    text-decoration:underline;
}
video{
    width:100%;
}
.monitor{
    width:1000px;
    margin 10px auto;
}
/* スマホ対応
   ========================================================================== */

@media screen and (max-width: 800px){

.wrap{
    display: block;
    width: auto; 
    margin: 0 auto;
}
.monitor{
    width:480px;
}
    
 .whitebox {padding:5px; width:100%;}
.centerbox{	width:100%;}
.leftbox { float : none ; width:100%;}
.rightbox { float : none ;  width:100%;}
.photo-left { float : none ;  width:100%;}
.photo-right { float : none ; width:100%; }
.rightbox2 { float : none ;  width:100%;}
.leftbox2 { float : none ;  width:100%;}
.rightbox3 { float : none ;  width:100%;}
.leftbox3 { float : none ;  width:100%;}
.rootee{width:100%;}
.circuit{width:100%;}
.volunteer{width:100%;}
.heading{font-size:1.3em;}
.headline{font-size:1.1em;}
.menubtn {
	display: block;
	width:20%;
	padding:1px;
	color:#fff;
    background-color:#5dbfc5;
	text-decoration: none;
	font-size: 1rem;
	top:5px;
    float: left;
    text-align: center;
 }
}