/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 29 2026 | 21:04:18 */
/*ーーーーーーーーーーーーーーーーーーー*/
/*メインビジュアル*/
/*ーーーーーーーーーーーーーーーーーーー*/
.p-mainVisual__inner .c-filterLayer__img {
    padding-left: 48%;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    background: linear-gradient(
        to right,
        #F8F8F7 0%,
        #F8F8F7 50%,
        #D3EADE 50%,
        #D3EADE 100%
    );
}
.p-mainVisual__inner .u-obf-cover{
	border-radius:15px 0 0 15px;
}
.p-mainVisual__textLayer{
	text-shadow:none !important;
}
	.mv_catch{
		line-height:1.5em;
	}
.mv_margin_box{
	position:relative;
	width:fit-content;
	border-radius:20px;
	border:solid 2px #045C3D;
	box-shadow:3px 3px 0 #045C3D;
	padding:.5em 3.5em !important;
}
.mv_margin_box .bubble{
	position:absolute;
	top:0;
	left:0;
	transform: translate(0%, -50%);
}
.wp-block-group.mv_text_wrap {
    width: 50%;
}
@media (min-width: 1560px) {
		.mv_catch span {
    font-size: 46px !important;
}
}
@media (max-width: 960px) {
	.p-mainVisual__inner .c-filterLayer__img {
    padding-left: 1em;
	padding-right:1em;
    padding-top: 2em;
    padding-bottom: 53vh;
    background: linear-gradient(
        to top,
        #F8F8F7 0%,
        #F8F8F7 75%,
        #D3EADE 25%,
        #D3EADE 100%
    );
}
	.p-mainVisual__inner .u-obf-cover {
    border-radius: 15px;
}
	.mv_catch{
		line-height:40px;
	}
	.mv_catch span {
    font-size: 27px !important;
	background:#F8F8F7;
}
	.p-mainVisual__textLayer {
    justify-content: flex-end;
}
	.wp-block-group.mv_text_wrap {
		width:100%;
		padding-bottom:5px;
	}
	.mv_margin_box{
		padding:0em !important;
		line-height:1;
		border-radius: 15px;
		margin: auto;
        margin-bottom: 1em;
        width: 100%;
	}
	.mv_margin_box .bubble{
	left:50%;
	transform: translate(-50%, -50%);
}
	.mv_margin_box .swl-inline-color.has-swl-main-color span{
		font-size:35px !important;
	}
	.mv_margin_box img {
	width:80px;
}
}
@media (min-width: 600px) and (max-width: 959px) {
	.p-mainVisual__inner .c-filterLayer__img {
        padding-bottom: 37vh;
        background: linear-gradient(to top, #F8F8F7 0%, #F8F8F7 53%, #D3EADE 47%, #D3EADE 100%);
    }
	.mv_catch .sp_{
		display:none;
	}
	    .mv_margin_box {
        width: 70%;
    }
}
@media (max-width: 320px) {
		.mv_catch span {
    font-size: 24px !important;
}
}
/*ーーーーーーーーーーーーーーーーーーー*/
/*リードセクション*/
/*ーーーーーーーーーーーーーーーーーーー*/
.read_img_box{
	position:relative;
}
.point_img{
	position:absolute;
    bottom: -70px;
    left: -20px;
}
/*ーーーーーーーーーーーーーーーーーーー*/
/*お悩みセクション*/
/*ーーーーーーーーーーーーーーーーーーー*/
.solution_section {
	position:relative;
  background-image: linear-gradient(180deg, rgba(248, 248, 247, 1), rgba(247, 244, 237, 1));
}
.yellow_arrow{
	position:absolute;
	bottom: -8.5em;
	left:50%;
	transform: translate(-50%, -50%);
}
/*ーーーーーーーーーーーーーーーーーーー*/
/*選ばれる理由セクション*/
/*ーーーーーーーーーーーーーーーーーーー*/
.reason_box{
	position:relative;
	padding:2em;
}
.reason_box .num_box{
	position:absolute;
	top:0;
	left:0;
	line-height:1;
}
.reason_box::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: #F7F4ED;
  border-radius:10px;
  z-index: -1;
}

/*ーーーーーーーーーーーーーーーーーーー*/
/*サービスセクション*/
/*ーーーーーーーーーーーーーーーーーーー*/
.top_service1_box{
	border-top:5px solid #E8DEC6;
	border-radius:0 0 20px 20px;
}
.top_service2_box{
	border-top:5px solid #FFC703;
	border-radius:0 0 20px 20px;
}
/*ポイント画像*/
.point_img_box{
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*----------------------------------------------------------*/
/*サービス一覧ページ*/
/*----------------------------------------------------------*/
/*サービス1の特徴*/
.service_1_box{
	position:relative;
	padding:2em;
}
.service_1_box .num_box{
	position:absolute;
	top:0;
	left:0;
	line-height:1;
}
.service_1_box::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: #fff;
  border-radius:0 0 10px 10px;
  border-top:5px solid #E8DEC6;
  z-index: -1;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/*サービス2の特徴*/
.service_2_box{
	position:relative;
	padding:1em;
	padding-top:5em;
}
.service_2_box .num_box{
	position:absolute;
	top:0;
	left:0;
	line-height:1;
}
.service_2_box::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 90%;
  background-color: #fff;
  border-radius:0 0 10px 10px;
  border-top:5px solid #FFC703;
  z-index: -1;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/*----------よくある質問セクション----------*/
/*アコーディオン*/
.faq_section .icon-chevron-small-up:before, .faq_section .icon-chevron-up:before,
.faq_section .icon-chevron-down:before, .faq_section .icon-chevron-small-down:before{
	color: #00A400;
}
.faq_section .swell-block-accordion__title::before,
.faq_section .swell-block-accordion__body::before{
    background: #00A400;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.faq_section .swell-block-accordion__title::before{
	 content: "Q";
}
.faq_section .swell-block-accordion__body::before {
    content: "A";
}
.faq_section .swell-block-accordion__title .swell-block-accordion__label,
.faq_section .swell-block-accordion__body p{
	padding-left:2.5em;
}

/*利用の流れ*/
.flow_box{
	position:relative;
	padding:2em;
}
.flow_box .num_box{
	position:absolute;
	top:0;
	left:0;
	line-height:1;
}
.flow_box::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: #F8F4ED;
  border-radius:10px;
  z-index: -1;
}

/*利用の流れ横線*/
.flow_wrap{
	position:relative;
}
.flow_wrap::before {
    content: "";
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #00A400;
    z-index: -1;
    width: 80%;
}
@media (min-width: 600px) and (max-width: 959px) {
	.flow_wrap::before{
		display:none;
	}
}

@media (max-width: 599px) {
	.flow_wrap::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        height: 80%;
        background-color: #00A400;
        z-index: -1;
        width: 2px;
        transform: translate(-50%, -50%);
}
}