@charset "utf-8";

/* レイアウト*/
body{
    font-family: 'Noto Sans JP', sans-serif;
	color: #474642;
	font-size: 1rem;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
	background-color: #fff;
}

@media screen and (max-width: 820px) {
body{
	font-size: 0.8rem;
	}
}

*{box-sizing: border-box;}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	text-decoration: none;
    outline: none;
}

a:hover{
	opacity: 0.5;
}

img{
    width: 100%;
    height: auto;
}

/* font*/
h2{
	font-family: 'Carattere', cursive;
    font-weight: 400;
    font-size: 8rem;
    position: relative;
    text-align: center;
}

.japanese-title{
	font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #474642;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#g-nav,
#pc-nav,
.red-name,
#copyright,
#page-top{
    font-family: 'Noto Serif JP', serif;
	font-weight: 700;
}

@media screen and (max-width: 550px) {
    h2{
        font-size: 6rem;
    }
}

/* splash */
#splash-logo img{
    width: 25%
}

@media screen and (max-width: 550px) {
    #splash-logo img{
		width: 50%;
    }
}

/* g-nav */
#g-nav.panelactive li:last-child a{
    padding: 0 10px;
}

/*pc-nav*/

#pc-nav{
    position: absolute;
    bottom: 20px;
    right: 20%;
}

.nav-container{
	display: flex;
	flex-direction: column;
	text-align: center;
}


@media screen and (max-width: 990px) {
    #pc-nav{
        display: none;
    }
}

/* heading */
h1{
    position: absolute;
    top: 20%;
    left: 30px;
	width: 120px;
}

h3{
    font-weight: 400;
}

@media screen and (max-width: 550px) {
    h1{
       width: 100px;
    }
}

/* mv */
#top-main{
	width: 100%;
	height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
} 

.mv-img{
    max-width: 600px;
}

.top-lead{
    z-index: 2;
}

.top-lead_sp{
    display: none;
}

.top-area01{
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-area02{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 25%;
}

.top-copy{
    background-color: #C0BA99;
    text-align: center;
    padding: 40px;
    min-width: 400px;
    height: 250px;
    position: relative;
    margin-left: 80px;
    margin-top: -100px;
}

.top-copy p{
    color: #fff;
    line-height: 1.6;
    font-size: 90%;
    font-weight: 500;
}

.top-copy p:first-of-type{
    font-weight: 700;
    margin-bottom: 20px;
    line-height: inherit;
    font-size: 1.1rem;
}

.frame{
    width: 400px;
    height: 250px;
    padding: 40px;
    border: 1px solid #ABA377;
    position: absolute;
    top: -20px;
    left: -20px;
}

.zero-circle{
    background-color: #e35466;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    width: 150px;
    height: 150px;
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 0px 8px #e35466;
    border: solid 1px #fff;
    margin-top: -120px;
}

.btn_animation .btn-line,
.btn_animation02 .btn-line,
.btn_animation03 .btn-line{
    animation : btn_animation 4s ease-in-out alternate infinite;
    background : linear-gradient(90deg,#00B900, #2b752b);
    background-size : 500% 500%;
    border-radius : 39px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 110%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    height: 50px;
}
.btn_animation,
.btn_animation02,
.btn_animation03{
    width: 80%;
    margin: 0 auto;
}

.btn_animation{
    display: none;
}

.btn_animation02{
    max-width: 400px;
    margin-left: calc(50% + 100px);
    margin-top: -80px;
}

.btn_animation03 .btn-line{
    width: 80%;
    margin: 40px auto 0;
}

.btn-line img{
    width: 30px;
}

@keyframes btn_animation {
  0% { background-position:   0% 50% }
  100% { background-position: 100% 50% }
}

@media screen and (max-width: 1480px) {
    #top-main{
        height: inherit;
        padding: 80px 80px 0;
    }
    
    .mv-img{
        max-width: 500px;
    }
    
    .top-area02{
        gap: 30%;
    }
}

@media screen and (max-width: 1200px) {
    .top-copy{
        margin-left: 0;
    }
    .top-area02{
        gap: 35%;
    }
    .btn_animation02{
        margin-left: calc(50% + 20px);
    }
}

@media screen and (max-width: 1024px) {
    #top-main{
        padding: 80px 60px 0;
    }
}

