@charset "utf-8";

/*------------------------------ */
/*--- index共通部分 -------------- */
/*------------------------------ */

#contents01 h2,
#contents02 h2 {
    font-size: 4.0rem;
    font-weight: 600;
    /*color: #ab3d3d;*/
	color: #444;
	text-align: center;
    margin-bottom: 25px;
}
#contents01 h2 span,
#contents02 h2 span {
	display: block;
    font-size: 2.0rem;
    font-weight: 600;
	color: #ccc;
}
#contents01 h2,
#contents01 h2 span {
	color: #fff;
}
#contents01 h2::after,
#contents02 h2::after {
 	content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2.6rem;
	display: block;
}
@media only screen and (max-width:999px) {
	#contents01 h2,
	#contents02 h2 {
		font-size: 3.0rem;
	}
	#contents01 h2 span,
	#contents02 h2 span {
		font-size: 1.6rem;
	}
	#contents01 h2::after,
	#contents02 h2::after {
		font-size: 2.2rem;
	}
}
/*------------------------------ */
/*--- topContents -------------- */
/*------------------------------ */

.mainimage img { 
	width: 100%;
	height: auto;
	/*height: calc( 100vh - 100px );*/
    display: block!important;
}
.slick-slide img { /* 画像下の隙間削除 */
	vertical-align: bottom;
}
.mainTxet {
	display: flex;
    flex-direction: column;
    justify-content: center;
    width: 45%;
    height: 100%;
    line-height: 1.0;
    padding: 0 0 0 7.5%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 6rem;
    font-weight: 600;
    color: #fff;
    transition: 1s all;
}
.mainTxet span {
	display: block;
    font-size: 1.8rem;
    line-height: 1.5;
	transition: 1s all;
}
@media only screen and (max-width: 1350px) {
	.mainTxet {
		width: 45%;
		padding: 0 0 0 7.5%;
		font-size: 4.25rem;
		transition: 1s all;
	}
	.mainTxet span {
    	font-size: 1.4rem;
		transition: 1s all;
	}
}
.slick-prev, .slick-next {
    width: 60px!important;
    height: 60px!important;
	background: #333!important;
	z-index: 1!important;
}
.slick-prev { left: 0!important; }
.slick-next { right: 0!important; }

.slick-prev:before, .slick-next:before {
	font-family: "Font Awesome 5 Free"!important;
    font-weight: 900!important;
    font-size: 20px;
    line-height: 1;
    opacity: 1!important;
    color: #fff;
}
.slick-prev:before { content: "\f053"!important; }
.slick-next:before { content: "\f054"!important; }

@media only screen and (max-width:999px) {
	.mainTxet {
		width: 100%;
		height: 50%;
		line-height: 1.0;
		padding: 15px 25px;
		font-size: 3.2rem;
	}
	.mainTxet span {
		font-size: 1.4rem;
		line-height: 1.7;
		transition: 1s all;
		order: 1;
		border-top: solid 1px #fff;
		padding: 10px 0;
		margin-top: 10px;
	}
	.slick-dots { bottom: 10px!important; }
	.slick-dotted.slick-slider { margin-bottom: 0px!important; }
}
/*------------------------------ */
/*--- contents01 --------------- */
/*------------------------------ */

#contents01 {
	padding: 75px 0;
	background: #ab3d3d;
}
#contents01 .indexBox3 {
	display: flex;
	padding: 0 25px;
}
#contents01 .indexBox3 > div {
	width: calc(( 100% - 150px ) / 3 );
    margin: 0 25px;
    border-radius: 10px;
    text-align: center;
    /*background: #62bbc1;*/
	/*background: #ab3d3d;*/
	background: #f5f5f5;
	color: #ab3d3d;
    position: relative;
    overflow: hidden;
}
#contents01 .indexBox3 .popular_no {
	display: inline-block;
    line-height: 1.0;
    font-size: 5rem;
    font-weight: 600;
    text-align: center;
    padding: 50px 0 25px;
    margin: 0 auto 25px;
    border-bottom: solid 3px #ab3d3d;
}
#contents01 .indexBox3 p {
    margin-bottom: 35px!important;
    font-size: 2.2rem;
    font-weight: 600;
}
#contents01 .indexBox3 > div img {
	display: block;
	width: 100%;
}
@media only screen and (max-width:999px) { 
	#contents01 {
		padding: 50px 0 25px;
	}
	#contents01 .indexBox3 {
		display: block;
		padding: 0;
	}
	#contents01 .indexBox3 > div {
		width: 100%;
		margin: 0 0 15px 0;
	}
	#contents01 .indexBox3 > div:last-child { margin: 0;	}
	#contents01 .indexBox3 .popular_no {
		display: inline-block;
		line-height: 1.0;
		font-size: 5rem;
		font-weight: 600;
		text-align: center;
		padding: 50px 0 25px;
		margin: 0 auto 25px;
	}
	#contents01 .indexBox3 p {
		margin-bottom: 35px!important;
		font-size: 2.2rem;
		font-weight: 600;
	}
}
/*------------------------------ */
/*--- contents02 --------------- */
/*------------------------------ */

