@keyframes scaleOut { 0% { transform: scale(1) rotate(0deg);opacity: 1.0; }100% { transform: scale(0) rotate(720deg);opacity: 0; } }
@keyframes hide { 0% { opacity: 1.0; }100% { opacity: 0; } }

/*
body { overflow: hidden; }
body.on { overflow: auto; }
*/
#load_screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 5000; display: flex; align-items: center; justify-content: center; flex-direction: column; }
#load_screen .clip { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; border-top: 50vh solid #f2ece0; border-bottom: 50vh solid #f2ece0; border-left: 50vw solid #f2ece0; border-right: 50vw solid #f2ece0; transition: 1.5s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); box-sizing: border-box; z-index: 4999; }
#load_screen .logo { margin-bottom: 12px; position: relative; z-index: 5000; }
#load_screen .logo img { width: 60%; margin: 0 auto; max-width: 200px; }
#load_screen .progress { position: relative; z-index: 5000; width: 240px; height: 3px; background: #006937; transform: scale(0, 1); transition: 0.4s; }
#load_screen.on { pointer-events: none; }
#load_screen.on .clip { transition-delay: 0.5s; border-width: 0; }
#load_screen.on .logo img { animation: scaleOut 1.0s linear forwards; }
#load_screen.on .progress { opacity: 0; }

