@charset "utf-8";

/*メインビジュアル＆ページタイトル*/
#sec01{
	position: relative;
}
#sec01 .mainvisualText{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	margin: 0;
}
#sec01 .mainvisualText .ttl02{
	font-size: 3.6rem;
	font-weight: 500;
	line-height: 1;
	color: #39447b;
	margin-bottom: 15px;
}
#sec01 .mainvisualText .ttl02 sup{
	font-weight: 600;
}

#sec01 .mainvisualText .ttl02en{
	font-size: 1.6rem;
	line-height: 1;
	color: #39447b;
	margin-bottom: 40px;
}
#sec01 .gradationTextContainer{
	font-size: 2.8rem;
	line-height: 1;
	color: #fff;
}
#sec01 .gradationTextContainer .gradationText {
    display: inline-block;
    margin-bottom: 40px;
    padding: 20px 80px 20px 20px;
    background: linear-gradient(90deg, #39447b, #2e6894, #248dad, #23a5be, #ffffff00);
}
#sec01 .gradationTextContainer .gradationText:last-of-type{
	margin-bottom: 0;
}
#sec01 .mainvisualImg{
	display: flex;
	justify-content: flex-end;
}
@media screen and (max-width: 768px) {
	#sec01 .mainvisualText{
		position: static;
		transform: translate(0);
		-webkit-transform: translate(0);
		-ms-transform: translate(0);
		margin: 50px auto 0;
	}
	#sec01 .gradationTextContainer{
		font-size: 2.4rem;
		line-height: 1.2;
	}
	#sec01 .gradationTextContainer .gradationText{
		margin-bottom: 20px;
	}
	#sec01 .mainvisualText .ttl02{
		font-size: 3.2rem;
	}
	#sec01 .mainvisualText .ttl02en{
		font-size: 1.8rem;
		margin-bottom: 30px;
	}
}

/*画像とテキストが並ぶ*/
#sec02{
	padding: 135px 0 180px;
}
#sec02 .numberContentsListItem{
	position: relative;
	margin-bottom: 120px;
}
#sec02 .numberContentsListItem:last-of-type{
	margin-bottom: 145px;
}
#sec02 .numberContentsListItem .numberContentsListItemContainer{
	width: 58.3%;
	position: absolute;
	bottom: -25px;
	z-index: 1;
	padding: 45px 80px 45px 40px;
	background: #d3e9f566;
}
#sec02 .numberContentsListItem:nth-child(even) .numberContentsListItemContainer{
	padding: 45px 40px 45px 80px;
}
#sec02 .numberContentsListItemContainer .ttl03{
	font-size: 18rem;
	color: #1ba9c0;
	line-height: 1;
	opacity: 0.2;
	font-family: 'Noto Serif JP', serif;
	position: absolute;
    top: -14rem;
	left: 18px;
}
#sec02 .numberContentsListItemTextContainer .numberContentsListItemTextTitle{
	font-size: 2.8rem;
	font-weight: 500;
	padding-bottom: 20px;
	color: #39447b;
	border-bottom: 2px #969fbb solid;
}
#sec02 .numberContentsListItemTextContainer .numberContentsListItemText{
	padding-top: 20px;
	line-height: 1.8;
	letter-spacing: 0.3rem;
}
#sec02 .numberContentsListImgContainer{
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: -1;
}
#sec02 .numberContentsListImgContainer img{
	width: 45%;
}
#sec02 .numberContentsListItem:nth-child(even) .numberContentsListItemContainer{
	width: 58.3%;
	right: 0;
}
#sec02 .numberContentsListItem:nth-child(even) .numberContentsListItemContainer .ttl03{
	right:30px;
	left: auto;
}
#sec02 .numberContentsListItem:nth-child(even) .numberContentsListImgContainer{
	justify-content: flex-start;
}
#sec02 .linkButton{
	width: 400px;
    margin: 0 auto;
}
#sec02 .linkButton .arrowButton{
	width: 100%;
}
#sec02 .linkButton .arrowButton::after{
	right: 20px;
}
#sec02 .linkButton:hover .arrowButton::after{
	right: 10px;
}
@media screen and (max-width: 1081px) {
	#sec02 .numberContentsListItem{
		margin-bottom: 200px;
	}
}
@media screen and (max-width: 940px) {
	#sec02 .numberContentsListItem{
		margin-top: 150px;
		margin-bottom: 300px;
	}
}
@media screen and (max-width: 836px) {
	#sec02 .numberContentsListItem{
		margin-bottom: 300px;
	}
}
@media screen and (max-width: 768px) {
	#sec02{
		padding: 0;
	}
	#sec02 .numberContentsListItem {
		margin-top: 0;
		margin-bottom: 80px;
	}
	#sec02 .numberContentsList{
		margin: 0;
    	width: 100%;
	}
	#sec02 .numberContentsListImgContainer.img2container {
		top: -340px;
	}
	#sec02 .numberContentsListItem .numberContentsListItemContainer.img2container{
		margin-top: 430px;
	}

	#sec02 .numberContentsListItem .numberContentsListItemContainer{
		width: 85%;
		position: relative;
		margin-top: 230px;
		z-index: 2;
		padding: 45px 40px;
	}
	#sec02 .numberContentsListItem:nth-child(even) .numberContentsListItemContainer {
		width: 85%;
		margin-left: auto;
		padding: 45px 40px;
	}
	#sec02 .numberContentsListImgContainer {
		position: absolute;
		top: -140px;
		right: 0;
	}
	#sec02 .numberContentsListItem:nth-child(even) .numberContentsListImgContainer{
		left: 0;
	}
	#sec02 .numberContentsListItem:last-of-type{
		margin-bottom: 75px;
	}
	#sec02 .numberContentsListImgContainer img {
		width: 70%;
	}
	#sec02 .linkButton{
		width: 80%;
	}
}
@media screen and (max-width: 600px) {
	#sec02 .numberContentsListImgContainer.img2container {
		top: -250px;
	}
	#sec02 .numberContentsListItem .numberContentsListItemContainer.img2container{
		margin-top: 340px;
	}

}

