@charset "utf-8";
@import url("root.css");
/***************************************
------------- TOP MAIN IMG -------------
***************************************/

#mv {
    width: 100%;
    margin:0 auto 50px;
}

#mv .box{
margin: 0 auto;
padding: 0;
}


#mv img{
max-width: 100%;
width:auto;
margin:0 auto 0;
}

.image-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 1658 / 777;
  overflow: hidden;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInSlide 1.5s ease-out forwards;

}

/* 背景だけ点滅する部分 */
.bg-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/top_bg_02.png'); /* ← 画像パス */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  animation: bgFlash 2s ease-in-out infinite;
}

/* 点滅アニメーション */
@keyframes bgFlash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3; /* 暗くなる or 光る効果として見える */
  }
}


/* 画像の共通設定 */
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* 背景画像（フェードイン・フェードアウト + グレー変化） */
.bg-image {
  z-index: 1;
  position: relative;
  opacity: 0.9;

}


.overlay-image {
  z-index: 3;
  position: relative; /* これを追加し、::before を確実に適用 */
  opacity: 1;
}

/* --- overlay-image にキラッ✨エフェクトを適用 --- */
.overlay-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 60%);
  transform: skewX(-30deg);
  opacity: 0.6;
  z-index: 4;
  animation: shine 3s linear infinite; /* 繰り返し発動 */
}

@keyframes shine {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

/* --- 1. フェードイン＆スライドアニメーション（ページ読み込み時） --- */
@keyframes fadeInSlide {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 2. フェードアウトと同時にグレー調に変化 --- */
@keyframes fadeInOutGray {
  0% {
    opacity: 0.7;
    filter: grayscale(40%);
  }
  50% {
    opacity: 1;
    filter: grayscale(10%);
  }
  100% {
    opacity: 0.7;
    filter: grayscale(40%);
  }
}




@media screen and (max-width: 768px) {
    #mv {
        margin: 80px auto 0;
		height:auto;
    }
#mv img{
max-width: 100%;
width:auto;
margin:0 auto 0;
}
}
/***************************************
------------- SERVICE ------------
***************************************/

#SERVICE{
  position: relative; /* ← 追加 */
  background-color:var(--sub-color01); /* ← 必要に応じて背景はこっちに分ける */

}

#SERVICE .box {
padding: 80px 0 80px 0;
}

#SERVICE .title {
    width: 100%;
	color: var(--base-color03);
	border-radius: 0 0 40px 40px;
	padding: 70px 0;
	background-color:  var(--base-color01);
	position: relative;

}

#SERVICE .bg-glow {
position: absolute;
top: 0;
left: 0;
background-image: url('../img/title_service.png');
background-size:auto;
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
animation: bgFlash 2s ease-in-out infinite;
}

#SERVICE .bg-glow_02 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* ← 横幅を指定して見えるように */
  height: 100%; /* ← 親に高さがある前提ならOK */
  background-image: url('../img/service_bg.png'); /* ← 修正！ */
  background-size: auto; /* auto→coverなどにすると調整しやすい */
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 1; /* 他の要素と被らないように調整 */
  animation: bgFlash 2s ease-in-out infinite;
}


#SERVICE .title h2 {
font-size: 70px;
font-weight: 900;
color: var(--base-color03);	
text-align: center;
line-height: 1;
padding:0 0 70px 0;
z-index: 3;
position: relative;
}

#SERVICE .title p {
text-align: center;
}

#SERVICE .row {
align-items:stretch;
}

#SERVICE .col {
   display: flex;
   flex-direction: column;
}

#SERVICE .service_box_img img {
border-radius: 20px 20px 0 0;
}

#SERVICE .service_box_txt {
text-align: center;
margin: 0 auto;
border-radius:0 0 20px 20px;
background-color: var(--base-color03);
padding: 40px 40px 50px 40px;
flex-grow: 1;
height: 250px;
}

