@charset "UTF-8";
/* mainArea
================================================== */
#mainArea {
	padding: 80px 0 60px;
}
@media screen and (max-width: 639px) {
	#mainArea {
		padding: 10% 0 5%;
	}
}
#mainArea figure {
	width: 65%;
	margin: 0 auto;
}
@media screen and (max-width: 639px) {
	#mainArea figure {
		width: 85%;
	}
}
#mainArea p {
	text-align: center;
	font-size: 160%;
	font-weight: 600;
	line-height: 160%;
	padding-top: 60px;
}
@media screen and (max-width: 1200px) {
	#mainArea p {
		font-size: 2.2vw;
	}
}
@media screen and (max-width: 900px) {
	#mainArea p {
		font-size: 130%;
	}
}
@media screen and (max-width: 639px) {
	#mainArea p {
		font-size: 4.5vw;
		padding: 5% 5% 5%;
		text-align: left;
		width: 90%;
		margin: 60% 0 0;
		background: url("/images/top/mainBg.png") repeat;
		border-radius: 3px;
	}
	#mainArea p br {
		display: none;
	}
}
/* slideArea
================================================== */
#slideArea {
	position: absolute;
	z-index: -1;
	width: 100%;
	min-width: 900px;
	top: 100px;
	left: 0;
}
@media screen and (max-width: 639px) {
	#slideArea {
		min-width: inherit;
		top: 200px;
	}
}
@media screen and (max-width: 500px) {
	#slideArea {
		top: 180px;
	}
}
@media screen and (max-width: 460px) {
	#slideArea {
		top: 160px;
	}
}
@media screen and (max-width: 400px) {
	#slideArea {
		top: 150px;
	}
}
@media screen and (max-width: 330px) {
	#slideArea {
		top: 130px;
	}
}
/* slideBox
================================================== */
#slideBox {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
}
@media screen and (max-width: 639px) {
	#slideBox {
		position: relative;
	}
}
/* ------ スライダー ------ */
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.25);
	}
}
.swiper-slide-active .slide-img, .swiper-slide-duplicate-active .slide-img, .swiper-slide-prev .slide-img {
	animation: zoomUp 10s linear 0s 1 normal both;
}
//imgタグだと下に隙間ができるのでblockに。
.slide-img img {
	display: block;
}
/* lrArea
================================================== */
.lrArea {
	padding-top: 100px;
}
@media screen and (max-width: 639px) {
	.lrArea {
		padding-top: 0;
	}
}
.lrArea .fRight {
	float: right;
	width: 55%;
}
.lrArea .fLeft {
	float: left;
	width: 40%;
}
@media screen and (max-width: 639px) {
	.lrArea .fRight {
		float: none;
		width: 100%;
		padding-bottom: 20px;
	}
	.lrArea .fLeft {
		float: none;
		width: 70%;
		margin: 0 auto;
	}
}
/* lrArea02
================================================== */
.lrArea02 {
	padding-top: 100px;
}
@media screen and (max-width: 639px) {
	.lrArea02 {
		padding-top: 0;
	}
}
.lrArea02 .fLeft {
	float: left;
	width: 55%;
}
.lrArea02 .fRight {
	float: right;
	width: 40%;
}
@media screen and (max-width: 639px) {
	.lrArea02 .fLeft {
		float: none;
		width: 100%;
		padding-bottom: 20px;
	}
	.lrArea02 .fRight {
		float: none;
		width: 70%;
		margin: 0 auto;
	}
}
/* pageTit
================================================== */
.pageTit {
	padding: 40px 0;
}
.pageTit h1, .pageTit h2 {
	margin: 0;
	font-size: 280%;
	line-height: 100%;
	color: #e9607c;
	font-weight: 200;
}
@media screen and (max-width: 639px) {
	.pageTit {
		padding: 60px 0 30px;
	}
	.pageTit h1, .pageTit h2 {
		font-size: 130%;
		font-weight: 600;
	}
}
/* txtBox
================================================== */
.txtBox p {
	font-size: 130%;
	line-height: 180%;
	padding-bottom: 1em;
	text-align: justify;
}
.txtBox p.sTxt {
	font-size: 100%;
}
@media screen and (max-width: 1200px) {
	.txtBox p {
		font-size: 1.7vw;
	}
	.txtBox p.sTxt {
		font-size: 1.3vw;
	}
}
@media screen and (max-width: 900px) {
	.txtBox p {
		font-size: 100%;
	}
	.txtBox p.sTxt {
		font-size: 80%;
	}
}
/* wakiArea
================================================== */
.wakiArea {
	padding-bottom: 30px;
}
.wakiArea .fLeft {
	width: 380px;
}
.wakiArea .fRight {
	width: 540px;
}
@media screen and (max-width: 639px) {
	.wakiArea {
		padding: 5%;
		margin-bottom: 5%;
		background-color: #efefef;
		border-radius: 3px;
	}
	.txtBox .fLeft {
		float: none;
		width: 100%;
	}
	.txtBox .fRight {
		float: none;
		width: 100%;
		padding-bottom: 20px;
	}
}
/* wakiList
================================================== */
.wakiList {}
@media screen and (max-width: 639px) {
	.wakiList {
		width: 90%;
		margin: 0 auto;
	}
}
.wakiList .wakiListBox {
	float: left;
	width: 30%;
	margin-right: 5%;
}
.wakiList .wakiListBox:last-child {
	margin: 0;
}
@media screen and (max-width: 600px) {
	.wakiList .wakiListBox {
		float: none;
		width: 100%;
		margin: 0;
	}
}
.wakiList .wakiListBox h3 img {
	width: 100%;
}
.wakiList dl {
	padding: 0 0 10px;
	font-weight: bold;
}
.wakiList dt {
	padding: 0 0 5px;
}
.wakiList dd {
	font-size: 80%;
}
@media screen and (max-width: 639px) {
	.wakiList .wakiListBox {
		float: none;
		width: 100%;
	}
	.wakiList .wakiListBox:last-child {
		float: none;
		width: 100%;
	}
}
/* infoArea
================================================== */
#infoArea {
	background-color: #EBF4EF;
	border-radius: 3px;
}
/* infoBlock */
#infoBlock {
	width: 90% !important;
	max-width: 960px;
	margin: 0 auto;
	padding: 30px 0 15px;
}
#infoBlock .fLeft {
	width: 15%;
}
#infoBlock .fRight {
	width: 80%;
}
@media screen and (max-width: 639px) {
	#infoBlock .fLeft {
		float: none;
		width: 100%;
	}
	#infoBlock .fRight {
		float: none;
		width: 100%;
	}
}
#infoBlock .fLeft h3 {
	padding: 10px 0 15px;
	text-align: center;
	font-weight: bold;
}
#infoBlock .fLeft figure {
	width: 70%;
	margin: 0 auto;
	padding-bottom: 15px;
}
@media screen and (max-width: 639px) {
	#infoBlock .fLeft h3 {
		font-size: 110%;
		font-size: 700;
		letter-spacing: 0.1em;
	}
	#infoBlock .fLeft figure {
		width: 30%;
		max-width: 100px;
		margin: 0 auto;
		padding-bottom: 15px;
	}
}
#infoBlock .infoBox {
	padding: 0 0 15px 0;
}
#infoBlock .infoBox:last-child {
	padding: 0;
	border-bottom: none;
}
#infoBlock .infoBox .infoDay {
	float: left;
	width: 90px;
	font-size: 60%;
	font-weight: 500;
}
@media screen and (max-width: 639px) {
	#infoBlock .infoBox .infoDay {
		float: none;
		width: 100%;
		line-height: 100%;
		padding-bottom: 5px
	}
}
#infoBlock .infoBox p {
	font-size: 90%;
	line-height: 140%;
	font-weight: bold;
}
#infoBlock .infoBox p a {
	color: #222;
	/*線の基点とするためrelativeを指定*/
	position: relative;
	/*リンクの形状*/
	padding: 0 0 15px;
	text-decoration: none;
	outline: none;
	display: block;
	transition: .3s;
}
#infoBlock .infoBox p a:hover {
	color: #e9607c;
	transition: .3s;
}
/*線の設定*/
#infoBlock .infoBox p a::before, #infoBlock .infoBox p a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	/*線の形状*/
	background: #ddd;
	width: 100%;
	height: 1px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}
