@charset "utf-8";
/* CSS Document */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body{
	font-family: 'Kiwi Maru', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;;
	/*font-size: 4.87vw;*/ /*19px*/
	/*font-size: 5.13vw;*/ /*20px*/
	font-size: 4.62vw; /*18px*/
	font-weight: 400;
	overflow-x: hidden;
	position: relative;
	color: #36241d;
	background: #fff;
	display: flex;
    flex-direction: column;
	margin: 0 auto;
	width: 100%;
	transition: .3s all;
}
img {
	width: 100%;
	max-width: 100%;
	vertical-align: bottom;
}

.sp {
	display: block;
	visibility: visible;
}
.pc {
	display: none;
	visibility: hidden;
}
a {
	color: #36241d;
	text-decoration: none;
}
.nolink {
	pointer-events: none;
	text-decoration:none;
	border-bottom: none;
}

.loader {
	background: #fff;
	width: 100%;
	height: 100dvh;
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	transition: .5s all cubic-bezier(0.32, 0, 0.67, 0);;
}
.logo-mark {
	position: relative;
	width: 18%;
	max-width: 100px;
	z-index: 0;
	opacity: 0;
}
.logo-mark .logo-mark01 {
	display: block;
	width: 100%;
	height: 100%;
}
.logo-mark .logo-mark02 {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.logo-mark .logo-mark03 {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.loader p {
	width: 30%;
	max-width: 140px;
	margin-top: 0.2em;
	opacity: 0;
}
.loader.loaded {
	opacity: 0;
	visibility: hidden;
	scale: 1.5 1.5;
}

header {
	position: absolute;
	top: 1.6em;
    left: 2em;
	z-index: 1;
	overflow-x: hidden;
}
header h1 {
	width: 3.88em;
}

main {
	width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	z-index: 0;
}

section {
	width: 100%;
	position: relative;
	z-index: 0;
	padding: 2.2em 0 5em;
}

#concept {
	background: url("../img/bg02.jpg") #fff3ae top center;
	padding-bottom: 1.8em;
}
#service {
	background: url("../img/bg03.jpg") #badfe5 top center;
	padding-bottom: 6em;
}
#info {
	background: url("../img/bg04.jpg") #f2dfe7 top center;
}
#contact {
	background: url("../img/bg05.jpg") #b0ddbe top center;
	padding-bottom: 11.4em;
}

section .inner,
footer .inner {
	width: 80%;
	max-width: 1024px;
	padding: 0 0 5em;
	margin: 0 auto;
	overflow-x: hidden;
	position: relative;
	z-index: 1;
}
footer .inner {
	padding-bottom: 0;
}
#concept .inner {
	width: 90%;
}
#service .inner {
	width: 100%;
}

#mv {
	width: 100%;
	display: flex;
    justify-content: flex-end;
    align-items: center;
	padding: 3.8em 0 6.5em;
	position: relative;
	overflow: hidden;
	background: url("../img/bg01.jpg") #fff top center;
}
#mv .mv-copy {
	position: absolute;
	top: 51.6%;
	left: 54%;
	translate: -50% -50%;
	font-family: 'Yomogi', cursive;
	font-size: 1.6667em; /*30px*/
	color: #89594a;
	-webkit-text-stroke: 0.03em #89594a;
	text-stroke: 0.03em #89594a;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	-webkit-text-orientation: upright;
	text-orientation: upright;
	mix-blend-mode: plus-lighter;
	line-height: 1.3;
	opacity: 0;
	visibility: hidden;
	scale: 0.8 0.8;
	filter: blur(20px);
	transition: 1s all;
}
#mv .mv-copy.active {
	opacity: .7;
	visibility: visible;
	scale: 1 1;
	filter: blur(0);
}
#mv .mv-copy .copy-l {
	font-size: 1.25em;
    padding: 0.1em 0;
}
#mv .mv-copy .copy-l:nth-of-type(1) {
    padding: 0 0 0.1em 0;
}
#mv .mv-copy .copy-l:nth-of-type(3) {
    padding: 1em 0 0.1em;
}
.iPhone #mv .mv-copy .copy-s,
.iPad #mv .mv-copy .copy-s {
	display: inline-block;
	translate: 0.2em -0.2em;
}
/*#mv #mv-clip {
	width: 100%;
	height: auto;
	display: flex;
    justify-content: flex-end;
    align-items: center;
}*/