#SERVICE .service_box_txt h3 {
text-align: center;
margin: 0 auto;
}
#SERVICE .service_box_txt img {
width: auto;
}

#SERVICE .service_box_txt p {
text-align: left;
padding: 40px 0 0 0;
}

#SERVICE .link_a a{
z-index: 33;
}
@media screen and (max-width: 768px) {
#SERVICE{

}

#SERVICE .box {
padding: 40px 0 40px 0;
}

#SERVICE .title {
    width: 100%;
	color: var(--base-color03);
	border-radius: 0 0 20px 20px;
	padding: 30px 0;

}

#SERVICE .bg-glow {
background-size:80%;
}

#SERVICE .bg-glow_02 {
background-size:80%;
}





#SERVICE .title h2 {
font-size: 50px;
font-weight: 900;
color: var(--base-color03);	
text-align: center;
line-height: 1;
padding:0 0 20px 0;
}

#SERVICE .title p {
text-align: left;
width: 80%;
margin: 0 auto;
}

#SERVICE .row {
align-items:stretch;
}

#SERVICE .col {
   display: flex;
   flex-direction: column;
   margin: 0 auto 20px;
}

#SERVICE .service_box_img img {
border-radius: 20px 20px 0 0;
}

#SERVICE .service_box_txt {
text-align: center;
margin: 0 auto;
border-radius:0 0 20px 20px;
background-color: var(--base-color03);
padding: 20px;
flex-grow: 1;
height:auto;
}

#SERVICE .service_box_txt h3 {
text-align: center;
margin: 0 auto;
}
#SERVICE .service_box_txt img {
width: auto;
}

#SERVICE .service_box_txt p {
text-align: left;
padding: 20px 0 0 0;
}

}
/***************************************
-------------- staff --------------
***************************************/

#STAFF {
background: url(../img/staff_bg.png) top center no-repeat var(--base-color03);
background-size:cover;
padding: 100px 0;
position: relative;

}

#STAFF .bg-glow_03 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* ← 横幅を指定して見えるように */
  height: 100%; /* ← 親に高さがある前提ならOK */
  background-image: url('../img/staff_bg_02.png'); /* ← 修正！ */
  background-size: auto; /* auto→coverなどにすると調整しやすい */
  background-position: top left;
  background-repeat: no-repeat;
  z-index: 1; /* 他の要素と被らないように調整 */
  animation: bgFlash 2s ease-in-out infinite;
}



#STAFF .title{
margin: 0 auto;
text-align: center;
position: relative;
z-index: 22;
}

#STAFF .title h3{
margin: 0 auto 20px;
font-size: 70px;
font-weight: 900;
color: var(--base-color01);	
width: 400px;
border-bottom:3px solid var(--base-color01);
text-align: center;
padding: 0 0 20px 0;
line-height: 1;
}

#STAFF .title span{
margin: 0 auto;
text-align: center;
font-size: 16px;
}

#STAFF .staff_box{
margin: 60px auto;
}


#STAFF .staff_box_col{
width: 410px;
border:5px solid var(--base-color01);
border-radius: 14px;
background-color: var(--base-color03);
padding: 40px 20px;
margin: 0 20px;
}

#STAFF .staff_img {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 0;
  
}
#STAFF .staff_img img{
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius:50%;
  border: 10px solid var(--sub-color01);
}

#STAFF .staff_box_col p{
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行まで表示 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em; /* 1行の高さ × 2（行数） */
  line-height: 1.5em; /* 1行の高さを設定 */
}

#STAFF h4{
font-size: 20px;
font-weight: 700;
border-bottom: 2px solid var(--base-color01);
margin: 20px auto;
padding: 0 0 10px 0;
}

#STAFF h4 i{
color:  var(--base-color01);
padding: 0 10px 0 0;
font-size: 110%;
}

#STAFF .link {
display: flex;
justify-content: flex-end;
width: 100%;
margin: 20px 0 0 0;
}