@media screen and (max-width: 425px) {
	#sec02 .numberContentsListImgContainer {
		top: -140px;
	}
	#sec02 .numberContentsListItemContainer {
		margin-top: 215px;
		padding: 45px 30px;
	}
	#sec02 .numberContentsListItemContainer .ttl03{
		top: -14.8rem;
	}
	#sec02 .numberContentsListImgContainer.img2container {
		top: -190px;
	}
	#sec02 .numberContentsListItem .numberContentsListItemContainer.img2container{
		margin-top: 280px;
	}


}

@media screen and (max-width: 375px) {
	#sec02 .numberContentsListImgContainer {
		top: -120px;
	}
	#sec02 .numberContentsListItemContainer {
		margin-top: 195px;
	}
	#sec02 .numberContentsListItemContainer .ttl03{
		left: 10px;
	}
	#sec02 .numberContentsListItem:nth-child(even) .numberContentsListItemContainer .ttl03 {
		right: 15px;
		left: auto;
	}
}

@media screen and (max-width: 320px) {
	#sec02 .numberContentsListImgContainer {
		top: -110px;
	}
	#sec02 .numberContentsListItemContainer .ttl03{
		left: 0px;
	}
	#sec02 .numberContentsListItem:nth-child(even) .numberContentsListItemContainer .ttl03 {
		right: 0px;
		left: auto;
	}
}


.orderContainer {
	padding: 110px 0 100px;
	background-color: #e8f6f9;
}
.orderContainer.fadein{
	padding-top: 60px;
}
.lineTtl03 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #39447b;
    padding-bottom: 31px;
    margin-bottom: 55px;
    position: relative;
}
.lineTtl03::before{
	content: '';
	width: 50px;
	height: 1px;
	background: #39447b;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.orderContainer  .sectionText02 {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 60px;
}
.orderContainer  .linkButtonFlex {
    display: flex;
    justify-content: center;
}

.orderContainer  .linkButtonFlex a{
	width: 220px !important;
	margin: 0 30px !important;
}
@media screen and (max-width: 768px) {
	.orderContainer {
		padding: 60px 0 50px;
	}
}