@media screen and (max-width: 990px) {
    .top-lead_sp{
        display: block;
        margin-top: -15px;
    }
    
    .top-lead_pc{
        display: none;
    }
    
    .top-area01{
        flex-direction: column;
    }
    
    .mv-img{
        max-width: inherit;
        width: 550px;
        margin: -15% 5% 0 10%;
    }
    
    .top-area02{
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }
    
    .top-copy{
        margin-top: 0;
        height: 220px;
    }
    
    .frame{
        top: -15px;
        left: -15px;
        height: 220px;
    }
    
    .top-wrap{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .zero-circle{
        margin-top: -120px;
        margin-left: calc(50% + 100px);
    }
    
    .btn_animation{
        display: block;
        width: 80%;
        max-width: 400px;
        margin: 0 auto 30px;
    }
    
    .btn_animation02{
        display: none;
    }
}

@media screen and (max-width: 550px) {
    #top-main{
        padding: 75px 40px 0;
    }
    
    .mv-img{
        min-width: inherit;
        width: 100%;
        margin: -15% auto 0;
    }
    
    .top-wrap{
        gap: 20px;
    }
    
    .top-copy{
        padding: 30px;
    }
    
    .top-copy,
    .frame{
        min-width: inherit;
        width: 330px;
    }
    
    .zero-circle{
        width: 130px;
        height: 130px;
        margin-top: -100px;
        margin-left: calc(50% + 70px);
    }
    
    .btn_animation{
        margin: 0 auto 15px;
    }
}

@media screen and (max-width: 450px) {
    .top-wrap{
        gap: 15px;
    }
    
    .zero-circle{
        font-size: 0.9rem;
        width: 100px;
        height: 100px;
        margin-top: -80px;
        margin-left: calc(50% + 60px);
    }
    
    .top-copy p:first-of-type{
        font-size: 0.9rem;
    }
    .top-copy{
        padding: 25px;
    }
    
    .top-copy,
    .frame{
        width: 280px;
        height: 180px;
    }
}

@media screen and (max-width: 380px) {
    .top-area02{
        gap: 15px;
    }
    
    .zero-circle{
        font-size: 0.8rem;
        width: 90px;
        height: 90px;
        margin-left: calc(50% + 50px);
    }

    .frame{
        top: -10px;
        left: -10px;
    }
}

@media screen and (max-width: 320px) {
    .top-lead_sp{
        margin-top: -10px;
    }
}

/* main-area */
#main-area{
    margin: 0 auto;
}

/* section */
#concept,
#merit,
#service,
#voice,
#access,
#contact{
    margin:100px 0;
}

@media screen and (max-width: 820px) {
    #concept,
    #merit,
    #service,
    #voice,
    #access,
    #contact{
        margin: 80px 0;
    }
}

#concept h2,
#service h2,
#access h2{
    color: #f3b6bd;
}

#merit h2,
#voice h2,
#contact h2{
    color: #DAD7C6;  
}

/* concept */
#concept{
    text-align: center;
    width: 85%;
    max-width: 750px;
    margin: 100px auto;
}

#concept h3{
    margin-bottom: 30px;
}

.red-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d70c25;
}

#concept p{
    text-align: left;
    margin-bottom: 10px;
}

@media screen and (max-width: 820px) {
    #concept{
        margin: 40px auto;
    }
}

/* merit */
#merit{
    padding: 50px 30px 100px;
    background-color: #F2F1EA;
}
#merit ul.merit-sp{
    display: none;
}

#merit ul.merit-pc{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

#merit ul.merit-pc li{
    width: 35%;
    min-width: 270px;
    height: 250px;
    color: #fff;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.merit-bg-y{
    background-color: #e35466;
    position: relative
}

.merit-bg-g{
    background-color: #ABA377;
    position: relative;
}

