@charset "UTF-8";

*, *::before, *::after{
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
body{
 color: #333;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 16px;
 line-height: 1.0;
 overflow-x: hidden;
}
a{
 color: inherit;
 display: block;
 text-decoration: none;
}
img{
 height: auto;
 max-width: 100%;
 pointer-events: none; 
 vertical-align: bottom;
}
ul,li{
 list-style: none;
}

/* END Reset CSS
-------------------------------------------------------------------------------------------------- */

h2,h3,h4,h5,h6{
 font-family: 'Lora', serif;
}
h2{
 font-size: 28px;
 font-weight: 100;
}
h3{
 font-weight: 500;
}
dt,dd{
 line-height: 1.6;
}
.container{
 margin: 0 auto;
 width: min(90%,1100px);
}
.page-top{
 background: #fff;
 display: none;
 height: 50px;
 position: fixed;
 right: 10px;
 bottom: 60px;
 transform: rotate(90deg);
 width: 60px;
}
.page-top .text{
 color: #333;
 font-size: 14px;
 padding-left: 15px;
 line-height: 44px;
 text-align: center;
 transition: all 0.3s ease-in-out;
}
.page-top a{
 background-color: transparent;
 border: 3px solid #cce4fc;
 box-sizing: border-box;
 color: #fff;
 height: 100%;
 position: relative;
 text-align: center;
 transition: all 0.3s ease-in-out;
}
.page-top a::before{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
 top:10px;
 right: 23px;
 transform: translateY(-50%) rotate(150deg);
 transition: 0.3s;
 width: 12px;
}
.page-top a::after{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
 top: 14px;
 right: 6px;
 transform: translateY(-50%);
 transition: 0.3s;
 width: 28px;
}
.page-top a:hover::after{
 background: #333;
 right: 26px;
}
.page-top a:hover::before{
 background: #333;
 right: 40px;
 width: 0.9375rem;
}	
.page-top a .top-key{
 background: #fff;
 height: 3px;
 position: absolute;
 top: -3px;
 left: 0.625rem;
 transition: width 0.5s ease-out, left 0.3s ease-out;
 width: 1.5625rem;
}
.page-top a .bottom-key-1 {
 background: #fff;
 height: 3px;
 position: absolute;
 right: 1.7rem;
 bottom: -3px;
 transition: width 0.5s ease-out, right 0.3s ease-out;
 width: 1.5625rem;
}
.page-top a:hover {
 background: #cce4fc;
}
.page-top a:hover .top-key {
 left: -2px;
 width: 0px;
}
.page-top a:hover .bottom-key-1{
 right: 0;
 width: 0;
}
.is-fixed{
 overflow: hidden;
}

/* END Common CSS
-------------------------------------------------------------------------------------------------- */

#header{
 background: #fff;
 box-shadow: 0 1px 3px rgba(84, 42, 13, 0.7);
 position: fixed;
 top: 0;
 z-index: 10;
 width: 100vw;
}
.header-wrapper{
 display: flex;
 align-items: flex-end;
 justify-content: flex-start;
 padding: 5px 20px;
 position: relative;
}
h1{
 background: url(../img/logo.svg) no-repeat left center;
 height: 50px;
 margin-right: auto;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 width: 150px;
}
h1 a{
 height: 100%;
}
.SP-nav{
 background: #fff;
 border-top: 2px solid rgba(84, 42, 13, 0.6);
 display: none;
 position: absolute;
 top: 60px;
 left: 0;
 width: 100%;
}
.SP-nav .SPnav-btn{
 background: #fff;
 font-family: 'Lora', serif;
 font-size: 20px;
 display: grid;
 grid-template-columns: repeat(2,1fr);
 grid-template-rows: repeat(3,1fr);
}
.SP-nav .SPnav-btn li{
 border-bottom: 1px solid rgba(84, 42, 13, 0.5);
 border-left: 1px solid rgba(84, 42, 13, 0.5);
 line-height: calc(((var(--vh, 1vh) * 100) - 60px) / 5);
 text-align: center;
}
.SP-nav .SPnav-btn li:nth-child(1),
.SP-nav .SPnav-btn li:nth-child(3),
.SP-nav .SPnav-btn li:nth-child(5){
 border-left: 0;
}
.SP-nav .SPnav-btn a{
 background: transparent;
 height: 100%;
}
.SP-nav .SPnav-btn a:hover{
 background: #fff0be;
 transition: 0.7s;
}
.SP-nav .header-btn{
 font-family: 'Lora', serif;
 text-align: center;
}
.SP-nav .header-btn a{
 background: transparent;
 border-bottom: 1px solid rgba(84, 42, 13, 0.5);
 height: 100%;
}
.SP-nav .header-btn a:hover{
 background: #fff0be;
 transition: 0.7s;
}
.SP-nav .header-web-btn p{
 line-height: calc(((var(--vh, 1vh) * 100) - 60px) / 5);
 margin: 0 auto;
 position: relative;
 width: fit-content;
}
.SP-nav .header-tel-btn p{
 line-height: calc(((var(--vh, 1vh) * 100) - 60px) / 20);
 margin: 0 auto;
 padding: calc(((var(--vh, 1vh) * 100) - 60px) / 20) 0;
 position: relative;
 width: fit-content;
}
.SP-nav .header-tel-btn p::before{
 background: url(../img/telephone.svg) no-repeat;
 content: "";
 display: inline-block;
 height: 25px;
 position: absolute;
 top: 50%;
 left: -35px;
 transform: translate(-50%,-50%);
 width: 25px;
}
.SP-nav .header-web-btn p::before{
 background: url(../img/hotpepper-logo.svg) no-repeat;
 content: "";
 display: inline-block;
 height: 25px;
 position: absolute;
 top: 50%;
 left: -25px;
 transform: translate(-50%,-50%);
 width: 25px;
}
.PC-nav{
 display: none;
}
.hamburger{
 height: 60px;
 position: fixed;
 top: 0px;
 right: 0px;
 z-index: 1000;
}

