@charset "utf-8";
#header {
	height: 100vh;
	background: url(../img/index/top.jpg) no-repeat 65% top;
	background-size:cover;
	-webkit-background-size: cover;
   -moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#header-wrap {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
h1 {
	margin: 0;
	padding: 30px 0 0 0;
	text-align: center;
	color: #333;
}
#logo {
	width: 180px;
	margin: 30px auto;
	text-align: center;
}
#logo img {
	width: 100%;
	height: auto;
}
#catchcopy {
    animation: fadeIn 3.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 3.5s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
#catchcopy {
	margin-top: 90px;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
}
#catchcopy span {
	display: inline-block;
	margin-top: 5px;
	padding: 15px 10px 0 10px;
	background: linear-gradient(transparent 60%, rgba(256,256,256,0.75) 60%);
}
#banner {
	background-color: #fff;
}
#banner1 {
	padding: 100px 0 0 0;
	min-height: 580px;
	background-image: url(../img/index/badge_tochikaoku.svg), url(../img/index/banner1-bottom.png);
	background-position: right 30px top,bottom center;
	background-repeat: no-repeat,no-repeat;
	background-size: auto,100%;
}
#banner1 div {
	margin: auto;
	max-width: 380px;
	width: 90%;
	max-height: 380px;
	height: 53%;
}
#banner2 {
	padding: 100px 0 0 0;
	min-height: 760px;
	background-color: #dbf9fa;
	background-image:url(../img/index/banner2-bottom.png);
	background-position:bottom center;
	background-repeat:no-repeat;
	background-size:100%;
}
#banner2 div {
	margin: auto;
	padding-top: 330px;
	max-width: 380px;
	width: 90%;
	height: 320px;
	background-image: url(../img/index/banner-thesesituations.png);
	background-position: top center;
	background-repeat: no-repeat;
}
#banner3 {
	padding: 100px 0 0 0;
	min-height: 520px;
	background-color: #eefadb;
}
#banner3 div {
	margin: auto;
	max-width: 380px;
	width: 90%;
	max-height: 500px;
	height: 60%;
	background-image: url(../img/common/reason1.jpg);
	background-position: 100% bottom;
	background-repeat: no-repeat;
}
#banner .btitle {
	display: inline-block;
	margin: 0;
	padding: 0 0 20px 0;
	font-size: 131%;
	font-weight: bold;
	color: #169fcd;
}
/*---------title----------*/
.st1,.st2,.st3 {
	text-align: center;
	margin-bottom: 30px;
}
h2,h3,h4 {
	display: inline;
	position: relative;
	margin-bottom: 0;
	padding:0.5em 1em;
	display: inline-block;
	line-height: 1.6;
	color: #169fcd;
	white-space: nowrap;
	text-align: center;
}
#section-wrap h2:before,h2:after,h3:before,h3:after,h4:before,h4:after{ 
	content:'';
	width: 30px;
	height: 20px;
	position: absolute;
	display: inline-block;
}

