@charset "utf-8";
/* CSS Document */

#navi ul.h_menu > li:first-child { border-bottom: solid 2px #e62334;}

/*============================================================================
		mv
============================================================================*/

section.mv {
	width: 100%;
	overflow: hidden;
	position: relative;
	margin: 113px auto 0;
}

section.mv .inner {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
	background: url("../img/bg.jpg") center/contain;
}

section.mv .inner::before {
	content: "";
	background: url("../img/wave.png") left bottom repeat-x;
	width: 100%;
	height: 62px;
	position: absolute;
	bottom: 0;
}

section.mv .inner h2 {
    max-width: 754px;
    width: 90%;
    height: 305px;
    background: url(../img/h2.png) no-repeat center/100%;
    margin: 0 auto;
}

@media screen and (min-width: 751px) {

	section.mv {
		background: url("../img/mv.jpg") no-repeat center;
	}

	section.mv .inner { padding: 60px 0 100px; }

}

@media screen and (min-width: 1201px) {

	section.mv {
		background: url(../img/mv.jpg) no-repeat center bottom/cover;
	}

}

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

	section.mv { margin: 63px auto 0; }
	section.mv .inner { padding: 30px 0 50px; }


}

/*============================================================================
		slider
============================================================================*/

.slider-wrapper {
  overflow: hidden;
}

.bxslider {
  position: relative;
  overflow: visible !important;
}

.bxslider li {
	max-width: 1200px;
	/* width: 30%!important; */
}

/* bxSlider */

.bx-wrapper {
  box-shadow: none;
  border: none;
  margin: 0;
}

.bxslider li a { position: absolute; }


@media screen and (min-width: 1251px) {

	.bxslider {
		left: 50%;
		margin-left: -600px;
	}

	.bxslider li {
		width: 30%!important;
		height: 520px;
		margin-right: 40px;
	}

	.bxslider li a{
		font-size: 16px;
		line-height: 62px;
		max-width: 290px;
		height: 60px;
		border-radius: 30px;
	}

}

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

	.bxslider {
		left: 0;
	}

	.bxslider li a {
		font-size: 1.4vw;
		line-height: 350%;
	}

}

@media screen and (min-width: 751px) {


	.bxslider li a{
		position: absolute;
		text-align: center;
		font-weight: bold;
		bottom: 18%;
		max-width: 290px;
		width: 25%;
		height: 12%;
		border: solid 2px #e62334;
		border-radius: 30px;
	}

	.bxslider li.sl02 a{
		bottom: 18%;
		right: 10.7%;
		color: #e62334;
		border: solid 1px #e62334;
	}

	.bxslider li.sl03 a{
		bottom: 18%;
		left: 14.9%;
		color:#fff;
		background: #e62334;
	}

	.bxslider li.sl04 a{
		bottom: 18%;
		left: 14.9%;
		color:#fff;
		border: solid 1px #fff;
	}

}

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

	.bxslider li a{
		font-size: 0;
		border: none;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
	}

}

/*============================================================================
		section sec 共通
============================================================================*/


.sec h2 {
	font-size: 40px;
  letter-spacing: 4px;
	font-weight: bold;
	color: #e62334;
	margin-bottom: 40px;
  line-height: 120%;
}

section.sec .inner {
	width: calc(100% - 40px);
	margin: 0 auto;
	overflow: hidden;
}

section.sec .inner { max-width: 1100px; }

section.sec .inner ul em {
	color: #ffffff;
	background-color: #e62334;
	padding: 3px 20px;
	text-align: center;
	display: inline-block;
	font-weight: bold;
	border-radius: 3px;
	margin-left: 20px;
	font-size: 14px;
	letter-spacing: 0.1em;
}

section.sec .inner ul .img_a {
	display: block;
	width: 100%;
	height: 180px;
	overflow: hidden;
	border: solid 1px #e62334;
	box-sizing: border-box;
	height: 0;
	padding-top: 68%;
	position: relative;
	margin-bottom: 16px;
	cursor:pointer;
}

section.sec .inner ul .img_a img {
	position: absolute;
	top: 0;
}

section.sec .inner ul .text_a {
	color: #000000;
	text-align: justify;
	font-weight: bold;
	line-height: 1.8;
	font-size: 16px;
	display: block;
	margin: 10px auto 20px;
	cursor:pointer;
}

.sec a.btn {
	height: 50px;
	line-height: 50px;
	text-align: center;
	border: solid 1px #e62334;
	box-sizing: border-box;
	position: relative;
}

.sec a.btn::after {
	content: "";
	width: 6px;
	height: 12px;
	position: absolute;
	top: 50%;
	right: 20px;
	margin-top: -6px;
}

