@charset "UTF-8";
/*================================================
 *  一般・共通設定
 ================================================*/
html {
    width:100%;
    margin:0 auto;
    font-size: calc(1em * .625);
    color:#382400;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
body {
    position: relative;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}
section {
	max-width: 816px;
	max-width: 81.6rem;
	margin:0 auto;
	/*overflow: hidden;*/
 }
a {
	color:#1268ab;
	text-decoration: underline;
}
a:hover {
	color:#1268ab;
	text-decoration: none;
}
h1 { color:#1268ab; }
h2 { color:#000; }
h3 {
    margin-bottom:0.5rem;
    padding:.2rem .5rem;
    color:#1268ab;
    font-size:1.1rem;
    border-bottom:.1rem solid #1268ab;
}
h4 {
    margin-bottom:0.25rem;
    font-size:1.1rem;
    color:#333;
}
h4:before {
    content:"\002605";
    color:#1268ab;
}
h5 {
    margin-bottom:0.25em;
    padding:.2rem;
    color:#000;
    font-size:1.1rem;
    border-top:.1rem dotted #999;
    border-bottom:.1rem dotted #999;
    background:#f1f1f1;
}
h6 {
    margin-bottom:0.25em;
    color:#382400;
    font-size:1rem;
    font-weight:bold;
}
p {  margin:0 0 1rem 0;}
img { vertical-align:bottom; }
em { font-weight:bold; }
strong {
    font-weight:bold;
    color:#1268ab;
}
blockquote {
    margin-bottom:1rem;
    padding:1rem;
    border:.1rem dotted #ddd;
    border-left:.5rem solid #ddd;
}
ul,ol,dl { margin:0 0 1rem 0; }

@media screen and (max-width:768px) {
    body {
        box-sizing:border-box;
        width:100%;
    }
	section {
		padding: 0 1rem;
	 }
	 section:last-child {
 		margin-bottom: 5rem;
 	 }
}
/*================================================
 *  contents
 ================================================*/
#contents {}
#main {
	width: 100%;
}
.bgGy{
	/*IE6 IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#f2f2f2));
	/* IE8 IE9 */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#f2f2f2))";
	zoom: 1;
	background: -moz-linear-gradient(bottom, #fff, #f2f2f2);/* FF3.6+ */
	background: -webkit-linear-gradient(bottom, #fff, #f2f2f2);/* Chrome10+, Safari5.1+ */
	background: linear-gradient(to bottom, #fff, #f2f2f2);/* IE10+, W3C */
}
.bgBl{
	/*IE6 IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#F5FAFF, endcolorstr=#ffffff));
	/* IE8 IE9 */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#F5FAFF, endcolorstr=#ffffff))";
	zoom: 1;
	background: -moz-linear-gradient(top, #F5FAFF, #fff);/* FF3.6+ */
	background: -webkit-linear-gradient(top, #F5FAFF, #fff);/* Chrome10+, Safari5.1+ */
	background: linear-gradient(to top, #F5FAFF, #fff);/* IE10+, W3C */
}
.bgW{ background-color: #fff; }

.about_cytropy_text {
	width: 88%;
	margin-left: auto;
	margin-right: auto;
}

.about_cytropy_text img {
	display: block;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	height: auto;
}

.about_cytropy_catch {
	color: #1268ab;
	font-weight: bold;
	text-align: center;
}

.about_cytropy_catch img {
	margin-top: 40px;
	width: 55%;
	height: auto;
}

.info  {
	font-size: 1.2rem;
	padding-top: 7%;
}
.info dt {
	clear: left;
	float: left;
	width: 20%;
	font-weight: bold;
	padding: 3% 0 1%;
	min-height: 45px;
}
.info dt p.warning, .info dd span.warning { color:red; }
.info dd {
	padding:  3% 0  1%  20%;
	border-bottom: 0.1rem solid #ddd;
	min-height: 45px;
 }
.info dd span {
 	padding:  0 1%;
	text-align: center;
}
.info dt.canceled, .info dd.canceled {
	color: #aaa;
}
.info dd span.seminar {
	background-color: #2f363b;
	border: solid 1px #2f363b;
	margin-right:  5%;
	color: #fff;
}
.info dd span.seminar-canceled {
	background-color: #aaa;
	border: solid 1px #aaa;
	margin-right:  5%;
	color: #fff;
}
.info dd span.course {
	color: #700;
	font-weight: bold;
	margin-right:  1%;
}
.info dd span.event {
	border: solid 1px #2f363b;
}
.info dd img {
	vertical-align: top;
	margin-bottom: 3px;
	width: 29px;
	height: 29px;
	border: 1px solid #ddd;
}

.voices  {
	font-size: 1.2rem;
	padding-top: 7%;
}
.voices dt {
	clear: left;
	float: left;
	width: 8%;
	font-weight: bold;
	padding: 3% 0 1%;
}
.voices dd {
	padding:3% 0 2% 10%;
	border-bottom: 0.1rem solid #ddd;
 }

@media screen and (max-width:768px) {
	#contents {
   	 width:100%;
    }
    #main {
   	 float:none;
   	 width:100%;
    }
    #sub {
   	 float:none;
   	 width:100%;
    }
	.info dt {
	   width: 100%;
	   padding-bottom: 1%;
	}
	.info dd {
	   padding:  3% 0;
	 }
	.voices dt {
	   width: 100%;
	   margin:0 auto;
	   text-align:center;
	   padding-bottom: 1%;
	}
	.voices dd {
	   padding:  3% 0;
	 }
}
/*================================================
 *  ヘッダー
 ================================================*/
header {
    position:relative;
	background-color: #1268ab;
	overflow: hidden;
}
header h1 {
	max-width:81.6rem;
    margin: 3rem auto 1rem;
}
.logo{ width: 100%; }

.logo a{
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/logo_main.png) no-repeat center center;
	padding: 2rem 0;
	-moz-background-size: cover;
	background-size: cover;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
	max-width: 45.5rem;
	margin: 0 auto;
}
@media screen and (max-width:768px) {
	header { width:100%; }
	header h1 { margin: 1rem auto 0; }
	.logo{ width: 90%; }
}
/*================================================
 *  グローバルナビゲーション
 ================================================*/
nav {
    padding:0;
    background-color: #1268ab;
    overflow:hidden;
	width: 100%;
}
#menu{
	width: 100%;
	max-width: 81.6rem;
	margin: 0 auto;
	overflow: hidden;
}
#menu li{
	float: left;
	text-align: center;
	font-weight: bold;
	width: 20%;
	color: #999;
}
#menu li a{
	display:block;
	padding:1rem 0;
	text-decoration:none;
	color: #fff;
}
#menu li a:hover{
	color:#000;
	text-decoration:none;
	background:#ddd;
}
#menu li span{
	display:block;
	padding:1rem 0;
	font-weight: bold;
}
#toggle{
 display: none;
}
@media screen and (max-width:768px) {
  #menu{
    display: none;
  }
   #menu li{
	width: 100%;
	display: block;
	text-align: left;
   }
   #menu li a,
   #menu li span{
   	padding:1rem 0 1rem 5%;
   }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #222;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 1rem 0 1rem 4rem;
    border-bottom: 1px solid #444;
    color: #fff;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}
