@charset "UTF-8";


/*高さ設定*/

/*パディング系*/

.h10{
	padding-top: 10px;
}/*高さ10px*/

.h20{
	padding-top: 20px;
}/*高さ20px*/

.h30{
	padding-top: 30px;
}/*高さ30px*/

.h40{
	padding-top: 30px;
}/*高さ40px*/

.h50{
	padding-top: 40px;
}/*高さ50px*/

.h60{
	padding-top: 60px;
}/*高さ60px*/

/*左パディング系*/

.hl10{
	padding-left: 10px;
}/*左10px*/

.hl20{
	padding-left: 20px;
}/*左20px*/

.hl30{
	padding-left: 30px;
}/*左30px*/

.hl40{
	padding-left: 30px;
}/*左40px*/

.hl50{
	padding-left: 40px;
}/*左50px*/

.hl60{
	padding-left: 60px;
}/*左60px*/

/*右パディング系*/

.hre10{
	padding-right: 10px;
}/*右10px*/

.hre20{
	padding-right: 20px;
}/*右20px*/

.hre30{
	padding-right: 30px;
}/*右30px*/

.hre40{
	padding-right: 30px;
}/*右40px*/

.hre50{
	padding-right: 40px;
}/*右50px*/

.hre60{
	padding-right: 60px;
}/*右60px*/

/*下パディング系*/

.hbo10{
	padding-bottom: 10px;
}/*下10px*/

.hbo20{
	padding-bottom: 20px;
}/*下20px*/

.hbo30{
	padding-bottom: 30px;
}/*下30px*/

.hbo40{
	padding-bottom: 30px;
}/*下40px*/

.hbo50{
	padding-bottom: 40px;
}/*下50px*/

.hbo60{
	padding-bottom: 60px;
}/*下60px*/


/*上マージン系*/
.mh10{
	margin-top: 10px;
}/*高さ10px*/

.mh20{
	margin-top: 20px;
}/*高さ20px*/

.mh30{
	margin-top: 30px;
}/*高さ30px*/

.mh40{
	margin-top: 40px;
}/*高さ40px*/

.mh50{
	margin-top: 50px;
}/*高さ50px*/

.mh60{
	margin-top: 60px;
}/*高さ60px*/

/*右マージン系*/
.mr10{
	margin-right: 10px;
}/*右10px*/

.mr20{
	margin-right: 20px;
}/*右20px*/

.mr30{
	margin-right: 30px;
}/*右30px*/

.mr40{
	margin-right: 40px;
}/*右40px*/

.mr50{
	margin-right: 50px;
}/*右50px*/

.mr60{
	margin-right: 60px;
}/*右60px*/

/*左マージン系*/
.ml10{
	margin-left: 10px;
}/*左10px*/

.ml20{
	margin-left: 20px;
}/*左20px*/

.ml30{
	margin-left: 30px;
}/*左30px*/

.ml40{
	margin-left: 40px;
}/*左40px*/

.ml50{
	margin-left: 50px;
}/*左50px*/

.ml60{
	margin-left: 60px;
}/*左60px*/

/*下マージン系*/
.mbo10{
	margin-bottom: 10px;
}/*下10px*/

.mbo20{
	margin-bottom: 20px;
}/*下20px*/

.mbo30{
	margin-bottom: 30px;
}/*下30px*/

.mbo40{
	margin-bottom: 40px;
}/*下40px*/

.mbo50{
	margin-bottom: 50px;
}/*下50px*/

.mbo60{ 
	margin-bottom: 60px;
}/*下60px*/

/*マイナスマージン*/

.mh20{ 
	margin-top: -20px;
}/*上マイナス20px*/

.mh140{ 
	margin-top: -80px;
}/*上マイナス100px*/


/*文字セット*/

p {
    line-height: 1.8em;
	margin: 0;
	padding: 0;
	text-align: left;
}

h2 {
  font-size: 40px;
  position: relative;
  padding: 1.5rem;
  text-align: center;
  color: #24AD89;
	margin-top: 100px;
}