@media screen and (min-width: 901px) {


}

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

	.sec h2 {
		letter-spacing: 2px;
	}

}

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

	.sec h2 { font-size: 26px; }
	section.sec .inner ul em{ margin-left: 0; }

}

/*============================================================================
		section sec01
============================================================================*/

.sec01 { padding: 60px 0 120px;}
.sec01 h2 { text-align: center;}
section.sec01{ padding-bottom: 90px; }

.sec01 .inner ul {
	overflow: hidden;
	margin-bottom: 60px;
	position: relative;
	font-size: 0;
}

.sec01 .inner > ul > li{
	font-size:16px;
	line-height: 20px;
	display: inline-block;
	box-sizing: border-box;
	overflow: hidden;
	vertical-align: top;
}

.sec01 .inner ul li .pict {
	display: block;
	width: 100%;
	/* height: 180px; */
	overflow: hidden;
	border: solid 1px #e62334;
	box-sizing: border-box;
	height: 0;
	padding-top: 68%;
	position: relative;
}

.sec01 .inner ul li .pict img {
	position: absolute;
	top: 0;
	transform: scale(1.3,1.3);
}

.sec01 .inner ul li .pict span.bl{
		max-width: 172px;
    width: 80%;
    height: 100%;
    display: block;
    background: url(../img/noimage.jpg) #fff center/100% no-repeat;
    margin: 0 auto;
}

.sec01 .inner ul li .ttl{
	padding: 20px 0 30px;
	min-height: 75px;
	overflow: hidden;
}

.sec01 .inner > ul::after {
	content: "";
	height: 3px;
	background-image: linear-gradient(to right, #e62334, #e62334 3px, transparent 3px, transparent 2px);
	background-size: 9px 3px;
	background-repeat: repeat-x;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.sec01 .inner ul li .day {
	margin-bottom: 12px;
}

.sec01 .inner ul li .day li {
	float: left;
	font-size: 16px;
	line-height: 26px;
}

.sec01 .inner ul li .ttl a {
	line-height:20px;
	display: table;
	font-weight: bold;
	line-height: 150%;
}

.sec01 .inner ul li .ttl .new {
	width: 77px;
	height: 25px;
	font-size: 14px;
	margin: 0 0 0 20px;
	text-align: center;
	color: #fff;
	background-color: #e62334;
	border-radius: 3px;
}

/* .sec01 ul li .ttl span.news { background:url(../img/common/icon_news.jpg) no-repeat;}
.sec01 ul li .ttl span.blog { background:url(../img/common/icon_blog.jpg) no-repeat;}
.sec01 ul li .ttl span.health { background:url(../img/common/icon_health.jpg) no-repeat;}
.sec01 ul li .ttl span.campaign { background:url(../img/common/icon_campaign.jpg) no-repeat;}
.sec01 ul li .ttl span.lesson { background:url(../img/common/icon_lesson.jpg) no-repeat;} */

.sec01 ul li .ttl a .new {
	background:url(../img/common/icon_new.png) no-repeat;
	width: 54px;
	height: 20px;
	float: right;
	margin-left: 5px;
}

.sec01 a.btn {
	display: table;
	margin: 0 auto;
	width: 240px;
	font-size: 16px;
}

.sec01 a.btn::after { background: url(../img/common/ico_arrow.jpg) center/cover no-repeat; }


.sec01 .inner01 > a:hover { opacity:0.6;}

@media screen and (min-width: 901px) {

	.sec01 .inner > ul > li{width: 23.7%; }
	.sec01 .inner > ul > li:nth-child(n+2){	margin-left: 1.7%; }


}

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

	.sec01 .inner ul {
		max-width: 550px;
		margin: 0 auto 60px;
	}
	.sec01 .inner > ul > li{width: 47%; }
	.sec01 .inner > ul > li:nth-child(even){ margin-left: 6%; }



	.sec01 .inner ul li .ttl{
		padding: 10px 0 30px;
		min-height: 65px;
	}

	/* .sec01 .inner > ul::after {
		content: "";
		height: 3px;
		background-image: linear-gradient(to right, #e62334, #e62334 3px, transparent 3px, transparent 2px);
		background-size: 9px 3px;
		background-repeat: repeat-x;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	} */

	.sec01 .inner ul li .day {
		margin-bottom: 12px;
	}

	.sec01 .inner ul li .day li {
		font-size: 14px;
		line-height: 24px;
	}

	.sec01 .inner ul li .ttl a {
		line-height:20px;
		line-height: 150%;
	}

	.sec01 .inner ul li .ttl .new {
		width: 40px;
		height: 18px;
		line-height: 18px;
		font-size: 11px;
		margin: 0 0 0 10px;
	}

	.sec01 .inner ul li .pict img {
		/*top: -10%;*/
	}



}

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

}


