@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 introduction 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ introductionCopy ］
―――――――――――――――――――――――――――――― */

.introductionCopy { font-size: 3.2rem; line-height: 4.2rem; font-weight: 700; text-align: center; margin-bottom: 80px; }
.introductionCopy span { display: inline-block; }

@media screen and (max-width: 767px) {
	.introductionCopy { font-size: 2.2rem; line-height: 3.6rem; margin-bottom: 25px; }
}



/* ――――――――――――――――――――――――――――――
［ introductionLead ］
―――――――――――――――――――――――――――――― */

.introductionLead { font-size: 1.8rem; line-height: 3.6rem; text-align: center; margin-bottom: 140px; }

@media screen and (max-width: 767px) {
	.introductionLead { font-size: 1.6rem; line-height: 2.4rem; text-align: left; margin-bottom: 80px; }
	.introductionLead br { display: none; }
}



/* ――――――――――――――――――――――――――――――
［ introductionTitle ］
―――――――――――――――――――――――――――――― */

.introductionTitle { font-size: 2.5rem; color: #50aadc; font-weight: 700; text-align: center; margin: 0 auto 60px; }
.introductionTitle span { display: inline-block; position: relative; padding-bottom: 12px; }
.introductionTitle span::after { position: absolute; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 3px; background-color: #50aadc; content: ""; }

@media screen and (max-width: 767px) {
	.introductionTitle { font-size: 2rem; margin-bottom: 40px; }
	.introductionTitle span { padding-bottom: 8px; }
	.introductionTitle span::after { height: 2px; }
}



/* ――――――――――――――――――――――――――――――
［ introductionTxt ］
―――――――――――――――――――――――――――――― */

.introductionTxt { margin-bottom: 60px; }
.introductionTxt p { font-size: 1.8rem; line-height: 3.6rem; }

@media screen and (max-width: 767px) {
	.introductionTxt { margin-bottom: 30px; }
	.introductionTxt p { font-size: 1.6rem; line-height: 2.4rem; }
}



/* ――――――――――――――――――――――――――――――
［ introductionImg ］
―――――――――――――――――――――――――――――― */

.introductionImg { overflow: hidden; margin-bottom: 170px; }
.introductionImg .imgBlock { width: calc( 290 / 900 * 100% ); }
.introductionImg .imgBlock:nth-child(1) { float: left; margin-right: calc( 15 / 900 * 100% ); }
.introductionImg .imgBlock:nth-child(2) { float: left; }
.introductionImg .imgBlock:nth-child(3) { float: right; }
.introductionImg .imgBlock div {}
.introductionImg .imgBlock div:nth-child(1) { margin-bottom: 12px; }
.introductionImg .imgBlock div:nth-child(2) { font-size: 1.8rem; line-height: 3.6rem; text-align: center; }

@media screen and (max-width: 767px) {
	.introductionImg { max-width: 290px; margin-bottom: 80px; margin: 0 auto 80px; }
	.introductionImg .imgBlock { width: 100%; }
	.introductionImg .imgBlock:nth-child(1) { float: none; margin-right: 0; }
	.introductionImg .imgBlock:nth-child(2),
	.introductionImg .imgBlock:nth-child(3) { float: none; margin-top: 30px; }
	.introductionImg .imgBlock div:nth-child(1) { margin-bottom: 12px; }
	.introductionImg .imgBlock div:nth-child(2) { font-size: 1.6rem; line-height: 3.4rem; }
}



/* ――――――――――――――――――――――――――――――
［ introductionList ］
―――――――――――――――――――――――――――――― */

.introductionList { border-top: solid 1px #d9d9d9; margin-bottom: 180px; }
.introductionList .listBlock { display: table; border-bottom: solid 1px #d9d9d9; padding: 15px 5px; }
.introductionList .listBlock dl { display: table-cell; width: calc( 100% - 300px ); vertical-align: middle; }
.introductionList .listBlock dl dt { font-size: 2.4rem; line-height: 4.2rem; font-weight: 700; }
.introductionList .listBlock dl dd { font-size: 1.8rem; line-height: 3.6rem; }
.introductionList .listBlock div { display: table-cell; width: 300px; vertical-align: middle; padding-left: 65px; }

@media screen and (max-width: 767px) {
	.introductionList { margin-bottom: 100px; }
	.introductionList .listBlock { display: flex; flex-wrap: wrap; padding: 30px 10px; }
	.introductionList .listBlock dl { display: block; width: 100%; order: 2; }
	.introductionList .listBlock dl dt { font-size: 1.8rem; line-height: 3.8rem; text-align: center; }
	.introductionList .listBlock dl dd { font-size: 1.4rem; line-height: 2.4rem; }
	.introductionList .listBlock div { display: block; max-width: 235px; width: 100%; padding-left: 0; margin: 0 auto 20px; order: 1; }
}



/* ――――――――――――――――――――――――――――――
［ introductionLink ］
―――――――――――――――――――――――――――――― */

.introductionLink { max-width: 520px; margin-right: auto; margin-left: auto; }
.introductionLink a { position: relative; display: block; background-color: #50aadc; border: solid 3px #50aadc; font-size: 2.3rem; color: #ffffff; text-align: center; text-decoration: none; padding: 23px; }
.introductionLink a::after { position: absolute; top: 0; right: 22px; bottom: 0; display: block; width: 18px; height: 18px; border-right: solid 2px #ffffff; border-bottom: solid 2px #ffffff; transform: rotate(-45deg); content: ""; margin-top: auto; margin-bottom: auto; }

@media screen and (min-width: 768px) {
	.introductionLink a,
	.introductionLink a::after { transition: 0.2s ease; }
	.introductionLink a:hover { background-color: #ffffff; color: #50aadc; }
	.introductionLink a:hover::after { border-color: #50aadc; }
}

@media screen and (max-width: 767px) {
	.introductionLink { max-width: 300px; }
	.introductionLink a { font-size: 1.6rem; padding: 15px; }
	.introductionLink a::after { right: 22px; width: 14px; height: 14px; }
}