#section-wrap h2:before,h3:before,h4:before{
	border-left: solid 1px #169fcd;
	border-top: solid 1px #169fcd;
	top:0;
	left: 0;
}
#section-wrap h2:after,h3:after,h4:after{
	border-right: solid 1px #169fcd;
	border-bottom: solid 1px #169fcd;
	bottom:0;
	right: 0;
}
/*---------title----------*/
section {
	margin: 0;
	padding: 0;
}
#s1 {
	margin: 0;
	padding: 30px;
	background-color: #fff;
}
#s1 .sbody {
	padding: 300px 30px 30px 30px;
	background-image: url(../img/index/motto.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.catchcopy2 {
	font-size: 100%;
	font-weight: bold;
	text-align: center;
}
.catchcopy2 span {
	display: inline-block;
	padding: 3px 6px;
	background: linear-gradient(transparent 60%, rgba(22,159,205,0.2) 40%);
}

#s2 {
	margin: 0;
	padding: 30px 0 0 0;
	min-height: 440px;
	background-color: #f3f3f6;
}
#s2 .sbody {
	padding: 0 30px 440px 30px;
	background-image: url(../img/index/prof.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
#news {
	margin: 0;
	padding: 30px;
	background-color: #fff;
}
#news ul {
	margin: 0;
	padding: 0;
}
#news ul li {
	list-style-type: none;
}
#news span.nd {
	display: block;
	border-top: 1px solid #777;
	padding: 16px 5px;
}
#news span.nt {
	display: block;
	border-top: 1px solid #bbb;
	padding: 16px 5px;
}
#news ul li:last-child {
	border-bottom: 1px solid #777;
}
.nm {
	position: relative;
	margin: 10px 10px 10px auto;
	width: 134px;
	height: 30px;
	text-align: right;
}
.nm a {
	display:block;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	top: 0;
	left: 0;
	background-image:url(../img/index/more.png);
	background-repeat: no-repeat;
	background-position: left center;
}
.nm a:hover {
	text-decoration: none;
	filter: alpha(opacity=8);
	-moz-opacity:0.8;
	opacity:0.8;
}
@media screen and (min-width:480px){
	#header {
		background-position: 60% top;
	}
	#logo {
		width: 210px;
		text-align: center;
	}
	#catchcopy {
		font-size: 161.6%;
	}
	h2,h3,h4 {
		font-size: 131%;
	}
	#s1 {
		position: relative;
		margin: 0;
		padding: 65px 30px 60px 30px;
		background-color: #fff;
	}
	#s2 {
		position: relative;
		margin: 0;
		padding: 0;
	}
	#s2 .sbody {
		padding: 75px 30px 440px 30px;
	}
	#news {
		position: relative;
		margin: 0;
		padding: 65px 30px 60px 30px;
		background-color: #fff;
	}
	.sbody {
		margin: 0 auto;
		max-width: 920px;
		padding: 30px;
	}
	.st1,.st2,.st3 {
		position: absolute;
		top: -33px;
		left: 0;
		right: 0;
		text-align: center;
	}
	.st1 div {
		display: inline-block;
		padding: 16px 20px;
		background-color: #fff;		
	}
	.st2 div {
		display: inline-block;
		padding: 16px 20px;
		background-color: #f3f3f6;		
	}
	.st3 div {
		display: inline-block;
		padding: 16px 20px;
		background-color: #fff;		
	}
	#news ul {
		margin: 0 auto;
		max-width: 920px;
		padding: 0 30px;
	}
	#news ul li {
		display: -webkit-flex;
		display: flex;
	}
	#news span.nd {
		width: 35%;
		margin-right: 1%;
	}
	#news span.nt {
		width: 64%;
	}
	#news ul li:last-child {
		border-bottom: none;
	}
}
@media screen and (min-width:768px){
	#header {
		background-position: center top;
	}
	h1 {
		margin-left: 20px;
		text-align: left;
	}
	#logo {
		width: 246px;
	}
	#catchcopy {
		font-size: 182%;
	}
	#s1 .sbody {
		max-width: 920px;
		margin: 0 auto;
		padding: 300px 30px 30px 30px;
	}
	#s1 .sbody p {
		width: 620px;
		margin: 0 auto;
	}
	.catchcopy2 {
		padding-bottom: 30px;
	}
	#s2 .sbody {
		max-width: 920px;
		margin: 0 auto;
		padding: 110px 30px 90px 30px;
		background-position: left bottom;
		background-size: 425px 471px;
	}
	#s2 .sbody p {
		width: 500px;
		margin: 0 0 0 auto;
		padding: 10px;
		background-color: rgba(243,243,246,0.8);
	}

}
.mp2 {
	font-size: 80%;
	line-height: 1;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
#banner a {
	color: #fff;
}
#banner a:hover {
	color: #169fcd;
}
.banner-button {
	margin-top: 20px;
  display: inline-block;
  width: 180px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  outline: none;
  font-weight: bold;
}
.banner-button::before,
.banner-button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.banner-button,
.banner-button::before,
.banner-button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.banner-button {
  position: relative;
  z-index: 2;
  border: 1px solid #169fcd;
  color: #fff;
  line-height: 39px;
}
.banner-button:hover {
	border-color: #169fcd;
	color: #169fcd;
	text-decoration: none;
}
.banner-button::before,
.banner-button::after {
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #169fcd;
}
.banner-button::before {
  right: 0;
}
.banner-button::after {
  left: 0;
}
.banner-button:hover::before,
.banner-button:hover::after {
  width: 0;
  background-color: #169fcd;
}