@media screen and (min-width:835px){
 #header{
 position: static;
 }
 .header-wrapper{
 padding: 0 20px;
 }
 h1{
 height: 100px;
 }
 .hamburger{
 border: 0;
 display: none;
 }
 .SP-nav{
 border: 0;
 }
 .PC-nav{
 display: block;
 }
 .PCnav-btn{
 display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
 line-height: 40px;
 }
 .PCnav-btn a:hover{
 position: relative;
 }
 .PCnav-btn a:hover::after{
 border-bottom: 3px solid #cce4fc;
 content: "";
 position: absolute;
  top: 79%;
  left: 0;
 width: 100%;
 }
 .header-web-btn a{
 background-color: transparent;
 border: 3px solid #cce4fc;
 box-sizing: border-box;
 color: #fff;
 height: 100%;
 line-height: 44px;
 position: relative;
 text-align: center;
 transition: all 0.3s ease-in-out;
 }
 .header-web-btn a::before{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
  top: calc(50% - 2px);
  right: 1em;
 transform: translateY(calc(-50% - 2px)) rotate(30deg);
 transition: 0.3s;
 width: 12px;
 }
 .header-web-btn a::after{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
  top: 50%;
  right: 1em;
 transform: translateY(-50%);
 transition: 0.3s;
 width: 70px;
 }
 .header-web-btn a:hover::after{
 background: #333;
 right: 0.5em;
 }
 .header-web-btn a:hover::before{
 background: #333;
 right: 0.5em;
 width: 0.9375rem;
 }
 .header-web-btn .text{
 color: #333;
 padding: 0 70px;
 position: relative;
 }
 .header-web-btn .text::before{
 background: url(../img/hotpepper-logo.svg) no-repeat;
 content: "";
 display: inline-block;
 height: 35px;
 position: absolute;
  top: 50%;
  left: 40px;
 transform: translate(-50%,-50%);
 width: 35px;
 }
 .header-web-btn a .top-key{
 background: #fff;
 height: 3px;
 position: absolute;
  top: -3px;
  left: 0.625rem;
 transition: width 0.5s ease-out, left 0.3s ease-out;
 width: 1.5625rem;
 }
 .header-web-btn a .bottom-key-1 {
 background: #fff;
 height: 3px;
 position: absolute;
  right: 1.875rem;
  bottom: -3px;
 transition: width 0.5s ease-out, right 0.3s ease-out;
 width: 1.5625rem;
 }
 .header-web-btn a:hover {
 background: #cce4fc;
 }
 .header-web-btn a:hover .top-key {
 left: -2px;
 width: 0px;
 }
 .header-web-btn a:hover .bottom-key-1{
 right: 0;
 width: 0;
 }
 .is-fixed{
 overflow: visible;
 }
}

