/*===============================================
 *	コンテンツ
===============================================*/
.img-service{max-width: 530px;max-height: 350px;margin-top: 27px;}
.strength-box li{margin-bottom: 45px;}
.strength-box .s-left{width: 312px;}
.strength-box .s-left p{background:var(--site-keycolor02);color: #fff; text-align:center; padding: 5px 0;margin-bottom: 30px;font-size: 22px;font-weight: bold;}
.strength-box .s-right{max-width: 680px;}
.st-icon{padding: 4px 15px 7px;max-width: 30px;}
.strength-box .s-right img{max-width: 505px;margin: 20px auto 0;}
.flow-chart ol{margin-top: 93px;}
.flow-chart ol li{width: 144px;padding: 25px; background: #fff;border: 3px solid var(--site-primary);border-radius:6px;position: relative;}
.flow-chart ol li:not(:last-of-type)::after{content: '';display: block;background: url(../img/purchase/icon-arrow.png) no-repeat;width: 35px;height: 58px;background-size: contain;position: absolute;right: -32px;top: 50%;transform: translateY(-50%);z-index: 2;}
.flow-chart ol li span{background: var(--site-primary);color:#fff;border-radius: 50%;width: 33px;display:inline-grid;font-size: 13px;text-align: center;padding: 10px 14px;position: absolute;top:-30px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);}
.flow-chart ol li span em{font-size: 24px;line-height: .8;}
.flow-chart ol li:first-child img{width: 86px;height: 112px;margin: 20px auto 10px;}
.flow-chart ol li:nth-child(2) img{width: 97px;height:91px;margin: 27px auto 33px;}
.flow-chart ol li:nth-child(3) img{width: 74px;height:104px;margin: 27px auto 17px;}
.flow-chart ol li:nth-child(4) img{width: 110px;height:95px;margin: 24px auto 31px;}
.flow-chart ol li:nth-child(5) img{width: 126px;height:64px;margin: 38px auto 48px;}
.flow-chart ol li p{text-align: center; color:var(--site-primary);line-height: 1.6;font-weight: bold;letter-spacing: 0px;}
.buy-point{margin:50px 0 70px;}
.buy-point li{background: #fff;box-shadow: 0 5px 0 0 var(--site-primary);border-radius: 6px;max-width: 265px;position: relative;margin-bottom: 20px;}
.buy-point span{background: var(--site-primary);color:#fff;border-radius: 50%;width: 80px; display:inline-grid;font-size: 13px;font-weight:bold; text-align: center;padding: 20px 0px; position: absolute;top:40%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);border: 2px solid #fff;}
.buy-point em{font-size:24px;line-height: .8;text-align: center;}
.buy-point dl{padding:65px 15px 45px 15px;}
.buy-point dt{text-align: center;color:var(--site-primary);font-size: 18px;font-weight: bold;margin-bottom: 20px;}
.buy-point dd{letter-spacing:1.5px;}
.example-purchase{background: #fff;border:4px solid var(--site-primary);padding:34px 36px 50px;}
.example-purchase li{max-width: 320px;border: 2px solid var(--site-primary);box-shadow: 0 5px 0 0 var(--site-primary);}
.example-purchase .purchase-details{padding: 24px 18px;}
.example-purchase .purchase-details p{color: var(--site-primary);letter-spacing: 0px;}
.example-purchase .purchase-details dl{align-items: center;margin-top: 25px;}
.example-purchase .purchase-details dl dt{color: #fff; background:var(--site-keycolor02);text-align: center;padding: 9px 43px;}
.example-purchase .purchase-details dl dd{color: var(--site-keycolor02);font-size: 26px;font-weight: bold;}
.example-purchase ol{margin-bottom:51px;}
.qanda h3{margin:65px 0 50px;}
.qanda li{background:#e0e7f6; border-radius: 6px;padding: 34px 30px;margin-bottom: 30px;}
.qanda li dt{font-size: 18px; font-weight: bold;position: relative;padding: 0 0 0 60px;margin-bottom: 30px;}
.qanda li dt::before{content: '';display: block;background: url(../img/purchase/icon-q.png) no-repeat;width: 40px;height: 40px;background-size: contain;position: absolute;left: 8px;top: 50%;transform: translateY(-50%);z-index: 2;}
.qanda li dd{background:#608ee1;color: #fff;position: relative;border-radius: 6px;padding: 30px 0 27px 80px;letter-spacing: 0;}
.qanda li dd::before{content: '';display: block;background: url(../img/purchase/icon-a.png) no-repeat;width: 40px;height: 40px;background-size: contain;position: absolute;left: 20px;top: 50%;transform: translateY(-50%);z-index: 2;}
.qanda .btn-basic{margin: 60px auto 85px;}


@media only screen and (max-width: 1024px) {
.purchase-txtbox{max-width: 480px;}
.purchase-txtbox .txt-balloon{font-size: 24px;}
.purchase-txtbox h3{font-size: 24px;}
.img-service{width: 45%; height: auto;}
.strength-box .s-right{max-width:534px;}
.flow-chart ol{width: 100%;}
.flow-chart ol li{max-width:125px;width:100%;}
.flow-chart ol li p{font-size: 13px;}
.buy-point li{max-width: 230px;}
.buy-point span{top:32%;}
.buy-point dt{font-size: 18px;}
.example-purchase li{max-width: 270px;}
.example-purchase .purchase-details dl{text-align: center;display: block;}
.example-purchase li:nth-child(2) .purchase-details dl{margin-top: 50px;}
.qanda li dd{padding-right: 30px;}
}
@media only screen and (max-width: 768px) {
.purchase-txtbox{max-width: 100%;}
.purchase-txtbox .txt-balloon{font-size: 24px;max-width: 100%;}
.img-service{width: 100%;max-width: 100%;max-height: 466px;}
.strength-box .s-left{max-width:285px;}
.strength-box .s-right{max-width:317px;}
.st-point h3{font-size: 20px;margin-left: 1em;max-width: 74%;}
.st-point h3 span{font-size: 22px;}
.flow-chart ol li{max-width: 78px;}
.flow-chart ol li:first-child img{width: 66px;height: 92px;}
.flow-chart ol li:nth-child(2) img{width: 77px;height:71px;}
.flow-chart ol li:nth-child(3) img{width: 54px;height:84px;}
.flow-chart ol li:nth-child(4) img{width: 80px;height:65px;}
.flow-chart ol li:nth-child(5) img{width: 86px;height:24px;}
.buy-point li{max-width: 340px;}
.buy-point span{top:47%;}
.example-purchase li{max-width: 185px;}
.example-purchase .purchase-details dl{margin-top: 10px;}
.example-purchase li:nth-child(2) .purchase-details dl{margin-top: 35px;}
}

@media only screen and (max-width: 568px) {
.purchase-txtbox .txt-balloon{font-size: 22px;margin-top: 0;}
.purchase-txtbox h3{font-size: 20px;}
.purchase-txtbox .purchase-subtxt p{margin-top: 20px;}
.img-service{padding-bottom: 30px;}
.strength-box li{margin-bottom: 25px;max-width: 85%;width: 100%;}
.strength-box .s-left{width: 100%;max-width: initial;margin-bottom: 20px;}
.strength-box .s-left p{font-size: 20px;}
.strength-box li:last-child{margin-bottom: 0;}
.st-point {margin-right: -15px;}
.st-point h3{letter-spacing: 0;max-width: 100%;margin-left: .5em;flex-grow: 2;}
.flow-chart ol{display: block;margin-top: 53px;}
.flow-chart ol li{max-width: 85%;margin-bottom: 80px;}
.flow-chart ol li:not(:last-of-type)::after{left: 45%;right: 45%;top: 245px;transform: rotate(90deg);}
.flow-chart ol li:first-child img{width: 76px;height: 102px;}
.flow-chart ol li:nth-child(2) img{width: 87px;height:81px;}
.flow-chart ol li:nth-child(3) img{width: 64px;height:94px;}
.flow-chart ol li:nth-child(4) img{width: 90px;height:75px;}
.flow-chart ol li:nth-child(5) img{width: 126px;height:54px;}
.flow-chart ol li:last-child{margin-bottom: 30px;}
.flow-chart ol li p{font-size: 20px;}
.buy-point li{max-width: none;}
.buy-point dl{padding:50px 15px 20px;}
.buy-point dt {font-size: 20px;}
.buy-point span{top: 52%;}
.buy-point{margin-bottom: 20px;}
.example-purchase{padding: 20px;}
.example-purchase ol{margin-bottom: 10px;}
.example-purchase li{max-width: 100%;margin-bottom: 20px;}
.example-purchase li:nth-child(2) .purchase-details dl{margin-top: 20px;}
.qanda h3{margin: 20px 0;}
.qanda li{padding: 20px 15px;}
.qanda li dt{font-size: 16px;}
.qanda .btn-basic{margin: 10px auto 30px;}
}