@charset "UTF-8";

html {
    background: #FFF;
    font-size: 62.5%; }

body {
    -webkit-text-size-adjust: 100%;
    left: 0;
    overflow-x: hidden;
	background-color: #fff;
    color: #000000;
    line-height: 1.5;
    font-size: 14px;
    font-size: 1.4em;
    font-family: Lato, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
@media screen and  (min-width:768px) and ( max-width:1024px) {
  body {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}


html,body {
	height: 100%;
}

#wrapper {
	position: relative;
    width: 100%;
    padding-top: 90px;
	background-color: #fff;
}
@media only screen and (max-width: 768px) {
  #wrapper {
    padding-top: 45px;
  }
}
header,
main,
footer {
    display: block; }

* {
    box-sizing: border-box; }

img {
    vertical-align: bottom;}

.inner {
    max-width: 1000px;
    margin: 0 auto;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
!--a {
	text-decoration: none;
	color: #000; }
  a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)"; }--

.pc {
  display: block; }
  @media only screen and (max-width: 768px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media only screen and (max-width: 768px) {
    .sp {
      display: block; } }

/* =========================================================
wrapper
========================================================= */
/*nav*/
a.menu-btn {
	position: absolute;
	right: 0;
	top:0;
	height: 45px;
	width: 45px;
	display: block;
	background: url(../images/nav.png) no-repeat left top;
	-webkit-background-size: 100%;
	background-size: 100%;
	margin: 20px 20px 0 0;
}
nav#menu p {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	margin: 30px 10px 0 0;
}
nav#menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #58abc9;
	padding-top: 90px;
    display: block;
}
nav#menu ul {
	border-top: #fff 1px solid;
}
nav#menu ul li {
	text-align: left;
	border-bottom: #fff 1px solid;
}
nav#menu li.jpi {
	background: url(../images/ico_04.png) 155px 20px no-repeat;
	background-size: 6%;
}
nav#menu li a {
    padding:20px 0 20px 20px;
    display: block;
    text-decoration: none;
    color: #fff;
	font-size: 1.4em;
}
@media only screen and (max-width: 768px) {
					a.menu-btn {
						width: 25px;
						margin: 20px 20px 0 0;
					}
}
section {
	padding: 10% 0;
}
header {
	width: 100%;
	background: #fff url(../images/bg_01_sp.png) top left repeat-x;
	background-size: 15%;
}
main {
	position: relative;
	width: 100%;
}
.mainVisual .inner {
	position: relative;
	padding-top: 43%;
	text-align: center;
}
.mainVisual .catch {
	position: absolute;
	left: 0;
	width: 100%;
}
@media only screen and (max-width: 768px) {
					.mainVisual .inner .left {
						position: absolute;
						top: 3%;
						left: 1%;
						width: 50%;
					}

					.mainVisual .inner .right {
						position: absolute;
						top: -10%;
						right: 0;
						width: 47%;
} }
h2 {
	margin-bottom: 4%;
}
.inner {
	margin-top: 5%;
	padding: 0 4.2%;
	text-align: left;
}
.inner dl dt {
	width: 30%;
}
@media only screen and (max-width: 768px) {
					h2 img {
						width: 40%;
	} }
#news .inner dl dt {
	background-color: #DCECFA;
	text-align: center;
}
#news .inner dl dt,
#news .inner dl dd {
	margin-bottom: 1.6%;
}
#news dl dd span {
	color: #EB0003;
}
#about {
	background-color: #F5F5F5;
	text-align: center;
}
#about dl {
	background: #F5F5F5 url(../images/pic_02_sp.png) bottom right no-repeat;
	background-size: 43%;
	background-position-y: 80%;
}
#about .inner ul {
	margin-top: 15%;
}
#about .inner dl dt {
	margin-bottom: 2%;
}
#about .inner dl dd {
	margin-bottom: 4%;
}
#about .inner dl dd:last-child {
	margin-bottom: 0;
}
#about p {
		padding: 0 1% 0 5%;
	}
#about .button {
	background: #0E56A7 url(../images/btn_arrow.png) bottom right no-repeat;
	background-size: 9%;
}
#about ul li {
	text-align: center;
}
#about ul li:first-child {
	margin-bottom: 4%;
}
#about .button:hover {
	background-color: #0075CC;
}
#arrow {
	width: 100%;
	background: #FFFFFF url(../images/arrow.png) top center no-repeat;
	background-size: 20%;
	margin: 0 auto;
	padding: 15% 4.2% 12%;
	text-align: center;
}
#arrow p:first-child {
/*	margin-bottom: 5px;*/
	margin-bottom: 15px;
}
#about a.button img,
#arrow a.button img {
	display: inline-block;
	width: 10%;
	margin-right: 5%;
	vertical-align: middle;
}
#about a.button img.first {
	width: 10%;
}
a.button span {
	background-color: #FFFFFF;
	margin-left: 5%;
	padding: 0 1%;
	color: #C22531;
	vertical-align: middle;
	font-size: 60%;
}
#arrow p {
	text-align: center;
}
#arrow a.button {
	background: #C22531 url(../images/btn_arrow.png) bottom right no-repeat;
	background-size: 9%;
}
#arrow .button:hover {
	background-color: #DF202F;
}
#arrow p.deadline {
  text-align: center;
  font-size: 150%;
}