.slider-area {
    position: relative;
    width: 94.87%;
    overflow: hidden;
	aspect-ratio: 37/47;
	mask-image: url("../img/mv_cp_sp.svg");
    mask-size: 100% 100%;
}
.slider-area .slider-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
}
.slider-area.active .slider-item {
	animation: sliderAnime 16.5s linear infinite 0s;
}
.slider-area.active .slider-item:nth-child(2) {
    animation-delay: 5.5s;
}
.slider-area.active .slider-item:nth-child(3) {
    animation-delay: 11s;
}
.slider-area .slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@-webkit-keyframes sliderAnime {
    0% {
        opacity: 0;
		transform: scale(1);
    }
    7%,
	33.33% {
        opacity: 1;
    }
    40%,
    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}
@keyframes sliderAnime {
    0% {
        opacity: 0;
		transform: scale(1);
    }
    7%,
	33.33% {
        opacity: 1;
    }
    40%,
    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}

section h2 {
	font-family: 'Yomogi', cursive;
	font-size: 1.5556em; /*28px*/
	text-align: center;
	letter-spacing: 0.15em;
	text-indent: 0.15em;
	margin-bottom: 1em;
	font-weight: normal;
	color: #36241d;
	-webkit-text-stroke: 0.04em #36241d;
	text-stroke: 0.04em #36241d;
}
section h2::after {
	content: "concept";
	font-size: 0.5em;
	color: #a46305;
	-webkit-text-stroke: 0.04em #a46305;
	text-stroke: 0.04em #a46305;
	letter-spacing: 0.1em;
	display: block;
}
#service h2::after {
	content: "service";
}
#info h2::after {
	content: "information";
}
#contact h2::after {
	content: "contact";
}
section h2 span {
	font-size: 0.7143em; /*20px*/
	-webkit-text-stroke: 0.07em #36241d;
	text-stroke: 0.07em #36241d;
}

p.caption {
	font-size: 0.7222em;
	line-height: 1.4;
}

#concept p {
	display: flex;
    align-items: center;
	margin-top: 2.6em;
	text-align: center;
	line-height: 1.8;
	position: relative;
}
#concept .concept-copy01 {
	padding-right: calc(100% - 11.6em);
	justify-content: flex-end;
}
#concept .concept-copy02 {
	padding-left: calc(100% - 10.2em);
	justify-content: flex-start;
}

.service-list {
	margin: 0 auto;
	width: 100%;
	display: flex;
    flex-direction: column;
}
.service-list li {
    background: #fff;
    width: calc(90% + 3px);
    position: relative;
    margin: 2em 0 0 0;
    display: flex;
    justify-content: space-between;
}
.service-list li.service-list01 {
	border-radius: 0 2em 2em 0;
	padding: 1.52em 1.1em 1.52em calc(1.5em + 3px);
    translate: -3px 0;
}
.service-list li.service-list02 {
	margin-left: auto;
	border-radius: 2em 0 0 2em;
	margin-top: 6em;
	padding: 1.52em calc(1.42em + 3px) 1.52em 1.1em;
	translate: 3px 0;
}

.service-list li h3 {
    font-size: 1.3333em;
    background: #3c9cab;
    color: #fff;
    text-align: center;
    display: flex;
    font-weight: normal;
    justify-content: center;
    align-items: center;
    width: calc(11em + 3px);
    height: 2.2em;
    position: absolute;
}
.service-list li.service-list01 h3 {
	border-radius: 0 1000px 1000px 0;
    top: -0.8em;
    left: -3px;
}
.service-list li.service-list02 h3 {
	border-radius: 1000px 0 0 1000px;
	top: -0.8em;
	right: -3px;
}

