@charset "UTF-8";
/* CSS Document */
.ttlArea .inner .item .left h1:after {
	content: url("../img/service/h1_txt.svg");
	width: 100px;
}
.ttlArea .inner .item .right .img {
	background-image: url("../img/service/ttl_bg.webp");
}
.serviceArea .desc01 .inner,
.serviceArea .desc02 .inner{
	max-width: 1040px;
	padding: 50px 20px 0;
}
.serviceArea .desc .inner h2 {
	font-size: clamp(1.25rem, 1.155rem + 0.47vw, 1.688rem);
	font-weight: bold;
	position: relative;
	text-align: center;
	margin-bottom: 30px;
}
.serviceArea .desc .inner h2:after {
	position: absolute;
	width: 28px;
	bottom:-20px;
	left:50%;
	transform: translateX(-50%);
}
.serviceArea .desc01 .inner h2:after{
	content: url("../img/common/hc_l.svg");
}
.serviceArea .desc02 .inner h2:after,
.serviceArea .desc03 .inner h2:after {
	content: url("../img/common/hc_r.svg");
}
.serviceArea .desc01 .inner .ttl {
	font-size: clamp(0.875rem, 0.848rem + 0.14vw, 1rem);
	text-align: center;
	margin-bottom: 50px;
}
.serviceArea .desc01 .inner ol li {
	background: linear-gradient(90deg, rgba(236,246,251,1) 0%, rgba(226,243,248,1) 53%, rgba(206,238,243,1) 100%);
}
.serviceArea .desc01 .inner ol li h3 {
	background-color: #1D5DA4;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: clamp(0.938rem, 0.924rem + 0.07vw, 1rem);
	width: 250px;
    text-align: center;
    margin: 0 auto;
	padding: 10px;
}
.serviceArea .desc01 .inner ol li h3 span {
	color: #FFD300;
}
.serviceArea .desc01 .inner ol li:not(:last-child) {
	margin-bottom: 10px;
}
.serviceArea .desc01 .inner ol li .flowBox {
	display: flex;
    justify-content: center;
	padding: 10px 10px 20px;
}
.serviceArea .desc01 .inner ol li .flowBox .left {
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	aspect-ratio: 370/166;
    height: 166px;
}
.serviceArea .desc01 .inner ol li:first-of-type .flowBox .left {
	background-image: url("../img/service/flow_01.svg");
}
.serviceArea .desc01 .inner ol li:nth-of-type(2) .flowBox .left {
	background-image: url("../img/service/flow_02.svg");
}
.serviceArea .desc01 .inner ol li:nth-of-type(3) .flowBox .left {
	background-image: url("../img/service/flow_03.svg");
}
.serviceArea .desc01 .inner ol li:nth-of-type(4) .flowBox .left {
	background-image: url("../img/service/flow_04.svg");
}
.serviceArea .desc01 .inner ol li:last-of-type .flowBox .left {
	background-image: url("../img/service/flow_05.svg");
}
.serviceArea .desc01 .inner ol li .flowBox .right {
	padding: 20px 0 0 60px;
	width: 45%;
}
.serviceArea .desc01 .inner ol li .flowBox .right p {
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
}
.serviceArea .desc02 .inner .item h3 {
	color: #1D5DA4;
	font-size: clamp(1.125rem, 1.084rem + 0.2vw, 1.313rem);
	font-weight: bold;
	border-left: 5px solid;
	padding-left: 15px;
	margin-bottom: 16px;
}
.serviceArea .desc02 .inner .item h3 .under {
	border-bottom: solid 3px #FFD300;
}
.serviceArea .desc02 .inner .item01 p {
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
	padding: 0 0 40px 20px;
}
.serviceArea .desc02 .inner .item02 p,
.serviceArea .desc02 .inner .item03 > p{
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
	padding: 0 0 20px 20px;
}
.serviceArea .desc02 .inner .item02 .imgBox {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.serviceArea .desc02 .inner .item02 .imgBox img {
	width: 13%;
	filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
}
.serviceArea .desc02 .inner .item02 .pleaseBox {
	margin-bottom: 50px;
}
/*pleaseBox*/
.pleaseBox {
	padding: 30px 20px;
	background: linear-gradient(90deg, rgba(236,246,251,1) 0%, rgba(226,243,248,1) 53%, rgba(206,238,243,1) 100%);
}
.pleaseBox dt{
	font-size: clamp(0.938rem, 0.897rem + 0.2vw, 1.125rem);
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding: 0 0 10px 40px;
}
.pleaseBox dt::before {
	content: url(../img/common/y_circle.svg);
    position: absolute;
    top: -3px;
    left: 6px;
    width: 28px;
}
.pleaseBox dt::after {
    content: url(../img/common/y_circle.svg);
    position: absolute;
    top: -3px;
    right: -34px;
    width: 28px;
}
.pleaseBox dd {
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
}
/*ナンバーカウンター*/
.serviceArea .desc02 .inner .item02 .pleaseBox {
	counter-reset: num;
}
.serviceArea .desc02 .inner .item02 .pleaseBox dd::before {
	counter-increment: num;
    content: counter(num)". ";
}
/*pleaseBoxここまで*/
.serviceArea .desc02 .inner .item03 .imgBox {
	display: flex;
	margin-bottom: 20px;
}
.serviceArea .desc02 .inner .item03 .imgBox img {
	width: 13%;
	filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	margin-right: 1.5%;
}
.serviceArea .desc02 .inner .item03 .pleaseBox p {
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
}
.serviceArea .desc03 .inner {
	max-width: 1040px;
	padding: 50px 20px 100px;
}
.serviceArea .desc03 .inner .serviceBox {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.serviceArea .desc03 .inner .serviceBox p {
	width: 32%;
}
.serviceArea .desc03 .inner .serviceBox p:nth-of-type(-n+3) {
	margin-bottom: 2%;
}
.serviceArea .desc03 .inner .serviceBox p a:hover {
	opacity: .7;
} 
@media screen and (max-width: 767px) {
.serviceArea .desc01 .inner,
.serviceArea .desc02 .inner {
    padding: 40px 20px 0;
}
.serviceArea .desc01 .inner .ttl {
	margin-bottom: 40px;
}
.serviceArea .desc01 .inner ol li .flowBox {
    display:block; 
}
.serviceArea .desc01 .inner ol li .flowBox .left {
    width: 100%;
}
.serviceArea .desc01 .inner ol li .flowBox .right {
	width: 100%;
    padding: 20px 0 0 0;
}
.serviceArea .desc01 .inner ol li .flowBox .right p {
    text-align: center;
}
.serviceArea .desc02 .inner .item02 .pleaseBox {
    margin-bottom: 40px;
}	
.serviceArea .desc03 .inner {
    padding: 40px 20px 50px;
}
}
@media screen and (max-width: 600px) {
.serviceArea .desc01 .inner .ttl {
    text-align: left;
}
.serviceArea .desc01 .inner ol li h3 {
    width: 200px;
}
.serviceArea .desc01 .inner ol li .flowBox .left {
    height: 120px;
}
.serviceArea .desc01 .inner ol li .flowBox .right p {
    text-align: left;
	padding: 0 10px;
}
.serviceArea .desc03 .inner .serviceBox p {
    width: 49%;
}
.serviceArea .desc03 .inner .serviceBox p:nth-of-type(-n+4) {
    margin-bottom: 2%;
}
}
@media screen and (max-width: 500px) {
.serviceArea .desc03 .inner .serviceBox p {
    width: 100%;
}
.serviceArea .desc03 .inner .serviceBox p:nth-of-type(-n+5) {
    margin-bottom: 5%;
}
}
@media screen and (max-width: 450px) {
.pleaseBox dt {
    padding: 0 0 10px 20px;
}
.pleaseBox dt::before {
    left: -4px;
    width: 20px;
}
.pleaseBox dt::after {
    right: -24px;
    width: 20px;
}
}