@charset "utf-8";

/*=======================================================
==========================================================
　　　　　　　　　　　　　MAIN CSS
==========================================================
========================================================*/
.top_main{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height: 100vh;
  background-image: url(../img/top_main.jpg);
  background-size: cover;
  background-position: center;
}
.top_main img{
  margin: 7% 0 0 0;
}

section.brand-catch {
  width: 85%;
  max-width: 1270px;
  margin: 0 auto;
  background-color: #fff8e8;
  border: 1.5px solid #e8c96a;
  padding: 0;
}
.brand-catch-wrap {
  display: flex;
  align-items: stretch;
  min-height: 320px;
}
.brand-catch-side {
  width: 60px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(180, 130, 30, 0.3);
}
.brand-catch-side-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.0rem;
  letter-spacing: 0.3em;
  color: rgba(130, 80, 10, 0.5);
  font-family: Georgia, serif;
}
.brand-catch-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 6rem;
  text-align: center;
}
.brand-catch-geo {
  font-size: 1.1rem;
  color: #c8960a;
  letter-spacing: 0.2em;
  margin: 0 0 1.4em;
  opacity: 0.7;
}
.brand-catch-geo:last-child {
  margin: 1.4em 0 0;
}
.brand-catch-en {
  font-size: 1.2rem;
  letter-spacing: 0.45em;
  color: #8a5c10;
  margin: 0 0 1.8em;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: normal;
  text-transform: uppercase;
}
.brand-catch-text {
  font-size: 1.6rem;
  line-height: 2.4em;
  color: #3a2210;
  margin: 0 0 1.4em;
  font-family: 'gokan', serif;
}
.brand-catch-sub {
  font-size: 1.4rem;
  line-height: 2.6em;
  color: #8a5c10;
  margin: 0;
  font-family: 'gokan', serif;
}

ul.list-waku{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9rem 8%;
}
ul.list-waku li{
  width:46%;
}
ul.list-waku li .list-waku-img{
  position:relative;
}

ul.list-waku li .list-waku-img::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image: url(../img/waku.png);
  background-size: 100% 100%;
  aspect-ratio: 6 / 4;
}

ul.list-waku li .list-waku-img img{
  display: block;
  position:relative;
  object-fit: cover;
  width: 100%;
  padding: 2%;
}
ul.list-waku li h3 {
    font-size: 2rem;
    font-weight: normal;
    text-align: center;
    margin: 1.5em 0 .8em;
}
.salon-p-box{
  padding:0 3em;
}
.price-box{
  display: flex;
  justify-content: space-between;
  margin: 3em 0 0;
  align-items: flex-end;
}
.price{
  font-size: 2rem;
  letter-spacing: normal;
  margin:0;
}
.price-right{
  font-size: 1.6rem;
  margin:0;
}
.price-right span{
  font-size:1.4rem;
  margin-left: .5em;
}

/*商品*/

.access-img-box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.access-img-wrap {
  position: relative;
  width: 48%;
}
.access-img-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/waku.png);
  background-size: 100% 100%;
}
.access-img-wrap img {
  display: block;
  width: 100%;
  padding: 2%;
  object-fit: cover;
  aspect-ratio: 6 / 4;
}

.access > h2{
  font-size: 2.6rem;
  font-weight: normal;
  text-align: center;
  letter-spacing: .1em;
  margin: 0 0 5rem;
  background-color: #FDC600;
  padding: .6em 0;
  width: 100%;
}
.access .h2-box {
  margin-bottom: 5rem;
}
.access-store-info {
  text-align: left;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.access-store-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 0.25em;
  color: #530B02;
  margin: 0;
}
.access-store-name-ja {
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  color: #530B02;
  margin: 0 0 0.7em;
}
.access-store-address {
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: #530B02;
  margin: 0;
}
.access-store-tel {
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: #530B02;
  padding: 0 0 1em;
  margin: 0;
}
.access-store-tel a {
  color: #530B02;
  text-decoration: none;
}
.access-store-tel a:hover {
  text-decoration: underline;
}
.access-ul{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 3rem 0;
  align-items: center;
}
.access-ul li:nth-child(1){
  width:60%;
}
.access-ul li:nth-child(2){
  width:36%;
}

.access-table{
  width:100%;
}
.access-table th,.access-table td{
  font-size:1.8rem;
  font-weight:normal;
  padding: 0 0 .7em;
  vertical-align: top;
}
.access-table th {
  width: 10em;
  white-space: nowrap;
  text-align: left;
}
.access-table td {
  padding-left: 1em;
}



