html,body{
	font-size: 16px;
	font-family: 'Quicksand' , 'Kosugi Maru', sans-serif;
	line-height: 24px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	word-break: break-all;
}

body{
	background-attachment: fixed;
	background-image: url('../images/background.jpg?20220114');
	background-position: center;
	background-size: cover;
}

ul,
ul li,
ol,
ol li{
	position: static;
	left: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

img{
	display: block;
}

h2.rose{
	position: relative;
	text-align: center;
	color: #707070;
	font-size: 1.25rem;
}

h2.rose::before,
h2.rose::after{
	vertical-align: middle;
	content: '';
	display: inline-block;
	width: 5rem;
	height: 5rem;
	background-image: url('../images/rose.png');
	background-size: cover;
	margin: 1rem 3rem 0;
}

h2.rose::before{
	transform: scale(-1,1);
}

h2.rose > span::after{
	content: '';
	color: #F23D6D;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.75rem;
	margin-top: 1.5rem;
	line-height: 1rem;
	text-align: center;
}

/* ******************************
header
****************************** */

header{
	background: #fff;
	display: flex;
	justify-content: center;
}

header > div{
	display: flex;
	max-width: 1000px;
	margin: 2rem 20px;
	width: 100%;
}

header > div > h1{
	width: 10%;
	align-self: center;
	margin-right: 2rem;
}

header > div > h1 ~ p:nth-of-type(1){
	width: 45%;
	align-self: center;

	color: #707070;
	font-size: 0.75rem;
	line-height: 1rem;
}

header > div > h1 ~ p:nth-of-type(1) > strong{
	color:	#F90C44;
}

header > div > h1 ~ p:nth-of-type(2){
	width: 40%;
	margin-left: auto;
	align-self: center;
	vertical-align: middle;

	background: #F90C44;
	padding: 0.5rem;
	border-radius: 100rem;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.25rem;
	color: #fff;
}

header > div > h1 ~ p:nth-of-type(2) > a{
	text-decoration: none;
	vertical-align: middle;
	color: #fff;
	margin-left: 0.5rem;
	font-size: 1.5rem;
	line-height: 1.25rem;
	font-family: 'M PLUS Rounded 1c';
}

/* ******************************
#eyecatch
****************************** */

@keyframes slide{
    0% { opacity: 0 }
    10% { opacity: 1 }
   25% { opacity: 1 }
   50% { opacity: 0 }
  100% { opacity: 0 }
}

section#eyecatch{
	background: #fff;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
	z-index: 10;
}

section#eyecatch > div > p{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

section#eyecatch > div > p > img{
	animation: slide 30s ease infinite;
	filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10' result='b'/%3E%3CfeMorphology operator='dilate' radius='10'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#a");
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}

section#eyecatch > div > p > img:nth-child(1){animation-delay: 0s;}
section#eyecatch > div > p > img:nth-child(2){animation-delay: 5s;}
section#eyecatch > div > p > img:nth-child(3){animation-delay: 10s;}
section#eyecatch > div > p > img:nth-child(4){animation-delay: 15s;}
section#eyecatch > div > p > img:nth-child(5){animation-delay: 20s;}
section#eyecatch > div > p > img:nth-child(6){animation-delay: 25s;}

section#eyecatch > div{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

section#eyecatch.fix::before{
	display: block;
	content: '';
	padding-top: 30%;
}

section#eyecatch > div > div:nth-of-type(1){
	width: 75%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
	z-index: 20;
}

section#eyecatch > div > div:nth-of-type(1) > p{
	background: #fff;;
	width: 60%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

section#eyecatch > div > div:nth-of-type(1) > p > img{
	animation: slide 30s ease infinite;
	object-fit: contain;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 1px 0 30px rgba(255,255,255,0.5);
}

section#eyecatch > div > div:nth-of-type(1) > p > img:nth-child(1){animation-delay: 0s;}
section#eyecatch > div > div:nth-of-type(1) > p > img:nth-child(2){animation-delay: 5s;}
section#eyecatch > div > div:nth-of-type(1) > p > img:nth-child(3){animation-delay: 10s;}
section#eyecatch > div > div:nth-of-type(1) > p > img:nth-child(4){animation-delay: 15s;}
section#eyecatch > div > div:nth-of-type(1) > p > img:nth-child(5){animation-delay: 20s;}
section#eyecatch > div > div:nth-of-type(1) > p > img:nth-child(6){animation-delay: 25s;}

section#eyecatch > div > div:nth-of-type(2){
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 30;
	display: flex;
}

section#eyecatch > div > div:nth-of-type(2) > ul{
	width: 100%;
	align-self: center;
}

