@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    text-decoration: none;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, menu, nav, section, main, canvas {
    display: block;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
    content: none;
}

input, textarea {
    margin: 0;
    padding: 0;
}

input.styleReset, button.styleReset, textarea.styleReset, select.styleReset {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
input.styleReset:-ms-clear, button.styleReset:-ms-clear, textarea.styleReset:-ms-clear, select.styleReset:-ms-clear {
    display: none;
}
input.styleReset:-ms-reveal, button.styleReset:-ms-reveal, textarea.styleReset:-ms-reveal, select.styleReset:-ms-reveal {
    display: none;
}
input.styleReset:-ms-expand, button.styleReset:-ms-expand, textarea.styleReset:-ms-expand, select.styleReset:-ms-expand {
    display: none;
}

select::-ms-expand {
    display: none;
}

ol, ul, li {
    list-style: none;
}

a {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    vertical-align: baseline;
}

input::-webkit-input-placeholder {
    color: #ddd;
}

input::placeholder, input::-webkit-input-placeholder, input:-ms-input-placeholder, input::-moz-placeholder {
    color: #ddd;
}

:root {
	--color-primary: #399D26;
	--color-secondary: #4C3F2F;
	--color-accent: #F3C404;
	--color-text: #4C3F2F;
	--color-text-gray: #666;
	--color-text-link: #F18869;
	--color-primary-bg: #FAF8F4;
	--color-secondary-bg: #F3F1EC;
	--color-border-1: #FBEDDC;
	--color-border-2: #eee;

	--fontSize: 16px;
	--font-2xs: calc(var(--fontSize) * 0.6875);/* 11px */
	--font-xs: calc(var(--fontSize) * 0.75);/* 12px */
	--font-s: calc(var(--fontSize) * 0.875);/* 14px */
	--font-ms: calc(var(--fontSize) * 0.875);/* 14px */
	--font-m: calc(var(--fontSize) * 1);/* 16px */
	--font-l: calc(var(--fontSize) * 1);/* 16px */
	--font-xl: calc(var(--fontSize) * 1.125);/* 18px */
	--font-xxl: calc(var(--fontSize) * 1.125);/* 18px */
	--font-2xl: calc(var(--fontSize) * 1.25);/* 20px */
	--font-3xl: calc(var(--fontSize) * 1.375);/* 22px */
	--font-4xl: calc(var(--fontSize) * 1.375);/* 22px */
	--font-5xl: calc(var(--fontSize) * 1.375);/* 22px */
	--font-6xl: calc(var(--fontSize) * 2);/* 32px */
	--primary-font: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	--accent-font: "Jost", sans-serif;

	--radius01: 20px;
	--radius02: 10px;
	--radius03: 10px;
	
	--card-shadow: 3px 3px 0 var(--color-secondary-bg);
}

@media (min-width: 768px) {
	:root {
		--font-2xs: calc(var(--fontSize) * 0.6875);/* 11px */
		--font-xs: calc(var(--fontSize) * 0.75);/* 12px */
		--font-s: calc(var(--fontSize) * 0.875);/* 14px */
		--font-ms: calc(var(--fontSize) * 0.9735);/* 15px */
		--font-m: calc(var(--fontSize) * 1);
		--font-l: calc(var(--fontSize) * 1.125);/* 18px */
		--font-xl: calc(var(--fontSize) * 1.25);/* 20px */
		--font-xxl: calc(var(--fontSize) * 1.375);/* 22px */
		--font-2xl: calc(var(--fontSize) * 1.5);/* 24px */
		--font-3xl: calc(var(--fontSize) * 1.75);/* 28px */
		--font-4xl: calc(var(--fontSize) * 2);/* 32px */
		--font-5xl: calc(var(--fontSize) * 2.125);/* 34px */
		--font-6xl: calc(var(--fontSize) * 2.625);/* 42px */

		--radius01: 50px;
		--radius02: 30px;
		--radius03: 20px;

		--card-shadow: 6px 6px 0 var(--color-secondary-bg);
	}
}
ol, ul, li {
    list-style: none;
}

a {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    vertical-align: baseline;
}
body {
    position: relative;
    background-color: #fff
    font-size: 16px;
    font-family: var(--primary-font);
    color: var(--color-text);
    line-height: 1.75;
    letter-spacing: 0.05em;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    >* {
        position: relative;
        z-index: 1;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
p {
    line-height: 1.6;
}
.t-right {
    text-align: right;
}
a {
    color: inherit;
}
strong {
    font-weight: 600;
}
.ib {
    display: inline-block;
}
.mode_pc,
.mode_pc-ib {
    display: none;
}
.mode_sp {
    display: block;
}
.mode_sp-ib {
    display: inline-block;
}
.mover {
    transition: opacity 0.2s ease-out;
    backface-visibility: hidden;
    zoom: 1;
}
.mover:hover {
    opacity: 0.8;
}
.mover02 {
    transition: opacity 0.2s ease-out;
    backface-visibility: hidden;
    zoom: 1;
}
.mover02:hover {
    opacity: 0.9;
}
.inner {
    padding: 0 4vw;
}
.inner-min {
    padding: 0 2vw;
}
.inner {
    .inner-min {
        padding: 0;
    }
}
img {
    max-width: 100%;
    height: auto;
}
.em {
    font-weight: 600;
}
.text-link {
    color: var(--color-text-link);
}
.image-wrap {
    text-align: center;
}
@media (min-width: 1000px) {
	p {
		line-height: 1.75;
	}
	.inner {
		width: 90%;
		max-width: 1240px;
		margin: auto;
		padding: 0;
	}
	.inner-min {
		width: 90%;
		max-width: 1020px;
		margin: auto;
		padding: 0;
	}
	.mode_pc {
		display: block;
	}
	.mode_pc-ib {
		display: inline-block;
	}
	.mode_sp,
	.mode_sp-ib {
		display: none;
	}
}


#content-wrap {
    position: relative;
    margin: auto;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
	>section {
		position: relative;
		z-index: 1;
	}
    @media (min-width: 1000px) {
		padding: 0;
		&:before {
			content: "";
			display: block;
			position: absolute;
			top: -50px;
			right: -250px;
			width: 1000px;
			height: 1000px;
			background-color: var(--color-primary-bg);
			border-radius: 500px;
			z-index: 0;
			margin: auto;
		}
    }
}
.content-box {
    text-align: center;
    padding: 40px 0;
    @media (min-width: 1000px) {
		padding: 90px 0;
    }
}
.bg-box {
	background-color: var(--color-primary-bg);
}
.anchor {
    margin-top: -30px;
    padding-top: 30px;
}
.content-title {
	font-size: var(--font-3xl);
	font-weight: 600;
	color: var(--color-primary);
	line-height: 1.5;
	margin-bottom: 20px;
	&.bk {
		color: var(--color-text);
	}
    @media (min-width: 1000px) {
		margin-bottom: 50px;
		font-size: var(--font-4xl);
		line-height: 1.75;
    }
}
/*
inview style
---------------------------*/
.bottom_to_top {
    transform: translate3d(0, 50px, 0);
    opacity: 0;
}
.bottom_to_top_fadeIn {
    transform: translate3d(0, 0, 0);
    transition: 0.5s ease-in-out 0.3s;
    opacity: 1;
}
.fadeIn {
    transition: all 0.8s ease-out;
    opacity: 0;
}
.fadeIn_fadeIn {
    opacity: 1;
}
.floating-btn {
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
	padding: 15px 0;
	background-color: rgba(255,255,255,.9);
	.note {
		font-size: var(--font-s);
		padding-bottom: .5em;
	}
    @media (min-width: 1000px) {
		padding: 20px 0;
	}
}

.floating-btn.is-shown {
    opacity: 1;
    visibility: visible;
}
/*
.btn-wrap
---------------------------*/
.btn-wrap {
	text-align: center;
	&.left {
		text-align: left;
	}
	&.right {
		text-align: right;
	}
	.btn {
		&+.btn {
			margin-top: 15px;
		}
	}
	@media (min-width: 1000px) {
		text-align: center;
		.btn {
			&+.btn {
				margin-top: 0;
				margin-left: 10px;
			}
		}
	}
}
/*
.btn
---------------------------*/
.btn {
	position: relative;
	top: 0;
	display: inline-block;
	line-height: 1.4;
	width: 260px;
	padding: 0;
	zoom: 1;
	transition: .2s ease-in-out;
	padding-top: 0;
	cursor: pointer;
	&.minit {
		width: 200px;
		&:before {
			content: none;
		}
		&:after {
			background-image: url(../img/icon-arrow.svg);
			right: 18px;
			transition: all 0.3s ease-out;
		}
		a, button, input, span.btnType {
			padding: 10px 20px;
			box-shadow: 3px 3px 0px 0px var(--color-secondary-bg);
		}
	}
	&.white {
		a {
			background-color: var(--color-primary-bg);
			border: 1px solid var(--color-primary);
			color: var(--color-primary);
			box-shadow: 5px 5px 0px 0px var(--color-border-2);
		}
		&:before {
			background-color: var(--color-primary);
		}
		&:after {
			background-image: url(../img/icon-arrow.svg);
		}
		&:not(.minit):hover {
			a, button, input, span.btnType {
				background-color: var(--color-primary);
				color: #fff;
				border: 1px solid #fff;
			}
			&:before {
				background-color: #fff;
			}
			&:after {
				background-image: url(../img/icon-arrow-g.svg);
			}
		}
	}
	&:before,
	&:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		pointer-events: none;
	}
	&:before {
		width: 36px;
		height: 36px;
		border-radius: 50px;
		background-color: #fff;
		right: 10px;
		z-index: 2;
		border: 1px solid var(--color-primary);
		transition: all 0.3s ease-out;
	}
	&:after {
		right: 22px;
		width: 12px;
		height: 12px;
		background-image: url(../img/icon-arrow-g.svg);
		background-size: cover;
		z-index: 3;
	}
	a, button, input, span.btnType {
		display: block;
		width: 100%;
		background-color: var(--color-primary);
		border: 1px solid var(--color-primary);
		color: #fff;
		font-size: var(--font-l);
		font-weight: 600;
		line-height: 1.4;
		text-align: left;
		border-radius: 50px;
		text-decoration: none;
		padding: 14px;
		cursor: pointer;
		transition: all 0.3s ease-out;
		box-shadow: 5px 5px 0px 0px var(--color-secondary-bg);
		>* {
			font-weight: 500;
		}
	}
	&:not(.minit):hover {
		a, button, input, span.btnType {
			background-color: #fff;
			color: var(--color-primary);
		}
		&:before {
			background-color: var(--color-primary);
		}
		&:after {
			background-image: url(../img/icon-arrow.svg);
		}
	}
	@media (min-width: 1000px) {
		width: 400px;
		min-width: inherit;
		a, button, input, span.btnType {
			padding: 20px 20px;
		}
		&:before {
			right: 15px;
		}
		&:after {
			right: 28px;
		}
	}
	@media (max-width: 330px) {
		a, button, input, span.btnType {
			padding: 12px;
		}
	}
}
/*
flexContent
---------------------------*/
.flexContent-2 {
	>div {
		width: 100%;
		&+div {
			margin-top: 30px;
		}
	}
	@media (min-width: 1000px) {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		&.center {
			align-items: center;
		}
		>div {
			width: calc((100% - 32px) / 2);
			&+div {
				margin-top: 0;
			}
			&:nth-of-type(n+3){
				margin-top: 50px;
			}
		}
		.od1 {
			order: 1;
		}
		.od2 {
			order: 2;
		}
	}
}
.flexContent-3 {
	>div {
		width: 90%;
		margin: auto;
		&+div {
			margin-top: 50px;
		}
	}
	@media (min-width: 1000px) {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;
		&.center {
			align-items: center;
		}
		>div {
			width: calc((100% - 64px) / 3);
			margin: inherit;
			margin-right: 32px;
			&+div {
				margin-top: 0;
			}
			&:nth-of-type(3n) {
				margin-right: 0;
			}
		}
		.od1 {
			order: 1;
		}
		.od2 {
			order: 2;
		}
	}
}
header {
	position: relative;
	padding: 20px 2vw;
	z-index: 10;
	h1 {
		img {
			width: 100px;
		}
		a {
			display: flex;
			align-items: center;
			span {
				letter-spacing: 0;
				display: inline-block;
				font-size: var(--font-xl);
				font-weight: 600;
				margin-left: 10px;
			}
		}
	}
	@media (min-width: 1000px) {
		padding: 20px 2vw;
		h1 {
			img {
				width: 180px;
			}
			a {
				span {
					font-size: var(--font-2xl);
					margin-left: 20px;
				}
			}
		}
	}
}
.main-visual {
	position: relative;
	text-align: left;
	&:before {
		content: "";
		display: block;
		position: absolute;
		bottom: -80px;
		right: -50px;
		width: 500px;
		height: 500px;
		background-color: var(--color-primary-bg);
		border-radius: 500px;
		z-index: 0;
		margin: auto;
	}
	>div {
		position: relative;
		z-index: 1;
	}
	.main-visual__inner {
		padding: 20px 0;
	}
	.main-visual__title {
		font-size: var(--font-4xl);
		font-weight: 600;
		color: var(--color-primary);
		line-height: 1.5;
		margin-bottom: 20px;
	}
	.main-visual__text {
		font-size: var(--font-l);
		line-height: 1.5;
		&+.main-visual__text {
			margin-top: .5em;
		}
	}
	.btn {
		margin-top: 30px;
	}
	.main-visual__img {
		text-align: right;
		img {
			width: 80%;
		}
	}
	@media (min-width: 1000px) {
		&:before {
			content: none;
		}
		.main-visual__inner {
			padding: 60px 0 75px;
		}
		.main-visual__title {
			line-height: 1.75;
		}
		.main-visual__text {
			line-height: 1.75;
			&+.main-visual__text {
				margin-top: 1em;
			}
		}
		.btn {
			margin-top: 50px;
		}
		.main-visual__img {
			text-align: center;
			img {
				width: auto;
			}
		}
	}
}
#worries {
	.speech-bubble-wrap {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 0 2vw;
		&+.speech-bubble-wrap {
			margin-top: 20px;
		}
	}
	.speech-bubble {
		width: 48%;
		position: relative;
		display: block;
		background-color: #fff;
		padding: 20px 10px;
		border-radius: 5px;
		border: 1px solid var(--color-border);
		z-index: 20;
		margin-bottom: 20px;
		&:nth-of-type(odd) {
			margin-right: 4%;
		}
		&:before,
		&:after {
			display: inline-block;
			content: "";
			width: 20px;
			height: 10px;
			aspect-ratio: 1/0.8660254038;
			clip-path: polygon(0 0, 50% 100%, 100% 0);
			background: #fff;
			position: absolute;
			bottom: -10px;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 10;
		}
		&:after {
			background: var(--color-border);
			height: 11px;
			bottom: -12px;
			z-index: 9;
		}
		p {
			text-align: left;
			font-size: var(--font-l);
			font-weight: 600;
			line-height: 1.5;
		}
	}
	@media (min-width: 1000px) {
		.speech-bubble-wrap {
			display: flex;
			justify-content: center;
			gap: 30px;
			&+.speech-bubble-wrap {
				margin-top: 30px;
			}
		}
		.speech-bubble {
			width: inherit;
			min-width: 300px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding:  30px 40px;
			&+.speech-bubble {
				margin-top: 0;
			}
			&:nth-of-type(odd) {
				margin-right: 0;
			}
			p {
				text-align: center;
				font-size: var(--font-xl);
				line-height: 1.75;
			}
		}
	}
}
#support {
	.support-inner {
		background-color: var(--color-primary);
		color: #fff;
		text-align: left;
		padding: 30px 4vw;
		border-radius: var(--radius03);
	}
	.support-inner__title {
		font-size: var(--font-2xl);
		font-weight: 600;
		line-height: 1.5;
		margin-bottom: .5em;
	}
	.support-inner__text {
		font-size: var(--font-l);
		line-height: 1.5;
		.em {
			font-weight: 600;
		}
	}
	.support-img {
		text-align: center;
		img {
			width: 80%;
		}
	}
	@media (min-width: 1000px) {
		.support-inner {
			padding: 50px;
		}
		.support-inner__title,
		.support-inner__text {
			line-height: 1.75;
		}
		.support-img {
			text-align: center;
			img {
				width: auto;
			}
		}
	}
}
#plan {
	.content-title {
		margin-bottom: 30px;
	}
	.plan-box {
		padding: 0 4vw;
		&:nth-of-type(2){
			.plan-image {
				&:before {
					content: "02";
				}
			}
		}
		&:nth-of-type(3){
			.plan-image {
				&:before {
					content: "03";
				}
			}
		}
		dl {
			text-align: left;
			margin-top: 10px;
			dt {
				font-size: var(--font-2xl);
				line-height: 1.75;
				color: var(--color-primary);
				font-weight: 600;
				padding-bottom: .25em;
			}
			dd {
				font-size: var(--font-l);
				line-height: 1.5;
			}
		}
	}
	.plan-image {
		position: relative;
		&:before {
			content: "01";
			display: block;
			position: absolute;
			top: -25px;
			left: -20px;
			font-size: 50px;
			font-weight: 600;
			color: var(--color-primary);
			font-family: var(--accent-font);
			z-index: 1;
		}
	}
	@media (min-width: 1000px) {
		.content-title {
			margin-bottom: 60px;
		}
		.plan-box {
			padding: 0;
			dl {
				margin-top: 20px;
			}
			dd {
				line-height: 1.75;
			}
		}
		.plan-image {
			position: relative;
			&:before {
				top: -30px;
				left: -20px;
				font-size: 64px;
			}
		}
	}
}
#plan02 {
	.note {
		padding-top: 1.5em;
	}
}
.plan-detail {
	display: flex;
	flex-wrap: wrap;
	background-color: var(--color-primary-bg);
	text-align: left;
	padding: 30px 4vw;
	border-radius: var(--radius02);
	.plan-title {
		align-self: flex-start;
		width: 100%;
		font-size: var(--font-2xl);
		font-weight: 600;
		line-height: 1.6;
		color: var(--color-primary);
		text-align: center;
		margin-bottom: 1em;
		border-radius: 50px;
		border: 1px solid var(--color-primary);
		background-color: #fff;
		padding: 5px;
	}
	dl {
		width: 100%;
		&+dl {
			margin-top: 20px;
		}
	}
	dt {
		position: relative;
		font-size: var(--font-xl);
		font-weight: 600;
		color: var(--color-primary);
		padding-bottom: .75em;
		padding-left: 18px;
		&:before {
			content: "";
			display: block;
			width: 12px;
			height: 12px;
			border: 4px solid var(--color-primary);
			position: absolute;
			top: 3px;
			left: 0;
			border-radius: 50px;
		}
	}
	ul {
		padding-bottom: 15px;
	}
	li {
		line-height: 1.5;
		padding-left: 1em;
		text-indent: -1em;
		&+li {
			padding-top: .5em;
		}
	}
	.note {
		font-size: var(--font-s);
	}
	.recommend {
		align-self: flex-end;
		width: 100%;
		background-color: #fff;
		padding: 20px 4vw;
		border-radius: 5px;
		margin-top: 10px;
		ul {
			padding-bottom: 0;
		}
	}
	@media (min-width: 1000px) {
		padding: 30px;
		dl {
			&+dl {
				margin-top: 30px;
			}
		}
		dt {
			padding-left: 22px;
			&:before {
				top: 2px;
				width: 16px;
				height: 16px;
				border: 5px solid var(--color-primary);
			}
		}
		.recommend {
			background-color: #fff;
			padding: 20px;
		}
	}
}