#contents02 {
    padding: 75px 0 0;
}
#contents02 .indexBox4 {
	display: flex;
	flex-wrap: wrap;
	padding: 50px 5px;
    /*background: #973232;*/
	background: #444;
}
#contents02 .indexBox4 > div {
	width: calc(( 100% - 15px )  / 4 );
	margin: 0 5px 0 0;
	position: relative;
	overflow: hidden;
}
#contents02 .indexBox4 > div:last-child { margin-right: 0; }
/*#contents02 .indexBox4 > div:nth-of-type(2n) { margin-right: 0; }
#contents02 .indexBox4 > div:nth-last-of-type(-n+X) { margin-bottom: 0; }*/

/*#contents02 .indexBox4 > div::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: rgba(0, 0, 0, 0.1);
	position: absolute;
	top: 0;
	left: 0;
}
#contents02 .indexBox4 > div:hover::before {
	background: rgba(0, 0, 0, 0);
	transition: 1s all;
}*/
#contents02 .indexBox4 > div img {
	display: block;
	width: 100%;
	transition: 1s all;
	min-height: 500px;
    object-fit: cover;
}
#contents02 .indexBox4 > div:hover img {
	display: block;
	width: 100%;
	transform: scale(1.1);
	transition: 1s all;
}
.service_text {
	width: 100%;
	color: #fff;
	background: #ab3d3d;
	/*background: linear-gradient(0deg, #333, transparent);*/
	position: absolute;
	left: 0;
    transition: 1s all;
}
#contents02 .indexBox4 > div:hover .service_text {
    bottom: 0!important;
	transition: 1s all;
}
.service_text h3 {
	display: flex;
	align-items: center;
	padding: 15px 25px;
	font-size: 2.4rem; 
    font-weight: 600;
    letter-spacing: 0.25rem;
}
.service_text h3::after {
	content: "\f13a";
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.6rem;
    margin: 2px 0 0 15px;
}
.service_text p {
	padding: 0 25px 15px;
	margin: 0!important;
}
@media only screen and (max-width:999px) {
	#contents02 {
		padding: 50px 0 0;
	}
	#contents02 .indexBox4 {
		padding: 50px 5px;
		background: #444;
	}
	#contents02 .indexBox4 > div {
		width: 100% ;
		margin: 0 0 5px 0;
		position: relative;
		overflow: hidden;
	}
	#contents02 .indexBox4 > div:last-child { margin: 0; }
	.service_text {
		width: 100%;
		color: #fff;
		background: #ab3d3d;
		/*background: linear-gradient(0deg, #333, transparent);*/
		position: absolute;
		left: 0;
		transition: 1s all;
	}
	#contents02 .indexBox4 > div:hover .service_text {
		bottom: 0!important;
		transition: 1s all;
	}
	.service_text h3 {
		padding: 15px;
		font-size: 2.0rem; 
	}
	.service_text h3::after {
		font-size: 1.4rem;
		margin: 2px 0 0 15px;
	}
	.service_text p {
		padding: 0 15px 15px;
	}
}
/*------------------------------ */
/*--- contents03 --------------- */
/*------------------------------ */

