/*-------------------
  sho
---------------------*/


/*上書きされたものを再度リセット*/
@media (max-width: 960px){
  body{
    padding-top: 56px;
  }
}



.wrap{
	color: #343A40;
}

.flex{
	display: flex;
	flex-wrap: wrap;
}

.align-items-center{
	align-items: center;
}

.justify-content-center{
	justify-content: center;
}

.justify-content-space-between{
	justify-content: space-between;
}

.txt_blue{
	color: #2185D0;
}

.align-top{
	vertical-align: top;
}


@media (max-width: 500px){
	.sp-none{
		display: none;
	}
}


.head{
	position: relative;
	background-image: url(/inc/img/www/online/head_pc.png);
	background-size: contain;
	background-repeat: no-repeat;
	min-height: 430px;		
	margin-bottom: 1em;
}



@media (max-width: 575.98px){
	.head{
		background-image: url(/inc/img/www/online/head_sp.png);
		background-position: bottom;
		padding-top: 100px;
	}
}

.head_ttl{
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
	left: 4.6em;
}

@media (max-width: 575.98px){
	.head_ttl{
		width: 92%;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
	}
}

.head_ttl .h4{
	line-height: 1.4em;
	font-weight: bold;
}

.head_ttl .ttl{
	font-size: 3em;
	font-weight: bold;
	color: #0065B1;
	margin-bottom: 0.4em;
}

@media (max-width: 575.98px){
	.head_ttl .h4{
		font-size: 1.2em;
		margin-bottom: 0.8em;
	}
	.head_ttl .ttl{
		font-size: 2.2em;
		margin-bottom: 0.5em;
	}
}

.head_ttl .box{
	color: #fff;
	font-size: 1.3em;
	border-radius: 9px;
	background-color: #EEA135;
	padding: 0.5em 1em;
}

@media (max-width: 575.98px){
	.head_ttl .box{
		font-size: 1em;
		text-align: center;
	}
}

.free{
	position: relative;
}

.free:after{
	content: url(/inc/img/www/online/icon_head.png);
	position: absolute;
	right: -25px;
	top: -25px;
}

@media (max-width: 575.98px){
	.free:after{
		top:-38px;
		right: 0;
	}
}


.explain{
	margin-top: 1em;
	padding-top: 1.5em;
	margin-bottom: 2em;
}

.explain h3.ttl{
	position: relative;
	text-align: center;
	font-size: 2em;
	margin-bottom: 2.2em;
}

@media (max-width: 575.98px){
	.explain h3.ttl{
		font-size: 1.6em;
	}
}

.explain h3.ttl:after{
	position: absolute;
	bottom: -0.5em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	content: "";
	width: 20%;
	height: 3.5px;
	background-color: #0065B1;
}

@media (max-width: 575.98px){
	.explain h3.ttl:after{
		bottom: -0.7em;
	}
}

.explain .txt{
	font-size: 1.2em;
	line-height: 1.6em;
}

.explain .txt_icon img{
	display: block;
	margin-left: auto;
	margin-right: 2em;
}

.naiken-text{
    text-align: left;
    padding-top: 0.5em;
    border-left: 1px dashed #01549B;
}

@media (max-width: 768px){
    .naiken{
        text-align: center;
    }
    
    .naiken-text{
        text-align: center;
        padding-top: 0.5em;
        border-left: 0px dashed #01549B;
    }
    
}