@media screen and (height < 500px){
 #header{
 position: fixed;
 }
 .header-wrapper{
 padding: 5px 20px;
 position: relative;
 }
 h1{
 height: 50px;
 }
 .SP-nav{
 border-top: 2px solid rgba(84, 42, 13, 0.6);
 display: none;
 }
 .SPnav-btn, .SPnav-btn li, .SPnav-btn a, .header-btn{
 visibility: visible;
 }
 .hamburger{
 display: block;
 }
 .PC-nav{
 display: none;
 }
 .is-fixed{
 overflow: hidden;
 }
}

@media screen and (499px < height) and (834px < width){
 .SPnav-btn, .SPnav-btn li, .SPnav-btn a, .header-btn{
 display: none;
 visibility: hidden;
 }
}

/* END header CSS
-------------------------------------------------------------------------------------------------- */

#main-vis{
 background-repeat: no-repeat;
 background-size: cover;
 height: calc(var(--mainVisVh,1vh) * 100);
 position: relative;
 width: 100%;
}
.mainImage{
 animation: mv-animation 20s ease-in-out infinite;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
}
.mainImage:nth-child(1){
 background-image: url(../img/main-visual1a.webp);
 background-position: center center;
}
.mainImage:nth-child(2){
 animation-delay: 10s;
 background-image: url(../img/main-visual1b.webp);
 background-position: center top;
}
.catch-copy{
 color: #fff;
 font-family: 'Tangerine', cursive;
 position: absolute;
 top: 50%;
 left: 50%;
 text-align: center;
 text-shadow: 1px 1px 3px #000;
 transform: translate(-50%,-50%);
 z-index: 1;
}
.catch-copy-en{
 font-size: clamp(3.75rem, 2.724rem + 5.13vw, 6.25rem);
 letter-spacing: 0.015em;
 line-height: 1.2;
 white-space: nowrap;
}
.catch-copy-ja{
 font-size: clamp(0.875rem, 0.824rem + 0.26vw, 1rem);
 letter-spacing: 0.05rem;
 margin-top: 20px;
}
.scroll-btn{
 height: 50px;
 margin: 0 auto;
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translate(-50%,-100%);
 width: 50px;
 z-index: 1;
}
.scroll-btn::before{
 content: "scroll";
 color: #fff;
 font-size: 14px;
 position: absolute;
 top: -15px;
 left: 9px;
 text-shadow: 1px 1px 3px #000;
 width: 50px;
}
.scroll-btn img{
 height: 50px;
 padding: 0 13px 0;
}

@media screen and (min-width:835px){
 .main-vis{
 height: calc(100vh - 100px);
 }	
}

@media screen and (height < 500px){
 .main-vis{
 height: 100vh;
 }
}

/* END HOME-page main-visual CSS
-------------------------------------------------------------------------------------------------- */

.concept .container{
 margin: 0px auto 30px;
 padding-top: 30px;
}
.concept-txt{
 background: #fff0be;
 padding: 30px;
 text-align: center;
}
.concept-txt p{
 line-height: 1.6;
 margin-top: 30px;
}