.service-list li p.service-copy {
    font-size: 1.1111em;
	width: 3.6em;
    font-weight: 500;
    line-height: 1.3;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.service-list li.service-list01 p.service-copy {
    order: 1;
	padding: 0 0 0 0.6em;
	border-left: 2px dotted rgb(164 99 5 / 35%);
}
.service-list li.service-list02 p.service-copy {
	padding: 0 0.6em 0 0;
	border-right: 2px dotted rgb(164 99 5 / 35%);
}
.service-list li p.service-copy span {
	letter-spacing: 0.02em;
	font-size: 1.2em; /*24px*/
	color: #d9534f;
}

.service-list li p.service-detail {
	margin-top: 1.2em;
	width: 12em;
}
.service-list li span.caption {
	display: block;
	text-indent: -1em;
	margin-top: 0.5em;
	margin-left: 1em;
	padding-left: 20%;
	font-size: 0.7222em;
	line-height: 1.4;
}


.service-txt {
	width: 80%;
	max-width: 1024px;
	margin: 6em auto 0;
}
.service-txt p {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	line-height: 1.4;
}
.service-txt p span {
	color: #fff;
	background: #3c9cab;
	padding: 0.02em 0.3em;
	margin: 0.2em -0.1em;
	border-radius: 0.2em;
	display: inline-block;
}
.service-txt p span:last-of-type {
	margin-right: 0.2em;
}
.service-txt p:nth-of-type(2) {
	margin-top: 1em;
}
a.btn-anchor {
	display: block;
	font-size: 1.1111em;/*20px*/
	color: #fff;
	text-decoration: none;
	background: #d9534f;
	border: 2px dotted rgb(255 255 255 / 60%);
	box-shadow: 0 0 0 0.2em #d9534f;
	width: 70%;
	max-width: 280px;
	margin: 0.8em auto 0.4em;
	text-align:center;
	line-height: 2;
	border-radius: 1000px;
	scale: 1.0;
	transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
}
a.btn-anchor:hover {
	scale: 1.1;
}

#info h3 {
	/*font-family: 'Yomogi', cursive;*/
	/*font-size: 1.3333em;24px*/
	/*-webkit-text-stroke: 0.04em #36241d;
	text-stroke: 0.04em #36241d;
	font-weight: normal;*/
	font-weight: 400;
	text-align: center;
	margin: 2.2em auto 0.3em;
    width: 7em;
    border-radius: 1000px;
    line-height: 1.6;
    border: 2px solid rgb(199 68 123 / 70%);
}

.info-list.detail {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.info-list.detail dt,
.info-list.detail dd {
	width: 48%;
}
.info-list.detail dt:nth-of-type(1),
.info-list.detail dd:nth-of-type(1) {
	width: 100%;
}
.info-list.detail dt:nth-of-type(3) {
	order: 1;
}
.info-list.detail dd:nth-of-type(2) {
	order: 2;
}
.info-list.detail dd:nth-of-type(3) {
	order: 3;
}
.info-list.num dd {
	letter-spacing: 0.1em;
}

.info-list.num {
	text-align: center;
	display: flex;
	flex-direction: column;
    justify-content: center;
}
.info-list dt,
.info-list dd {
}
.info-list dt {
	line-height: 1.5;
	color: #c7447b;
	font-weight: 500;
	padding: 0.4em 0.2em 0;
}
.info-list dd {
	line-height: 1.5;
	border-bottom: 2px dotted rgb(164 99 5 / 35%);
	padding: 0 0.2em 0.4em;
	pointer-events: none;
}

#mail_form dl {
	width: 100%;
}
#mail_form dl dt,
#mail_form dl dd {
}
#mail_form dl dt,
#agreement h3 {
	font-size: 1em;
	line-height: 1.5;
	color: #066d26;
	font-weight: 500;
	padding: 0.6em 0.2em 0;
}
#mail_form dl:nth-of-type(1) dt::after,
#mail_form dl:nth-of-type(6) dt::after {
	content: "※苗字のみ可";
	font-size: 0.7778em;
	margin-left: 0.3em;
}
#mail_form dl dd,
#agreement p {
	line-height: 1.5;
	border-bottom: 2px dotted rgb(164 99 5 / 35%);
	padding: 0.2em 0.2em 0.6em;
}
a.link-policy {
	border-bottom: 1px solid #36241d;
}
.form-caption {
	font-size: 0.7778em;
	line-height: 1.2;
	text-indent: -0.95em;
	margin: 0.8em 0 0 0.95em;
	letter-spacing: -0.05em;
}

footer {
	background: url("../img/bg01.jpg") #fff top center;
	text-align: center;
	padding: 0 0 2em;
	position: relative;
	z-index: 0;
}

footer figure {
	width: 30%;
	max-width: 160px;
	margin: 0 auto 1em;
}
footer p {
	font-size: 0.7778em /*14px*/
}

/* -- separator -------------------------------------------------------------------------------- */

section:not(#mv)::before,
footer::before {
	content: "";
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	translate: 0 -100%;
	z-index: 0;
}
#concept::before {
	aspect-ratio: 400/135;
	background: url("../img/bg02.jpg") #fff3ae top center;
	mask-image: url("../img/bg_01.svg");
    mask-size: 100% 100%;
	top: 2.6em;
}
#service::before {
	aspect-ratio: 400/135;
	background: url("../img/bg03.jpg") #badfe5 top center;
    mask-image: url("../img/bg_02.svg");
    mask-size: 100% 100%;
    top: 3.9em;
}
#info::before {
	aspect-ratio: 400/135;
	background: url("../img/bg04.jpg") #f2dfe7 top center;
    mask-image: url("../img/bg_03.svg");
    mask-size: 100% 100%;
	top: 3em;
}
#contact::before {
	aspect-ratio: 400/135;
	background: url("../img/bg05.jpg") #b0ddbe top center;
    mask-image: url("../img/bg_04.svg");
    mask-size: 100% 100%;
	top: 3.9em;
}
footer::before {
	aspect-ratio: 400/135;
	background: url("../img/bg01.jpg") #fff top center;
    mask-image: url("../img/bg_05.svg");
    mask-size: 100% 100%;
	top: 2.6em;
}

