@charset: 'utf-8';

/*! sanitize.css v7.0.2 | CC0 License | github.com/csstools/sanitize.css */*,::after,::before{background-repeat:no-repeat;box-sizing:border-box}::after,::before{text-decoration:inherit;vertical-align:inherit}html{cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.15;-moz-tab-size:4;tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-break:break-word}body,button,input,select{margin:0}h1{font-size:2em;margin:.67em 0}hr{height:0;overflow:visible}details,main{display:block}nav ol,nav ul{list-style:none}code,kbd,pre,samp{font-family:Menlo,Consolas,Roboto Mono,Ubuntu Monospace,Oxygen Mono,Liberation Mono,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}button{overflow:visible;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset{padding:.35em .75em .625em}input{overflow:visible}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto;resize:vertical}[type=checkbox],[type=radio]{padding:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:ButtonText dotted 1px}dialog{background-color:#fff;border:solid;color:#000;display:block;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}[hidden],dialog:not([open]),template{display:none}summary{display:list-item}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled],[disabled]{cursor:disabled}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}

html {
	font-size: 62.5%;
}

body {
	position: relative;
	width: 100%;
	background-color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	font-family: sans-serif;
	color: #000;
	z-index: 0;
}

a {
	color: #000;
}

p.rotate5 {
	transform: rotate(-5deg);
}

.font-orange {
	color: #c46221;
}

.font-blue {
	color: #60c1bd;
}

.font-pink {
	color: #e4007f;
}

.float-wrap {
	overflow: hidden;
}

#wrap {
	position: relative;
	width: 100%;
	min-width: 1000px;
	margin: 0 auto;
	background-image:
		url(./images/bg-left.png),
		url(./images/bg-right.png);
	background-repeat: no-repeat;
	background-position: top left, top right;
	background-size: 400px auto;
	text-align: center;
}

#header {
	text-align: center;
	padding-top: 20px;
	margin: 0 0 150px;
}

#header h1 {
	position: relative;
	width: 600px;
	height: 132px;
	margin: 0 auto;
	padding: 0;
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: -.4em;
}


#header h1.out span {
	transform: translateY(-10vw);
	opacity: 0;
}

#header h1 span.logo {
	display: inline-block;
	height: 132px;
}

#header h1 span.logo img {
	width: auto;
	height: 132px;
}

#header h1 span.logo.logo00 {
	transition: opacity 1s, transform 1s;
	-moz-animation: anim_up 1s linear 2s infinite alternate;
	-webkit-animation: anim_up 1s linear 2s infinite alternate;
	animation: anim_up 1s linear 2s infinite alternate;
}
#header h1 span.logo.te1 {
	transition: opacity 1s .2s, transform 1s .2s;
	-moz-animation: anim_up 1s linear 2.2s infinite alternate;
	-webkit-animation: anim_up 1s linear 2.2s infinite alternate;
	animation: anim_up 1s linear 2.2s infinite alternate;
}
#header h1 span.logo.mi {
	transition: opacity 1s .4s, transform 1s .4s;
	-moz-animation: anim_up 1s linear 2.4s infinite alternate;
	-webkit-animation: anim_up 1s linear 2.4s infinite alternate;
	animation: anim_up 1s linear 2.4s infinite alternate;
}

#header h1 span.logo.te2 {
	transition: opacity 1s .6s, transform 1s .6s;
	-moz-animation: anim_up 1s linear 2.6s infinite alternate;
	-webkit-animation: anim_up 1s linear 2.6s infinite alternate;
	animation: anim_up 1s linear 2.6s infinite alternate;
}

#header h1 span.text {
	position: absolute;
	top: 15px;
	left: 50%;
	margin-left: -1.5em;
	transition: opacity 1s .8s, transform 1s .8s;
	letter-spacing: 0;
}

#header h2 {
	font-size: 2.4rem;
	margin: 20px auto;
	transition: opacity 1s 1.8s, transform 1s 1.8s;
}

#header h2.out {
	transform: translateY(10vw);
	opacity: 0;
}

.header-box {
	position: absolute;
	top: 0;
	width: 20%;
	height: 300px;
	padding: 30px 0 0;
}

.header-box01 {
	left: 0;
}

.header-box02 {
	right: 0;
}