#contents03 {
	padding: 50px 0;
	background-color: #fff;
    background-image: linear-gradient(-90deg, #f5f5f5 10%, transparent 10%), linear-gradient(#f5f5f5 10%, transparent 10%);
    background-size: 10px 10px;
}
/*#contents03 .container {
	min-width: 100%;
	max-width: 100%;
	width: 100%;
	padding: 10px 0;
	background: #f5f5f5;
}*/
#contents03 h2 {
	padding: 0 0 3px 25px;
    margin-bottom: 25px;
	/*color: #ab3d3d;
    border-left: solid 5px #ab3d3d;*/
	color: #444;
    border-left: solid 5px #444;
	font-size: 3.0rem;
    font-weight: 600;
}
#contents03 h2 span {
	display: block;
	font-size: 2.0rem;
}
ol.index_flow {
	display: flex;
    /*width: 900px;*/
	min-width: 1000px;
	max-width: 1115px;
    margin: 0 auto;
	position: relative;
}
ol.index_flow li {
    width: calc(( 100% - 30px ) / 4 );
    margin: 0 10px 0 0;
    padding: 54.5px 0px 54.5px 25px;
    text-align: center;
    font-weight: 600;
	color: #fff;
    position: relative;
}
/*ol.index_flow li:nth-of-type(1) > h2 { 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
	margin: 0;
    font-size: 2.4rem;
}
ol.index_flow li:nth-of-type(1) > h2::after { display: none; }*/
ol.index_flow li:last-child { margin: 0; }
ol.index_flow li:nth-of-type(1) { background: #ab3d3d; }
ol.index_flow li:nth-of-type(2) { background: #e96b2e; }
ol.index_flow li:nth-of-type(3) { background: #f39c1a; }
ol.index_flow li:nth-of-type(4) { background: #f1b81a; }

ol.index_flow::before,
ol.index_flow li::before,
ol.index_flow li::after {
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-top: 150px solid transparent;
    border-bottom: 150px solid transparent;
    position: absolute;
    top: 0;
    z-index: 1;
}
ol.index_flow::before {
	border-left: 25px solid #f5f5f5;
    left: 0;
	display: none;
}
ol.index_flow li::before {
    border-left: 25px solid #fff;
    right: -35px;
}
ol.index_flow li::after { right: -25px; }
ol.index_flow li:nth-of-type(1)::after { border-left: 25px solid #ab3d3d; }
ol.index_flow li:nth-of-type(2)::after { border-left: 25px solid #e96b2e; }
ol.index_flow li:nth-of-type(3)::after { border-left: 25px solid #f39c1a; }
ol.index_flow li:nth-of-type(4)::after { border-left: 25px solid #f1b81a; }

ol.index_flow li:last-child::before { display: none; }
ol.index_flow li:last-child::after { 
	border-left: 25px solid #ab3d3d;
	display: none;
}
ol.index_flow li span {
    padding: 5px 35px;
    font-size: 1.4rem;
    background: #fff;
	/*border: solid 1px #333;*/
}
ol.index_flow li:nth-of-type(1) span { color: #ab3d3d; }
ol.index_flow li:nth-of-type(2) span { color: #e96b2e; }
ol.index_flow li:nth-of-type(3) span { color: #f39c1a; }
ol.index_flow li:nth-of-type(4) span { color: #f1b81a; }

ol.index_flow li i {
	display: block;
	padding: 25px 0;
    font-size: 6rem;
}
ol.index_flow li:nth-of-type(1) i {	transform: scale( -1, 1 ) rotate( -45deg ); }

@media only screen and (max-width:999px) {
	#contents03 {
		padding: 25px 0 0;
		background-color: #fff;
		background-image: linear-gradient(-90deg, #f5f5f5 10%, transparent 10%), linear-gradient(#f5f5f5 10%, transparent 10%);
		background-size: 10px 10px;
	}
	#contents03 h2 {
		font-size: 2.4rem;
	}
	#contents03 h2 span {
		font-size: 1.8rem;
	}
	ol.index_flow {
		display: block;
		min-width: 100%;
		max-width: 100%;
	}
	ol.index_flow li {
		min-width: 290px;
		height: 290px;
		margin: 0 auto 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
	ol.index_flow li:nth-of-type(n+2) { padding: 30px 0 0 0; }
	ol.index_flow li:last-child { margin: 0 auto; }

	ol.index_flow::before,
	ol.index_flow li::before,
	ol.index_flow li::after {
		content: "";
		width: 0;
		height: 0;
		display: block;
		border-left: 145px solid transparent!important;
		border-right: 145px solid transparent;
		border-bottom: none;
		position: absolute;
		top: auto;
		z-index: 1;
	}
	ol.index_flow::before {
		border-top: 25px solid #f5f5f5;
		left: 0;
		display: none;
	}
	ol.index_flow li::before {
		border-top: 25px solid #fff;
		right: 0;
		bottom: -34px;
	}
	ol.index_flow li::after {
		right: 0;
		bottom: -25px;
	}
	ol.index_flow li:nth-of-type(1)::after { border-top: 25px solid #ab3d3d; }
	ol.index_flow li:nth-of-type(2)::after { border-top: 25px solid #e96b2e; }
	ol.index_flow li:nth-of-type(3)::after { border-top: 25px solid #f39c1a; }
	ol.index_flow li:nth-of-type(4)::after { border-top: 25px solid #f1b81a; }
		
	ol.index_flow li:last-child::before { display: none; }
	ol.index_flow li:last-child::after { 
		border-top: 25px solid #ab3d3d;
		display: none;
	}
}

/*------------------------------ */
/*--- contents04 --------------- */
/*------------------------------ */

#contents04 {
	padding: 50px;
    background: url(../images/contents/index/index_area.jpg);
    background-position: center;
    background-size: cover;
}
.index_area {
	color: #fff;
}
.index_area h2 {
	color: #fff;
    font-size: 2.8rem;
    font-weight: 600;
    border-left: solid 5px #FFF;
    padding: 0 0 3px 25px;
    margin-bottom: 25px;
}
.index_area h2 span {
	font-size: 2.0rem;
    display: block;
}

@media only screen and (max-width:999px) {
	#contents04 {
		padding: 50px 10px;
		background: url(../images/contents/index/index_area.jpg);
		background-position: center;
		background-size: cover;
	}
	.index_area h2 {
		font-size: 2.4rem;
		padding: 0 0 3px 15px;
	}
	.index_area h2 span {
		font-size: 1.8rem;
	}
}

/*------------------------------ */
/*--- contents05 --------------- */
/*------------------------------ */

#contents05 {
	padding: 75px 0;
	background: #f5f5f5;
}
.index_news {
	display: flex;
	align-items: center;
	padding: 50px 25px;
	background: #fff;
}
.index_news > div {
	flex-grow: 1;
}
.index_news h2 {
	font-size: 3.0rem;
    font-weight: 600;
    padding: 0 50px;
}
.index_news h2 span {
	font-size: 2.0rem;
    display: block;
}
ul.index_Newslist {
	margin-bottom: 15px;
}
ul.index_Newslist li {
	display: flex;
	border-top: solid 1px #eee;
	letter-spacing: 0.1rem;
}
ul.index_Newslist li:last-child { border-bottom: solid 1px #eee; }
ul.index_Newslist li > div.index_Newslist_Date { 
	padding: 15px 0 15px 25px;
	color: #ab3d3d;
}
ul.index_Newslist li > div.index_Newslist_Title { width: 100%; }
ul.index_Newslist li > div.index_Newslist_Title a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 25px;
	text-decoration: none;
	color: #333;
}
ul.index_Newslist li > div.index_Newslist_Title a::after {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	font-size: 1.4rem;
	color: #ccc;
	margin-left: 25px;
}
ul.index_Newslist li:hover { background: #fafafa!important; }

.index_Newslink {
	text-align: right;
}
.index_Newslink a {
	display: inline-block;
	text-decoration: none;
	color: #333;
	font-size: 1.4rem;
}
.index_Newslink a::after {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	margin-left: 25px;
	font-size: 1.2rem;
}
.index_Newslink a:hover {
	text-decoration: underline;
}
@media only screen and (max-width:999px) {
	#contents05 {
		padding: 25px 0;
	}
	.index_news {
		display: block;
		padding: 25px 15px;
	}
	.index_news h2 {
		text-align: center;
		font-size: 2.4rem;
		padding: 0;
		margin-bottom: 25px;
	}
	.index_news h2 span {
		font-size: 1.8rem;
	}
	ul.index_Newslist {
		flex-grow: 1;
	}
	ul.index_Newslist li {
		display: block;
		padding: 10px;
	}
	ul.index_Newslist li > div.index_Newslist_Date { 
		padding: 0;
		margin-bottom: 5px;
	}
	ul.index_Newslist li > div.index_Newslist_Title a {
		padding: 0;
	}
	ul.index_Newslist li > div.index_Newslist_Title a::after {
		margin: 2px 0 0 10px;
		font-size: 1.2rem;
	}
}


/*--------------------*/
/*--- 新春特設バナー ---*/
/*--------------------*/

.springBnr {
	position: absolute;
	top: 0;
	left: 0;
}
.springBnr a {
	display: inline-block;
}
.springBnr a:hover {
	opacity: 0.8;
}
.springBnr img {
	display: block;
	margin: 0 auto;
}
@media only screen and (max-width:999px) {
	.springBnr {
		position: static;
		order: 2;
	}
}