@charset "UTF-8";
/* CSS Document */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 575.98px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}



/* リンクをさせない */
.nolink {
	pointer-events: none;
	text-decoration-line: none;
	color: inherit !important;
}

/* 画面の幅で改行を変える */
/* 575.98px以下では改行しない */
@media screen and (min-width: 575.98px) {
  .br-disp {
    display: none;
  }
}

/* 991.98px以下では改行する */
@media screen and (min-width: 991.98px) {
  .br-displ {
    display: none;
  }
}

/* 767.98px以下では改行する */
@media screen and (min-width: 575.98px) {
  .br-disps {
    display: none;
  }
}


/*上部に線*/
.line-top {
    border-top: 1px solid var(--base-color);
    padding: 0.9rem 0 0 0;
}
/* 下部に線*/
.line-bottom {
    border-bottom: 1px solid var(--base-color);
    padding: 0 0 1.0rem 0;
}

/*カード*/
.box-view{
	display: flex;
  	flex-direction: column;
	max-width: 1260px;
	margin: 0 auto;
}

.box-view hr{
	margin-top: -1.0rem;
	margin-bottom: 1.0rem;
}


.box-view h2 {
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.1rem;
	white-space: nowrap;
}

.box-view h3 {
	font-size: 2.1rem;
	line-height: 1.3;
	letter-spacing: 0.05rem;
	white-space: nowrap;
}

.box-view p{
	display: block;
	width: 100%;
	margin: 1rem auto;
	text-align: justify;
	line-height: 1.6;
	z-index: 2;
}


.box-provision{
	background-image: url("../img/bg-circle-bl.png");
	background-size: contain;
	background-repeat: no-repeat;
  	background-position: center;
	width: calc(60%);
  	margin: 0 auto;
  	padding: 20% 10%;
  	display: flex;
  	flex-direction: column;
}

.box-business{
	background-image: url("../img/bg-circle-gr.png");
	background-size: contain;
	background-repeat: no-repeat;
  	background-position: center;
	width: calc(60%);
  	margin: -10rem auto 0;
  	padding: 20% 10%;
  	display: flex;
  	flex-direction: column;
}

.box-bestmatch{
	background-image: url("../img/bg-circle-as.png");
	background-size: contain;
	background-repeat: no-repeat;
  	background-position: center;
	width: calc(60%);
  	margin: -15rem auto 0;
  	padding: 20% 10%;
  	display: flex;
  	flex-direction: column;
}

@media screen and (max-width: 768px){
	.box-provision{
	background-size: cover;
	width: calc(100%);
  	margin: 0 auto;
  	padding: 25% 15%;
}
	
	.box-business{
	background-size: cover;
	width: calc(100%);
  	margin: -17rem auto 0;
  	padding: 25% 10%;
}
	
	.box-bestmatch{
	background-size: cover;
	width: calc(100%);
  	margin: -17rem auto 0;
  	padding: 25% 10%;
}
	.box-view p{
	width: 80vw;
}
}

@media screen and (max-width: 576px){
	.box-provision{
	background-size: cover;
	width: 100%;
  	margin: 0 auto;
  	padding: 25% 15%;
}
	.box-business{
	background-size: cover;
	width: 100%;
	margin: 0 auto;
  	padding: 25% 10%;
}
	
	.box-bestmatch{
	background-size: cover;
	width: 100%;
	margin: 0 auto;
  	padding: 25% 10%;
}
	
	.box-view p{
	width: 100%;
}
}