.header-box p {
	vertical-align: middle;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 2rem;
	line-height: 1.5;
	font-weight: 700;
	color: #fff;
	text-shadow: 1px 1px 3px #000;
}

.header-box.header-box02 p {
/*	margin: 0 0 0 200px;*/
}

#section01 {
	letter-spacing: -.4em;
}

.balloon {
	position: relative;
	display: inline-block;
	min-height: 200px;
	padding-top: 180px;
	padding-bottom: 50px;
}

.balloon img {
	width: auto;
	height: 200px;
	vertical-align: top;
}

.balloon.out img {
	opacity: 0;
}

.balloon::before {
	content: "";
	position: absolute;
	top: 75%;
	display: block;
	width: 50px;
	height: 30px;
	margin-top: -15px;
	background-repeat: no-repeat;
	background-size: 50px auto;
}

.balloon::after {
	content: "";
	position: absolute;
	top: 0;
	display: block;
	width: 200px;
	height: 200px;
	background-repeat: no-repeat;
	background-size: contain;
}

.balloon.out::after {
	opacity: 0;
	transform: translateY(-10vw);
}

.balloon-rabbit {
	padding-left: 160px;
	padding-right: 60px;
}

.balloon-rabbit img {
	transition: opacity 1s 2.7s, transform 1s 2.7s;
}

.balloon-rabbit.out img {
	transform: translateX(-5vw);
}

.balloon-rabbit:not(.out) img {
	-moz-animation: anim_roll 3s linear 3.7s infinite alternate;
	-webkit-animation: anim_roll 3s linear 3.7s infinite alternate;
	animation: anim_roll 3s linear 3.7s infinite alternate;
}

.balloon-rabbit::before {
	right: 0;
	background-image: url(images/arrow-dot-right.png);;
}

.balloon-rabbit::after {
	left: 0;
	background-image: url(images/balloon-rabbit.png);
	transition: opacity 1s 2.9s, transform 1s 2.9s;
}

.balloon-rabbit:not(.out)::after {
	-moz-animation: anim_updown 3s linear 3.9s infinite alternate;
	-webkit-animation: anim_updown 3s linear 3.9s infinite alternate;
	animation: anim_updown 3s linear 3.9s infinite alternate;
}

.balloon-frog {
	padding-left: 60px;
	padding-right: 160px;
}

.balloon-frog img {
	transition: opacity 1s 2s, transform 1s 2s;
}

.balloon-frog.out img {
	transform: translateX(5vw);
}

.balloon-frog:not(.out) img {
	-moz-animation: anim_roll 3s linear 3s infinite alternate;
	-webkit-animation: anim_roll 3s linear 3s infinite alternate;
	animation: anim_roll 3s linear 3s infinite alternate;
}

.balloon-frog::before {
	left: 0;
	background-image: url(images/arrow-dot-left.png);
}

.balloon-frog::after {
	right: 0;
	background-image: url(images/balloon-frog.png);
	transition: opacity 1s 2.2s, transform 1s 2.2s;
}

.balloon-frog:not(.out)::after {
	-moz-animation: anim_updown 3s linear 3.2s infinite alternate;
	-webkit-animation: anim_updown 3s linear 3.2s infinite alternate;
	animation: anim_updown 3s linear 3.2s infinite alternate;
}

.logo-small {
	display: inline-block;
	width: 240px;
	vertical-align: bottom;
}

.logo-small img {
	width: 200px;
	height: auto;
}

.logo-small img.arrow-down {
	width: auto;
	height: 50px;
}

.logo-small p {
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
	line-height: 3rem;
	letter-spacing: 0;
}


#section02 {
	margin: 40px 0;
}

#section02 .box {
	position: relative;
	width: 800px;
	margin: 20px auto;
	text-align: left;
}

#section02 .box.box-blue {
	padding: 40px 60px;
	background-color: #60c1bd;
	border-radius: 20px;
	box-shadow: 3px 3px 10px #1c4f4f;
	text-align: center;
}

#section02 .box.box-blue h3 {
	font-size: 2.8rem;
	margin: 0 0 20px;
	padding: 0;
}

#section02 .box.box-blue p {
	font-size: 3.2rem;
	margin: 0;
	padding: 0;
	font-weight: 700;
}