@media (max-width: 500px){
	.explain .txt_icon{
		text-align: center;
		margin-bottom: 1em;
	}
	
	.explain .txt_icon img{
		margin: 0;
	}
	
	.explain .txt_icon img{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

.bdr_dot_l{
	padding-top: 0.5em;
	border-left: 1px dashed #01549B;
}

.recommend,.flow{
	display: flex;
}

.explain .card{
	width: 100%;
	padding-top: 2em;
	padding-bottom: 1em;
	padding: 1em 1.2em;
	transition: 0.3;
}

.recommend .card{
	background-color: #F8F9FA;
	border: none;
}

.explain .card img, .explain .card .h4{
	margin-bottom: 1em;
}

.recommend .card .h4{
	font-weight: 500;
}

.reco_card{
    background-color: #F8F9FA;
    text-align: center;
    padding: 3rem 0.8rem;
    margin: 5px 0;
    height: 340px;
}

.reco_card img{
    width: 70%;
    margin-bottom: 1rem;
}

.reco_card h4{
    font-size: 20px;
    margin-bottom: 1rem;
    font-weight: bold;
}

.reco_card p{
    font-size: 14px;
    text-align: left;
}

.flow_use{
    border: 2px solid #E9ECEF;
    border-radius: 10px;
    text-align: center;
    padding: 2rem 0.8rem;
    margin: 5px 0;
    height: 340px;
    
}

.flow_use p{
    margin-top: 20px;
    font-size: 14px;
    text-align: left;
}

.flow_use h4{
    font-size: 20px;
    margin-bottom: 1rem;
    font-weight: bold;
}

.flow_use .ttl{
	padding-bottom: 0.5em;
	border-bottom: 2px #E9ECEF solid;
	margin-bottom: 1em;
}

.flow_use h4.ttl span{
	border-radius: 50%;
	font-size: 0.8em;
	line-height: 2em;
	padding: 0.1em 0.4em 0;		
	margin-right: 0.3em;
	color: #fff;
	border: 4px solid #2185D0;
	background-color: #2185D0;
}

.flow_use a{
	color: inherit;
	transition: 0.3s;
}

.flow_use:hover{
	text-decoration: none;
	box-shadow: 0px 6px 5px #00000029;
}

.guide{
    margin: 3rem auto;
    
}

.preview{
    background-color: #F8F9FA;
	border-radius: 4px;
	border: 1px solid #F2F3F4;
	box-shadow: 0px 0px 2px #00000029;
	padding: 2em 0;
	margin-bottom: 3em;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
}

.preview-img{
    text-align: right;   
}

.preview-time{
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
}

@media  (max-width: 768px) { 
  .reco_card{
    background-color: #F8F9FA;
    text-align: center;
    padding: 3rem 0.8rem;
    margin: 5px 0;
    height: auto;
  }
  .reco_card p{text-align: center;}
}

@media (max-width: 500px){
  .preview-img{
    text-align: center;
  }

  .preview-time{
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
  }
  .reco_card{
    background-color: #F8F9FA;
    text-align: center;
    padding: 3rem 0.8rem;
    margin: 5px 0;
  }

  .reco_card h4{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 1rem;
  }

  .flow_use{
    border: 2px solid #E9ECEF;
    border-radius: 10px;
    text-align: center;
    padding: 2rem 0.8rem;
    margin: 5px 0;
    height: 380px;    
  }
  .flow_use h4{
    font-size: 18px;
    margin-bottom: 1rem;
    font-weight: bold;
  }


}



@media (max-width: 575.98px){
	.recommend .card .h4{
		font-size: 1em;
		text-align: center;
	}
}

.explain .card .small{
	font-size: 0.9em;
}

.flow .card{
	border: 2px solid #E9ECEF;
	border-radius: 10px;
}

.flow a.card{
	color: inherit;
	transition: 0.3s;
}

.flow a.card:hover{
	text-decoration: none;
	box-shadow: 0px 6px 5px #00000029;
}

.flow .card .ttl{
	padding-bottom: 0.5em;
	border-bottom: 2px #E9ECEF solid;
	margin-bottom: 1em;
}

.flow .card h5.ttl{
	font-size: 1.1rem;
}

@media (max-width: 575.98px){
	.flow .card h5.ttl{
		font-size: 1em;
		text-align: center;
	}
}

.flow .card h5.ttl span{
	border-radius: 50%;
	font-size: 0.8em;
	line-height: 2em;
	padding: 0.1em 0.4em 0;
	margin-right: 0.3em;
	color: #fff;
	border: 4px solid #2185D0;
	background-color: #2185D0;
}


.btn-primary,.btn-outline-primary{
	transition: 0.3s;
}

.explain .btn-sm{
	font-size: 0.8em;
	border-radius: 18px;
}

.attn {
	box-shadow: 0px 6px 5px #00000029;
	border-radius: 5px;
	background-color: #0065B1;	
	overflow: hidden;
	margin-bottom: 3em;
}

.attn .inner{
	padding: 1em;
	background-color: #fff;
	margin-left: 6px;
}

.attn .h5{
	font-size: 1.18rem;
	margin-bottom: 0.9em;
}

.attn .list{
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 1.5em;
}

.attn .list li{
	position: relative;
}

.attn .list li:before{
	content: "●";
	color: #E9EAEB;
	font-size: 0.8em;
	line-height: 2em;
	position: absolute;
	top: 0;
	left: -1.5em;
}

.attn .list li a{
	color: inherit;
}

.search {
	margin-bottom: 1.5em;
}

.search .btn{
	padding-top: 1em;
	padding-bottom: 1em;
}

.contact .inner{
	background-color: #F8F9FA;
	border-radius: 4px;
	border: 1px solid #F2F3F4;
	box-shadow: 0px 0px 2px #00000029;
	padding: 2em 0;
	margin-bottom: 3em;
}

.contact .txt{
	padding-top: 1.5em;
	text-align: center;
}

@media (max-width: 578px){
	.contact .txt{
		padding-top: 0.2em;
	}
}

.contact .txt p{
	margin-bottom: 0;
}

.button{
	display: block;
	text-align: center;
	text-decoration: none;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-radius: 5px;
	transition: 0.3s;
}

.button:hover,.button:active{
	text-decoration: none;
}

.return{
	padding-top: 16px;
	padding-bottom: 32px;
}

.return .box{
	border-bottom: dotted 2px #ccc;
	margin-right: 16px;
	margin-left: 16px;
}

.return .box .button{
	width: 120px;
	color: #CCC;
	font-size: 0.8em;
	border: dotted 2px #ccc;
	border-bottom: none;
	margin-left: auto;
	border-radius: 10px 10px 0 0;
}

.return .box .button:hover{
	text-decoration: none;
	background-color: #E7E7E7E7;
	color:#333;
}


/*margin*/

.mb_8{
	margin-bottom: 8px;
}

.mb_16{
	margin-bottom: 16px;
}


/*/////////////////////////////////////////

		オンライン接客

///////////////////////////////////////////*/


/*あとで削除　ここから*/

#online_index .head{
	background-image: none;
	min-height: 0;
	margin: 0;
}
@media screen and (max-width:500px){
	#online_index .head{
		padding: 0;
		display: none;
	}
}


