/*-----WEB相談-------*/


.btn.btn-sub, .btn.btn-sub:active, .btn.btn-sub:hover {
    background-color: #e56886 !important;
    border-color: #e56886;
    color: #fff !important;
    font-weight: bold;
}

.section-cta {
  --section-block-pad: var(--sm) var(--lg);
  --section-inner-gap: var(--gap);
  --content-align: normal;
  --heading-main-size: var(--font-size-md);
  --heading-main-text: var(--black);
  --theme: #e56886;
  --btn-bg: var(--theme);
  --btn-bg-hover: var(--theme);
  --btn-text: #fff;
  --btn-radius: .2em;
  --btn-pad: 1.2em .5em;
  --btn-font-size: var(--font-size-root)
  text-align: center;
  min-width: 70vw;
}
.section-cta .flex {
  gap: var(--gap);
  text-align: center;
  line-height: var(--line-height-sm);
  color: var(--theme);
}
.section-cta .btn {
  margin-bottom: 1em;
  letter-spacing: 0;
  font-family: var(--font-family-sans);
}


@media (min-width: 768px){
.pop-bg {
  --content-width: 100%;
  z-index: 11;
  position: relative;
	background:url(/fileadmin/res/online/pop-bg.png) center 0 no-repeat;
	background-size: contain;
	padding-top: 50px;
	margin-top: -70px;
  margin-inline: auto;;
	width: 80%;
}
.pop {
	text-align: center;
	margin-top: 0;
}
.pop img {
	width: 80%;
	margin: 0  auto 50px;
}
}



@media (max-width: 767px){
.pop-bg {
	background:url(/fileadmin/res/online/pop-bg-xs.png) center 0 no-repeat ;
	background-size: contain;
	margin-top: -10px;
	padding: 40px 20px 0;
}
.pop {
	text-align: center;
	margin-top: 0;
}
.pop img {
	width: 100%;
	margin: 0 auto 30px;
}
}




/* point */
.section-point .content-text {
  display: flex;
  flex-direction: column-reverse;
  gap: 1em;
  padding-top: 0;
}
.section-point .content-text-inner {
  margin-top: 0;
}

.point {
  --item-template: "c" 1fr "i" auto;
}
.point .item-caption {
  padding: 0 1em 2em;
  line-height: var(--line-height);
}
.point .item-image {
  margin: 0 1.5em 1.5em;
  width: auto;
  border-radius: 4px;
}
.point h3{
	font-size: 1.125rem;
	text-align: center;
	padding-top: 80px;
	padding-bottom: 10px;
}
.point p{
	font-size: 0.938rem;
	margin-left: .5rem !important;
	margin-right: .5rem !important;
}
@media (min-width: 768px){
.point p{
	font-size: 0.750rem;
}
}


.point {
	margin-bottom: 30px;
}

.point-1 {
	background-image: url(/fileadmin/res/online/point-foot.png) ,url(/fileadmin/res/online/point1-head.png);
	background-size: 100%,cover;
	background-position: bottom center,top center;
	background-repeat: no-repeat;
}
.point-2 {
	background-image: url(/fileadmin/res/online/point-foot.png) ,url(/fileadmin/res/online/point2-head.png);
	background-size: 100%,cover;
	background-position: bottom center,top center;
	background-repeat: no-repeat;
}
.point-3 {
	background-image: url(/fileadmin/res/online/point-foot.png) ,url(/fileadmin/res/online/point3-head.png);
	background-size: 100%,cover;
	background-position: bottom center,top center;
	background-repeat: no-repeat;
}




/* recom こんなふたりに */
.recom h3{
	font-size: 1.125rem;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 10px;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Yu Gothic",YuGothic,Arial,Meiryo;
	font-weight: bold;
}
.recom h3 span{
		background: linear-gradient(transparent 60%, #fcd9e8 60%);
}
@media (max-width: 767px){
.recom h3{
	font-size:1.000rem;
}
}


/* step 3ステップ */
a.text-info {
  color: #17a2b8;
}
a.text-info:focus, a.text-info:hover {
  color: #117a8b;
}
.step h2{
	font-size: 1.875rem !important;
}
.step h3{
  display: flex;
  align-items: center;
	font-size: 1.000rem;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Yu Gothic",YuGothic,Arial,Meiryo;
	font-weight: bold;
}
.step img{
	width: 54px;
	display: inline-block;
	margin-right: 10px;
}
.step .step-line img{
	width: 12px;
	display: inline-block;
}

@media (max-width: 767px){
.step img{
	width: 32px;
}
.step h3{
	font-size: 1.313rem;
}
}

/*  左右ボーダー　*/
.step-line {
	margin-top: 20px;
	display: flex;
	align-items: center;
}
.step-line:before, .step-line:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #444;
	display: block;
}
.step-line:before {
	margin-right: .4em;
}
.step-line:after {
	margin-left: .4em;
}






/* FAQ */

.faq .border{
	border-color: #e9e9e9 !important;
	padding: 20px;
}
@media (min-width: 768px){
.faq .border{
	padding: 20px 40px;
}
}

.cp_list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.cp_list li{
	position:relative;
	line-height:2em;
	padding-left:3em;
}

.cp_list li:before {
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	background:url(/fileadmin/res/online/icon-q.png)no-repeat;
	width: 30px;
	height: 30px;
	background-size:contain;
	padding-left: 40px;
	vertical-align: middle;
/*	content: '';
	background-image:url(/fileadmin/res/online/icon-q.png) ;
	background-repeat: no-repeat;
	background-position: 0 0 ;
	width: 30px;
	height: 30px;
	background-size:contain;
	padding-left: 40px;
	display: inline-block;
	vertical-align: middle;*/
}

.card-header,.card{
	background-color: transparent;
	border-bottom:none;
}

.card p {
	margin-bottom: 0;
}

.exp{
    text-decoration: none;
    color: #fff;
    background-color: #e6e6e6;
		border-radius:30px;
		border-color: #e6e6e6;
    padding:  0 .5rem;
    font-size: 0.813rem;
    display:inline-block;
    float: right;
    width: 4rem;
    text-align: center;
}

.exp:hover{
	text-decoration: none;
    background-color: #e6e6e6;
}

.exp:after{
	content: "ー";
	font-weight: bold;
}
.exp.collapsed:after{
	content: "＋";
	font-weight: bold;
}











/* パンくずをOFF */
.nav-breadcrumb {
	display: none;
}


/* 背景の飾り */
.bg_art_1{
	background:url(/fileadmin/res/online/bg_art_1.jpg)  0 100px no-repeat;
	background-size: contain;
}
@media (min-width: 768px){
.bg_art_1{
	background-position: 0 0;
}
}


.bg_tree{
	background:url(/fileadmin/res/online/bg-tree.jpg)  0 0 no-repeat;
	background-size: cover;
	z-index: 2;
}

.bg_art_2{
	background:url(/fileadmin/res/online/bg_art_2.jpg)  0 0 no-repeat;
	background-size: contain;
}
.bg_art_3{
	background:url(/fileadmin/res/online/bg_art_3.png) 0 0 no-repeat;
	background-size: contain;
	padding-top: 0;
	margin-top: 0;
	z-index: 3;
}
@media (min-width: 768px){
.bg_art_3{
	background:url(/fileadmin/res/online/bg_art_3.png) 0 -80px no-repeat;
	background-size: cover;
	padding-top: 300px;
	margin-top: -200px;
}
}












@media (max-width: 767px){
}

@media (min-width: 768px){
}