#section02 .box.box-blue p span {
	font-size: 4rem;
}

#section02 .box.box-blue p span.small {
	font-size: 2.4rem;
}

#section02 .box ul {
	list-style: none;
	padding: 0 0 0 1em;
	font-size: 1.6rem;
}

#section02 .box ul li {
	text-indent: -1em;
	line-height: 2em;
}

#section02 h3 {
	font-size: 3rem;
}

#section02 h3 span {
	font-size: 4rem;
}

#section02 h3 img {
	width: auto;
	height: 80px;
	margin: 0 10px 0 0;
	vertical-align: text-bottom;
}

#section02 .box.list-wrap {
	width: 750px;
	min-height: 150px;
}

#section02 .box.list-wrap ul {
	font-size: 2rem;
}

#section02 .box.list-wrap ul li {
	text-indent: -1em;
	line-height: 1.8em;
	letter-spacing: .02em;
}

.rabbit2 {
	position: absolute;
	bottom: 0;
	right: -25px;
	width: 200px;
	height: 150px;
}

.rabbit2 img {
	width: auto;
	height: 100%;
	transition: opacity 1s, transform 1s;
}

.rabbit2.out img {
	transform: translateX(5vw);
	opacity: 0;
}

.rabbit2:not(.out) img {
	-moz-animation: anim_roll 3s linear 2s infinite alternate;
	-webkit-animation: anim_roll 3s linear 2s infinite alternate;
	animation: anim_roll 3s linear 2s infinite alternate;
}

.rabbit2 p {
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 1s .1s, transform 1s .1s;
}

.rabbit2.out p {
	transform: translateX(-10vw);
	opacity: 0;
}

#section02 .box.example {
	width: 1000px;
	text-align: center;
}

#section02 .box.example h3 {
	font-size: 2.4rem;
	text-indent: 1em;
}

#section02 .box.example .triangle {
	display: inline-block;
	width: 60px;
	height: 40px;
	border-top: 40px solid #60c1bd;
	border-right: 80px solid transparent;
	border-left: 80px solid transparent;
}

.example-header {
	position: relative;
	width: 800px;
	min-height: 150px;
	margin: 0 auto;
	padding: 40px 0 0 250px;
	text-align: left;
}

.illust-frog {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 250px;
	height: 150px;
}


.illust-frog .circle-blue {
	width: 150px;
	height: 150px;
	background-color: #60c1bd;
	background-image: url(images/ramen.png);
	background-size: 60%;
	background-position: center;
	border-radius: 50%;
	transition: opacity 1s, transform 1s;
}

.illust-frog.out .circle-blue {
	transform: translateX(-5vw);
	opacity: 0;
}

.illust-frog img {
	position: absolute;
	bottom: 0;
	left: 130px;
	width: auto;
	height: 150px;
	transition: opacity 1s .2s, transform 1s .2s;
}

.illust-frog.out img {
	transform: translateX(5vw);
	opacity: 0;
}

.illust-frog:not(.out) img {
	-moz-animation: anim_roll 3s linear 1.4s infinite alternate;
	-webkit-animation: anim_roll 3s linear 1.4s infinite alternate;
	animation: anim_roll 3s linear 1.4s infinite alternate;
}

#section02 .box .example-header h4 {
	margin: 0;
	padding: 0;
	font-size: 2.4rem;
	line-height: 1.5em;
}

#section02 .box .example-header p {
	margin: 0;
	padding: 0;
	font-size: 2rem;
	line-height: 1.5em;
}

#section02 .box .example-contents {
	border: solid 1px #c46221;
	border-radius: 20px;
	padding: 30px 20px;
}

#section02 .box .example-contents ul {
	list-style: none;
	padding: 0;
	margin: 0;
	letter-spacing: -.4em;
}


#section02 .box .example-contents ul li {
	position: relative;
	display: inline-block;
	width: 20%;
	margin: 0;
	padding: 0 10px;
	vertical-align: top;
	text-align: center;
	text-indent: 0;
/*	background-image: url(images/arrow-right.png);
	background-size: 40px auto;
	background-repeat: no-repeat;
	background-position: bottom 100px right 5px;*/
}