.number{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #F2F1EA;
    font-weight: 500;
    font-size: 12rem;
    opacity: 0.15;  
}

@media screen and (max-width: 1024px) {
    #merit{
        padding: 50px 20px 100px;
    }
}

@media screen and (max-width: 767px) {
    #merit ul.merit-pc{
        display: none;
    }
    
    #merit ul.merit-sp{
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin: 0 auto;
    }
    
    #merit ul.merit-sp li{
        width: 50%;
        min-width: 270px;
        height: 200px;
        color: #fff;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .number{
        font-size: 9rem;
    }
}

@media screen and (max-width: 550px) {
    #merit ul li{
        width: 70%;
        min-width: 250px;
        height: 180px;
    }
}

/* cv-area */
.cv-area{
    text-align: center;
}

.recruitment{
    font-size: 2rem;
    font-weight: 700;
    color: #ABA377;
    display: inline-block;
}

.contactus{
    margin-bottom: 40px;
}

.btn{
    position: relative;
    width: 300px;
    margin: 0 auto;
}

.btn::before{
    content:'';
    border-bottom: 1px solid #aba377;
    width: 60px;
    position: absolute;
    top: 50%;
    left: -45px;
}


.btn a{
    border: 1px solid #ABA377;
    width: 300px;
    margin: 0 auto;
    padding: 10px;
    color: #ABA377;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    transition: .3s;
    display: block;
}

.btn a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #ABA377;
    border: 1px solid #ABA377;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform ease .3s;
}

.btn a:hover {
    color: #fff;
    opacity: 1;
}

.btn a:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
    opacity: 1;
}

@media screen and (max-width: 550px) {
 .recruitment{
     font-size: 1.4rem;
    } 
    
    .btn,
    .btn a{
        width: 260px;
    }
}
@media screen and (max-width: 428px) {
    .btn::before{
        width: 45px;
        left: -30px;
    }
    
    .btn a{
        padding: 5px;
    }
}

@media screen and (max-width: 320px) {
    .recruitment{
     font-size: 1.3rem;
    } 
    
}

/* service */
#service{
    padding: 50px 30px 100px;
    background-color: #fef7f8;
}

#service ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    gap: 20px;
}

#service ul li{
    width: 150px;
}

.img01{
    width: 50px;
    height: 50px;
}

.img02{
    width: 60px;
    height: 60px;
}

.service-box{
    background-color: #aba377;
    border-radius: 30px;
    width: 150px;
    height: 120px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

#service p{
    text-align: center;
    font-weight: 500;
    padding-top: 10px;
    line-height: 1.4;
}

@media screen and (max-width: 850px) {
    #service{
        padding: 40px 10px 80px;
    }
    
    #service ul li{
        width: 130px;
    }
    
    .service-box{
        width: 130px;
        height: 100px;
        padding: 20px;
    }
}

@media screen and (max-width: 767px) {
    #service ul{
        max-width: 420px;
    }
}

@media screen and (max-width: 550px) {
    .img01{
        width: 40px;
        height: 40px;
    }

    .img02{
        width: 50px;
        height: 50px;
    }
}

@media screen and (max-width: 359px) {
    .service-box{
        width: 100px;
        height: 90px;
        border-radius: 28px;
    }
    
    #service ul li{
        width: 100px;
    }
}

/* voice */
#voice01,
#voice02,
#voice03{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 70px;
}

.voice-list{
    margin: 30px 0;
    font-weight: 700;
    font-size: 110%;
}

.voice-image{
    width: 90%;
}

.people-img{
    display: block;
    width: 75%;
    margin-left: 100px;
    margin-bottom: 100px;
    box-shadow: 70px 200px #eb8592;
}


.voice-detail{
    width: 100%;
    padding: 50px;
    margin-left: 60px;
    background-color: #fff;
}

.owner-info{
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.voice-text p{
    margin-bottom: 10px;
    font-size: 0.9rem;
}
#voice03 ul{
    margin-bottom: 20px;
}

#voice03 li{
    font-size: 0.9rem;
}

p.standout,
span.standout{
    font-weight: 700;
    font-size: 1rem;
}