#main_visual { width: 100%; height: 100vh; position: relative; background: url("../images/main_visual.jpg") center 74px/cover no-repeat; box-sizing: border-box; padding-top: 84px; margin: 0 0 50px; z-index: 1; }
@media screen and (min-width: 768px) { #main_visual { padding-top: 98px; background-position: center 88px; } }
#main_visual .container { position: relative; height: 100%; }
#main_visual #mv_logo { max-width: 970px; height: 100%; margin: 0 auto; display: none; position: relative; z-index: 5; }
@media screen and (min-width: 768px) { #main_visual #mv_logo { display: flex; align-items: center; justify-content: flex-start; } }
#main_visual #mv_logo img { max-height: 760px; height: 90%; width: auto; filter: blur(12px); opacity: 0; transition: 1.5s; transition-delay: 1.6s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateY(24px); }
#main_visual #mv_copy { width: 100%; height: 100%; position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 5; }
#main_visual #mv_copy img { width: 192px; filter: blur(12px); opacity: 0; transition: 1.5s; transition-delay: 1.6s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateY(18px); }
@media screen and (min-width: 768px) { #main_visual #mv_copy { width: 50%; }  #main_visual #mv_copy img { transition-delay: 2.6s; } }
#main_visual.on #mv_logo img, #main_visual.on #mv_copy img { filter: blur(0); opacity: 1.0; transform: translateY(0); }
#main_visual.on #mv_pic { border-width: 0; }

#mainNav {display: none;}
@media screen and (min-width: 768px) {
#mainNav {max-width: 1200px;margin: auto auto 80px;display: block;background: url("../clean/images/line.png") no-repeat center bottom;}
#mainNav ul {padding: 0 0 30px 0;text-align: center;font-size: 17px;}
#mainNav ul li {margin: 20px 0;display: inline-block;}
#mainNav ul li a {padding: 5px;text-decoration: none;}
#mainNav ul li.active a {background: #006937;color: #fff}
}

#intro { margin: 0 auto; background: url("../images/dotline.png") top center/1200px auto no-repeat; padding-top: 150px; text-align: center; }
@media screen and (min-width: 768px) { #intro { max-width: 1200px; margin-bottom: 150px; } }
#intro h2 { display: inline-block; }
@media screen and (min-width: 768px) { #intro h2::before, #intro h2::after { content: ''; display: block; width: 116px; height: 80px; background: url("../images/header_orn01.png") center center/100% auto no-repeat; position: absolute; top: -72px; left: -152px; }
#intro h2::after { background-image: url("../images/header_orn02.png"); left: auto; right: -152px; } }
#intro .container { display: flex; flex-direction: column-reverse; text-align: left; margin: 0 12px; }
#intro .container img { width: 90%; margin: 0 auto; }
@media screen and (min-width: 768px) { #intro .container { margin: 0; flex-direction: row; justify-content: space-between; align-items: flex-start; } #intro .container img, #intro .container .contents_body { width: calc(50% - 16px); } }
#intro .contents_body { text-align: left; }

#think { background: url("../images/think_bg.jpg") center center/cover no-repeat; display: flex; align-items: center; justify-content: center; margin-bottom: 60px; padding: 60px 0; }
@media screen and (min-width: 768px) { #think { padding: 120px 0; } }
#think img { max-width: 461px; width: 90%; }

#service { overflow: hidden; }
#service .container { margin: 0 12px; }
#service .container > section { margin-bottom: 48px; }
@media screen and (min-width: 768px) { #service .container { display: flex; justify-content: space-between; margin: 0 auto; } #service .container > section { width: calc(50% - 16px); text-align: center; margin-bottom: 150px; }#service .container > section h2 { margin-bottom: 40px; } }
#service .orn { min-height: 192px; }
#service .orn img { margin: 0 auto; }
#service .pic { margin-bottom: 40px; }
#service .contents_body { margin-bottom: 30px; text-align: left; }
#service .contents_body figure {width: 40%;margin: auto;display: block;}
@media screen and (min-width: 768px) { #service .contents_body { text-align: center; } }
#service .btn { width: 230px; height: 50px; margin: 0 auto; }

#clean .orn img { width: 198px; }
#keep .orn img { width: 207px; }

#owner { background: url("../images/owner_bg.png"); margin: 0; padding: 48px 12px; }
@media screen and (min-width: 768px) { #owner { padding: 100px 0; } }
@media screen and (min-width: 768px) { #owner .container { display: flex; justify-content: space-between; } #owner .container .pic, #owner .container .wrap { width: calc(50% - 16px); } }
#owner .pic img { width: 100%; max-width: 432px; margin: 0 auto; }
#owner h2 img { max-width: 400px; width: 100%; }
#owner .more { border: 2px solid #006937; display: flex; align-items: center; justify-content: center; width: 130px; height: 50px; margin: 36px auto 0; }
@media screen and (min-width: 768px) { #owner .more { margin: 56px auto 0; } }
#owner .more img { width: 73px; }
#owner .contents_body { text-align: left; }

#reserve { background: rgba(255, 255, 70, 0.2); text-align: center; position: relative; padding: 150px 12px 48px; }
@media screen and (min-width: 768px) { #reserve { padding: 100px 0; } }
#reserve h2 { display: inline-block; }
@media screen and (min-width: 768px) { #reserve h2::before, #reserve h2::after { content: ''; display: block; width: 246px; height: 157px; background: url("../images/header_orn03.png") center center/100% auto no-repeat; position: absolute; top: -72px; left: -282px; } #reserve h2::after { background-image: url("../images/header_orn04.png"); width: 282px; height: 178px; left: auto; right: -282px; } }
#reserve #contact { width: 100%; max-width: 1069px; margin: 60px auto; box-sizing: border-box; }
@media screen and (min-width: 768px) { #reserve #contact { background: url(../images/contact_border.png) top center/1069px auto no-repeat; min-height: 564px; padding-top: 40px; } }
#reserve #contact .tel { max-width: 300px; width: 70%; margin: 0 0 0 70px; position: relative;text-align:center}
#reserve #contact .tel::before { content: "";width: 60px;height: 40px; position: absolute;left: -55px;top: 20px; display: block;background: url("../images/tel.png") no-repeat 0 0 / cover;}
#reserve #contact .tel small {display: block;line-height: 1;}
#reserve #contact .note { width: 100%;margin: 0 auto 20px }
@media screen and (min-width: 768px) { #reserve #contact .tel { width: 90%;margin: 0 auto;}#reserve #contact .note { width: 480px; margin: 0 auto 30px; } }
#reserve #contact .note th { text-align: left; }
#reserve #contact p { color: #006937; line-height: 1.3;}
#reserve #contact .request {margin: 10px auto 0; padding: 18px; background: url(../images/contact_bg.png); border-radius: 15px; text-align: left; line-height: 24px; box-sizing: border-box; font-size: 13px; color: #fff; }
@media screen and (min-width: 768px) { #reserve #contact .request { width: 570px; padding: 24px 40px; } }
#reserve:before { content: ''; display: block; position: absolute; bottom: -31px; left: 50%; width: 100%; max-width: 1300px; height: 62px; background: url("../images/paw.png") center center/100% auto no-repeat; transform: translateX(-50%); z-index: 2; }

#wanwawan {width: 100%;margin: 0 auto 50px;padding: 50px 0;background: url("../images/wanwawan.jpg") no-repeat center/ cover;}
#wanwawan > div {width: 90%;margin: auto;padding: 30px 0;text-align: center;background: rgba(255,255,255,0.80);border-radius: 1em;-webkit-border-radius: 1em;-moz-border-radius: 1em;}
#wanwawan h3 {margin: 0 auto 20px;}
#wanwawan h3 img {height: 50px;margin: auto;display: block;}
#wanwawan address {font-style: normal;}
#wanwawan address p:nth-of-type(1) {font-size: 18px;font-weight: 600;}
#wanwawan address ul {margin: 20px auto;}
#wanwawan address ul li {margin: 0 10px;color: #006937;font-weight: 600;}
#wanwawan address ul li:nth-child(1)::before {content: url("../images/i-mail.png");margin-right: 5px;vertical-align: middle;}
#wanwawan address ul li:nth-child(2)::before {content: url("../images/i-tel.png");margin-right: 15px;vertical-align: middle;}
#wanwawan address ul li:nth-child(3)::before {content: url("../images/i-mobile.png");margin-right: 5px;vertical-align: middle;}
#wanwawan address + p {font-size: 13px;line-height: 1.3;}
@media screen and (min-width: 768px) {
#wanwawan {margin: 0 auto 100px;padding: 150px 0;}
#wanwawan > div {max-width: 1200px;padding: 100px 0;}
#wanwawan h3 img {height: 100px;}
#wanwawan address p:nth-of-type(1) {font-size: 23px;}
#wanwawan address ul li {display: inline-block;font-size: 20px;}
#wanwawan address ul li:nth-child(2)::before {margin-right: 5px;}
#wanwawan address + p {font-size: 16px;line-height: 2;}
}

#map { margin-bottom: -10px; padding: 48px 0 0; }
@media screen and (min-width: 768px) { #map { padding-top: 110px; } }
#map_container { height: 300px; }
@media screen and (min-width: 768px) { #map_container { height: 620px; } }