#flow {
	.flow-content {
		position: relative;
		background-color: #fff;
		text-align: left;
		border-radius: var(--radius03);
		box-shadow: var(--card-shadow);
		border: 1px solid #fff;
		padding: 10px 4vw 20px;
		dt {
			font-family: var(--accent-font);
			font-size: var(--font-2xl);
			font-weight: 600;
			line-height: 1.75;
			color: var(--color-primary);
			padding-bottom: .5em;
			margin-top: -1em;
			.no {
				font-size: 50px;
			}
		}
		dd {
			line-height: 1.75;
			.note {
				display: block;
				color: #888;
				line-height: 1.75;
			}
		}
	}
	@media (min-width: 1000px) {
		.flow-content {
			padding: 10px 30px 20px;
			dt {
				margin-top: -1.25em;
				.no {
					font-size: 74px;
				}
			}
			
		}
	}
}
#faq {
	.flexContent-2 {
		.img-content {
			text-align: center;
			img {
				width: 60%;
			}
		}
		.faq-list {
			text-align: left;
			dl {
				&+dl {
					padding-top: 20px;
				}
			}
			dt, dd {
				display: flex;
				align-items: center;
				line-height: 1.5;
			}
			.q, .a {
				font-family: var(--accent-font);
				font-size: var(--font-2xl);
				font-weight: 300;
				background-color: var(--color-primary);
				color: #fff;
				border: 1px solid var(--color-dark);
				width: 36px;
				height: 36px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				margin-right: 10px;
			}
			dt {
				font-size: var(--font-l);
				font-weight: 600;
				color: var(--color-primary);
				margin-bottom: 10px;
			}
			.a {
				background-color: var(--color-primary-bg);
				color: var(--color-primary);
			}
		}
	}
	@media (min-width: 1000px) {
		.flexContent-2 {
			.img-content {
				width: 25%;
				text-align: center;
				img {
					width: auto;
				}
			}
			.faq-list {
				width: 70%;
				dl {
					&+dl {
						padding-top: 25px;
					}
				}
				dt {
					margin-bottom: 15px;
				}
			}
		}
	}
}
footer {
	background-color: var(--color-primary);
	color: #fff;
	padding: 20px 0;
	h3 {
		font-size: var(--font-3xl);
		line-height: 1.5;
		font-weight: 600;
		padding-bottom: 1.5em;
	}
	.copy {
		text-align: center;
		padding-top: 3em;
	}
	@media (min-width: 1000px) {
		padding: 60px 0 30px;
	}
}