section#eyecatch > div > div:nth-of-type(2) > ul > li{
	padding: .5rem .5rem .5rem 1.5rem;
	border-radius: 100rem 0 0 100rem;
	font-size: 0.75rem;
	color: #fff;
}

section#eyecatch > div > div:nth-of-type(2) > ul > li > strong{
	font-size: 1rem;
}

section#eyecatch > div > div:nth-of-type(2) > ul > li:nth-child(1){
	background: rgba(242,61,109,0.8);
}

section#eyecatch > div > div:nth-of-type(2) > ul > li:nth-child(2){
	background: rgba(255,255,255,0.8);
	color: #707070;
}

section#eyecatch > div > div:nth-of-type(2) > ul > li:nth-child(3){
	background: rgba(240,128,128,0.8);
}

section#eyecatch > div > div:nth-of-type(2) > ul > li:nth-child(4){
	background: rgba(242,183,5,0.8);
}

section#eyecatch > div > div:nth-of-type(2) > ul > li + li{
	margin-top: 1rem;
}

/* ******************************
#about
****************************** */

section#about{
	display: flex;
	justify-content: center;
}

section#about > div{
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 2rem;
	max-width: 1000px;
	margin: 6rem 20px;
	width: 100%;
}

section#about > div > h2{
	vertical-align: middle;
	grid-column-start: 1;
	grid-column-end: 3;
	color: #F23D6D;
	margin-bottom: 1.5rem;
}

section#about > div > h2 > span::after{
	content: 'COMPANY';
}

section#about > div > div{
	background: rgba(255,255,255,0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 1rem;;
	border-radius: 0.5rem;
}

section#about > div > div:nth-of-type(1){
	grid-column-start: 1;
	grid-column-end: 3;
	display: grid;
	grid-template-columns: 20% 1fr 20%;
	grid-template-rows: auto auto;
	border-radius: 1rem;
}

section#about > div > div:nth-of-type(1) > h3{
	grid-area: 1 / 2;
	padding: 0 1rem;
	color: #F23D6D;
	font-size: .875rem;
	line-height: 1.5rem;
	margin-bottom: .5rem;;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(1){
	grid-area: 2 / 2;
	padding: 0 1rem;
	color: #707070;
	font-size: .875rem;
	line-height: 1.25rem;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(1) > strong{
	text-align: right;
	color:#F23D6D;
	display: block;
	margin-top: .5rem;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(2){
	grid-area: 1 / 1;
	grid-row-start: 1;
	grid-row-end: 3;
	align-self: center;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(2) > img{
	width: 100%;
	height: auto;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(3){
	grid-area: 1 / 3;
	grid-row-start: 1;
	grid-row-end: 3;
	align-self: center;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(3) > img{
	width: 100%;
	height: auto;
}

section#about > div > div:nth-of-type(2){
}

section#about > div > div:nth-of-type(2) > h3,
section#about > div > div:nth-of-type(3) > h3{
	color: #f23d6d;
	text-align: center;
	font-size: 1rem;
	line-height: 1.5rem;
	margin-bottom: 1rem;
}

section#about > div > div:nth-of-type(2) > h3::before,
section#about > div > div:nth-of-type(2) > h3::after,
section#about > div > div:nth-of-type(3) > h3::before,
section#about > div > div:nth-of-type(3) > h3::after{
	content: '／';
	display: inline-block;
	padding: 0 1rem;
}

section#about > div > div:nth-of-type(2) > h3::before,
section#about > div > div:nth-of-type(3) > h3::before{
	transform: scale(-1,1);
}

section#about > div > div:nth-of-type(2) > ol > li{
	color: #fff;
	padding: 1rem;
	border-radius: .5rem;
}

section#about > div > div:nth-of-type(2) > ol > li:nth-child(1){background: #f23d6d;}
section#about > div > div:nth-of-type(2) > ol > li:nth-child(2){background: #F2B705;}
section#about > div > div:nth-of-type(2) > ol > li:nth-child(3){background: #F08080;}

section#about > div > div:nth-of-type(2) > ol > li + li{
	margin-top: 1rem;
}

section#about > div > div:nth-of-type(3){
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	grid-gap: 1rem;
}

section#about > div > div:nth-of-type(3) > h3{
	grid-column-start: 1;
	grid-column-end: 3;
}

section#about > div > div:nth-of-type(3) > p > img {
	width: 100%;
	height: auto;
}

section#about > div > div:nth-of-type(3) > p:nth-of-type(4){
	display: flex;
}

section#about > div > div:nth-of-type(3) > p:nth-of-type(4) > span:nth-of-type(1){
	width: 50%;
}

section#about > div > div:nth-of-type(3) > p:nth-of-type(4) > span:nth-of-type(1) > img{
	width: 100%;
	height: auto;
}