@media screen and (min-width:744px){
 .concept .container{
 display: flex;
 margin: 0 auto 50px;
 padding-top: 50px;
 }
 .entrance-image, .concept-txt{
 width: 50%;
 }
 .entrance-image img{
 height: 100%;
 object-fit: cover;
 object-position: 80% 50%;
 }
 .concept h2{
 padding-top: 30px;
 }
 .concept-txt p{
 margin-top: 30px;
 }
}
@media screen and (min-width:835px){
 .concept .container{
  margin: 0 auto 80px;
  padding-top: 80px;
 }
}

/* END HOME-page main>concept CSS
-------------------------------------------------------------------------------------------------- */

.menu{
 background: url(../img/menu_bg.webp) no-repeat center/cover;
 color: #fff;
}
.menu .container{
 padding: 60px 0 70px;
}
.menu h2{
 margin-bottom: 30px;
 text-align: center;
}
.menu h3{
 margin: 30px 0 20px;
}
.menu dl{
 overflow: hidden;
 width: 100%;
}
.menu dt{
 float: left;
 text-align: left;
}
.menu dd{
 border-bottom: 1px solid #fff;
 margin: 0 0 15px auto;
 padding-bottom: 5px;
 text-align: right;
}
.menu-btn{
 background: #fff;
 color: #333;
 height: 50px;
 margin-top: 50px;
 text-align: center;
}
.menu-btn .text{
 line-height: 44px;
 padding-left: 50px;
 position: relative;
 width: fit-content;
}
.menu-btn .text::before{
 background: url(../img/hotpepper-logo.svg) no-repeat;
 content: "";
 display: inline-block;
 height: 35px;
 position: absolute;
 top: 5px;
 left: 8px;
 width: 35px;
}
.menu-btn a{
 background-color: transparent;
 border: 3px solid #cce4fc;
 box-sizing: border-box;
 color: #fff;
 height: 100%;
 position: relative;
 text-align: center;
 transition: all 0.3s ease-in-out;
}
.menu-btn a::before{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
 top: calc(50% - 2px);
 right: 1em;
 transform: translateY(calc(-50% - 2px)) rotate(30deg);
 transition: 0.3s;
 width: 12px;
}
.menu-btn a::after{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
 top: 50%;
 right: 1em;
 transform: translateY(-50%);
 transition: 0.3s;
 width: 30px;
}
.menu-btn a .text {
 color: #333;
 height: 100%;
 transition: all 0.3s ease-in-out;
}
.menu-btn a .top-key{
 background: #fff;
 height: 3px;
 position: absolute;
 top: -3px;
 left: 0.625rem;
 transition: width 0.5s ease-out, left 0.3s ease-out;
 width: 1.5625rem;
}
.menu-btn a .bottom-key-1 {
 background: #fff;
 height: 3px;
 position: absolute;
 right: 1.875rem;
 bottom: -3px;
 transition: width 0.5s ease-out, right 0.3s ease-out;
 width: 1.5625rem;
}
.menu-btn a:hover {
 background: #cce4fc;
}
.menu-btn a:hover::after{
 background: #333;
 right: 0.5em;
}
.menu-btn a:hover::before{
 background: #333;
 right: 0.5em;
 width: 0.9375rem;
}
.menu-btn a:hover .top-key {
 left: -2px;
 width: 0px;
}
.menu-btn a:hover .bottom-key-1{
 right: 0;
 width: 0;
}

@media screen and (min-width:370px){
 .menu-btn a::after{
 width: 50px;
 }
}

@media screen and (min-width:744px){
 .menu .container{
 display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 28px auto 1fr;
 }
 .menu h2{
 grid-column: 1 / 3;
 grid-row: 1 / 2;
 }
 .menu-wrapper{
 display: grid;
  gap: 40px;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
 grid-column: 1 / 3;
 grid-row: 2 / 3;
 padding-top: 30px;
 }
 .menu-btn{
 grid-column: 2 / 3;
 grid-row: 3 / 4;
 margin-left: 20px;
 }
}

@media screen and (min-width:768px){
 .menu-btn a::after{
 width: 65px;
 }
}

