@charset "utf-8";

/*	カードコンポーネント（section-intro / section-target 共通）
------------------------------*/
.vs-card {
	margin-top: 80px;
	padding: 80px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	border: 20px solid var(--color-yellow-green);
	-webkit-box-shadow: 20px 20px 20px 0 rgba(157, 201, 58, 0.35);
	box-shadow: 20px 20px 20px 0 rgba(157, 201, 58, 0.35);
	background-color: var(--color-white);
}

/*	セクション共通見出し
------------------------------*/
.vs-section-hd {
	margin-bottom: 20px;
	color: var(--color-green);
	font-family: var(--font-family-tertiary);
	font-weight: var(--font-weight-700);
	font-size: clamp(1.5rem, 0.784rem + 3.05vw, 2.25rem);
	text-align: center;
	line-height: 1.4;
	letter-spacing: normal;
}

/*	section-intro（イラストをカード下辺に揃える）
------------------------------*/
#section-intro {
	padding-bottom: 0;
}

/*	保育所等訪問支援とは？
------------------------------*/
.vs-intro-txt {
	text-align: justify;
}
.vs-intro-illust {
	margin-top: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.vs-intro-center {
	display: flex;
    flex-direction: column;
    align-items: center;
	width: min(50%, 400px);
}
.vs-intro-center img {
	display: block;
	max-width: 100%;
}
.vs-intro-center img.vs-intro-illust_2 {
	max-width: 80%;
    margin: 40px auto 0;
}
.vs-intro-woman {
	width: min(12.5%, 100px);
}
.vs-intro-man {
	width: min(13.75%, 110px);
}

/*	お子さまのこんなお困りごとありませんか？
------------------------------*/
#section-problems {
	margin-top: 120px;
	padding: 80px 0;
	background-color: var(--color-yellow-green);
}
.vs-problems-hd {
	margin-bottom: 40px;
	color: var(--color-white);
	font-family: var(--font-family-tertiary);
	font-weight: var(--font-weight-700);
	font-size: clamp(1.5rem, 0.784rem + 3.05vw, 2.25rem);
	text-align: center;
	line-height: 1.4;
}
.vs-problems-img {
	text-align: center;
}
.vs-problems-img img {
	max-width: 100%;
}

/*	どんなことをするの？
------------------------------*/
#section-what {
	margin-top: 120px;
	justify-content: flex-end;
}
.what-img {
	width: 50%;
    border: 20px solid #f0f0f0;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.what-txt {
	width: calc((660 / 1200) * 100%);
    padding: 80px 60px 0;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    border: 20px solid var(--color-yellow-green);
    -webkit-box-shadow: -20px 20px 20px 0 rgba(157, 201, 58, 0.35);
    box-shadow: -20px 20px 20px 0 rgba(157, 201, 58, 0.35);
    background-color: var(--color-white);
    position: relative;
    z-index: 1;
}
.what-txt p {
	line-height: 2;
	text-align: justify;
}
.what-illust {
	text-align: right;
}
.what-illust img {
	width: 200px;
}

/*	どのような子が対象？
------------------------------*/
#section-target {
	position: relative;
}
.vs-target-star {
	position: absolute;
	top: -50px;
    left: 100px;
	line-height: 0;
}
.vs-target-star img {
	width: 100px;
}
.vs-target-hd {
	color: var(--color-light-blue);
}
.vs-target-lead {
	text-align: center;
	margin-bottom: 30px;
}
.vs-facility-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 30px;
}
.vs-facility-list li {
	padding: 10px 24px;
	color: var(--color-green);
	font-family: var(--font-family-tertiary);
	font-weight: var(--font-weight-700);
	font-size: var(--font-size-medium);
	-webkit-border-radius: 6px;
	border-radius: 6px;
	line-height: 1.4;
	background-color: var(--color-yellow);
}
.vs-target-txt {
	text-align: justify;
}
.vs-freq,
.vs-fee {
	margin-top: 60px;
	text-align: center;
}
.vs-sub-hd {
	color: var(--color-light-blue);
	font-family: var(--font-family-tertiary);
	font-weight: var(--font-weight-700);
	font-size: clamp(1.25rem, 1.029rem + 0.94vw, 1.5rem);
	line-height: 1.4;
}
.vs-freq-main {
	margin-top: 12px;
	color: var(--color-blue);
	font-family: var(--font-family-tertiary);
	font-weight: var(--font-weight-700);
	font-size: clamp(1.5rem, 0.784rem + 3.05vw, 2.25rem);
	line-height: 1.4;
}
.vs-freq-sub {
	margin-top: 6px;
}
.vs-freq-note {
	line-height: 2;
	text-align: left;
	max-width: 600px;
	margin: 20px auto 0;
}