/* -- illust -------------------------------------------------------------------------------- */

.illust {
	display: block;
	position: absolute;
	transform-origin: center bottom;
	opacity: 0;
	scale: 0.78 0.83;
}
#concept > .illust {
	top: 0;
	left: 0;
	width: 6.5em;
	aspect-ratio: 24/46;
	translate: 24% -110%;
}
.concept-copy01 .illust {
	top: 0;
	right: 50%;
	width: 6.2em;
	aspect-ratio: 26/47;
	translate: 140% -10%;
}
.concept-copy02 .illust{
	bottom: 0;
    left: 50%;
    width: 7em;
    aspect-ratio: 28/47;
    translate: -120% 4%;
}
.service-list li.service-list01 .illust {
	bottom: 0;
	right: 0;
	width: 7.4em;
	aspect-ratio: 40/44;
	translate: -65% 35%;
	rotate: 6deg;
}
.service-list li.service-list02 .illust {
	bottom: 0;
	left: 0;
	width: 7.2em;
	aspect-ratio: 36/47;
	translate: 40% 50%;
	rotate: -6deg;
}
#service > .illust {
	bottom: 0;
	left: 50%;
	width: 8em;
	aspect-ratio: 31/47;
	translate: -63% 17%;
	rotate: 10deg;
}
#info > .illust {
	top: 0;
	left: 50%;
	width: 2em;
	aspect-ratio: 6/5;
	translate: 60% -200%;
}
#contact > .illust {
	top: 0;
	left: 50%;
	width: 10em;
	aspect-ratio: 42/32;
	translate: -100% -100%;
}
footer > .illust{
	top: 0;
	left: 50%;
	width: 10em;
	aspect-ratio: 39/47;
	translate: -50% -125%;
}

#concept > .illust.active,
#service > .illust.active,
#info > .illust.active,
#contact > .illust.active,
footer > .illust.active {
	animation: illustAnime .8s ease-in-out;
	opacity: 1;
	scale: 1.0 1.0;
}
.concept-copy01 .illust.active,
.concept-copy02 .illust.active,
.service-list01 .illust.active,
.service-list02 .illust.active {
	transition-delay: .5s;
	animation: illustAnime .8s .5s ease-in-out;
	opacity: 1;
	scale: 1.0 1.0;
}
@keyframes illustAnime {
	0%  {
		scale: 0.78 0.83;
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	50% {
		scale: 0.98 1.05;
	}
	70% {
		scale: 1.08 0.95;
	}
	100% {
		scale: 1.0 1.0;
	}
}



/* -- form -------------------------------------------------------------------------------- */

#mail_form dl dt span.required,
#mail_form dl dt span.optional,
#agreement h3 span.required {
	display: inline-block;
	color: #ffffff;
	padding: 0 0.5em;
	border-radius: 1000px;
	margin-right: 0.5em;
	font-size: 0.8886em;
}
#agreement h3 span.required {
	font-size: 0.8886em;
}
#mail_form dl dt span.required,
#agreement h3 span.required {
	background: #d9534f;
	/*border: 1px solid #d43f3a;*/
}
#mail_form dl dt span.optional {
	background: #fff;
	color: #d9534f;
	/*border: 1px solid #2e6da4;*/
}
#mail_form dl dt i,
#agreement h3 i {
	font-style: normal;
}
#mail_form dl dt i {
	position: relative;
	top: -0.1em;
}

::placeholder {
	color: #999;
}
.form-mail::placeholder {
	letter-spacing: 0em;
}

#mail_form input[type="text"],
#mail_form input[type="email"],
#mail_form input[type="tel"],
#mail_form textarea,
#mail_form input[type="radio"],
#mail_form input[type="checkbox"],
#mail_form select {
	font-weight: 400;
}

#agreement span.error_check {
	display: none;
	color: #d9534f;
	font-size: 16px;
	margin-top: 0.4em;
}
#mail_form dl dd span.error_blank,
#mail_form dl dd span.error_format,
#mail_form dl dd span.error_match,
#agreement span.error_check {
	display: block;
	color: #d9534f;
	font-size: 0.8889em;
	margin-top: 0.4em;
}
#agreement span.error_check {
	display: none;
}