@media screen and (min-width:835px){
 .menu-wrapper{
 gap: 50px;
 }
 .menu-btn{
 margin-left: 25px;
 }
}

/* END HOME-page main>menu CSS
-------------------------------------------------------------------------------------------------- */

.service .container{
 margin-bottom: 50px;
 padding-top: 50px;
}
.service h2{
 margin: 0 auto 30px;
 padding: 0 60px 5px;
 position: relative;
 text-align: center;
}
.service h2::before{
 background: #542a0d;
 content: "";
 height: 1px;
 position: absolute;
 top: calc(50% - 1px);
 left: 0;
 width: 100%;
}
.service h2 span{
 background: #fff;
 padding: 0 1em;
 position: relative;
}
.service-wrapper{
 display: grid;
 gap: 50px;
 grid-template-columns: repeat(auto-fit, minmax(min(100%,245px), 1fr));
}
.service h3{
 margin: 20px 0 15px;
}
.service-txt{
 line-height: 1.6;
}
.service-wrapper p:first-of-type{
 position: relative;
}
.service-wrapper p:first-of-type::after{
 background: #fff0be;
 content: "";
 height: 100%;
 position: absolute;
 top: 8px;
 left: 8px;
 z-index: -1;
 width: 100%;
}

@media screen and (min-width:835px){
 .service .container{
  margin-bottom: 80px;
  padding-top: 80px;
 }
 .service h2{
  margin: 0px auto 40px;
 }
}

/* END HOME-page main>service CSS
-------------------------------------------------------------------------------------------------- */

.staff{
 background: #fff0be;
}
.staff .container{
 padding: 50px 0 20px;
}
.staff h2{
 margin-bottom: 30px;
 text-align: center;
}
.staff-list {
 display: flex;
 gap: 50px;
 justify-items: center;
 text-align: center;
 max-width: 900px;
 flex-wrap: wrap;
 justify-content: center;
}
.staff-list > section {
    margin-bottom: 30px;
    max-width: 250px;
}
.staff-image img{
 border-top-left-radius: 15%;
 border-bottom-right-radius: 15%;
 margin-bottom: 20px;
}
.staff-list h3{
 font-size: 16px;
 margin-bottom: 5px;
}
.staff-list h3 span{
 font-size: 20px;
 line-height: 1.2;
}
.staff-list p{
 font-size: 14px;
 line-height: 1.6;
}

@media screen and (min-width:835px){
 .staff .container{
  padding: 80px 0 30px;
 }
 .staff h2{
  margin-bottom: 40px;
 }
}

/* END HOME-page main>staff CSS
-------------------------------------------------------------------------------------------------- */

.access .container{
 margin-bottom: 50px;
 padding-top: 50px;
}
.access h2{
 margin-bottom: 20px;
}
.access img{
 margin-bottom: 30px;
}
.access-wrapper dl{
 margin-bottom: 30px;
 overflow: hidden;
 width: 100%;
}
.access-wrapper dt{
 float: left;
 width: 35%;
}
.access-wrapper dd{
 margin: 0 0 5px auto;
 width: 65%;
}
.access-btn{
 background: #fff;
 line-height: 44px;
}
.access-btn a{
 background-color: transparent;
 border: 3px solid #cce4fc;
 color: #fff;
 height: 100%;
 position: relative;
 text-align: center;
 transition: all 0.3s ease-in-out;
 width: 100%;
}
.access-btn a .top-key{
 background: #fff;
 height: 3px;
 position: absolute;
 top: -3px;
 left: 0.625rem;
 transition: width 0.5s ease-out, left 0.3s ease-out;
 width: 1.5625rem;
}
.access-btn a .bottom-key-1 {
 background: #fff;
 height: 3px;
 position: absolute;
 right: 1.875rem;
 bottom: -3px;
 transition: width 0.5s ease-out, right 0.3s ease-out;
 width: 1.5625rem;
}
.access-btn a:hover {
 background: #cce4fc;
}
.access-btn a:hover .top-key {
 left: -2px;
 width: 0px;
}
.access-btn a:hover .bottom-key-1{
 right: 0;
 width: 0;
}
.access-btn .text{
 color: #333;
 padding-left: 70px;
 position: relative;
 transition: all 0.3s ease-in-out;
 width: fit-content;
}
.access-btn .text::before{
 background: url(../img/hotpepper-logo.svg) no-repeat;
 content: "";
 display: inline-block;
 height: 35px;
 position: absolute;
 top: 5px;
 left: 20px;
 width: 35px;
}
.google-map{
 height: 500px;
 width: 100%;
}
.google-map iframe{
 height: 100%;
 width: 100%;
}