span.red-standout{
    font-weight: 700;
    font-size: 1.1rem;
    color: #e35466;
    background: linear-gradient(transparent 50%, #f9dbdf 50%);
}

span.black-standout{
    font-weight: 700;
    font-size: 1.1rem;
    color: #474642;
}


@media screen and (max-width: 1024px) {
    .voice-image{
        width: 65%;
    } 
}

@media screen and (max-width: 990px) {
    #voice01,
    #voice02,
    #voice03{
        flex-direction: column;
    }
    
    .voice-image{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .people-img{
        width: 50%;
        box-shadow: 80px 40px #eb8592;
        margin: 0 20px 60px 0;
    }
    
    .salon-img{
        width: 50%;
        margin-top: 85px;
    }
    
    .voice-detail{
        margin-left: 0;
        width: 90%;
    }
}

@media screen and (max-width: 820px) {
    .voice-detail{
        width: 100%;
        padding: 30px;
    }
    
    .owner-info{
        font-size: 1rem;
    }
    
    .voice-text p{
        font-size: 0.8rem;
    }
    
    p.standout,
    span.standout{
        font-size: 0.9rem;
    }
    
    span.red-standout{
        font-size: 1rem;
    }  
}

@media screen and (max-width: 550px) {
    .voice-detail{
        padding: 30px 20px;
    }
}

@media screen and (max-width: 428px) {
    .people-img{
        margin: 0 10px 80px 0;
    }
    
    .salon-img{
        margin-top: 100px;
    }
}

@media screen and (max-width: 320px) {
    .voice-detail{
        padding: 30px 12px;
    }  
}

/* access */
#access{
    padding: 50px 30px 100px;
    background-color: #fef7f8;
}

#access ul li{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 30px 50px;
    max-width: 900px;
    margin: 0 auto 50px;
    /*24.10.23追記*/
    gap: 10%;
}

#access ul li:last-of-type{
    margin-bottom: 0;
}

/*#access img{
    width: 65%;
    display: block;
    margin: 0 auto 20px;
}*/

.access-text{
    /*width: 65%;*/
    width: 100%;
    margin: 0 auto;
}

.salon-name{
    font-weight: 700;
    margin-bottom: 10px;
}

.salon-address{
    color: #979797;
    line-height: 1.5;
}

/*------coming soon--------*/
.temporary-base{
    position: relative;
}

.temporary-base iframe,
.temporary-base .ginza02-detail{
    opacity: 0.1;
    filter: blur(8px);
}

.temporary{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    width: 100%;
}

.ginza02{
    font-size: 150%;
    font-weight: 700;
}

.comingsoon{
    font-size: 350%;
    font-family: 'Carattere', cursive;
    color: #d70c25;
    opacity: 0.7;
    transform: rotate(-5deg);
}

@media screen and (max-width: 990px) {
    /*#access img,
    .access-text{
        width: 80%;
    }
    
    #access ul li{
        /*padding: 30px 20px;
    }*/
}

@media screen and (max-width: 820px) {
    #access{
        padding: 40px 20px 80px;
    }
    
    iframe{
        width: 300px;
        height: 225px;
    }
}

@media screen and (max-width: 750px) {
    #access ul li{
       flex-direction: column;
    }
    
    .access-text{
        margin: 0 auto 30px;
    }
    
    iframe{
        width: 320px;
        height: 200px;
    }   
}

@media screen and (max-width: 428px) {
    iframe{
        width: 240px;
        height: 150px;
    }
}

@media screen and (max-width: 320px) {
    /*#access img,
    .access-text{
        width: 85%;
    }*/
    
    iframe{
        width: 210px;
    }  
}

/* contact */
.contact-title{
    font-size: 140%;
    font-weight: 700;
    text-align: center;
    width: 80%;
    margin:0 auto 20px;
}
.contact-lead{
    text-align: center;
    width: 80%;
    margin: 0 auto 40px;
}

.gold{
    color: #ABA377;
}

form{
	margin: 0 auto 100px;
    max-width: 1100px;
    background-color: #F3F1EB;
    padding: 50px;
}

