@charset "UTF-8";
/* CSS Document */

@keyframes slideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 9999;
transition: 1s;
}
#loader .loader-slide {
width: 100%;
height: 100%;
background: -moz-linear-gradient(top,  #6da2ad 0%, #c0ddf7 100%);
background: -webkit-linear-gradient(top,  #6da2ad 0%,#c0ddf7 100%);
background: linear-gradient(to bottom,  #6da2ad 0%,#c0ddf7 100%);
position: relative;
}
#loader .loader-slide.open {
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-delay: 1s;
}
#loader.close {
height: 0;
}
.waves {
position:absolute;
bottom: 0;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:200px;
max-height:400px;
}
.overlapping > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.overlapping > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.overlapping > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.overlapping > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.overlapping > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% { 
transform: translate3d(85px,0,0);
}
}

#header {
top: -100px;
left: 0;
transition: .6s;
}
/*--------------------
hero
--------------------*/
#hero{
position: relative;
flex-direction: row-reverse;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #fff;
z-index: 1;
}
#hero h1 span{
display: inline-block;
color: #fff;
background-color: #2D426F;
}
#hero:after{
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent #fff transparent transparent;
}
#hero .scroll{
position:absolute;
}
#hero .scroll span:first-of-type{
position: absolute;
color: #2D426F;
font-family: 'Lora', serif;
font-weight: 600;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
#hero .scroll span:last-of-type{
position: absolute;
bottom: 0;
background: #2D426F;
}
#hero .scroll:before {
content: "";
position: absolute;
bottom:0;
left:0;
background:#fff;
animation:
circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
z-index: 2;
}
@keyframes circlemove{
0%{
bottom:120px;
}
100%{
bottom:-10px;
}
}
#hero .scroll:after{
content:"";
position: absolute;
bottom:0;
left:0;
background:#2D426F;
z-index: 1;
}
/*=======================
ふわっと
=======================*/
.fadeup {
animation-name:fadeUpAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*--------------------
#greeting
--------------------*/
#greeting{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#greeting:before{
position: absolute;
top: 0;
right: 0;
left: 0;
display: block;
content: "";
width: 100%;
height: 100%;
background:linear-gradient(90deg, #2D426F,#79998B,#F0E78B);
background-size: 200% 200%;/*サイズを大きくひきのばす*/
background-position: 0%;
animation: bggradient 15s ease infinite;
opacity: 0.6;
}
@keyframes bggradient{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#greeting p{
color: #fff;
letter-spacing: 0.01em;
transition: .9s;
}
#greeting p span{
display: block;
text-align: end;
}
/*--------------------
con-3
--------------------*/
#con-3{
position: relative;
background: #fff;
z-index: 1;
}
.con-3{
margin: 0 auto;
}
#con-3:before{
content:"";
position: absolute;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
}
#con-3:after{
content:"";
position: absolute;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent transparent #FFf;
}
.con-3 li:nth-child(1){
transition: .3s;
}
.con-3 li:nth-child(2){
transition: .6s;
}
.con-3 li:nth-child(3){
transition: .9s;
}
.con-3 li a{
display: block;
color: #fff;
transition: .3s;
}
.con-3 li:nth-child(1) a{
background-color: #2D426F;
}
.con-3 li:nth-child(1) a:hover{
background-color: #ffffff;
color: #2D426F;
transition: .3s;
border: solid 1px #2D426F;
padding: 14px;
}
.con-3 li:nth-child(2) a{
background-color: #79998B;
}
.con-3 li:nth-child(2) a:hover{
background-color: #ffffff;
color: #79998B;
transition: .3s;
border: solid 1px #79998B;
padding: 14px;
}
.con-3 li:nth-child(3) a{
color: #2D426F;
background-color: #F0E78B;
}
.con-3 li:nth-child(3) a:hover{
color: #F0E78B;
background-color: #2D426F;
transition: .3s;
}
.con-3 li a h3{
text-align: center;
font-weight: 500;
transition: .3s;
}
.con-3 li a h3 span{
display: block;
border-top: 1px solid #fff;
font-family: 'Lora', serif;
font-weight: 600;
}
.con-3 li:nth-child(3) a h3 span{
border-top: 1px solid #2D426F;
}
.con-3 li:nth-child(1) a:hover h3 span{
border-top: 1px solid #2D426F;
}
.con-3 li:nth-child(2) a:hover h3 span{
border-top: 1px solid #79998B;
}
.con-3 li:nth-child(3) a:hover h3 span{
border-top: 1px solid #F0E78B;
}
/*--------------------
#service
--------------------*/
#service{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#service:before{
position: absolute;
top: 0;
right: 0;
left: 0;
display: block;
content: "";
width: 100%;
height: 100%;
background:linear-gradient(90deg, #F0E78B,#79998B,#2D426F);
background-size: 200% 200%;/*サイズを大きくひきのばす*/
background-position: 0%;
animation: bggradient 15s ease infinite;
opacity: 0.6;
}
@keyframes bggradient{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#service .box p{
color: #fff;
letter-spacing: 0.01em;
}
#service .box a{
position: absolute;
display: block;
text-align: center;
color: #2D426F;
background-color: #F0E78B;
z-index: 1;
transition: .6s;
}
#service .box a:after{
display: inline-block;
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 600;
transition: .6s;
}
#service .box a:hover{
color: #F0E78B;
background-color: #2D426F;
transition: .6s;
}
#service .box a:hover:after{
transition: .6s;
}
/*--------------------
#salon
--------------------*/
#salon:after{
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent transparent #fff;
}