@media screen and (min-width:370px){
 .access-btn a::before{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
  top: calc(50% - 2px);
  right: 1em;
 transform: translateY(calc(-50% - 2px)) rotate(30deg);
 transition: 0.3s;
 width: 12px;
 }
 .access-btn a::after{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
  top: 50%;
  right: 1em;
 transform: translateY(-50%);
 transition: 0.3s;
 width: 30px;
 }
 .access-btn a:hover::after{
 background: #333;
 right: 0.5em;
 }
 .access-btn a:hover::before{
 background: #333;
 right: 0.5em;
 width: 0.9375rem;
 }
}

@media screen and (min-width:400px){
 .access-btn a::after{
 width: 70px;
 }
}

@media screen and (min-width:835px){
 .access .container{
 display: flex;
  justify-content: center;
 padding-top: 80px;
 margin-bottom: 80px;
 }
 .access h2{
 margin-bottom: 30px;
 padding-left: 20px;
 } 
 .access-image,.access-wrapper{
 width: 50%;
 }
 .access-image img{
 height: 100%;
 object-fit: cover;
 object-position: 40% center;
 }
 .access dl{
 margin-bottom: 50px;
 padding: 0 20px;
 }
 .access-btn{
 margin: 0 0 0 20px;
 }
 .google-map{
  margin-bottom: 30px;
 }
}

/* END HOME-page main>access CSS
-------------------------------------------------------------------------------------------------- */

.recruit .container{
 margin-bottom: 50px;
 padding-top: 30px;
}
.recruit h2{
 background: #fff0be;
 padding: 30px 0;
 text-align: center;
}
.recruit-image img{
 width: 100%;
}
.recruit-content{
 background: #fff0be;
 padding: 0 40px 30px;
}
.recruit p{
 line-height: 1.6;
 text-align: center;
}
.recruit-btn{
 background: #fff;
 margin: 30px 0 20px;
}
.recruit-btn .text{
 color: #333;
 line-height: 50px;
 transition: all 0.3s ease-in-out;
}
.recruit-btn a{
 background-color: transparent;
 border: 3px solid #cce4fc;
 box-sizing: border-box;
 color: #fff;
 height: 100%;
 position: relative;
 text-align: center;
 transition: all 0.3s ease-in-out;
}
.recruit-btn a .top-key{
 background: #fff;
 height: 3px;
 position: absolute;
 top: -3px;
 left: 0.625rem;
 transition: width 0.5s ease-out, left 0.3s ease-out;
 width: 1.5625rem;
}
.recruit-btn a .bottom-key-1 {
 background: #fff;
 height: 3px;
 position: absolute;
 right: 1.875rem;
 bottom: -3px;
 transition: width 0.5s ease-out, right 0.3s ease-out;
 width: 1.5625rem;
}
.recruit-btn a:hover {
 background: #cce4fc;
}
.recruit-btn a:hover .top-key {
 left: -2px;
 width: 0px;
}
.recruit-btn a:hover .bottom-key-1{
 right: 0;
 width: 0;
}