#section02 .box .example-contents ul li::after {
	position: absolute;
	right: -20px;
	top: 50%;
	content: '';
	display: block;
	background-image: url(images/arrow-right.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 42px;
	height: 32px;
	margin: 0 auto 10px;
}

#section02 .box .example-contents ul li:first-of-type {
}

#section02 .box .example-contents ul li:last-of-type {
/*	background-image: none;*/
}

#section02 .box .example-contents ul li:last-of-type::after {
	display: none;
}

#section02 .box .example-contents ul li img {
	width: 100%;
	height: auto;
}

#section02 .box .example-contents ul li p {
	height: 2em;
	font-size: 1.4rem;
	line-height: 1.33;
	letter-spacing: 0;
	font-weight: 700;
}

#section02 .box .example-contents02 {
	margin: 40px 0 20px;
	padding: 40px 20px;
	background-color: rgb(255,204,153);
	border-radius: 20px;
	text-align: left;
	letter-spacing: -.4em;
}

#section02 .box .example-contents02 .ex-content-header {
	margin: 0 0 20px;
	padding: 0 0 0 80px;
	background-image: url(images/pc.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	letter-spacing: 0;
}

#section02 .box .example-contents02 .ex-content-header h4 {
	font-size: 2.4rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

#section02 .box .example-contents02 .ex-content-header h5 {
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
}

#section02 .box .example-contents02 .ex-content-header h5 br {
	display: none;
}

#section02 .box .example-contents02 .ex-content-header h5 span {
	font-size: 1.8rem;
}

#section02 .box .example-contents02 .ex-content-header h5 sup {
	color: #ff0000;
}

#section02 .box .example-contents02 dl {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: 0;
	overflow: hidden;
	background-image: url(images/arrow-gray-right.png);
	background-repeat: no-repeat;
	background-position: left 40% top 50%;
	background-size: auto 20px;
}

#section02 .box .example-contents02 dt {
	float: left;
	width: 35%;
	text-align: right;
	vertical-align: top;
	font-weight: 400;
	overflow: hidden;
}

#section02 .box .example-contents02 dl dt:last-of-type {
	font-size: 1.3rem;
	color: #000;
}

#section02 .box .example-contents02 dt span {
	float: left;
	display: block;
	width: 200px;
}

#section02 .box .example-contents02 dl dd div br {
	display: none;
}

#section02 .box .example-contents02 dl dd {
	width: 85%;
	padding: 0 0 0 45%;
	margin: 0;
	text-align: right;
}

#section02 .box .example-contents02 dl dd .dd-01 {
	float: left;
	text-align: left;
}

#section02 .box .example-contents02 p {
	letter-spacing: 0;
	margin: 0;
}

#section02 .box .example-contents02 p.payment {
	float: right;
	display: block;
	width: 50%;
	margin: 20px 0;
	font-size: 3.2rem;
	line-height: 3.2rem;
}

#section02 .box .example-contents02 p.payment .ex2-big {
	font-size: 4rem;
}

#section02 .box .example-contents02 p.payment.payment-caution {
	font-size: 1.3rem;
}

#section03 {
	position: relative;
	width: 1000px;
	margin: 60px auto;
/*	padding-bottom: 400px;
	background-image: url(images/service-timeline.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;*/
	text-align: left;
	line-height: 1.5;
}

#section03 h2 {
	font-size: 3.2rem;
	margin: 0 0 30px;
}

#section03 ul {
	padding: 0 0 0 1.5em;
}

#section03 ul.mainlist {
	font-size: 1.6rem;
	margin: 0 0 20px;
}

#section03 ul.mainlist .small {
	font-size: 1.2rem;
}

#section03 .service-contents {
	position: relative;
}

#section03 ul.sublist {
	width: 60%;
	margin: 0 0 40px;
}

#section03 .service-illust-box {
	position: absolute;
	top: 0;
	right: 0;
	width: 40%;
	border: solid 2px rgb(77,77,77);
	border-radius: 15px;
	margin: 0 0 40px;
	padding: 10px 10px 0;
	letter-spacing: -.4em;
	overflow: hidden;
}

#section03 .service-illust-box h3 {
	font-size: 1.6rem;
	margin: 0 0 1em;
	text-align: left;
	letter-spacing: 0;
}

