@charset "utf-8";

/*============================================================================*\
   $Support
\*============================================================================*/

/*------------------------------------*\
   Point
\*------------------------------------*/
.support-point {
	position: relative;
	padding-right: 1.217391304347826em;
	padding-left: 1em;
	border-left: 2px solid #3d3e50;
}
.support-point:before {
	content: "";
	position: absolute;
	top: -10px;
	right: 0;
	width: 1.217391304347826em;
	height: 1.217391304347826em;
	background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpolygon%20class%3D%22a%22%20points%3D%222.641%2019.408%207.131%20.617%20.14%20.251%202.641%2019.408%22%2F%3E%3Cpolygon%20class%3D%22a%22%20points%3D%227.906%2021.09%2023.013%209.047%2017.73%204.455%207.906%2021.09%22%2F%3E%3Cpolygon%20class%3D%22a%22%20points%3D%228.662%2025.583%2027.86%2027.749%2027.371%2020.767%208.662%2025.583%22%2F%3E%3C%2Fsvg%3E') no-repeat bottom; /* ../img/parenting_icon_heading.svg */
	background-size: contain;
}

@media (min-width: 48em) {
	.support-point { font-size: 2.3rem; }
}

/*------------------------------------*\
   Highlight
\*------------------------------------*/
.support-highlight {
	padding-right: .25em;
	padding-left: .25em;
	background-size: 100% 1.6em;
	padding-bottom: .5em;
}
.support-highlight--parenting { background-image: linear-gradient(0deg, transparent .25em, rgba(143, 195, 31, .5) .25em, rgba(143, 195, 31, .5) .75em, transparent .75em); }

/*------------------------------------*\
   Work
\*------------------------------------*/
.work-img {
	position: relative;
	padding-top: 0;
}
.work-img img { width: 200px; }

/* Slick
   ---------------------------------- */
.work-img .slick-arrow {
	overflow: hidden;
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-10px) rotate(-5deg);
	margin-top: -20px;
	padding: 0;
	border: none;
	width: 40px;
	height: 40px;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2289.08%22%20height%3D%22100%22%3E%3Cdefs%3E%3Cstyle%3E.a%2C.b%2C.c%7Bfill%3Anone%7D.b%2C.c%7Bstroke%3A%23f9be40%3Bstroke-miterlimit%3A10%7D.b%7Bstroke-width%3A2px%7D.c%7Bstroke-width%3A3px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M40.08%200h-40v40h40z%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M40.08%2020H4.18l14-7.1v11%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M59.08%200h-40v40h40z%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M19.08%2020H55l-14-7.1v11%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M60.08%2040h-60v60h60z%22%2F%3E%3Cpath%20class%3D%22c%22%20d%3D%22M60.08%2070.5H6.58l21-10.65V76%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M89.08%2040h-60v60h60z%22%2F%3E%3Cpath%20class%3D%22c%22%20d%3D%22M29.08%2070.5h53.5l-21-10.65V76%22%2F%3E%3C%2Fsvg%3E') no-repeat; /* ../img/work_slider_control.svg */
	text-indent: 100%;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .2s;
}
.work-img .slick-prev { left: 15px; }
.work-img .slick-next {
	right: 15px;
	background-position: -19px 0;
}
.work-img .slick-arrow:focus,
.work-img .slick-arrow:hover { transform: translateY(-10px) rotate(0); }
.work-img .slick-prev:active { transform: translate(-5px, -10px) rotate(5deg); }
.work-img .slick-next:active { transform: translate(5px, -10px) rotate(5deg); }

@media (min-width: 48em) {
	.work-img img { width: auto; }

	/* Slide
	   ---------------------------------- */
	.work-img .slick-arrow {
		transform: translateY(-20px) rotate(-5deg);
		margin-top: -30px;
		width: 60px;
		height: 60px;
	}
	.work-img .slick-prev {
		left: 60px;
		background-position: 0 -40px;
	}
	.work-img .slick-next {
		right: 60px;
		background-position: -29px -40px;
	}
	.work-img .slick-arrow:focus,
	.work-img .slick-arrow:hover { transform: translateY(-20px) rotate(0); }
	.work-img .slick-prev:active { transform: translate(-5px, -20px) rotate(5deg); }
	.work-img .slick-next:active { transform: translate(5px, -20px) rotate(5deg); }
}

/*------------------------------------*\
   Questions
\*------------------------------------*/

/* Slide
   ---------------------------------- */
.slide {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Buttons */
.slide__btn {
	display: block;
	width: 100%;
	margin-top: -5px;
	margin-bottom: -2px;
	padding-right: 1.42857142857em;
	padding-left: 1.42857142857em;
	text-align: left;
}
.slide__btn { padding-right: 3.42857142857em; } /* 1.42857142857em + 2em */
.slide__btn--qa { padding-left: 3.42857142857em; }
.slide__btn--qa:before {
	content: "Q";
	position: absolute;
	top: 50%;
	left: 1.42857142857em;
	width: 1.5em;
	height: 1.5em;
	margin: -.85em .5em 0 0;
	border-radius: 50%;
	background-color: #3d3e50;
	line-height: 1.5em;
	color: #fff;
	text-align: center;
	transition: .2s;
}
.wf-abel-n4-active .slide__btn--qa:before { font-family: Abel, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.slide__btn:after {
	right: 1.42857142857em;
	transform: none;
	width: 0;
	height: 0;
	margin-top: -.43755em;
	border-style: solid;
	border-width: .875em .25em 0 .25em; /* 14px 4px 0 4px */
	border-color: #3d3e50 transparent transparent transparent;
	background-color: transparent;
}
.slide__btn:focus:after,
.slide__btn:hover:after { transform: none; }

/* Buttons (active) */
.slide__btn:focus,
.slide__btn:hover,
.slide__btn.is-active {
	background-color: #3d3e50;
	color: #fff;
}
.slide__btn:focus:before,
.slide__btn:hover:before,
.slide__btn.is-active:before {
	background-color: #fff;
	color: #3d3e50;
}
.slide__btn:focus:after,
.slide__btn:hover:after,
.slide__btn.is-active:after { border-top-color : #fff; }
.slide__btn.is-active:after {
	border-width: 0 .25em .875em .25em;
	border-color: transparent transparent #fff transparent;
}

/* Box */
.slide__box { position: relative; }
.js .slide__box { display: none; }

@media (min-width: 48em) {
	/* Slide
	   ---------------------------------- */
	.slide__btn {
		padding-right: 1.8125em;
		padding-left: 1.8125em;
	}
	
	/* Buttons */
	.slide__btn { padding-right: 3.8125em; }
	.slide__btn--qa { padding-left: 3.8125em; }
	.slide__btn:before { left: 1.8125em; }
	.slide__btn:after { right: 1.8125em; }
}