@media screen and (min-width:420px){
 .recruit-btn a::before{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
  top: calc(50% - 2px);
  right: 1em;
 transform: translateY(calc(-50% - 2px)) rotate(30deg);
 transition: 0.3s;
 width: 12px;
 }
 .recruit-btn a::after{
 background-color: #333;
 content: '';
 height: 1px;
 position: absolute;
  top: 50%;
  right: 1em;
 transform: translateY(-50%);
 transition: 0.3s;
 width: 30px;
 }
 .recruit-btn a:hover::after{
 background: #333;
 right: 0.5em;
 }
 .recruit-btn a:hover::before{
 background: #333;
 right: 0.5em;
 width: 0.9375rem;
 }
}

@media screen and (min-width:510px){
 .recruit-btn a::after{
 width: 70px;
 }
}

@media screen and (min-width:744px){
 .recruit .container{
 display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: auto 1fr;
 padding-top: 50px;
 }
 .recruit h2{
 background: #fff0be;
 grid-column: 1 / 3;
 grid-row: auto;
 margin-bottom: 15px;
 padding: 5px 0 5px 10px;
 text-align: left;
 }
 .recruit-image{
 background: #fff;
 grid-column: 1 / 2;
 grid-row: 2 / 3;
 margin-left: 0;
 }
 .recruit-content{
 background: #fff;
 font-size: 14px;
 grid-column: 2 / 3;
 grid-row: 2 / 3;
 padding: 0 20px;
 }
 .recruit p{
 text-align: left;
 margin-left: 10px;
 }
 .recruit-btn{
 background: #fff;
 margin: 10px 0;
 }
 .recruit-btn .text{
 padding-left: 5px;
 }
}

@media screen and (min-width:835px){
 .recruit .container{
  margin-bottom: 80px;
  padding-top: 50px;
 }
}

@media screen and (min-width:945px){
 .recruit .container{
 grid-template-columns: repeat(2,1fr);
 grid-template-rows: auto 1fr;
 }
 .recruit h2{
 grid-column: 2 / 3;
 grid-row: 1 / 2;
 margin: 0;
 padding: 20px 0 0 20px;
 }
 .recruit-image{
 grid-row: 1 / 3;
 }
 .recruit-content{
 background: #fff0be;
 grid-column: 2/3;
 grid-row: 2/3;
 padding-top: 20px;
 }
 .recruit-btn{
 margin: 20px 0 0;
 }
}

/* END HOME-page main>recruit CSS
-------------------------------------------------------------------------------------------------- */

.footer{
 background: #542a0d;
 color: #fff;
}
.footer .container{
 padding: 30px 0;
 text-align: center;
}

/* END footer CSS
-------------------------------------------------------------------------------------------------- */

#guidelines .recruit-text-wrapper{
 aspect-ratio: 16 / 9;
 background: url(../img/recuit-mainvis.webp) no-repeat center/cover;
 max-width: 750px;
 margin: 60px auto 0;
 position: relative;
}
#guidelines .recruit-text{
 color: #fff;
 position: absolute;
 top: 10%;
 left: 45%;
 transform: translate(0,0);
 width: 40vw;
}
#guidelines .recruit-text h2{
 font-size: clamp(1.875rem, 0.945rem + 4.65vw, 3.125rem);
 margin-bottom: 10px;
}
#guidelines .recruit-text p{
 font-size: 16px;
 line-height: 1.6;
}
#guidelines .guidelines-contents{
 background: #fff0be;
}
#guidelines .container{
 margin: 0 auto;
 padding: 50px 0 50px;
 width: min(90%,960px);
}