/* text */
.form-text {
	height: 2.4em;
    width: 100%;
    background: #fff;
    padding: 0.5em 0.5em;
    border-radius: 0.4em;
    border: none;
    box-shadow: 0 0 0 1px #fff inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.form-text:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #066d26 inset;
	background: #fff;
}

/* textarea */
.form-textarea {
    display: block;
    width: 100%;
    height: 6em;
	background: #fff;
    padding: 0.5em 0.5em;
    border-radius: 0.4em;
    border: none;
    box-shadow: 0 0 0 1px #fff inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    resize: vertical;
}

.form-textarea:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(0 93 30) inset;
}

#mail_form ul li input[type="radio"],
#agreement input[type="checkbox"] {
	margin: 0 0.4em 0 0;
}

/* radio */
.form-radio{
    display: flex;
    align-items: flex-start;
}
.form-radio li {
	width: 30%;
}
.form-radio input {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
	background: #fff;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}
.form-radio-name {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.form-radio-name:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #fff;
	background: #fff;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.form-radio input:checked + .form-radio-name {
    /*color: #066d26;*/
	font-weight: 500;
}
.form-radio input:checked + .form-radio-name:before {
    border: 0.4em solid #066d26;
	background: #fff;
}
.form-radio input:focus-visible + .form-radio-name .form-radio-text {
    background: linear-gradient(transparent 90%, rgba(33, 150, 243, 0.3) 90%);
}

/* checbox */
.form-checkbox{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	padding-bottom: 10px;
}
.form-checkbox input {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}
.form-checkbox-name {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #333;
    position: relative;
}
.form-checkbox-name:before {
    content: "";
    display: inline-block;
	background: #fff;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #fff;
    border-radius: 3px;
    margin-right: 6px;
    flex-shrink: 0;
}
.form-checkbox input:checked + .form-checkbox-name,
.form-checkbox input:checked + .form-checkbox-name .form-checkbox-text a.link-policy {
    /*color: #066d26;*/
	font-weight: 500;
}
.form-checkbox input:checked + .form-checkbox-name:before {
    border: 1px solid #066d26;
    background-color: #066d26;
}
.form-checkbox input:checked + .form-checkbox-name:after {
    content: "";
    position: absolute;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    left: 0.4em;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0.4em;
    height: 0.65em;
    transform: translateY(-1px) rotate(45deg);
}
.form-checkbox input:focus-visible + .form-checkbox-name .form-checkbox-text {
    background: linear-gradient(transparent 90%, rgba(33, 150, 243, 0.3) 90%);
}

/* select */
.form-select {
    position: relative;
}
.form-select:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.8em;
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid #066d26;
    border-right: 2px solid #066d26;
    transform: rotate(135deg);
    pointer-events: none;
}
.form-select select {
    height: 2.4em;
    width: 100%;
    padding: 0.5em 0.5em;
    border-radius: 0.4em;
    border: none;
	background: #fff;
    box-shadow: 0 0 0 1px #fff inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
.form-select select::-ms-expand {
    display: none;
}
.form-select select:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #066d26 inset;
}
/*.form-select select option[selected][disabled] {
	display: none;
}*/
.form-select select.select {
	color: #999;
}
.form-select select option {
	color: #36241d;
}