/
/*================================================
 *  contact
 ================================================*/
 .contact{
	max-width: 81.6rem;
	margin: 0 auto;
 }

/* Sweep To Right */
.hvr-sweep-to-right {
  display: block;
  vertical-align: middle;
  border: solid 1px #1268ab;
  color: #1368ac;
  background: #f2f2f2;
  width: 86.70%;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1.8rem;
  text-align: center;
  text-decoration: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 .1rem rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1368ac;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:after {
	content: "\003e";
	position: absolute;
	right: 4%;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.contactArea {
   margin-top: 7%;
   margin-bottom: 10%;
}
.contactArea .tool {
	padding: 2.5% 1rem 1rem;
	max-width: 81.6rem;
	border-top: solid .4rem #1268ab;
	background-color: #F8F8F8;
	box-shadow: 0 .3rem .5rem .2rem #d0d3d6;
	-moz-box-shadow: 0 .3rem .5rem .2rem #d0d3d6;;
	-webkit-box-shadow: 0 .3rem .5rem .2rem #d0d3d6;;
}
.contactArea .tool table {
	width: 71.078%;
	margin: 0 auto;
}
.contactArea .tool table th{
	padding: 2rem 0 1rem;
	vertical-align: top;
	width: 25%;
	text-align: left;
	font-weight: bold;
}
.contactArea .tool table td {
	padding: 1.6rem 0;
	vertical-align: top;
	text-align: left;
	width: 75%;
}
.contactArea .tool.confirm table th,
.contactArea .tool.confirm table td{
	padding: 2rem 1rem;
}
.contactArea .tool input[type="text"],
.contactArea .tool textarea{
	width: 95%;
	padding: 1rem .5rem;
	margin-left: 1rem;
	border: #cbcbcb solid .1rem;
}
.contactArea .tool textarea{
	overflow: auto;
}
.contactArea .tool .error input[type="text"],
.contactArea .tool .error textarea{
	border: #E54B41 solid .1rem;
	background: #FFBEBF;
}
.contactArea .tool .error p{
	padding: .3rem .5rem;
	margin-left: 1rem;
	color:#ff0000;
	font-size: 1.2rem;
}
.contactArea .btnArea{
	width: 60%;
	margin: 2rem auto 4rem auto;
	overflow: hidden;
}
.contactArea .btnArea li:first-child{
	float: right;
}
.contactArea .btnArea li:last-child{
	float: left;
}
.contactArea button.btn{
	display:block;
	font-weight: bold;
	border: none;
	text-align: center;
	width: 18.2rem;
	height: 3.8rem;
	line-height: 3.8rem;
	color: #fff;
	background-color: #1268ab;
	margin:0 auto;
	cursor: pointer;
	position: relative;
}
.contactArea button.btn.back{
	background-color: gray;
}
.contactArea button.btn:after {
	content: "\003e";
	position: absolute;
	top: 0;
	right: 1rem;
}
.contactArea button.btn.back:after {
	content: "\003c";
	position: absolute;
	top: 0;
	right: 16rem;
}
.contactArea button.btn:hover{
	background-color: #1f8fe6;
}
.contactArea button.btn.back:hover{
	background-color: #d2d2d2;
}
.contactArea .tool textArea{
	height: 15rem;
}



@media screen and (max-width:768px) {
	.contactArea .tool table {
		width: 100%;
	}
	.contactArea .tool table th{
		padding: 1.5rem .5rem .5rem;
		width: 25%;
		font-size: 1.2rem;
	}
	.contactArea .tool table td {
		padding: .5rem;

	}
	.contactArea .tool.confirm table th,
	.contactArea .tool.confirm table td{
		padding: 1.5rem .5rem .5rem;
	}
	.contactArea .tool input[type="text"],
	.contactArea .tool textarea{
		margin-left: .5rem;
		font-size: 1.2rem;
	}
	.contactArea .tool .error p{
		margin: 0 0 0 .5rem;
		font-size: 1rem;
	}
	.contactArea .btnArea{
		width: 100%;
		margin: 1rem auto 2rem auto;
		overflow: hidden;
	}
	.contactArea .btnArea li:first-child{
		float: none;
	}
	.contactArea .btnArea li:last-child{
		float: none;
	}
	.contactArea button.btn{ margin-bottom: 1rem; }
}
/*================================================
 *  フッター
 ================================================*/
footer {
	clear:both;
	position: relative;
	border-bottom: 3.5rem solid #1268ab;
}
.copyright {
    clear:both;
    padding:2rem 0;
    font-size:1.1rem;
    text-align:center;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	text-align: center;
}
.totop a {
	background: url(../images/icon_pagetop.png)no-repeat center center;
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	display: inline-block;
	height: 4rem;
	/*width: 5.433%;*/
	width: 8.7rem;
}
.totop a:hover {
	background-color: #ffffff;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}