/*=======================================================
==========================================================
  　　　　　　　　　　　　SP only
==========================================================
========================================================*/
@media screen and (max-width:768px) {
.top_main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-image: url(../img/top_main.jpg);
  z-index: -8;
  position: relative;
}
.top_main img {
    margin: 15% 0 0 0;
    width: 90%;
}
.scroll-infinity__item {
    width: calc(100vw / .9);
    min-width: auto;
    max-width: 100%;
    padding: 1em 0;
}
.brand-catch-wrap {
  min-height: 360px;
}
.brand-catch-side {
  width: 40px;
  min-width: 40px;
}
.brand-catch-side-label {
  font-size: 0.8rem;
}
.brand-catch-body {
  padding: 3.5rem 2rem;
}
.brand-catch-geo {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin: 0 0 1.6em;
  overflow: hidden;
}
.brand-catch-geo:last-child {
  margin: 1.6em 0 0;
}
.brand-catch-en {
  font-size: 1.0rem;
  letter-spacing: 0.3em;
  margin: 0 0 2em;
}
.brand-catch-text {
  font-size: 1.4rem;
  line-height: 2.6em;
  margin: 0 0 1.6em;
}
.brand-catch-sub {
  font-size: 1.3rem;
  line-height: 2.4em;
}
ul.list-waku {
  flex-direction: column;
  gap: 5rem 0;
}
ul.list-waku li {
    width: 100%;
}
.salon-p-box {
  padding: 0 2em;
}

.salon-p-box h2 {
  text-align: center;
}

/* スマホ:店舗写真2枚を1枠に重ね、自動でふわっとクロスフェード切替 */
.access-img-box {
  display: block;          /* flexの縦積みを解除 */
  position: relative;
}
.access-img-wrap {
    width: 100%;
    margin: 0;
}
.access-img-box img {
    width: 100%;
}
/* 1枚目は通常フローで枠の高さを決める。2枚目を重ねてフェードイン/アウト */
.access-img-box .access-img-wrap:nth-child(2) {
    position: absolute;
    inset: 0;
    height: 100%;
    animation: storeCrossfade 10s ease-in-out infinite;
    will-change: opacity;
}
.access-img-box .access-img-wrap:nth-child(2) img {
    height: 100%;
}
.access h2 {
  margin: 0 0 3rem;
}

.access-ul {
  flex-direction: column;
  margin: 3rem 0;
}
.access-ul li:nth-child(1) {
    width: 100%;
}
.access-ul li:nth-child(2) {
    width: 100%;
    margin: 2rem 0 0;
}
/* 店舗情報:スマホで横一列寄り・コンパクトに整える
   - 店名(EN)と読み(JA)を1行に
   - 郵便番号を番地と同じ行に(br.addr-nl-sp を非表示)
   - 営業時間テーブルは列幅を揃えて値を縦整列、サロンの値も1行に収める */
.access-store-name {
    display: inline;
    font-size: 1.55rem;
    letter-spacing: 0.18em;
}
.access-store-name-ja {
    display: inline;
    font-size: 1.3rem;
    margin: 0 0 0 0.6em;
    letter-spacing: 0.08em;
}
.access-store-info {
    margin-bottom: 1.2rem;
}
.access-store-address {
    font-size: 1.45rem;
    line-height: 1.7;
    margin-top: 0.5em;
}
.access-store-address br.addr-nl-sp {
    display: none;
}
.access-table th, .access-table td {
    font-size: 1.4rem;
    padding: 0 0 0.55em;
}
.access-table th {
    white-space: nowrap;
    width: 9.4em;
}
.access-table td {
    padding-left: 0.8em;
}
ul.list-waku li h3{
  margin: 1.2em 0 .8em;
  text-align: center;
}











}/*====================================================
  　　　　　　　　　　　　さらに細かく480以下
=======================================================*/
@media screen and (max-width:480px) {

}/*=======================================================
==========================================================
  　　　　　　　　　　　　Ipad only
==========================================================
========================================================*/
@media screen and (min-width:768px) and ( max-width:1190px) {









}/*=======================================================
==========================================================
==========================================================
========================================================*/


/* ===========================================================
 * スマホ:ストア店舗写真(2枚)の自動クロスフェード用キーフレーム
 * 1枚目→2枚目→1枚目…とふわっと切り替わる(10s周期・各約4.2s表示)
 * ※ アニメーション指定は max-width:768px の .access-img-wrap:nth-child(2) のみ
 * =========================================================== */
@keyframes storeCrossfade {
  0%, 42%  { opacity: 0; }   /* 1枚目を表示 */
  50%, 92% { opacity: 1; }   /* 2枚目を表示 */
  100%     { opacity: 0; }   /* 1枚目へ戻る */
}

/* 視差・動きを抑える設定の利用者には自動切替を停止(1枚目を静止表示) */
@media (prefers-reduced-motion: reduce) {
  .access-img-box .access-img-wrap:nth-child(2) {
    animation: none;
    opacity: 0;
  }
}