a.button {
	display: inline-block;
	width: 100%;
	height: auto;
	padding: 5% 0;
	text-align: center;
	text-decoration: none;
/*	font-size: 160%;*/
  	font-size: 145%;
	color: #fff;
	outline: none;
}
#access p#button {
	margin: 0 4.2%;
}
#access a.button img {
	display: inline-block;
	width: 7%;
	margin-left: 5%;
	vertical-align: middle;
}
#access .button {
	background: #3A9FC0 url(../images/btn_arrow.png) bottom right no-repeat;
	background-size: 9%;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
#access .button:hover {
	background-color: #2BC4D0;
}
#access {
	background: #F5F5F5 url(../images/bg_02.png) top left repeat;
	background-size: 15%;
}
#access dl ul {
	margin-bottom: 30px;
}
#access dl ul li {
	margin-bottom: 1px;
}
#access dl p {
	margin-bottom: 5%;
}
main .topBtn a {
	display: inline-block;
	width: 100%;
	height: auto;
	background: #F5F5F5 url(../images/pagetop.png) 50% center no-repeat;
	background-size: 16%;
    text-indent:-9999px;
	text-align: center;
	padding: 5% 0;
}
footer {
	padding-top: 5%;
}
footer .inner {
	text-align: center;
}
footer .inner p:first-child {
	padding-bottom: 20px;
}
footer ul {
	margin: 10% auto 15%;
}
footer ul li {
	padding-bottom: 10px;
}
footer ul li:last-child {
	padding-bottom: 0;
}
footer p.copy {
	background-color: #C1C1C1;
	padding: 20px;
	text-align: center;
}
@media only screen and (min-width: 768px) {
				section {
					padding: 80px 0;
				}
				header {
					width: 100%;
					background: #fff url(../images/bg_01.png) top left repeat-x;
				}
				header .mainVisual .inner {
					position: relative;
					padding-top: 332px;
					text-align: center;
				}
				header .mainVisual .inner .left {
					position: absolute;
					top: -60px;
					left: 106px;
				}
				header .mainVisual .inner .right {
					position: absolute;
					top: 12px;
					right: 80px;
				}
				main {
					margin-top: 58px;
				}
				h2 {
					float: left;
					width: 200px;
					text-align: left;
				}
				.inner {
					margin: 0 auto;
					width: 1000px;
					text-align: left;
					padding: 0;}
				.button {
					width: 1000px;
					margin: 0 auto;
					text-align: center;
				}
				.inner dl {
					float: left;
					width: 780px;
				}
				.inner dl dt,
				.inner dl dd {
					float: left;
					margin-bottom: 0.8%;
				}
				.inner dl dt {
					width: 135px;
				}
				.inner dl dd {
					width: 630px;
				}
				section#news  {
					padding-bottom: 25px;
				}
				#news .inner dl dt {
					background-color: #DCECFA;
					text-align: center;
					width: 100px;
					margin-right: 30px;
				}
				#about {
					background-color: #F5F5F5;
					text-align: center;
				}
				#about dl {
					background: #F5F5F5 url(../images/pic_02.png) top right no-repeat;
				}
				#about .inner {
					margin-top: 70px;
				}
				#about .inner ul {
					margin: 80px 0;
				}
				#about ul li {
					display: inline;
				}
				#about ul li:first-child {
					margin-right: 20px;
				}
				#about ul li,#about ul li a.button {
					width: 48%;
					padding: 25px 0;
					font-size: 30px;
				}
				#arrow {
					width: 1000px;
					background: #FFFFFF url(../images/arrow.png) top center no-repeat;
					margin: 0 auto;
					padding: 135px 0 80px;
					text-align: center;
				}
				.arrow p img {
					margin-bottom: 20px;
				}
				#arrow a.button {
					font-size: 24px;
					}
				#arrow a.button img {
					width: 5%;
					}
				a.button {
					padding: 25px 0; }
				#access {
					background: #F5F5F5 url(../images/bg_02.png) top left repeat;
				}
				#arrow a.button,#access .button {
					background-size: 5%;
				}
				#access dl ul {
					margin-bottom: 30px;
				}
				#access dl ul li {
					margin-bottom: 1px;
				}
				#access dl p {
					margin-bottom: 40px;
				}
				#access p#button {
					width: 600px;
					margin: 0 auto;
				}
				#access a.button img {
					width: 5%;
				}
				main .topBtn {
					background-color: #F5F5F5;
					padding: 20px;
				}
				main .topBtn a {
					display:block;
					background: #F5F5F5 url(../images/pagetop.png) center no-repeat;
					background-size: 5%;
					text-indent:-9999px;
					margin: 0 auto;
					padding: 5px;
				}

				footer {
					padding-top: 80px;
				}
				footer .inner {
					text-align: center;
				}
				footer .inner p:first-child {
					padding-bottom: 20px;
				}
				footer .inner p:first-child img {
					width: 600px;
				}
				footer ul {
/*					width: 680px;*/
					width: 430px;
					margin: 40px auto 80px;
				}
				footer ul li {
					float: left;
				}
				footer ul li {
					padding-right: 10px;
				}
				footer ul li:last-child {
					padding-right: 0;
				}
				footer p.copy {
					background-color: #C1C1C1;
					padding: 20px;
					text-align: center;
				}
}
/* 404.html */
.top_404 {
	text-align: center;
}
.top_404 p:last-child {
	background-color: #C0C0C0;
	width: 50%;
	margin: 5% auto 0;
}