/*hover時に伸びる線の形状*/
#infoBlock .infoBox p a::after {
	width: 0;
	background: #e9607c;
}
/*hover時に100%に伸びる*/
#infoBlock .infoBox p a:hover::after {
	width: 100%;
}
/* #infoArea　centerBtnMore */
#infoArea .forPc {
	display: flex !important;
}
#infoArea .forMobile {
	display: none !important;
}
@media screen and (max-width: 639px) {
	#infoArea .forPc {
		display: none !important;
	}
	#infoArea .forMobile {
		display: flex !important;
	}
}

/*-----------------------------------------------------	*/
/*	for - 600px					*/
/*-----------------------------------------------------	*/
@media screen and (max-width: 639px) {
	.pageTit h1 {
		font-size: 130%;
		font-weight: bold;
	}
	.txtBox .fLeft {
		float: none;
		width: 100%;
	}
	.txtBox .fRight {
		float: none;
		width: 100%;
		padding-bottom: 20px;
	}
	.txtBox h2 {
		font-size: 100%;
	}
	.txtBox ol li {
		font-size: 120%;
		line-height: 160%;
		padding: 20px 0;
	}
	.txtBox ol li br {
		display: block;
	}
	.txtBox ul li {
		font-size: 80%;
	}
	.txtBox ul li br {
		display: block;
	}
	.txtBox p.txtPoint {
		font-size: 100%;
		line-height: 160%;
		padding: 20px 0;
	}
	.txtBox img {
		width: 100%;
	}
	/* ------ infoBan ------ */
	.infoBan {
		width: 100%;
		margin: 0;
	}
}