section#about > div > div:nth-of-type(3) > p:nth-of-type(4) > span:nth-of-type(2){
	flex: 1;
	margin-left: 1rem;
	color:#707070;
	font-size: .75rem;
	line-height: 1rem;
	align-self: center;
}

/* ******************************
#detail
****************************** */

section#detail{
	display: flex;
	justify-content: center;
	background: rgba(255,255,255,0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 6rem 0;
}

section#detail > div{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 2rem;
	max-width: 1000px;
	margin: 0 20px;
	width: 100%;
}

section#detail > div > h2{
	grid-column-start: 1;
	grid-column-end: 3;
}

section#detail > div > h2 > span::after{
	content: 'BUSINESS DETAIL';
}

section#detail > div > div{
	display: flex;
	flex-direction: column;
}

section#detail > div > div > h3{
	order: 2;
	color: #f23d6d;
	font-size: 1.25rem;
	line-height: 1.25rem;
	margin: 1rem 0;
}

section#detail > div > div > p:nth-of-type(1){
	order: 3;
	color: #707070;
	font-size: .875rem;
	line-height: 1.5rem;
}

section#detail > div > div > p:nth-of-type(2){
	order: 1;
}

section#detail > div > div > p:nth-of-type(2) > img{
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

/* ******************************
#estimate
****************************** */

section#estimate{
	background: #F8F5ED;
	display: flex;
	justify-content: center;
	padding: 3rem 0;
}

section#estimate > p{
	color: #F90C44;
	font-size: 1.25rem;
}

section#estimate > p::before,
section#estimate > p::after{
	vertical-align: middle;
	content: '';
	display: inline-block;
	width: 5rem;
	height: 5rem;
	background-image: url('../images/rose.png');
	background-size: cover;
	margin: 0 1.5rem;
}

section#estimate > p::before{
	transform: scale(-1,1);
}

/* ******************************
#area
****************************** */

section#area{
	background: rgba(255,255,255,1);
	display: flex;
	justify-content: center;
	padding: 6rem 0;
}

section#area > div{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1rem;
	max-width: 1000px;
	margin: 0 20px;
	width: 100%;
}

section#area > div > h2{
	grid-column-start: 1;
	grid-column-end: 5;
	text-align: center;
	margin-bottom: 3rem;
}

section#area > div > h2 > span::after{
	content: 'COVERAGE AREA';
}

section#area > div >  div{
	background: #F8F5ED;
	padding: 1rem;
	border-radius: 0.5rem;
}

section#area > div >  div:nth-of-type(1){
	padding: 0;
	border-radius: 0;
}

section#area > div >  div > h3{
	margin: 0 0 0.5rem;
	color: #F90C44;
}

section#area > div >  div > p{
	color: #707070;
}

section#area > div >  div > p > img{
	width: 100%;
	height: auto;
}


/* ******************************
footer
****************************** */

footer{
	background: #F2B705;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6rem 0;
}

footer > h2{
	font-size: 1.25rem;
	font-weight: 400;
	margin-bottom: 1rem;
}

footer > h2::before,
footer > h2::after{
	content: '／';
	display: inline-block;
	padding: 0 1rem;
}

footer > h2::before{
	transform: scale(-1,1);
}

footer > ul{
	margin-bottom: 1rem;
}

footer > ul > li > a{
	color: #fff;
	text-decoration: none;
	font-size: 2.5rem;
	font-family: 'M PLUS Rounded 1c';
	font-weight: 900;
}

footer > ul > li > a::before{
	content: '\f098';
	display: inline-block;
	font-family: 'Font Awesome 6 Free';
	margin-right: .5rem;
}

footer > ul > li + li{
	margin-top: 1rem;
}

/* ******************************
address
****************************** */

address{
	background: rgba(255,255,255,1);
	display: flex;
	color: #707070;
	flex-direction: column;
	align-items: center;
	padding: 6rem 0;
	text-align: center;
	font-style: normal;
}

@media screen and (max-width:480px){
/* ****************************************** START SMARTPHONE ****************************** */

html,body{
	font-size: 14px;
}

body{
	background: none;
}

body::before{
	content: '';
	width: 100vw;
	height: 100vh;
	position: fixed;
	background-image: url('../images/background.jpg');
	background-position: left;
	background-size: cover;
	z-index: -1;
}

h2.rose::before,
h2.rose::after{
	vertical-align: middle;
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	background-image: url('../images/rose.png');
	background-size: cover;
	margin: 1rem 2rem 0;
}

/* ******************************
header
****************************** */

header > div{
	flex-direction: column;
	margin: 1rem;
	max-width: initial;
}

header > div > h1{
	width: 100%;
	margin-right: 0;
}

header > div > h1 > img{
	margin: 0 auto;
}

header > div > h1 ~ p:nth-of-type(1){
	width: 100%;
	margin: .5rem 0;
}

header > div > h1 ~ p:nth-of-type(2){
	width: 100%;
	margin-left: 0;
}

/* ******************************
#eyecatch
****************************** */

section#eyecatch{
	background: rgba(255,255,255,0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: block;
}

section#eyecatch > div > p{
	display: none;
}