.btn-send {
	display: block;
	background: rgb(255 255 255 /80%);
	border: 2px dotted rgb(0 0 0 / 10%);
	box-shadow: 0 0 0 0.2em rgb(255 255 255 / 80%);
	color: #bbb;
	font-size: 1.1111em;/*20px*/
	text-decoration: none;
	width: 70%;
	max-width: 280px;
	margin: 1.2em auto 0.4em;
	text-align:center;
	line-height: 2;
	border-radius: 1000px;
	cursor: not-allowed;
    pointer-events: none;
	scale: 1.0;
	transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-send.active {
	color: #fff;
	background: #d9534f;
	border: 2px dotted rgb(255 255 255 / 60%);
	box-shadow: 0 0 0 0.2em #d9534f;
	cursor: pointer;
    pointer-events: auto;
}
.btn-send.active:hover {
	/*background: #de2126;
	box-shadow: 0 0 0 0.2em #de2126;*/
	scale: 1.1;
}



/* -- loading -------------------------------------------------------------------------------- */

div.loading-layer {
	width: 100vw;
	height: 100vh;
	background: rgb(0 0 0 / 20%);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 10000;
}

span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgb(255 255 255 / 20%);
	border-right: 5px solid rgb(255 255 255 / 20%);
	border-bottom: 5px solid rgb(255 255 255 / 20%);
	border-left: 5px solid #fff;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

/* -- loading -------------------------------------------------------------------------------- */

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

/* -- modal -------------------------------------------------------------------------------- */

/* no-scroll */
body.no-scroll {
	overflow-y: hidden;
	position: fixed;
	left: 0;
	right: 0;
}

/* overlay */
.overlay {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgb(0 0 0 / 20%); 
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition: .3s;
	opacity: 0;
	visibility: hidden;
}
.overlay.active {
	opacity: 1;
	visibility: visible;
}

/* modal */
.modal {
	display: block;
	max-width: 600px;
	width: 90%;
	min-height: 30vh;
	padding-bottom: 0.8em;
	background: #fff;
	border-radius: 1.1em;
	position: fixed;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	transition: .3s all cubic-bezier(0.23, 1, 0.32, 1);
	overflow: hidden;
	visibility: hidden;
	scale: 0.9;
	opacity: 0;
}
.modal.active {
	visibility: visible;
	scale: 1;
	opacity: 1;
}
.modal h3 {
	color: #066d26;
	text-align: center;
	font-weight: 500;
	font-size: 1.3333em;
	padding: 0.6em 0 0.4em;
}
.modal-policy .modal-body {
	max-height: 60vh;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	padding: 0 1.2em;
}
.modal-body h4 {
	/*font-family: 'Comfortaa','Kiwi Maru', sans-serif;*/
	color: #066d26;
	font-weight: 500;
	font-size: 1.1111em;
	margin: 1.5em 0 0.4em;
}
.modal-body h4 span {
	font-size: 0.9em;
	letter-spacing: -0.06em;
	display: inline-block;
	margin: 0 -0.5em;
}
.modal-body ol {
	margin-left: 1.3em;
}
.modal-body p,
.modal-body ol li {
	font-size: 0.8889em;
	line-height: 1.3;
}
.modal-body ol li {
	margin-top: 0.5em;
	line-height: 1.2;
	position: relative;
    list-style: outside decimal;
}
.modal-body ol li ol li,
.modal-body ol li ol li ol li {
	font-size: 1em;
}
.modal-body ol li::marker {
    font-weight: 500;
    color: #066d26;
	font-variant-numeric: tabular-nums;
}

.modal-close {
	display: block;
	color: #ccc;
	background: #333;
	text-decoration: none;
	width: 50%;
	max-width: 200px;
	margin: 0.6em auto 0;
	text-align:center;
	line-height: 2.4;
	border-radius: 1000px;
	cursor: pointer;
	transition: .3s all;
}
.modal-close:hover {
	opacity: 0.7;
}

.modal-thanks {
	height: auto;
	padding: 0.4em 1.2em 1.8em;
}
.modal-thanks p {
	margin: 0.6em 0 0.8em;
}
.modal-thanks p:nth-of-type(2) {
	border-top: 2px dotted rgb(164 99 5 / 35%);
	padding-top: 0.6em;
	font-size: 0.8887em;
	color: #d9534f;
}
.modal-thanks p.caption {
	margin-bottom: 1.6em;
	text-indent: -1em;
	margin-left: 1em;
}


/* SP 375未満 iphone5 */
@media not screen and (min-width: 375px) {
	body {
		font-size: 1.6rem;
	}
	#mail_form dl dd,
	#agreement p {
		line-height: 1.5;
		border-bottom: 2px dotted rgb(164 99 5 / 35%);
		padding: 0.2em 0.2em 0.6em;
		font-size: 1.6rem;
	}
}

/* SP 600未満 */
@media not screen and (min-width: 601px) {

}