#guidelines .salon{
 background: #f1f1f1;
}
#guidelines .salon h3{
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: bold;
 color: orangered;
 margin:0 0 15px;
 padding-left: 7px;
}
#guidelines .statue{
 border: 2px solid orangered;
 padding: 20px 30px;
 margin: 30px 0 0;
}
#guidelines h4{
 border-bottom: 1px solid orangered;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 20px;
 font-weight: normal;
 margin-bottom: 15px;
 padding-bottom: 15px;
}
#guidelines h4 span{
 color: orangered;
 margin-right: 10px;
}
#guidelines .salon p{
 line-height: 1.6;
}
#guidelines .wrapper{
 padding: 0;
}
#guidelines h3{
 border-left: 10px solid orangered;
 font-size: 24px;
 margin: 50px 0 15px;
 padding-left: 7px;
}
#guidelines .philosophy,#guidelines .greeting{
 display: grid;
 grid-template-columns: 30% 70%;
}
#guidelines .philosophy-txt, #guidelines .greeting-txt{
 line-height: 1.6;
 margin-left: 20px;
}
#guidelines .guidelines-contents{
 margin-top: 50px;
}
#guidelines .guidelines-contents h3{
 border-bottom: 1px solid #000;
 border-left: 0;
 font-size: 28px;
 padding: 0 0 30px 0;
 margin: 0;
}
#guidelines .container dl{
 display: grid;
 grid-template-columns: auto auto;
 padding-bottom: 30px;
}
#guidelines .container dt{
 border-bottom: 1px solid #000;
 padding: 10px 0;
}
#guidelines .container dd{
 margin-left: 1em;
 padding: 10px 0;
 position: relative;
}
#guidelines .container dd::before{
 content: "";
 border-bottom: #000 1px solid;
 position: absolute;
 bottom: 0;
 left: -1em;
 width: calc(100% + 1em);
}
#guidelines li{
 line-height: 1.6;
}

@media screen and (min-width:475px){
 #guidelines .recruit-text{
 top: 25%;
 }
}

@media screen and (width < 600px){
 #guidelines .philosophy,#guidelines .greeting{
  display: block;
 }
 #guidelines .philosophy-txt, #guidelines .greeting-txt{
  margin: 20px 0 0 0;
 }
}

@media screen and (min-width:835px){
 #guidelines .recruit-text-wrapper{
 margin: 30px auto;
 }
 #guidelines .recruit-text h2{
 margin-bottom: 20px;
 }
}

/* END RECRUIT-page CSS
-------------------------------------------------------------------------------------------------- */

.catchCopyAnimation{
 animation: firstViewAnime 2.5s ease-in-out 1 normal forwards;
 opacity: 0;
}
.fadeIn{
 animation: fadeInAnime 1.5s ease-in-out 1 normal forwards;
 opacity: 0;
}
.delay01{
 animation-delay: 1.25s;
}
.delay02{
 animation-delay: 2.25s;
}
.delay03, .delay04, .delay05, .delay06, .delay07, .delay08{
 animation-delay: 0.25s;
}

@media screen and (min-width:600px){
 .delay03, .delay05, .delay07{
 animation-delay: 0.5s;
 }
 .delay04, .delay06, .delay08{
 animation-delay: 0.75s;
 }
}

@media screen and (min-width:928px){
 .delay03, .delay06{
 animation-delay: 0.25s;
 }
 .delay04, .delay07{
 animation-delay: 0.75s;
 }
 .delay05, .delay08{
 animation-delay: 0.5s;
 }
}

@keyframes mv-animation{
 0%{
 opacity: 0;
 }
 25%{
 opacity: 1;
 }
 75%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 z-index: 0;
 }
}

@keyframes firstViewAnime{
 0%{
 opacity: 0;
 transform: translate(0,0);
 }
 100%{
 opacity: 1;
 transform: translate(0,0);	
 }
}

@keyframes fadeInAnime{
 0%{
 opacity: 0;
 transform: translate(0,25px);
 }
 100%{
 opacity: 1;
 transform: translate(0,0);
 }
}

#loading{
 background-color: #fff;
 height: 100vh;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 transition: all 3s;
 width: 100vw;
}
.fadeOut{
 animation: fadeOut 3s ease-out 1.5s 1 normal both;
 background: url(../img/load.svg) no-repeat center;
 height: 300px;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-47%,-50%);
 width: 300px;
}
.loaded {
 opacity: 0;
 visibility: hidden;
}
@keyframes fadeOut{
 0% {
 opacity: 1;
 }
 40%{
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}

/* END animation setting CSS
-------------------------------------------------------------------------------------------------- */