#STAFF .link a {
    padding: 3px 10px 3px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--base-color03);
    background-color: var(--base-color01);
    border-radius: 50px;
    text-align: center;
    width:150px;
	position: relative;
}

#STAFF .link :after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: "\f178";
  position: absolute;
  top:16%;
  right:15px;
}

#STAFF .link a:hover{
color: #f9fa8f;
transition: .3s;
}

@media screen and (max-width: 768px) {

#STAFF {
background: url(../img/staff_bg.png) top right no-repeat var(--base-color01);
background-size:cover;
padding: 50px 0 30px 0;

}


#STAFF .bg-glow_03 {
  background-size:200%; /* auto→coverなどにすると調整しやすい */
}


#STAFF .title{
margin: 0 auto;
text-align: center;
width: 90%;
}

#STAFF .title h3{
margin: 0 auto 20px;
font-size: 50px;
font-weight: 900;
color: var(--base-color01);	
width: 100%;
border-bottom:3px solid var(--base-color01);
text-align: center;
padding: 0 0 20px 0;
line-height: 1;
}

#STAFF .title span{
margin: 0 auto;
text-align: center;
font-size: 14px;
}

#STAFF .staff_box{
margin: 50px auto 30px;
}


#STAFF .staff_box_col{
width: 250px;
border:3px solid var(--base-color01);
border-radius: 14px;
background-color: var(--base-color03);
padding: 20px 20px;
margin: 0 10px;
}

#STAFF .staff_img {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 0;
  
}
#STAFF .staff_img img{
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius:50%;
  border: 10px solid var(--sub-color01);
}

#STAFF h4{
font-size: 16px;
font-weight: 700;
border-bottom: 2px solid var(--base-color01);
margin: 20px auto;
padding: 0 0 10px 0;
}

#STAFF h4 i{
color:  var(--base-color01);
padding: 0 10px 0 0;
font-size: 110%;
}

#STAFF p{
font-size: 14px;
}

#STAFF .link {
display: flex;
justify-content: flex-end;
width: 100%;
margin: 20px 0 0 0;
}

#STAFF .link a {
    padding: 3px 10px 3px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--base-color03);
    background-color: var(--base-color01);
    border-radius: 50px;
    text-align: center;
    width:100%;
	position: relative;
}

#STAFF .link :after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: "\f178";
  position: absolute;
  top:16%;
  right:15px;
}

#STAFF .link a:hover{
color: #f9fa8f;
transition: .3s;
}

}

/***************************************
--------------- ABOUT ---------------
***************************************/

#ABOUT {
background: url(../img/about_bg.png) bottom right no-repeat var(--base-color03);

padding:50px 0 0 0;
margin:0 auto 0;
position: relative;
}

#ABOUT .bg-glow_04 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* ← 横幅を指定して見えるように */
  height: 100%; /* ← 親に高さがある前提ならOK */
  background-image: url('../img/about_bg_02.png'); /* ← 修正！ */
  background-size: auto; /* auto→coverなどにすると調整しやすい */
  background-position: top left;
  background-repeat: no-repeat;
  z-index: 1; /* 他の要素と被らないように調整 */
  animation: bgFlash 2s ease-in-out infinite;
}


#ABOUT .box{
margin: 0 auto 0;
width: 1140px;
padding: 0 0 100px 0;
margin-bottom: 0; /* または適切な値に調整 */
position: relative;
z-index: 22;
}

#ABOUT h3{
margin: 0 0 35px 0;
font-size: 70px;
font-weight: 900;
color: var(--base-color01);	
width: 400px;
border-bottom:3px solid var(--base-color01);
}

#ABOUT h4{font-size: 30px;font-weight: 400;color:var(--base-color01); }
#ABOUT h5{font-size: 20px;font-weight: 400;}
#ABOUT p{
margin: 40px 0 40px 0;
text-shadow: 
        -1px -1px 0 white,  
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white; /* 輪郭（白色）を作る */
}
#ABOUT .link_a{margin: 0;text-align: left;}
#ABOUT .link_a a{margin: 0;}