/* TB 600以上 */
@media screen and (min-width: 601px) {
	.sp {
		display: none;
		visibility: hidden;
	}
	.pc {
		display: block;
		visibility: visible;
	}
	
	body {
		font-size: 3.13vw;
	}
	
	header {
		top: 2em;
		left: 4em;
	}
	header h1 {
		width: 2.8em;
	}
	
	section {
		padding: 2.4em 0 5em;
	}
	
	#mv {
		padding: 1.8em 0 8em;
	}
	#mv .mv-copy {
		top: 45%;
		left: 55%;
		font-size: 1.25em;
	}
	#mv #mv-clip {
		translate: 5.13vw 0;
	}
	.slider-area {
		width: 100%;
		aspect-ratio: 9/6;
		mask-image: url("../img/mv_cp_pc.svg");
		mask-size: 100% 100%;
	}
	
	#concept .inner {
		width: 80%;
	}
	#concept p.concept-copy01 {
		padding-right: 48%;
	}
	#concept p.concept-copy02 {
		padding-left: 55%;
	}
	
	.service-list li {
		width: 72%;
		margin: 2em 0 0 0;
	}
	.service-list li.service-list02 {
		margin-top: 4em;
	}
	.service-list li p.service-detail {
		margin-top: 1.2em;
		width: 15em;
	}
	.service-list li span.caption {
		padding-left: 0;
	}
	.service-txt {
		margin: 4em auto 0;
	}
	#service,
	#info {
		padding-bottom: 6em;
	}
	
	#concept::before {
		aspect-ratio: 400/90;
		top: 1.5em;
	}
	#service::before {
		aspect-ratio: 400/120;
		top: 5.2em;
	}
	#info::before {
		aspect-ratio: 400/120;
		top: 4.2em;
	}
	#contact::before {
		aspect-ratio: 400/120;
		top: 5.2em;
	}
	footer::before {
		aspect-ratio: 400/120;
		top: 5em;
	}
	
	#concept > .illust {
		width: 6.4em;
		translate: 54% -124%;
	}
	.concept-copy01 .illust {
		width: 6em;
		translate: 150% -10%;
	}
	.concept-copy02 .illust {
		width: 6.8em;
    	translate: -115% 4%;
	}
	.service-list li.service-list01 .illust {
		width: 8em;
		translate: 90% -20%;
	}
	.service-list li.service-list02 .illust {
		width: 7.6em;
		translate: -85% -10%;
	}
	#service > .illust {
		width: 8em;
	}
	#contact > .illust {
		width: 10.4em;
	}
	footer > .illust {
		width: 10em;
	}
}

/* PC 768px以上 */
@media screen and (min-width: 769px) {
	body {
		font-size: 2.15vw;
	}
	
	header {
		top: 3em;
		left: 6em;
	}
	header h1 {
		width: 3.4em;
	}
	#mv .mv-copy {
		top: 49%;
		left: 53%;
		font-size: 1.6364em;
	}
	
	#concept {
		padding-bottom: 3.8em;
	}
	#concept p {
		font-size: 1.1818em;
	}
	
	.service-list {
		max-width: 1024px;
		margin: 0 auto;
		flex-direction: row;
		justify-content: center;
	}
	.service-list li {
		/*min-width: 15.2em;*/
		width: 16.2em;
		flex-direction: column;
		justify-content: flex-start;
	}
	.service-list li.service-list01,
	.service-list li.service-list02 {
		margin: 1em 2em 0;
		border-radius: 2em;
		padding: 1.4em 1.52em 1.52em 2.52em;
		translate: 0;
	}
	.service-list li.service-list01 h3,
	.service-list li.service-list02 h3 {
		border-radius: 1000px;
		width: 2.2em;
    	height: 11em;
		-ms-writing-mode: tb-rl;
    	writing-mode: vertical-rl;
		top: 0.4em;
		left: -1em;
		right: initial;
	}

	.service-list li p.service-copy {
		width: auto;
		-ms-writing-mode: lr-tb;
    	writing-mode: horizontal-tb;
		letter-spacing: -0.02em;
		
	}
	.service-list li.service-list01 p.service-copy,
	.service-list li.service-list02 p.service-copy {
		order: 0;
		padding: 0 0 0.6em 0;
		border: none;
		border-bottom: 2px dotted rgb(164 99 5 / 35%);
	}
	.service-list li p.service-detail {
		margin-top: 0.6em;
		width: auto;
	}
	
	.service-list li span.caption {
		display: block;
		margin-left: 0;
		margin-right: -1em;
	}
	.service-txt p br {
		display: none;
	}
	#service,
	#info {
		padding-bottom: 8em;
	}
	
	.info-list dt {
		padding: 0.4em 0.2em 0.4em;
		border-bottom: 2px dotted rgb(164 99 5 / 35%);
	}
	.info-list dd {
		border-bottom: 2px dotted rgb(164 99 5 / 35%);
		padding: 0.4em 0.2em 0.4em;
	}
	.info-list.detail dt,
	.info-list.detail dt:nth-of-type(1) {
		width: 5em;
	}
	
	.info-list.detail dd:nth-of-type(1) {
		width: calc(100% - 5em);
	}
	.info-list.detail dd:nth-of-type(1) br:nth-of-type(2) {
		display: none;
	}
	
	.info-list.detail dd:nth-of-type(2),
	.info-list.detail dd:nth-of-type(3) {
		width: calc(48% - 5em);
	}
	.info-list.detail dd:nth-of-type(2),
	.info-list.detail dt:nth-of-type(3) {
		order: 0;
	}
	.info-list.detail dt:nth-of-type(3) {
		margin-left: 4%;
	}
	
	.info-list.num {
		flex-direction: row;
		flex-wrap: wrap;
		text-align: right;
	}
	.info-list.num dt {
		width: 23em;
		padding-right: 1em;
	}
	.info-list.num dd {
		width: calc(100% - 23em);
		text-align: left;
	}
	
	#contact {
		padding-bottom: 13em;
	}
	#mail_form dl,
	#agreement {
		display: flex;
		border-bottom: 2px dotted rgb(164 99 5 / 35%);
	}
	#mail_form dl dt,
	#agreement h3 {
		width: 16em;
		padding: 1.1em 0.5em 0.6em 0.2em;
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
	}
	#mail_form dl dd,
	#agreement p {
		width: calc(100% - 16em);
		border-bottom: none;
		padding: 0.6em 0.2em;
	}
	#agreement p,
	.form-radio li {
		line-height: 2.25;
	}
	#mail_form dl dt i,
	#agreement h3 i {
		 order: 1;
		 margin-right: 0;
		 margin-left: 0.5em;
	}
	#mail_form dl dt span.required,
	#mail_form dl dt span.optional,
	#agreement h3 span.required {
		font-size: 0.7273em;
	}
	/*.form-radio {
		padding-top: 0.48em;
	}*/
	
	footer figure {
		max-width: 120px;
	}
	
	#concept::before {
		top: 3.6em;
	}
	#service::before {
		top: 8em;
	}
	#info::before {
		top: 6em;
	}
	#contact::before {
		top: 7.4em;
	}
	footer::before {
		top: 9em;
	}
	
	#concept > .illust {
		width: 7em;
		translate: 80% -130%;
	}
	.service-list li.service-list01 .illust {
		width: 6.6em;
    	translate: -20% 20%;
	}
	.service-list li.service-list02 .illust {
		bottom: initial;
		left: initial;
		top: 0;
		right: 0;
		width: 6em;
		translate: -10% -65%;
	}
	#service > .illust {
		width: 9em;
		translate: -63% 15%;
	}
	#info > .illust {
		translate: 70% -250%;
	}
	#contact > .illust {
		width: 12.4em;
    	translate: -120% -110%;
	}
	footer > .illust {
		width: 11em;
	}
	
	.service-list02 .illust.active {
		transition-delay: 1s;
		animation: illustAnime .8s 1s ease-in-out;
		opacity: 1;
		scale: 1.0 1.0;
	}
		
	.modal {
		display: block;
		max-width: 800px;
		width: 90%;
	}
}