#section03 .service-illust-box ul {
	display: inline-block;
	width: 55%;
	margin: 0;
	padding: 0 0 0 1.5em;
	letter-spacing: 0;
	font-weight: 700;
	vertical-align: top;
}

#section03 .service-illust-box .service-frog {
	display: inline-block;
	position: relative;
	width: 45%;
	padding: 2.5em 0 0;
	text-align: right;
	letter-spacing: 0;
}

#section03 img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

#section03 .service-illust-box .service-frog p {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	text-align: left;
	font-size: 1.3rem;
}


#bottom {
	display: block;
	width: 800px;
	margin: 100px auto;
	text-align: left;
}

#bottom br.nopc {
	display: none;
}

#bottom p.temite {
	width: 100%;
	margin: 0 0 30px;
	padding: 5px 0;
	background-color: #f8b0b0;
	border-radius: 10px;
	text-align: center;
	font-size: 2.4rem;
	line-height: 4rem;
}

#bottom p.temite img {
	width: auto;
	height: 3.8rem;
	margin: -4px 0 0;
	vertical-align: text-bottom;
}

#bottom .bottom-pxc {
	width: 600px;
	margin: 0 auto 20px;
	text-align: center;
}

#bottom .bottom-pxc p {
	margin: 0;
}

#bottom .bottom-pxc img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

#bottom .bottom-address {
	width: 600px;
	margin: 0 auto;
	font-size: 1.8rem;
	line-height: 1.5;
}

#bottom .bottom-address > p {
	margin: 0;
}

#bottom .bottom-address .large {
	font-size: 2.2rem;
}

.bottom-caution {
	margin: 30px auto 0;
	font-size: 1.8rem;
	text-align: center;
}


#footer {
	width: 100%;
	min-width: 1000px;
	padding: 20px 0;
	background-color: #60c1bd;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	text-align: center;
}

#footer p {
	margin: 0;
}


/**** keyframes ****/

/* icon roll and zoom-in-out */
@-moz-keyframes anim_roll {
	0% { transform: rotateZ(2deg) scale(0.98); }
	50% { transform: rotateZ(-2deg) scale(1.0); }
	100% { transform: rotateZ(2deg) scale(0.98); }
}

@-webkit-keyframes anim_roll {
	0% { transform: rotateZ(2deg) scale(0.98); }
	50% { transform: rotateZ(-2deg) scale(1.0); }
	100% { transform: rotateZ(2deg) scale(0.98); }
}

@keyframes anim_roll {
	0% { transform: rotateZ(2deg) scale(0.98); }
	50% { transform: rotateZ(-2deg) scale(1.0); }
	100% { transform: rotateZ(2deg) scale(0.98); }
}

/* up */
@-moz-keyframes anim_up {
	0% { transform: translateY(0%); }
	50% { transform: translateY(2%); }
	100% { transform: translateY(0%); }
}

@-webkit-keyframes anim_up {
	0% { transform: translateY(0%); }
	50% { transform: translateY(2%); }
	100% { transform: translateY(0%); }
}

@keyframes anim_up {
	0% { transform: translateY(0%); }
	50% { transform: translateY(2%); }
	100% { transform: translateY(0%); }
}

/* updown */
@-moz-keyframes anim_updown {
	0% { transform: translateY(-2%); }
	50% { transform: translateY(2%); }
	100% { transform: translateY(-2%); }
}

@-webkit-keyframes anim_updown {
	0% { transform: translateY(-2%); }
	50% { transform: translateY(2%); }
	100% { transform: translateY(-2%); }
}

@keyframes anim_updown {
	0% { transform: translateY(-2%); }
	50% { transform: translateY(2%); }
	100% { transform: translateY(-2%); }
}

/* right */
@-moz-keyframes anim_right {
	0% { transform: translateX(0%); }
	50% { transform: translateX(-2%); }
	100% { transform: translateX(0%); }
}

@-webkit-keyframes anim_right {
	0% { transform: translateX(0%); }
	50% { transform: translateX(-2%); }
	100% { transform: translateX(0%); }}
}

@keyframes anim_right {
	0% { transform: translateX(0%); }
	50% { transform: translateX(-2%); }
	100% { transform: translateX(0%); }
}