section#eyecatch > div{
	width: auto;
	height: auto;
	position: relative;
}

section#eyecatch.fix::before{
	padding-top: 0;
}

section#eyecatch > div > div:nth-of-type(1){
	width: auto;
	height: auto;
	position: relative;
	transform: none;
	padding-top: 66.666%;
	left: 0;
	margin-bottom: 1rem;
}

section#eyecatch > div > div:nth-of-type(1) > p{
	width: 100%;
	height: 100%;
}

section#eyecatch > div > div:nth-of-type(2){
	width: auto;
	height: auto;
	position: relative;
}

section#eyecatch > div > div:nth-of-type(2) > ul{
	width: auto;
	margin: 0 1rem 1rem;
}

section#eyecatch > div > div:nth-of-type(2) > ul > li{
	padding: 1rem 1rem;
	border-radius: .5rem;
	font-size: 0.75rem;
	color: #fff;
	line-height: 1.25rem;
}

section#eyecatch > div > div:nth-of-type(2) > ul > li > strong{
	display: block;
	text-align: center;
	margin-bottom: -1rem;
}

section#eyecatch > div > div:nth-of-type(2) > ul > li + li{
	margin-top: .5rem;
}

/* ******************************
#about
****************************** */

section#about{
	display: block;
	width: auto;
	margin: 3rem 1rem;
}

section#about > div{
	grid-template-columns: 1fr;
	grid-gap: 1rem;
	margin: 0;
}

section#about > div > h2{
	grid-column-start: auto;
	grid-column-end: auto;
}

section#about > div > div:nth-of-type(1){
	grid-column-start: auto;
	grid-column-end: auto;
	grid-template-columns: 1fr 1fr;
}

section#about > div > div:nth-of-type(1) > h3{
	grid-area: auto;
	grid-column-start: 1;
	grid-column-end: 3;
	text-align: center;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(1){
	grid-area: auto;
	grid-column-start: 1;
	grid-column-end: 3;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(2){
	grid-column-start: auto;
	grid-column-end: auto;
	grid-area: auto;
	padding: 1rem;
}

section#about > div > div:nth-of-type(1) > p:nth-of-type(3){
	grid-column-start: auto;
	grid-column-end: auto;
	grid-area: auto;
	padding: 1rem;
}

/* ******************************
#detail
****************************** */

section#detail{
	display: block;
	padding: 3rem 1rem;
}

section#detail > div{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 3rem;
	max-width: initial;
	margin: 0;
	width: auto;
}

section#detail > div > h2{
	grid-column-start: auto;
	grid-column-end: auto;
}

section#detail > div > div > h3{
	order: 1;
	margin: 0 0 1rem;
	text-align: center;
}

section#detail > div > div > p:nth-of-type(1){
	order: 2;
	margin: 0 0 1rem;

}

section#detail > div > div > p:nth-of-type(2){
	order: 3;
}

section#detail > div > div > p:nth-of-type(2) > img{
	width: 62%;
	margin: 0 auto;
}

section#detail > div > div > p:nth-of-type(3){
	order: 2;
}

/* ******************************
#estimate
****************************** */

section#estimate{
	padding: 1.5rem 0;
}

section#estimate > p{
	font-size: .75rem;
}

section#estimate > p::before,
section#estimate > p::after{
	width: 2rem;
	height: 2rem;
	margin: 0 .5rem;
}

/* ******************************
#area
****************************** */

section#area{
	padding: 3rem 1rem;
}

section#area > div{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	max-width: initial;
	margin: 0;
	width: auto;
}

section#area > div > h2{
	grid-column-start: 1;
	grid-column-end: 3;
	margin-bottom: 2rem;
}


/* ******************************
footer
****************************** */

footer{
	padding: .5rem 0;
	position: sticky;
	bottom: 0;
	z-index: 9999;
}

footer > h2{
	font-size: .75rem;
	margin-bottom: 0;
}

footer > ul{
	margin-bottom: 0;
}

footer > ul > li{
	display: inline-block;
}

footer > ul > li > a{
	font-size: 1rem;
}

footer > ul > li + li{
	margin-top: 0;
	margin-left: 1rem;
}

footer > ul > li + li::before{
	content: '|';
	margin-right: 1rem;
}

footer > p{
	font-size: .75rem;
}

/* ******************************
address
****************************** */

address{
	padding: 3rem 0;
}

/* ****************************************** END SMARTPHONE ****************************** */
}