/*============================================================================
		section sec02
============================================================================*/

.sec02 {
	padding: 60px 0 120px;
	background: url(../img/bg.jpg) center/cover ;
	position: relative;
}

section.sec02 .inner {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.sec02 h2 { margin-bottom: 20px;}

section.sec02 .txt a { max-width: 480px;}

.sec02 a.btn {
	display: block;
	width: 240px;
	background-color: #e62334;
	color: #fff;
	margin-top: 30px;
}
.sec02 a.btn::after { background: url(../img/common/ico_red.jpg) center/cover no-repeat; }


@media screen and (min-width: 901px) {


	section.sec02 .inner li {	float: left;}

	section.sec02 .inner li:first-child {
		max-width: 188px;
		width: 16%;
		margin-right: 3.5%;
		margin-top: 20px;
	}

	section.sec02 .inner li:last-child {
		max-width: 363px;
		width: 30.5%;
	}
	section.sec02 .txt {
		max-width: 480px;
		width: 45%;
		margin-right: 5%;
		margin-top: 60px;
	}

	section.sec02 .txt a {
		max-width: 480px;
	}

}

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

	.sec02 h2 { text-align: center;}

	section.sec02 .txt {
		max-width: 670px;
		width: 100%;
		margin:0 auto 50px;
	}

	.sec02 .txt p{
		display: table;
		margin: 0 auto;
	}

	section.sec02 .inner li:last-child {
		max-width: 670px;
		width: 100%;
		margin: 0 auto;
	}

	.sec02 a.btn {
		display: block;
		margin: 30px auto 0;
	}

}

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

	.sec02 { padding: 60px 0 60px;	}

}

/*============================================================================
		section sec03
============================================================================*/

.sec03 {
	padding: 120px 0;
	position: relative;
}

.sec03 h2 {
	margin-bottom: 30px;
	text-align: center;
}

section.sec03 .inner {
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
}

section.sec03 .inner .txt .ttl{
	max-width: 480px;
	margin: 0 auto 30px;
	display: table;
}

section.sec03 .inner .txt ul li {
	float: left;
	width: 32%;
}

@media screen and (min-width: 901px) {

	section.sec03 .inner .pict{
		max-width: 430px;
		width: 40%;
		float: left;
	}

	section.sec03 .inner .txt{
		max-width: 580px;
		width: 55%;
		float: right;
		margin-top: 45px;
	}

}

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

	.sec03 { padding: 80px 0; }

	section.sec03 .inner {
			max-width: 670px;
	}

}

@media screen and (min-width: 751px) {

	section.sec03 .inner .txt ul li:not(:last-child) { margin-right: 2%;}

}

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

	.sec03 { padding: 60px 0; }

	section.sec03 .inner .txt ul {
		/* width: calc(100% - 5%); */
		margin: auto ;
	}

	section.sec03 .inner .txt ul li {
		max-width: 310px;
		width: 47.2%;
		float: none;
	}
	section.sec03 .inner .txt ul li:first-child { margin-right: 5%;}
	section.sec03 .inner .txt ul li:not(:last-child) {
		margin-bottom: 2%;
		float: left;
	}
	section.sec03 .inner .txt ul li:last-child {
		display: table;
		margin: 0 auto;
	}


}


/*============================================================================
		section sec04
============================================================================*/

.sec04 {
	padding: 20px 0 120px;
	position: relative;
}

.sec04 h2 {
	margin-bottom: 35px;
	text-align: center;
}

section.sec04 .inner {
	max-width: 1190px;
	margin: 0 auto;
	position: relative;
}

section.sec04 .inner ul li {
	border: solid 1px #e62334;
	/* box-sizing: border-box; */
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

section.sec04 .inner ul li:hover { opacity: 0.7;}

section.sec04 .inner ul li h3 {
	font-size: 20px;
	color: #e62334;
	text-align: center;
	font-weight: bold;
	line-height: 50px;
}

section.sec04 .inner ul li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 901px) {

	section.sec04 .inner ul li {
		float: left;
		width: 32.6%;
		max-width: 388px;
	}

	section.sec04 .inner ul li:not(:last-child) {	margin-right: 0.7%; }

}

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

	section.sec04 .inner ul li {
		width: 100%;
		max-width: 448px;
		margin: auto;
		box-sizing: border-box;
	}

	section.sec04 .inner ul li:not(:last-child) {	margin-bottom: 3%; }

}

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

	.sec04 { padding: 0px 0 60px; }
	.sec04 h2 { margin-bottom: 30px; }

	section.sec04 .inner ul li h3 {
    font-size: 16px;
    line-height: 40px;
	}

}