h2::before {
  position: absolute;
  top: -6px;
  left: calc(50% - 30px);
  width: 60px;
  height: 3px;
  content: '';
  border-radius: 3px;
  background: #24AD89;
}

h2::after{
	position: absolute;
	bottom: -4px;
	content: attr(title);
	font-size: 18px;
	font-weight:normal;
	color:#999;
	left: calc(50% - 40px);
}



/*h3 {
	font-size: 24px;
	font-weight:normal;
	text-align:left;
	padding-top: 1em;
	padding-bottom: 0.2em;
	color:#000000;
	clear: both;
	border-bottom:2px dotted #000000;
}*/

h3 {
  color: #364e96;/*文字色*/
  border: solid 2px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  text-align: center;
}

h4 {
  border-bottom: solid 3px #cce4ff;
  position: relative;
	font-size: 20px;
	margin-top: 60px;
}

h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}

h4>span {
	background: #364e96;
	color: #FFFFFF;
	width: 120px;
	height: auto;
	padding: 4px 20px 4px;
	display: block;
	text-align: center;
	margin-bottom: 10px;
}

/*リスト改行行間設定*/
.line_hi{
	line-height: 1.7em;
}


/*太字*/

.bold_text{
	font-weight: bold;
}

/*キャプション*/
.caption{
	margin: 0;
	padding: 0.2em 0;
	line-height: 1.3em;
	font-size: .8em;
	text-align: center;
}

/*文字センター*/
.text_center{
	text-align: center;
	margin: 0 auto;
}

/*文字ライト*/
.text_right{
	text-align:right;
}

/*文字レフト*/
.text_left{
	text-align:left;
}



/*ノーマルリンク設定*/
a.n_link{
	width: auto;
	height: auto;
	padding: 0.5px 3px;
	color: #FFF;
	background: #F40F13;
	font-size: 14px;
	border-radius: 10px;
	display:inline;
	margin-left: 10px;
}

a.n_link:hover {
  opacity: 0.5;
}

.text_area{
	width: 100%;
	height: auto;
	padding-left: 20px;
	margin-top: 0;
	padding-top: 0;
}

.mhm40{ 
	margin-top: -40px;
}/*上マイナス60px*/


@media screen and (max-width : 720px ){
	/*マイナスマージン*/

.mh20{ 
	margin-top: 0;
}/*上マイナス20px*/

.mhm40{ 
	margin-top: 0;
}/*上マイナス60px*/

	.mh140{ 
	margin-top: -140px;
}/*上マイナス100px*/
	
.text_area{
	width: 100%;
	height: auto;
	padding-left: 0;
	margin-top: 0;
	padding-top: 40px;
}

/*ノーマルリンク設定*/
a.n_link{
	max-width: 400px;
	height: auto;
	padding: 0.5px 3px;
	color: #FFF;
	background: #F40F13;
	font-size: 14px;
	border-radius: 10px;
	display:block;
	margin: 20px auto 0;
	text-align: center;
}

a.n_link:hover {
  opacity: 0.5;
}

}

@media screen and (max-width : 986px ){
	
/*ノーマルリンク設定*/
a.n_link{
	max-width: 400px;
	height: auto;
	padding: 0.5px 3px;
	color: #FFF;
	background: #F40F13;
	font-size: 14px;
	border-radius: 10px;
	display:block;
	margin: 20px auto 0;
	text-align: center;
}

a.n_link:hover {
  opacity: 0.5;
}
}

.slide {
	width: 100vw;
	height: 600px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -999;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 40s;
	animation-iteration-count: infinite;
}

.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 15s ease infinite;
}


.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 3s }
.slide img:nth-of-type(3) { animation-delay: 6s }
.slide img:nth-of-type(4) { animation-delay: 9s }
.slide img:nth-of-type(5) { animation-delay: 12s }
	
	@keyframes slideAnime{
   0% { opacity: 0 }
   5% { opacity: 0 }
  20% { opacity: 1 }
  60% { opacity: 0 }
 100% { opacity: 0 }
}