#contact .form-list{
    width: 100%;
    margin: 0 auto;
}

#contact input , button , textarea , select {
	margin:0;
	padding:0;
	border:none;
	outline:none;
	background:none;
    font-size: 16px;
}

#contact .form-list input[type='text'] , 
#contact .form-list input[type='email'] , 
#contact .form-list textarea{
	width: 100%;
	border: 1px solid #91918C;
	background: #fff;
	padding: 10px;
	-webkit-appearance:none;
	   -moz-appearance:none;
	        appearance:none;
}

#contact .form-list input[type='text'] , input[type='email'] {
	height: 50px;
}

#contact .submit-btn{
    width: 200px;
    margin: 0 auto;
}

#contact input[type='submit']{
	background: #ABA377;
    border: 1px solid #ABA377;
    color: #fff;
    text-align: center;
    padding: 5px 20px;
    width: 100%;
    margin: 2rem auto 0;
    transition: all .3s;
}

#contact input[type='submit']:hover{
    border: 1px solid #ABA377;
	background-color: #fff;
    color: #ABA377;
} 

#contact .form-list dl{
    display: flex;
    justify-content: space-between;
	align-items: center;
    flex-wrap: wrap;
	padding:0 0 20px 0;
    border-bottom: 1px solid #91918c;
    margin-bottom: 20px;
}

#contact .form-list dt{
    width: 32%;
}

#contact .form-list dd{
    width: 60%;
}

#contact .form-list textarea {
	height: 200px;
}

.required{
	font-size: 0.7rem;
    font-weight: 500;
    background-color: #e35466;
    padding: 2px 10px;
    border-radius: 5px;
	color: #fff;
	margin-left: 15px;
}

.notice{
    font-size: 80%;
}

.line-btn a{
    font-size: 120%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-gold,
.line-white{
    width: 40px;
    height: 40px;
}

.line-btn .line-white{
    display: none;
}

.line-btn a:hover .line-white{
    display: block;
}

.line-btn a:hover .line-gold{
    display: none;
}


@media screen and (max-width: 1024px) {
    #contact .form-list dt{
        margin:0 0 10px 0;
    }
    #contact .form-list dt,
    #contact .form-list dd{
        width:100%;
    }
}

@media screen and (max-width: 550px) {
    #contact p{
        text-align: left;
    }
    
	form{
		width: 100%;
        padding: 40px 20px;
	}  
}
@media screen and (max-width:400px) {
     #contact p{
        width: 100%;
    }
}

@media screen and (max-width:320px) {
    form{
        padding: 40px 20px;
    }
}

/* footer */
#footer{
    background: #474642;
    padding: 50px 100px 20px;
    margin: 0 80px;
}

#footer .footer-logo{
    width: 120px;
	margin: 0 auto;
}

@media screen and (max-width: 990px) {
    #footer{
        margin: 0 60px;
    }
}

@media screen and (max-width: 820px) {
	#footer{
		text-align: center;
        padding: 50px 0 20px;
	}
	
	#footer .footer-logo{
		margin: 0 auto 2rem;
	}
}

@media screen and (max-width: 550px) {
    #footer{
        margin: 20px 20px 0;
    }
}

/*thanks.html*/
#main-area-thanks{
	height: 85vh;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#thanks{
	text-align: center;
}

.thanks-en{
    font-family: 'Carattere', cursive;
    color: #FDDFA5;
    font-size: 8rem;
}

.thanks-msg{
	margin: 0 auto 30px;
	font-size: 1.2rem;
}

.thanks-detail{
	margin-bottom: 50px;
	display: flex;
	justify-content: center;
	text-align: left;
}

@media screen and (max-width: 550px) {
    
    .thanks-en{
        font-size: 4rem;
        line-height: 1;
        margin-bottom: 50px;
    }
    
    .thanks-msg{
        margin: 0 auto 30px;
        font-size: 1rem;
    }
}

@media screen and (max-width: 320px) {
    .thanks-en{
        font-size: 4.5rem;
    }
}