@media (max-width: 560px){
#header {
top: -100px;
left: 0;
}
section{
padding: 80px 0;
}
/*--------------------
hero
--------------------*/
#hero{
flex-direction: column;
}
#hero h1{
font-size: 8vw;
margin-top: 50px;
}
#hero h1 span{
padding: 0px 20px 10px;
margin-bottom: 20px;
}
#hero img{
width: 40%;
}
#hero:after{
bottom: -60px;
border-width: 0 100vw 60px 0;
}
#hero .scroll{
bottom:30px;
right:3%;
}
#hero .scroll span:first-of-type{
left:-25px;
bottom:45px;
font-size: 1.6rem;
transform:rotate(180deg);
}
#hero .scroll span:last-of-type{
left: -7px;
width: 2.4px;
height: 15px;
transform: skewX(40deg);
}
#hero .scroll:before {
width:2px;
height:10px;
}
#hero .scroll:after{
width:2px;
height: 110px;
}
/*--------------------
#greeting
--------------------*/
#greeting p{
font-size: 1.4rem;
line-height: 1.8em;
}
#greeting p span{
padding: 30px 0;
}
/*--------------------
con-3
--------------------*/
#con-3{
padding: 40px 0;
}
.con-3{
width: 80%;
}
#con-3:before{
top: -60px;
border-width: 0 0 60px 100vw ;
}
#con-3:after{
bottom: -60px;
border-width: 0 0 60px 100vw ;
}
.con-3 li{
margin-bottom: 15px;
}
.con-3 li:last-of-type{
margin-bottom: 0;
}
.con-3 li a{
padding: 15px;
}
.con-3 li a h3{
font-size: 1.8rem;
}
.con-3 li a h3 span{
font-size: 1.6rem;
padding-top: 5px;
margin-top: 5px;
}
/*--------------------
#service
--------------------*/
#service .box{
width: 70%;
padding-right: 20%;
}
#service .box p{
font-size: 1.4rem;
line-height: 1.8em;
}
#service .box a{
left: 5%;
bottom: 10px;
font-size: 1.6rem;
padding: 10px 10px;
width: calc(60% - 20px);
}
#service .box a:after{
margin-left: 20px;
}
#service .box a:hover:after{
transform: translateX(10px);
}
/*--------------------
#salon
--------------------*/
#salon:after{
top: -60px;
border-width: 60px 0 0 100vw;
}
}

@media (min-width: 561px){
/*--------------------
hero
--------------------*/
#hero h1 {
width: calc(50% - 60px);
}
#hero h1 span {
padding: 0px 30px 10px;
margin-bottom: 20px;
}
#hero img {
width: 23%;
}
#hero:after {
bottom: -90px;
border-width: 0 100vw 90px 0;
}
#hero .scroll {
bottom:30px;
right:3%;
}
#hero .scroll span:first-of-type {
left:-25px;
bottom:45px;
font-size: 1.6rem;
transform:rotate(180deg);
}
#hero .scroll span:last-of-type {
left: -7px;
width: 2.4px;
height: 15px;
transform: skewX(40deg);
}
#hero .scroll:before {
width:2px;
height:10px;
}
#hero .scroll:after {
width:2px;
height: 110px;
}
/*--------------------
#greeting
--------------------*/
#greeting p {
line-height: 1.8em;
}
#greeting p span {
padding: 30px 0;
}
/*--------------------
con-3
--------------------*/
.con-3 {
display: flex;
justify-content: center;
max-width: 1000px;
}
#con-3:before {
top: -90px;
border-width: 0 0 90px 100vw ;
}
#con-3:after {
bottom: -90px;
border-width: 0 0 90px 100vw ;
}
.con-3 li {
width: 33%;
}
.con-3 li a {
padding: 15px;
}
.con-3 li a h3 span {
padding-top: 5px;
margin-top: 5px;
}
/*--------------------
#service
--------------------*/
#service .box {
width: 40%;
padding-right: 40%;
}
#service .box p {
line-height: 1.8em;
}
#service .box a {
left: 10%;
font-size: 2.0rem;
}
#service .box a:after {
margin-left: 20px;
}
#service .box a:hover:after {
transform: translateX(10px);
}
/*--------------------
#salon
--------------------*/
#salon:after {
top: -90px;
border-width: 90px 0 0 100vw;
}
}

@media (max-width: 800px){
.waves {
height:100px;
min-height:100px;
}
}

@media (min-width: 561px) and (max-width: 1024px){
section {
padding: 100px 0;
}
/*--------------------
hero
--------------------*/
#hero h1 {
font-size: 3.6rem;
}
#hero img {
padding-left: 30px;
}
/*--------------------
con-3
--------------------*/
#con-3{
padding: 40px 0;
}
.con-3{
width: 90%;
}
.con-3 li a h3 {
font-size: 1.8rem;
}
.con-3 li a h3 span {
font-size: 1.4rem;
}
/*--------------------
#service
--------------------*/
#service {
height: 25vh;
}
#service .box a {
bottom: 25px;
padding: 15px 0;
width: calc(40% - 40px) ;
}
}

@media (min-width: 1025px){
#header {
top: -100px;
left: 0;
}
section {
padding: 100px 0;
}
/*--------------------
hero
--------------------*/
#hero h1 {
font-size: 50px;
font-size: 5rem;
}
/*--------------------
con-3
--------------------*/
#con-3 {
padding: 60px 0;
}
.con-3 {
width: 70%;
}
.con-3 li a h3 {
font-size: 22px;
font-size: 2.2rem;
}
.con-3 li a h3 span {
font-size: 16px;
font-size: 1.6rem;
}
/*--------------------
#service
--------------------*/
#service {
height: 40vh;
}
#service .box a {
bottom: 30px;
padding: 30px 20px;
width: calc(30% - 40px) ;
}
}