/*	ご利用の流れ
------------------------------*/
#section-flow {
	margin-top: 120px;
	padding: 80px 0;
	background-color: var(--color-green);
}
.vs-flow-hd {
	color: var(--color-yellow);
	font-family: var(--font-family-tertiary);
	font-weight: var(--font-weight-700);
	font-size: clamp(1.5rem, 0.784rem + 3.05vw, 2.25rem);
	text-align: center;
	line-height: 1.4;
	margin-bottom: 30px;
}
.vs-flow-lead {
	color: var(--color-white);
	text-align: justify;
}
.vs-flow-list {
	max-width: 500px;
	margin: 50px auto 0;
}
.vs-flow-list li {
	padding: 18px 40px;
	color: var(--color-green);
	font-family: var(--font-family-tertiary);
	font-weight: var(--font-weight-700);
	font-size: var(--font-size-medium);
	text-align: center;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	line-height: 1.4;
	background-color: var(--color-white);
	position: relative;
}
.vs-flow-list li + li {
	margin-top: 48px;
}
.vs-flow-list li + li::before {
	content: "▼";
	display: block;
	color: var(--color-yellow);
	font-size: var(--font-size-large);
	line-height: 1;
	text-align: center;
	position: absolute;
	top: -36px;
	left: 0;
	right: 0;
}
.vs-flow-cta-txt {
	margin-top: 60px;
	color: var(--color-white);
	text-align: center;
}
#section-flow .base-btn {
	margin-top: 16px;
}
#section-flow .base-btn a {
	width: min(80%, 320px);
	font-weight: var(--font-weight-700);
    font-size: var(--font-size-medium);
	color: var(--color-green);
	-webkit-box-shadow: none;
    box-shadow: none;
	background: var(--color-yellow);
}
#section-flow .base-btn a::after {
	width: 8px;
    height: 16px;
	background: url(../img/angle-right_g.svg) no-repeat center right;
    background-size: contain;
}

/*	レスポンシブ 1024px
------------------------------*/
@media only screen and (max-width: 1024px) {

.vs-card {
	padding: 60px;
}
.what-txt {
	width: 65%;
    padding: 80px 20px 0;
}
.what-illust img {
    width: 150px;
}

}

/*	レスポンシブ 768px
------------------------------*/
@media only screen and (max-width: 768px) {

.vs-card {
	padding: 80px 60px;
	-webkit-box-shadow: 10px 10px 10px 0 rgba(157, 201, 58, 0.35);
	box-shadow: 10px 10px 10px 0 rgba(157, 201, 58, 0.35);
}
#section-problems {
	margin-top: 80px;
	padding: 60px 0;
}
#section-what {
	flex-direction: column;
}
.what-txt {
	width: 100%;
	padding: 80px 60px 0;
	-webkit-box-shadow: 10px 10px 10px 0 rgba(157, 201, 58, 0.35);
	box-shadow: 10px 10px 10px 0 rgba(157, 201, 58, 0.35);
}
.what-txt .vs-section-hd {
	text-align: center;
}
.what-img {
	width: 80%;
    margin: -50px auto 0;
    position: static;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.vs-target-star img {
	width: 60px;
}
.vs-facility-list {
	justify-content: space-between;
}
#section-flow {
	margin-top: 80px;
	padding: 60px 0;
}
.vs-flow-list {
	max-width: 100%;
}

}

/*	レスポンシブ 480px
------------------------------*/
@media only screen and (max-width: 480px) {

.vs-card {
	margin-top: 40px;
	padding: 40px 20px;
	border: 6px solid var(--color-yellow-green);
	-webkit-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 6px 6px 6px 0 rgba(157, 201, 58, 0.35);
	box-shadow: 6px 6px 6px 0 rgba(157, 201, 58, 0.35);
}
.vs-intro-illust {
	margin-top: 20px;
}
.vs-intro-center {
	width: 80%;
}
.vs-intro-center img.vs-intro-illust_2 {
	max-width: 70%;
}
#section-problems {
	margin-top: 60px;
	padding: 40px 0;
}
#section-what {
	margin-top: 60px;
}
.what-txt {
	padding: 40px 20px 0;
	border: 6px solid var(--color-yellow-green);
	-webkit-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 6px 6px 6px 0 rgba(157, 201, 58, 0.35);
	box-shadow: 6px 6px 6px 0 rgba(157, 201, 58, 0.35);
}
.what-illust img {
    width: 100px;
}
.what-img {
	width: 100%;
    margin: 0 auto;
	border: 12px solid #f0f0f0;
}
.vs-target-star {
	left: 40px;
}
.vs-target-lead {
	text-align: justify;
}
.vs-facility-list {
	justify-content: flex-start;
}
.vs-facility-list li {
	padding: 8px 16px;
	font-size: var(--font-size-regular);
}
.vs-freq,
.vs-fee {
	margin-top: 40px;
}
.vs-fee-txt {
	text-align: justify;
}
#section-flow {
	margin-top: 60px;
	padding: 40px 0;
}
.vs-flow-list li {
	padding: 16px 20px;
	font-size: var(--font-size-regular);
}
.vs-flow-list li + li {
	margin-top: 40px;
}
.vs-flow-list li + li::before {
	top: -30px;
}
.vs-flow-cta-txt {
	margin-top: 40px;
}

}