@media screen and (max-width: 768px) {
#ABOUT {
margin:0 auto;
background: url() top left no-repeat var(--base-color03);
background-size:100%;
height:auto;
padding: 0 0 40px 0;
}

#ABOUT .bg-glow_04 {
display: none;
}



#ABOUT .box{
margin: 0 auto;
width: 90%;
padding:0 0 0 0;
}

#ABOUT h3{
margin: 0 0 0 0;
font-size: 50px;
font-weight: 900;
color: var(--base-color01);	
width:90%;
border-bottom:0 solid var(--base-color01);
}

#ABOUT h4{font-size:24px;font-weight: 400;color:var(--base-color01); padding: 0 0 0 0;}
#ABOUT h5{font-size: 20px;font-weight: 400;}
#ABOUT p{margin: 20px 0;}
#ABOUT .link_a{margin: 0;text-align: center;display: flex;justify-content: center;}
#ABOUT .link_a a{margin: 0;}

}

/***************************************
---------------- RECRUIT ----------------
***************************************/
#RECRUIT{
background: url(../img/recruit_bg.png) top right no-repeat var(--sub-color01);
background-size: 100%;
position: relative;
}

#RECRUIT .bg-glow_05 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* ← 横幅を指定して見えるように */
  height: 100%; /* ← 親に高さがある前提ならOK */
  background-image: url('../img/recruit_bg_02.png'); /* ← 修正！ */
  background-size:contain; /* auto→coverなどにすると調整しやすい */
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 1; /* 他の要素と被らないように調整 */
  animation: bgFlash 2s ease-in-out infinite;
}


#RECRUIT .box{
margin: 0 auto 0;
width: 1140px;
text-align: center;
padding: 0 0 0 0;
position: relative;
z-index: 22;
}

#RECRUIT h3{
margin:0 auto 20px;
font-size: 70px;
font-weight: 900;
color: var(--base-color03);	
width: 400px;
border-bottom:3px solid var(--base-color03);
padding: 50px 0 0 0;
}

#RECRUIT span{
margin: 0 auto;
text-align: center;
font-size: 16px;
color: var(--base-color03);	
}

#RECRUIT p{
margin: 50px auto 0;
text-align: center;
font-size: 16px;
color: var(--base-color03);	
}

#RECRUIT .link_b{
padding: 50px 0 0 0;
}

@media screen and (max-width: 768px) {
#RECRUIT{
background: url(../img/recruit_bg_sp.png) top right no-repeat var(--sub-color01);
background-size:100%;
}

#RECRUIT .bg-glow_05 {
  background-size:100%; /* auto→coverなどにすると調整しやすい */

}


#RECRUIT .box{
margin: 0 auto 0;
width: 90%;
text-align: center;
padding: 0;
}

#RECRUIT h3{
margin:0 auto 20px;
font-size: 50px;
font-weight: 900;
color: var(--base-color03);	
width: 90%;
border-bottom:3px solid var(--base-color03);
}

#RECRUIT span{
margin: 0 auto;
text-align: center;
font-size: 14px;
color: var(--base-color03);	
}

#RECRUIT p{
margin: 20px auto 0;
text-align: left;
font-size: 16px;
padding: 0 0 0 20px;
color: var(--base-color03);	
}

#RECRUIT .link_b{
margin: 0 auto 0;
}
}

/***************************************
-------------- STORE INFO --------------
***************************************/

table {
    width: 100%;
    margin-top: 30px;
    border: 1px solid var(--base-color01);
    border-collapse: collapse;
}
table tr:nth-of-type(even) {
    background: #eee;
}
table tr th {
    text-align: right;
    padding: 10px 15px;
    border-right: 1px solid var(--base-color01);
}
table tr td {
    padding: 10px 15px;
}