/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/


/*************** ADD CUSTOM CSS HERE.   ***************/

/* Header */
.header-wrapper,
.header,
#header,
.header-nav,
.header-bottom {
    border-bottom: none !important;
    box-shadow: none !important;
}

.nav-top-link {
    color: #fff !important;
    opacity: 0.8;
}

.nav-top-link:hover {
    color: #fff !important;
    opacity: 0.6;
}

.reservation-btn {
    display: inline-block;
    padding: 12px 28px !important;
    background-color: rgba(200, 200, 200, 0.7);
    color: #fff !important;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: 0.25s;
}

.reservation-btn:hover {
    background-color: rgba(200, 200, 200);
    color: #000 !important;
}

.stuck .header-main .nav > li > a {
    line-height: normal !important;
    height: auto !important;
    padding: 12px 28px !important;
}

/* Footer */
.footer-right-icon {
    text-align: right;
}

/* Top page */
.slow-fade-slider .banner {
  opacity: 0 !important;
  transition: opacity 3s ease-in-out !important; 
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
}

.slow-fade-slider .banner.is-selected {
  opacity: 1 !important;
  position: relative !important;
  z-index: 2;
}

.slow-fade-slider .ux-slider-slide.is-active {
  opacity: 1;
}

.the-experience-text {
  max-width: 600px;
}

/* The World You Step Into */
.what_your_experience {
  font-size: 3.4rem !important;
  line-height: 1.2 !important;
  font-family: "Playfair Display", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* UXスライダー付きセクションの下をフェードでぼかす */
.fade-bottom {
  position: relative;
  overflow: hidden;
  z-index: 1; /* スライダーより上に出すベース */
}

/* フェードぼかしレイヤー */
.fade-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 220px; /* ← フェードの高さ調整 */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 70%);
  pointer-events: none;
  z-index: 10; /* ← UXスライダーの上に確実に配置 */
}

/* 念のため：スライダー本体はz-index低めにリセット */
.fade-bottom .ux-slider,
.fade-bottom .ux-slider .ux-slider-slide {
  position: relative;
  z-index: 0 !important;
}

.two-images {
  margin: 0 !important;
  padding: 0 !important;
  column-gap: 0 !important;
}

.two-images .col {
  padding: 0 !important;
  margin: 0 !important;
}

/* Gallary Section */

.infinite-gallery {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 500px;   /* ← PCの画像サイズに合わせて固定 */
}

.gallery-track {
  display: inline-flex;
  animation: scrollGallery 80s linear infinite;
}

.gallery-track img {
  width: 500px;
  height: 500px;
  object-fit: cover;
}

/* ギャラリー中央に縦書き文字を配置 */
/* ギャラリー中央に縦書き文字を完全固定 */
.text-center-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  text-align: center;
}

/* 縦書きテキスト本体 */
.text-center-overlay h3 {
  color: #ffffff;
  font-size: 18px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  position: relative;
  font-weight: 400;
  letter-spacing: 0.25em;
}

/* beforeで線を追加（縦線） */
.text-center-overlay h3::before {
  content: "";
  position: absolute;
  left: -10px;                   /* テキストとの距離（右側にしたいなら right: -10px;） */
  top: 0;
  bottom: 0;
  width: 1.5px;                  /* 線の太さ */
  background-color: currentColor; /* テキストと同じ色で線を描く */
}

/* News Section */
.entry-title::after {
  content: "";
  display: block !important;
  width: 1px;            /* 線の太さ */
  height: 40px;          /* 線の長さ */
  background-color: #000; /* 色 */
  margin: 10px auto;     /* 上下10px・中央寄せ */
}

.news_btn {
    font-size: 12px;
}

.tea-bg {
  position: relative;
  background-image: url('https://ochakase.com/wp-content/uploads/2025/11/cha.png');
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: -13% 23%;
  padding: 80px 40px 30px 0; /* 文字が端に寄らないように */
}

.shoku-bg {
  position: relative;
  background-image: url('https://ochakase.com/wp-content/uploads/2025/11/shoku.png');
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: -13% 23%;
  padding: 80px 40px 30px 0; /* 文字が端に寄らないように */
}

.chaku-bg {
  position: relative;
  background-image: url('https://ochakase.com/wp-content/uploads/2025/11/chaku.png');
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: -13% 23%;
  padding: 80px 40px 30px 0; /* 文字が端に寄らないように */
}

.reservation_section-btn {
    display: inline-block;
    padding: 8px 28px !important;
    background-color: rgba(200, 200, 200, 0.8);
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: 0.25s;
    width: 220px;
    border-color: rgba(0, 0, 0, .0);
}

/* Hover */
.reservation_section-btn:hover {
    background-color: rgba(200, 200, 200, 0.6);
    color: #000;
}

/* FAQ */
.accordion-title {
    padding: .8em 2.3em !important;
    font-weight: 200;
}

.accordion-title.active {
    font-weight: 200;
}

.accordion-inner {
    font-weight: 200;
}

.FAQ_notice {
    font-weight: 100;
}

/* スクロールアニメーション */
@keyframes scrollGallery {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 画像5枚 × 500px = 2500px分スクロール */
    transform: translateX(-2500px);
  }
}

/* new section */
.blog-post-inner {      /* 記事を表すことが多いHTMLタグ */
    border-bottom: 1px solid #cccccc; /* 1pxの実線、色は薄いグレー */
    padding-bottom: 20px; /* 線と次の記事の間に少しスペースを開ける */
    margin-bottom: 20px;  /* 線と次の記事の間に少しスペースを開ける */
}

.blog-wrapper {
    padding-top: 200px; 
}


@media (min-width: 768px) and (max-width: 1024px) {
.tea-bg {
  padding: 50px 40px 10px 0;
}

.shoku-bg {
  padding: 50px 40px 10px 0;
}

.chaku-bg {
  padding: 50px 40px 10px 0;
}
}

/* @media (max-width: 1024px) {
  .experience_container p{
    line-height: 1.5 !important;
}
} */

@media (max-width: 768px) {

    /* Header Reservation Button */
    .reservation-btn {
        padding: 12px 32px !important;
    }

    .tag-line p {
    font-size: 14px;
    }

    .tea-bg {
        background-position: -30% 37%;
    }

    .shoku-bg {
        background-position: -30% 37%;
    }

    .chaku-bg {
        background-position: -30% 37%;
    }
	
	.infinite-gallery {
    	height: 300px;  /* ← スマホでは300pxに合わせる */
  	}
	
	.text-center-overlay {
  		display: flex;
  		justify-content: center;
  		align-items: center;
		height: 300px;
 		writing-mode: vertical-rl;
 		position: absolute;
	}
	
	.text-center-overlay h3 {
		font-size: 16px;
		letter-spacing: 0.18em;
    	position: relative;
 		top: 50%;
  	}
	
	.gallery-track {
    animation: scrollGalleryMobile 60s linear infinite;
    }

  	.gallery-track img {
    	width: 300px;
    	height: 300px;
    	object-fit: cover;
    	flex-shrink: 0;
  	}

  	@keyframes scrollGalleryMobile {
    	0% {
      	transform: translateX(0);
    	}
    	100% {
      	transform: translateX(-1500px); /* ← 300px × 5枚分 */
    	}
  	}

    .text-center-overlay h3 {
        font-size: 16px;
    }

    .blog-wrapper {
    padding-top: 100px; 
}
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}