/* PC 1024px以上 */
@media screen and (min-width: 1025px) {
	body {
		font-size: 2.2rem;
	}
	
	header {
		width: 80%;
		max-width: 1080px;
		top: 0.8%;
		left: 50%;
		translate: -50% 0;
	}
	header h1 {
		width: 15%;
    	max-width: 3.4em;
	}
	
	#mv {
		justify-content: center;
	}
	#mv #mv-clip {
		translate: 0 -8%;
		width: 90%;
		max-width: 1280px;
	}
	#mv .mv-copy {
		top: 42%;
		left: 50%;
		font-size: clamp(3.6rem, 3.13vw, 4.8rem);
	}
	
	#concept {
		padding-top: 1.2em;
		padding-bottom: 7em;
	}
	#concept p.concept-copy01 {
		padding-right: 50%;
	}
	#concept p.concept-copy02 {
		padding-left: 54%;
	}
	
	#service {
		padding-bottom: 9em;
	}
	
	.service-list {
		justify-content: space-between;
	}
	.service-list li {
		margin: 1em 1.4em 0;
		width: 42%;
	}
	
	section:not(#mv)::before {
		width: 100%;
	}
	#concept::before {
		aspect-ratio: unset;
		height: 260px;
		top: 50px;
	}
	#service::before {
		aspect-ratio: unset;
		height: 300px;
		top: 140px;
	}
	#info::before {
		aspect-ratio: unset;
		height: 400px;
		top: 180px;
	}
	#contact::before {
		aspect-ratio: unset;
		height: 360px;
		top: 220px;
	}
	footer::before {
		aspect-ratio: unset;
		height: 320px;
		top: 220px;
	}
	
	#concept > .illust {
		left: calc(50% - min(500px, 30%));
    	translate: -50% -152%;
	}
	.service-list li.service-list01 .illust {
    	width: 8em;
		translate: -20% 26%;
	}
	.service-list li.service-list02 .illust {
		width: 7em;
		translate: 30% -50%;
	}
	#service > .illust {
		translate: -65% 7%;
	}
	#info > .illust {
		translate: 70% -300%;
	}
	#contact > .illust {
		translate: -125% -105%;
	}
	
}