/*あとで削除　ここまで*/

/*タイトル*/

.h3.ttl{	
    position: relative;
    text-align: center;
    font-size: 2em;
	margin-top: 1rem;
    margin-bottom: 2.2em;
}

@media screen and (max-width:500px){
	.h3.ttl{
        position: relative;
        text-align: center;
        font-size: 1.5em;
	    margin-top: 1rem;
		margin-bottom: 1.4em;
	}
}

.h3.ttl:after {
    position: absolute;
    bottom: -0.5em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    content: "";
    width: 40%;
    height: 3.5px;
    background-color: #0065B1;
}

/*-------------------------------------

			イントロ*/

.intro{
	width: 80%;
	margin: 0 auto 3rem;
	padding: 0 1em 2rem;
}

@media screen and (max-width:500px){
	.intro{
		width: 100%;
		padding: 0 0.5em;
	}
}

/*-------------------------------------

			チャット・LINE*/


.chatline{
	margin: 2rem auto;
	padding: 3em 0 2em;
	border: 1px #ddd solid;
	border-right: none;
	border-left: none;
}

.chatline .row{
	justify-content: center;
}

.chatline .txt{
	text-align: center;
	color: #404040;
}

@media screen and (max-width:500px){
	.chatline .txt{
		text-align: left;
		line-height: 1.2em;
	}
}


/*-------------------------------------

			メリット*/

.merit{
	margin: 2rem auto;
	padding: 2rem 0;
}

.merit .list{
	justify-content: center;
}

.merit .list .item{
	background-color: #F8F9FA;
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	align-content: space-between;
	padding: 1rem 0.5em;
	text-align: center;
}

.merit .list .item .img-fluid{
	margin: 0 auto 1rem;
}

.merit .list .item .cap{
	width: 100%;
	font-weight: bold;
}

/*-------------------------------------

			ご利用の流れ*/

.flow .thumb .ttl span{
	border-radius: 50%;
    font-size: 0.8em;
    line-height: 2em;
    padding: 0.1em 0.4em 0;
    margin-right: 0.3em;
    color: #fff;
    border: 4px solid #2185D0;
    background-color: #2185D0;
}

.step .col-12{
	margin-bottom: 2rem;
}

#online_index .flow{
	border: 1px solid #E9ECEF;
	border-radius: 10px;
	padding: 1em;
	display: flex;
	flex-flow: wrap;
	align-content: flex-start;
	height: 100%;
}
#online_index .flow .thumb {
	width: 100%;
	margin-bottom: 1rem;
}

#online_index .flow .thumb .ttl{
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 0.5em;
}

#online_index .flow .thumb .img-fluid{
	margin: 0 auto;
}

#online_index .flow p{
	line-height: 1.8em;
}


#online_index .flow p a{
	font-weight: bold;
	text-decoration: underline;
}

#online_index .flow p a:hover{
	color: white;
	background-color: #2185D0;
}