/*!
Template:rishun
Theme Name: rishun_child
Theme URI: https://rishuntrading.co.jp
Description: Rishun is a very simple & easy to customize theme which is based on the Bootstrap. It is also very friendly with custom post types and custom taxonomies. When you add a new one, the breadcrumbs will be adjusted and posts will look beautifully without editing or adding a template files.
Author: RishunTrading Limited.
Author URI: https://rishuntrading.co.jp
Version: 1.0.0
Requires at least: 1.0
Tested up to: 1.0.0
Requires PHP: 5.6.0
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Rishun WordPress theme, Copyright (C) 2022 RishunTrading Limited.
Rishun WordPress theme is licensed under the GPL.
Update Author:RishunTrading Limited
Update Author URI:https://rishuntrading.co.jp/
Version:1.0.0
*/
@charset "utf-8";

/************************************************************/
:root {
  --color-bg-white: #FFFFFF;
  --color-bg-light: #F9F9F9;
  --color-bg-dark: #111111;
  --color-primary: #7A191A;
  --color-text-main: #333333;
  --color-text-muted: #777777;
  --color-text-light: #CCCCCC;
  --color-border: #E5E5E5;
  --border-radius-btn: 0;
  --border-radius-card: 0;
  --ptnB-sp-header-height: 70px;
  --font-family-heading: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
  --font-family-body: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  --transition-hover: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*==========================================================*/
/* defalt define											*/
/*==========================================================*/
body,
p {
  font-size: 16px;
  font-family: var(--font-family-body);
  color: var(--color-text-main);
  line-height: 1.8;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
}

body a {
  color: #333;
}

body a:hover {
  color: #333;
}

.nodata {
  color: #ff0000;
}

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

.entry-body img {
  display: unset;
  width: auto;
  height: auto;
  max-width: 100%;
}

@media print {
  #mobile-menu {
    display: none !important;
  }
}

.font-heading {
  font-family: var(--font-family-heading);
  font-weight: normal;
  letter-spacing: 0.08em;
}

.btn {
  border-radius: var(--border-radius-btn);
  padding: 15px 30px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  transition: var(--transition-hover);
}

.btn-custom-primary {
  background-color: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
}

.btn-custom-primary:hover {
  background-color: #5c1112;
  border-color: #5c1112;
  color: #fff;
}

.btn-custom-ghost {
  background-color: transparent;
  color: var(--color-text-main);
  border: 1px solid var(--color-text-main);
}

.btn-custom-ghost:hover {
  background-color: var(--color-text-main);
  color: #fff;
}

.section-title {
  font-size: 28px;
  color: var(--color-text-main);
  position: relative;
  display: inline-block;
}

.text-primary {
  color: var(--color-primary) !important;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 32px;
  }
}

/* アニメーション */
/* オープニングアニメーション */
.opening-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #111;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.opening-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.opening-logo {
  font-size: 32px;
  color: #fff;
  letter-spacing: 0.2em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

@media (min-width: 768px) {
  .opening-logo {
    font-size: 48px;
  }
}

.opening-logo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1), transform 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.is-active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1), transform 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left.is-active {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1), transform 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right.is-active {
  opacity: 1;
  transform: translateX(0);
}

.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

/*====================
 site-header
====================*/
.site-header-logo,
.site-header-menu li a,
.head-tel {
  font-family: var(--font-family-heading) !important;
}
.site-header-menu li button{
  font-family: var(--font-family-heading) !important;
}
.site-mobile-menu>li.menu-item-has-children>button.menu-trigger{
  font-family: var(--font-family-heading) !important;
}
.site-header-inner {
  justify-content: flex-start;
}
html.js .site-header-container {
  opacity: 0;
  transform: translateY(-100%);
  will-change: transform, opacity;
  animation: rishunHeaderDrop 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

@keyframes rishunHeaderDrop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .site-header-container {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }
}

.scrolled .site-header-wrap {
  height: var(--ptnB-sp-header-height);
}

.head-telWrap {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.head-tel {
  font-size: 24px;
  line-height: 1.3;
  color: var(--menu-gradient2);
  text-decoration: none;
  font-weight: bold;
}

.head-tel-time {
  font-size: 12px;
  color: var(--menu-gradient2);
  font-weight: 500;
}

.site-mobile-nav>div {
  background: transparent;
}

.mobile-navi-btn.right {
  background: transparent;
  top: 10px;
}

.mobile-navi-btn span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--sp-menu-font-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out;
}

.mobile-navi-btn span:nth-child(1) {
  top: 16px;
}

.mobile-navi-btn span:nth-child(2) {
  top: 24px;
}

.mobile-navi-btn span:nth-child(3) {
  top: 32px;
}

.mobile-navi-btn.mobile-navi-open {
  background: var(--burger-bkcolor);
}

.mobile-navi-btn.mobile-navi-open span:nth-child(1) {
  top: 24px;
  transform: translateX(-50%) rotate(45deg);
}

.mobile-navi-btn.mobile-navi-open span:nth-child(2) {
  opacity: 0;
}

.mobile-navi-btn.mobile-navi-open span:nth-child(3) {
  top: 24px;
  transform: translateX(-50%) rotate(-45deg);
}

.site-mobile-nav {
  max-height: 80vh;
  overflow-y: scroll;
  padding: 40px 30px;
}

.site-mobile-menu>li a:hover {
  color: var(--color-primary);
}

.mobile-tel-wrap {
  margin-top: 30px;
  text-align: center;
}

.mobile-telbtn-custom {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--sp-menu-font-color);
  font-size: 22px;
  padding: 12px 24px;
  text-decoration: none;
  font-family: var(--font-family-heading);
}

a.mobile-telbtn-custom:hover {
  color: var(--color-primary);
}

.mobile-tel-time {
  color: var(--sp-menu-font-color);
  font-size: 15px;
  margin-top: 8px;
}

.site-mobile-menu {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.site-mobile-menu>li {
  padding-bottom: 0;
  margin-bottom: 0;
}

.site-mobile-menu>li a {
  text-decoration: none;
  font-size: 16px;
  font-family: var(--font-family-heading);
}

.site-header-menu {
  gap: 25px;
  justify-content: flex-end;
}
@media(max-width:991px) {

  .site-header,
  .site-header-inner {
    height: var(--ptnB-sp-header-height);
  }

  .site-header .contact-btn {
    display: none;
  }
}

@media(min-width:992px) {
  .site-header-wrap {
    z-index: 9999;
  }
  .scrolled .site-header-wrap {
    height: var(--pc-header-height);
  }

  .site-header-menu>li>a {
    font-size: 16px;
  }
  .site-header-menu>li>.menu-trigger {
    font-size: 16px;
  }

  .site-header-menu>li>a:hover {
    color: var(--color-primary);
  }
  .site-header-menu>li>.menu-trigger:hover {
    color: var(--color-primary);
  }
  .site-header-menu ul.sub-menu>li>a {
    font-weight: 600;
  }

  .site-header-menu ul.sub-menu>li a:hover {
    background: var(--color-primary);
  }
}

/*==========================================================*/
/* 下層ページ共通ヘッダー＆パンくずリスト (Theme Override)
/*==========================================================*/
/* ページヘッダータイトル */
.page-header-ttl {
  text-shadow: 0 2px 10px var(--pghead-font-frame-color);
  letter-spacing: 0.1em;
}

html.js .page-header-ttl {
  opacity: 0;
  filter: blur(10px);
  will-change: opacity, filter;
  animation: rishunPageHeaderTitleBlur 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@keyframes rishunPageHeaderTitleBlur {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .page-header-ttl {
    opacity: 1;
    filter: none;
    animation: none;
    will-change: auto;
  }
}

.page-header-ttl .jp {
  font-family: var(--font-family-heading);
  font-weight: normal;
  margin-bottom: 5px;
}

.page-header-ttl .en {
  font-family: var(--font-family-heading);
  letter-spacing: 0.15em;
  opacity: 0.9;
}

/* パンくずリスト */
.section.breadSection {
  background-color: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
}

.breadSection .breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 13px;
}

.breadSection .breadcrumb a:hover {
  color: var(--color-primary);
  opacity: 1;
}

.breadSection .breadcrumb span {
  color: var(--color-text-main);
  font-size: 13px;
  font-weight: 500;
}

.ol_rishun-breadcrumb>li:nth-of-type(n+2):after {
  color: var(--color-text-light);
  font-size: 11px;
}

/*=========================
 .site-footer
=========================*/
.footer-shop-name {
  font-size: 28px;
}

.footer-shop-name a {
  color: var(--footer-font-color);
}

.footer-shop-name a:hover {
  color: var(--footer-font-color);
  opacity: 0.8;
}

.site-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer-menu>li {
  width: 100%;
  padding: 5px;
}

.site-footer-menu>li>a {
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  color: var(--footer-font-menucolor);
}

.site-footer-menu>li a:not([href]),
.site-footer-menu>li a:not([href]):hover {
  color: var(--footer-font-menucolor);
  opacity: 0.8;
  pointer-events:none;
}

.site-footer-menu .sub-menu {
  list-style: none;
  padding-left: 0;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer-menu .sub-menu a {
  font-size: 15px;
  color: var(--footer-font-menucolor);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  padding:10px;
  position:relative;
}
.site-footer-menu .sub-menu a::before{
  content: '';
  width: 100%;
  height: 1px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
  background: var(--footer-font-menucolor);
}
.site-footer-menu .sub-menu a:hover {
  opacity: 0.8;
}
.site-footer-menu .sub-menu a:hover::before{
  transform:scale(1);
}
.copyright {
  font-family: var(--font-family-heading);
}

@media(min-width: 576px) {
  .site-footer-menu {
    gap: 15px 40px;
    justify-content:flex-start;
  }

  .site-footer-menu>li {
    width: calc(50% - 20px);
  }

  .site-footer-menu>li.menu-item-has-children {
    width: 100% !important;
  }

  .site-footer-menu .sub-menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 30px;
  }
}

@media(min-width: 992px) {
  .site-footer-menu>li {
    width: fit-content;
  }

  .site-footer-menu .sub-menu {
    gap: 8px 40px;
  }
}

/*====================
 Top page
=====================*/

.top-fv-sec {
  position: relative;
  height: calc(100vh - var(--ptnB-sp-header-height));
  max-height: 600px;
  background-color: #111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-fv-img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.top-fv-slider {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.top-fv-slider .slick-list,
.top-fv-slider .slick-track,
.top-fv-slider .slick-slide,
.top-fv-slider .slick-slide>div {
  height: 100%;
}

.top-fv-slide-item {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.top-fv-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 10s linear;
  /* ゆっくり拡大するアニメーション */
}

.top-fv-slide-item.slick-active img {
  transform: scale(1.1);
}

.top-fv-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
}

.top-fv-content-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  padding: 40px 20px 60px;
}

.top-fv-bg-text {
  display: none;
}

.top-fv-catchphrase {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.top-fv-subphrase {
  font-weight: 500;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  margin-bottom: 0;
}

/* Concept (SP/Tablet) */
.top-concept-sec {
  /*background-color: #E2DFD8;*/
  background-color: #E0DCC8;
  padding-top: 80px;
  padding-bottom: 80px;
}

.top-concept-title-wrap {
  margin-bottom: 40px;
}

.top-concept-label {
  display: block;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: bold;
  margin-bottom: 15px;
}

.top-concept-title {
  font-size: 24px;
  line-height: 1.6;
  color: #222;
  font-feature-settings: "palt";
  /* 全角カギカッコの余白を詰める */
}

.top-concept-text {
  line-height: 2.2;
  color: #222;
}

.top-concept-owner-img {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #f5f5f5;
}

.top-concept-owner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .top-concept-owner-img {
    max-width: 280px;
  }
}

@media(min-width:600px) {
  .top-fv-sec .btn-custom-primary {
    max-width: 350px;
  }
}

@media(min-width:768px) and (max-width:991px) {
  .top-fv-content-wrap {
    max-width: 720px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 992px) {

  /* FV PC */
  .top-fv-sec {
    flex-direction: row;
    height: calc(100vh - var(--ptnB-pc-header-height));
    max-height: 900px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
  }

  .top-fv-img-wrap {
    position: relative;
    width: 45%;
    height: fit-content;
    min-height: 600px;
    order: 2;
    /* Right side */
    background-color: #111;
  }

  .top-fv-slider {
    width: 100%;
    height: 100%;
  }

  .top-fv-slide-item img {
    object-fit: cover;
    /* Changed to cover for sliding */
    object-position: center;
  }

  .top-fv-overlay {
    display: none;
    /* Remove overlay on PC */
  }

  .top-fv-content-wrap {
    position: relative;
    width: 55%;
    height: 100%;
    order: 1;
    /* Left side */
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
  }

  .top-fv-bg-text {
    display: block;
    position: absolute;
    top: 50%;
    right: -120px;
    transform: translateY(-50%) rotate(90deg);
    font-size: 250px;
    font-family: var(--font-family-heading);
    color: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    letter-spacing: 0.1em;
  }

  .top-fv-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
  }

  .top-fv-catchphrase {
    font-size: 34px;
    text-shadow: none;
    margin-bottom: 30px;
    line-height: 1.5;
  }

  .top-fv-subphrase {
    text-shadow: none;
  }

  /* Concept PC */
  .top-concept-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .top-concept-inner {
    display: flex;
    align-items: flex-start;
  }

  .top-concept-title-wrap {
    width: 45%;
    padding-right: 50px;
    margin-bottom: 0;
  }

  .top-concept-text-wrap {
    width: 55%;
    padding-left: 50px;
    border-left: 1px solid #c9c5bc;
  }

  .top-concept-title {
    font-size: 30px;
    line-height: 2;
  }
}

@media(min-width:1200px) {
  .top-fv-catchphrase {
    font-size: 40px;
  }
}

/* 3つのルール */
.top-rules-sec {
  background-color: #222222;
  padding-top: 80px;
  padding-bottom: 80px;
}

.top-rules-sec .section-title {
  color: #ffffff;
  margin-bottom: 60px;
}

.rule-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #111;
}

.rule-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rule-title {
  font-size: 20px;
  color: #ffffff;
  border-bottom: 3px solid var(--color-primary);
  padding-bottom: 15px;
  line-height: 1.5;
}

.rule-num {
  color: rgba(255, 255, 255, 0.6);
  margin-right: 8px;
}

.rule-text {
  color: #dddddd;
  line-height: 2;
}

@media (min-width: 768px) {
  .top-rules-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .rule-title {
    font-size: 24px;
  }
}

/* サービス */
.top-services-sec {
  background-color: var(--color-bg-white);
  padding-top: 80px;
  padding-bottom: 80px;
}

.service-box {
  background-color: #fff;
  border: 1px solid var(--color-border);
}

@media (min-width: 992px) {
  .service-box-left {
    border-right: none;
  }
}

.service-img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.service-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-label {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: bold;
  display: block;
}

.service-title {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
}

.service-text {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}

.top-services-sec .col-custom {
  flex: 0 0 auto;
  width: 100%;
}

.btn-service-detail {
  padding: 10px;
  font-size: 15px;
  border-color: var(--color-primary);
  color: var(--color-bg-white);
  background: var(--color-primary);
}

.btn-service-detail:hover {
  background-color: #5c1112;
  border-color: #5c1112;
  color: var(--color-bg-white);
}

@media (min-width: 768px) {
  .service-img-wrap {
    width: 50%;
    flex-shrink: 0;
    aspect-ratio: 3/2;
  }

  .service-text-wrap {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .top-services-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

@media (min-width: 1200px) {
  .top-services-sec .col-custom {
    width: 50%;
  }

  .mb-custom-0 {
    margin-bottom: 0 !important;
  }

  .top-services-sec .contains-frm {
    max-width: 100%;
  }

  .service-img-wrap {
    aspect-ratio: unset;
  }
}

@media(min-width:1400px) {
  .top-services-sec .contains-frm {
    max-width: 100%;
  }
}

/* アクセス・お知らせ */
.top-access-news-sec {
  background-color: #E0DCC8;
}

.access-news-title {
  font-size: 28px;
  color: #222;
}

.access-shop-name {
  font-size: 18px;
  color: #222;
}

.access-address {
  line-height: 1.8;
  color: #222;
}

.btn-access-news {
  font-size: 15px;
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  text-align: center;
}

.btn-access-news:hover {
  background-color: var(--color-primary);
  color: var(--color-bg-white);
}

.btn-access-news i {
  font-size: 10px;
}

.access-img-wrap {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.access-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-list-link {
  color: #444;
  transition: opacity 0.3s;
}

.news-list-link:hover {
  opacity: 0.6;
  color: #444;
}

/*==========================================================*/
/* 固定ページ：コンセプト (.cpt-xxx-sec)
/*==========================================================*/
/* ① 導入セクション */
.cpt-intro-sec {
  background-color: #E0DCC8;
  padding-top: 80px;
  padding-bottom: 80px;
}

.cpt-intro-title {
  font-size: 23px;
  line-height: 1.6;
  color: var(--color-primary);
}

.cpt-intro-text {
  color: #222;
  line-height: 2;
}

@media (min-width: 768px) {
  .cpt-intro-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .cpt-intro-title {
    font-size: 30px;
    font-weight: 500;
    text-align: center;
  }

  .cpt-intro-text {
    text-align: center;
  }
}

/* 共通: 画像スタイル */
.cpt-img-wrap {
  width: 100%;
  overflow: hidden;
  background-color: #111;
}

.cpt-img-wrap img {
  width: 100%;
  height: auto;
}

/* 共通: 見出しスタイル */
.cpt-sec-title {
  font-size: 22px;
  line-height: 1.5;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 15px;
}

@media (min-width: 768px) {
  .cpt-sec-title {
    font-size: 26px;
  }
}

/* ② 常連様との「お約束」を絶対に守る会員制 */
.cpt-rule-sec {
  background-color: #222222;
  padding-top: 80px;
  padding-bottom: 80px;
}

.cpt-rule-sec .cpt-sec-title {
  color: #ffffff;
  border-bottom: 3px solid var(--color-primary);
}

.cpt-rule-sec p {
  color: #ffffff;
  line-height: 2;
}

.cpt-rule-overlap-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.cpt-rule-img-box {
  width: 92%;
  margin-right: auto;
}

.cpt-rule-text-box {
  position: relative;
  z-index: 2;
  background-color: #111111;
  padding: 40px 30px;
  width: 92%;
  margin-top: -80px;
  margin-left: auto;
}

@media (min-width: 768px) {
  .cpt-rule-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .cpt-rule-img-box {
    width: 55%;
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  .cpt-rule-overlap-container {
    display: flex;
    align-items: flex-start;
  }

  .cpt-rule-text-box {
    padding: 80px 60px;
    width: 55%;
    margin-top: 60px;
    margin-left: -10%;
  }
}

/* ③ 個人店は、私の人生そのものです */
.cpt-passion-sec {
  background-color: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 80px;
}

.cpt-passion-sec .cpt-sec-title {
  color: #222;
}

.cpt-passion-sec p {
  color: #333;
  line-height: 2;
}

.cpt-passion-overlap-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.cpt-passion-img-box {
  width: 92%;
  margin-left: auto;
}

.cpt-passion-text-box {
  position: relative;
  z-index: 2;
  background-color: #E0DCC8;
  padding: 40px 30px;
  width: 92%;
  margin-top: -80px;
  margin-right: auto;
}

@media (min-width: 768px) {
  .cpt-passion-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .cpt-passion-img-box {
    width: 55%;
    margin-left: 0;
  }
}

@media (min-width: 992px) {
  .cpt-passion-overlap-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
  }

  .cpt-passion-text-box {
    padding: 80px 60px;
    width: 70%;
    margin-top: 60px;
    margin-right: -10%;
  }
}

/* ④ お客様との対話（インタビュー） */
.cpt-voice-sec {
  background-color: #E0DCC8;
  padding-top: 80px;
  padding-bottom: 80px;
}

.cpt-voice-main-title {
  font-size: 26px;
  color: #222;
}

.cpt-voice-card {
  background-color: #fff;
  border: none;
  padding: 40px 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  /* ソリッドな影で後ろにずらしたカードのようなレイヤー感を演出 */
  box-shadow: 15px 15px 0 var(--color-primary);
  position: relative;
}

.cpt-voice-title {
  font-size: 20px;
  color: var(--color-primary);
  line-height: 1.5;
}

.cpt-voice-card p {
  color: #444;
  line-height: 2;
}

@media (min-width: 768px) {
  .cpt-voice-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .cpt-voice-main-title {
    font-size: 32px;
  }

  .cpt-voice-card {
    padding: 50px 60px;
  }

  .cpt-voice-title {
    font-size: 22px;
  }

  /* 左右にずらしてブロークングリッドを表現 */
  .cpt-voice-card:nth-of-type(1) {
    margin-left: 0;
    margin-right: auto;
    transform: translateX(5%);
  }

  .cpt-voice-card:nth-of-type(2) {
    margin-left: auto;
    margin-right: 0;
    transform: translateX(-5%);
  }
}

/* ⑤ お客様から寄せられた、温かいメッセージ */
.cpt-message-sec {
  background-color: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 80px;
}

.cpt-message-inner {
  max-width: 800px;
}

.cpt-message-sec .cpt-sec-title {
  color: #222;
  border-bottom: none;
  padding-bottom: 0;
}

.cpt-quote-icon {
  color: var(--color-primary);
  font-size: 22px;
}

.cpt-message-list li {
  background-color: #fcfcfc;
  padding: 25px;
  border: 1px solid #f0f0f0;
  border-left: 4px solid var(--color-primary);
  box-shadow: 10px 10px 0 #E0DCC8;
  max-width: 95%;
  margin-bottom: 40px !important;
  position: relative;
}

.cpt-message-list p {
  color: #333;
  line-height: 1.8;
  font-size: 16px;
}

.cpt-message-note {
  font-size: 14px;
  color: #777;
}

.cpt-message-conclusion {
  font-size: 18px;
  color: #222;
  line-height: 1.8;
  font-weight: 500;
}

@media (min-width: 768px) {
  .cpt-message-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .cpt-message-list li {
    padding: 30px 40px;
    max-width: 80%;
  }

  /* メッセージを左右にずらして配置 */
  .cpt-message-list li:nth-child(odd) {
    margin-right: auto;
    margin-left: 0;
  }

  .cpt-message-list li:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
    /* 偶数番目は装飾を反転させる */
    border-left: 1px solid #f0f0f0;
    border-right: 4px solid var(--color-primary);
    box-shadow: -10px 10px 0 #E0DCC8;
  }

  .cpt-message-note {
    text-align: right;
  }
}

.news-date {
  font-size: 15px;
  letter-spacing: 0.05em;
  min-width: 90px;
  color: #222;
}

.news-title {
  font-size: 16px;
  font-weight: 500;
}

.news-list-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.news-btn-wrap {
  width: 100%;
}

@media(min-width:768px) {
  .btn-access-news {
    max-width: 316px;
  }
}

/* インフォメーション */
.top-info-sec .section-title {
  color: var(--color-primary);
}

.top-info-subtitle {
  font-size: 20px;
  color: #222;
  font-family: var(--font-family-heading);
}

.top-info-sec p,
.top-info-sec li {
  color: #444;
}

.top-info-sec strong {
  font-weight: normal;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
}

.top-info-sec .tel-number {
  font-family: var(--font-family-heading);
  color: var(--color-text-main);
  letter-spacing: 0.1em;
}

.top-info-sec .notice-title {
  font-size: 18px;
  color: var(--color-text-main);
}

.top-info-sec .has-border {
  color: #222;
  border-bottom: 1px solid #222;
}

.info-content {
  max-width: 800px;
}

.contact-box-highlight {
  background-color: #E0DCC8;
  border-radius: 8px;
}

.btn-first-guide {
  max-width: 400px;
}

@media(max-width:767px) {
  .top-info-sec .section-title {
    font-size: 24px;
  }
}

/*==========================================================*/
/* 固定ページ：メニュー・料金 (.mnu-xxx-sec)
/*==========================================================*/
/* 共通: 見出しスタイル */
.mnu-sec-title {
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .mnu-sec-title {
    font-size: 28px;
  }
}

/* 共通: 画像スタイル */
.mnu-img-wrap {
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.mnu-img-wrap img {
  width: 100%;
  height: auto;
}

/* ② コンセプトセクション */
.mnu-concept-sec {
  background-color: #222222;
  padding-top: 80px;
  padding-bottom: 80px;
}

.mnu-concept-sec .mnu-sec-title {
  color: #fff;
  border-bottom: none;
}

.mnu-concept-sec p {
  color: #fff;
  line-height: 2;
}

@media (min-width: 768px) {
  .mnu-concept-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* ③ メインメニュー（控えめなオーバーラップ） */
.mnu-main-sec {
  background-color: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 80px;
}

.mnu-overlap-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.mnu-overlap-img {
  width: 92%;
  margin-right: auto;
}

.mnu-overlap-text {
  position: relative;
  z-index: 2;
  background-color: #FFFFFF;
  padding: 40px 30px;
  width: 92%;
  margin-top: -60px;
  /* 控えめなはみ出し */
  margin-left: auto;
  border-top: 3px solid var(--color-primary);
  /* 上部のアクセント */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  /* さりげない影 */
}

/* ブロークングリッド：背景にベージュの四角形を大きくずらして配置 */
.mnu-overlap-container::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 20px;
  width: 90%;
  height: calc(100% - 20px);
  background-color: #E0DCC8;
  z-index: 0;
}

.mnu-overlap-img,
.mnu-overlap-text {
  position: relative;
  z-index: 2;
  /* ::before より前面に配置 */
}

/* 右側配置のコンテナ（スマホ時は画像が先、テキストが後） */
.mnu-overlap-container.reverse .mnu-overlap-img {
  margin-left: auto;
  margin-right: 0;
}

.mnu-overlap-container.reverse .mnu-overlap-text {
  margin-right: auto;
  margin-left: 0;
}

.mnu-overlap-container.reverse::before {
  left: auto;
  right: 20px;
}

.mnu-item-title {
  font-size: 22px;
  color: #222;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 15px;
}

.mnu-price-box {
  border-left: 3px solid #E0DCC8;
  padding-left: 15px;
}

.small,
small {
  font-size: 15px !important;
  /* Bootstrapの.smallを上書き */
}

.mnu-price-normal .small,
.mnu-price-member .small {
  color: #666;
  display: block;
  font-weight: 500;
}

.mnu-price-normal .price {
  font-size: 22px;
  color: #444;
}

.mnu-price-member .price {
  font-size: 26px;
  color: var(--color-primary) !important;
}

.mnu-overlap-text p {
  color: #444;
  line-height: 2;
}

@media (min-width: 768px) {
  .mnu-main-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .mnu-overlap-container {
    display: flex;
    align-items: flex-start;
    /* 上揃えを基準 */
  }

  /* PC時は背景のベージュ図形をさらに大胆に */
  .mnu-overlap-container::before {
    top: -20px;
    left: -20px;
    width: 60%;
    height: calc(100% + 40px);
  }

  .mnu-overlap-container.reverse::before {
    left: auto;
    right: -20px;
  }

  .mnu-overlap-img {
    width: 55%;
    margin-right: 0;
  }

  .mnu-overlap-text {
    width: 60%;
    padding: 50px 40px;
    margin-top: 40px;
    /* 上端から少し下にずらす */
    margin-left: -10%;
    /* 控えめなオーバーラップ */
  }

  .mnu-overlap-container.reverse {
    flex-direction: row-reverse;
  }

  .mnu-overlap-container.reverse .mnu-overlap-img {
    margin-left: 0;
  }

  .mnu-overlap-container.reverse .mnu-overlap-text {
    margin-right: -10%;
    margin-left: 0;
  }
}

@media (min-width: 992px) {
  .mnu-item-title {
    font-size: 24px;
  }

  .mnu-overlap-text {
    padding: 50px 60px;
  }
}

/* ④ その他のメニュー ＆ お支払いについて */
.mnu-other-sec {
  background-color: #222222;
  padding-top: 80px;
  padding-bottom: 80px;
}

.mnu-other-sec .mnu-sec-title {
  color: #fff;
}

.mnu-other-name {
  font-size: 16px;
  color: #fff;
}

.mnu-other-price {
  font-size: 20px;
  color: #fff;
}

.mnu-other-list li {
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.mnu-note-box {
  background-color: #111111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 800px;
}

.mnu-note-box h4 {
  color: #fff;
}

.mnu-note-box h4 i {
  color: var(--color-primary) !important;
}

.mnu-note-box p {
  color: #ddd;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .mnu-other-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .mnu-other-name {
    font-size: 18px;
  }

  .mnu-other-price {
    font-size: 22px;
  }
}

/*==========================================================*/
/* 固定ページ：ショートヘアへのこだわり (.srt-xxx-sec)
/*==========================================================*/

/* 共通スタイル */
.srt-sec-title {
  font-size: 22px;
  line-height: 1.5;
  color: #222;
}

.srt-point-num {
  font-size: 18px;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--color-primary);
}

.srt-img-wrap {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.srt-img-wrap img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.srt-intro-sec p,
.srt-01-sec p,
.srt-02-sec p,
.srt-03-sec p {
  color: #333;
  line-height: 2;
}

@media (min-width: 768px) {
  .srt-sec-title {
    font-size: 28px;
  }
}

/* ① 導入セクション（スプリット＆オーバーラップ） */
.srt-intro-sec {
  padding-top: 60px;
  padding-bottom: 80px;
}

.srt-intro-img-wrap {
  width: 100%;
  text-align: center;
}

.srt-intro-img-wrap img {
  width: 100%;
  height: auto;
  max-width: 500px;
  object-fit: contain;
}

.srt-intro-text-inner {
  background-color: #F9F9F9;
  border-left: 3px solid var(--color-primary);
}

@media (min-width: 992px) {
  .srt-intro-sec {
    padding-top: 100px;
    padding-bottom: 120px;
  }

  .srt-intro-text-inner {
    margin-left: -80px;
    background-color: #fff;
    padding: 60px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--color-primary);
    border-left: none;
  }
}

/* ② こだわり01 */
.srt-01-sec {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 992px) {
  .srt-01-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* ③ こだわり02（オーバーラップ ＋ バイカラー背景） */
.srt-02-sec {
  padding-top: 80px;
  padding-bottom: 120px;
  position: relative;
}

/* 左側からはみ出すベージュの背景装飾（ブロークングリッド） */
.srt-02-bg {
  position: absolute;
  top: 30%;
  left: 0;
  width: 85%;
  height: 80%;
  background-color: #E0DCC8;
  z-index: 0;
}

/* オーバーラップコンテナ */
.srt-overlap-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.srt-overlap-img,
.srt-overlap-text {
  position: relative;
  z-index: 2;
}

.srt-overlap-img {
  width: 92%;
  margin-right: auto;
}

.srt-overlap-text {
  background-color: #FFFFFF;
  padding: 40px 30px;
  width: 92%;
  margin-top: -60px;
  margin-left: auto;
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 右側配置（reverse）用 */
.srt-overlap-container.reverse .srt-overlap-img {
  margin-left: auto;
  margin-right: 0;
}

.srt-overlap-container.reverse .srt-overlap-text {
  margin-right: auto;
  margin-left: 0;
}

@media (min-width: 992px) {
  .srt-02-sec {
    padding-top: 120px;
    padding-bottom: 160px;
  }

  .srt-02-bg {
    width: 60%;
    height: 70%;
  }

  .srt-overlap-container {
    display: flex;
    align-items: flex-start;
  }

  .srt-overlap-img {
    width: 55%;
    margin-right: 0;
  }

  .srt-overlap-text {
    width: 60%;
    padding: 60px 50px;
    margin-top: 60px;
    margin-left: -10%;
  }

  .srt-overlap-container.reverse {
    flex-direction: row-reverse;
  }

  .srt-overlap-container.reverse .srt-overlap-img {
    margin-left: 0;
  }

  .srt-overlap-container.reverse .srt-overlap-text {
    margin-right: -10%;
    margin-left: 0;
  }
}

/* ④ こだわり03 */
.srt-03-sec {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #F9F9F9;
}

@media (min-width: 992px) {
  .srt-03-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/*==========================================================*/
/* 固定ページ：ヘアカラーへのこだわり (.clr-xxx-sec)
/*==========================================================*/
/* 共通スタイル */
.clr-sec-title {
  font-size: 22px;
  line-height: 1.5;
  color: #222;
}

.clr-point-num {
  font-size: 18px;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.clr-img-wrap {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.clr-img-wrap img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.clr-01-sec p,
.clr-02-sec p,
.clr-03-sec p {
  color: #333;
  line-height: 2;
}

@media (min-width: 768px) {
  .clr-sec-title {
    font-size: 28px;
  }
}

/* ① 導入セクション（ダークトーン＆スプリット） */
.clr-intro-sec {
  background-color: #222222;
  padding-top: 60px;
  padding-bottom: 80px;
}

.clr-intro-title {
  color: #fff;
  font-size: 24px;
  line-height: 1.6;
  border-bottom: 3px solid var(--color-primary);
  padding-bottom: 25px;
}

.clr-intro-text p {
  color: #ddd;
  line-height: 2;
}

.clr-intro-img-wrap {
  width: 100%;
  text-align: center;
  overflow: hidden;

}

.clr-intro-img-wrap img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .clr-intro-sec {
    padding-top: 100px;
    padding-bottom: 120px;
  }

  .clr-intro-text {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 40px !important;
    margin-left: 20px;
  }
}

@media(min-width:768px) {
  .clr-intro-title {
    font-size: 28px;
  }
}

/* ② こだわり01 (White) & ④ こだわり03 (White) */
.clr-01-sec,
.clr-03-sec {
  background-color: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 992px) {

  .clr-01-sec,
  .clr-03-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* オーバーラップコンテナ */
.clr-overlap-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.clr-overlap-img,
.clr-overlap-text {
  position: relative;
  z-index: 2;
}

.clr-overlap-img {
  width: 92%;
  margin-right: auto;
}

.clr-overlap-text {
  background-color: #FFFFFF;
  padding: 40px 30px;
  width: 92%;
  margin-top: -60px;
  margin-left: auto;
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* ブロークングリッド装飾（背面） */
.clr-overlap-container::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 20px;
  width: 90%;
  height: calc(100% - 20px);
  background-color: #E0DCC8;
  z-index: 0;
}

/* 右側配置（reverse）用 */
.clr-overlap-container.reverse .clr-overlap-img {
  margin-left: auto;
  margin-right: 0;
}

.clr-overlap-container.reverse .clr-overlap-text {
  margin-right: auto;
  margin-left: 0;
}

.clr-overlap-container.reverse::before {
  left: auto;
  right: 20px;
}

@media (min-width: 992px) {
  .clr-overlap-container {
    display: flex;
    align-items: flex-start;
  }

  .clr-overlap-img {
    width: 55%;
    margin-right: 0;
  }

  .clr-overlap-text {
    width: 60%;
    padding: 60px 50px;
    margin-top: 60px;
    margin-left: -10%;
  }

  .clr-overlap-container::before {
    top: -20px;
    left: -20px;
    width: 60%;
    height: calc(100% + 40px);
  }

  .clr-overlap-container.reverse {
    flex-direction: row-reverse;
  }

  .clr-overlap-container.reverse .clr-overlap-img {
    margin-left: 0;
  }

  .clr-overlap-container.reverse .clr-overlap-text {
    margin-right: -10%;
    margin-left: 0;
  }

  .clr-overlap-container.reverse::before {
    left: auto;
    right: -20px;
  }
}

/* ③ こだわり02 (Beige) */
.clr-02-sec {
  background-color: #E0DCC8;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 992px) {
  .clr-02-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/*==========================================================*/
/* 固定ページ：会員制度・ご利用ルール (.rul-xxx-sec)
/*==========================================================*/
/* 共通スタイル */
.rul-sec-title {
  font-size: 24px;
  line-height: 1.5;
  color: #222;
}

.rul-point-num {
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.rul-img-wrap {
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.rul-img-wrap img {
  width: 100%;
  height: auto;
}

.rul-01-sec p,
.rul-02-sec p,
.rul-03-sec p,
.rul-04-sec p {
  color: #333;
  line-height: 2;
}

.rul-04-sec .rul-point-num {
  color: var(--color-bg-light) !important;
}

@media(max-width:767px) {

  .rul-02-sec .rul-sec-title,
  .rul-04-sec .rul-sec-title {
    font-size: 22px;
  }
}

@media (min-width: 768px) {
  .rul-sec-title {
    font-size: 28px;
  }
}

/* ① 導入セクション */
.rul-intro-sec {
  background-color: #E0DCC8;
  /* Beige */
  padding-top: 80px;
  padding-bottom: 80px;
}

.rul-intro-box {
  max-width: 800px;
  margin: 0 auto;
}

.rul-intro-title {
  font-size: 22px;
  line-height: 1.6;
  color: #222;
}

.rul-intro-box p {
  color: #444;
  line-height: 2;
}

@media (min-width: 768px) {
  .rul-intro-sec {
    padding-top: 120px;
    padding-bottom: 120px;
    text-align: center;
  }

  .rul-intro-title {
    font-size: 28px;
  }
}

/* ② セクション1 ＆ ③ セクション2 (Overlap Layout) */
.rul-01-sec {
  padding-top: 100px;
  padding-bottom: 80px;
}

.rul-02-sec {
  padding-top: 40px;
  padding-bottom: 100px;
}

/* オーバーラップコンテナ */
.rul-overlap-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.rul-overlap-img,
.rul-overlap-text {
  position: relative;
  z-index: 2;
}

.rul-overlap-img {
  width: 92%;
  margin-right: auto;
}

.rul-overlap-text {
  background-color: #FFFFFF;
  padding: 40px 30px;
  width: 92%;
  margin-top: -40px;
  margin-left: auto;
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* ブロークングリッド装飾（背面） */
.rul-01-sec .rul-overlap-container::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 20px;
  width: 70%;
  height: 100%;
  border: 1px solid #E0DCC8;
  /* 枠線のみの抜け感ある装飾 */
  z-index: 0;
}

.rul-02-sec .rul-overlap-container::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 20px;
  width: 80%;
  height: 100%;
  background-color: #F9F9F9;
  /* ほんのりグレーの面装飾 */
  z-index: 0;
}

/* Reverse用 */
.rul-overlap-container.reverse .rul-overlap-img {
  margin-left: auto;
  margin-right: 0;
}

.rul-overlap-container.reverse .rul-overlap-text {
  margin-right: auto;
  margin-left: 0;
}

@media (min-width: 768px) {
  .rul-overlap-container {
    display: flex;
    align-items: flex-start;
  }

  .rul-overlap-img {
    width: 55%;
    margin-right: 0;
  }

  .rul-overlap-text {
    width: 60%;
    padding: 60px 50px;
    margin-top: 60px;
    margin-left: -10%;
  }

  .rul-overlap-container.reverse {
    flex-direction: row-reverse;
  }

  .rul-overlap-container.reverse .rul-overlap-img {
    margin-left: 0;
  }

  .rul-overlap-container.reverse .rul-overlap-text {
    margin-right: -10%;
    margin-left: 0;
  }

  /* PC用の背面装飾ズレ幅調整 */
  .rul-01-sec .rul-overlap-container::before {
    top: -30px;
    right: -30px;
    width: 60%;
    height: calc(100% + 60px);
  }

  .rul-02-sec .rul-overlap-container::before {
    top: -30px;
    left: -30px;
    width: 60%;
    height: calc(100% + 60px);
  }
}

/* ④ セクション3（Z型レイアウト） */
.rul-03-sec {
  background-color: #E0DCC8;
  /* ベージュ交差 */
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  .rul-03-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* ⑤ セクション4（ダークブロック） */
.rul-04-sec {
  padding-top: 100px;
  padding-bottom: 120px;
}

.rul-dark-box {
  background-color: #222222;
  padding: 60px 30px;
  max-width: 900px;
  margin: 0 auto;
  border-top: 4px solid var(--color-primary);
}

.rul-dark-content p {
  color: #ddd;
}

.rul-tel-link {
  color: var(--color-bg-light);
  text-decoration: none;
  font-size: 1.1em;
  transition: all .3s;
}

.rul-tel-link:hover {
  opacity: 0.8;
  color: var(--color-bg-light);
}

.rul-04-sec .rul-point-num {
  color: var(--color-bg-light);
}

@media (min-width: 768px) {
  .rul-dark-box {
    padding: 80px 60px;
  }

  .rul-dark-content {
    max-width: 700px;
    margin: 0 auto;
  }
}

/*==========================================================*/
/* 固定ページ：初めての方へ (.fst-xxx-sec)
/*==========================================================*/
/* 共通スタイル */
.fst-sec-title {
  font-size: 24px;
  line-height: 1.5;
}

.fst-point-num {
  font-size: 18px;
  letter-spacing: 0.1em;
  font-weight: 500;
}

@media (min-width: 768px) {
  .fst-sec-title {
    font-size: 28px;
  }
}

/* ① 導入セクション（メッセージ風レイアウト） */
.fst-intro-sec {
  background-color: #FFFFFF;
  padding-top: 100px;
  padding-bottom: 100px;
}

.fst-intro-box {
  max-width: 800px;
  margin: 0 auto;
}

.fst-intro-img img {
  max-width: 400px;
  object-fit: contain;
}

.fst-intro-box h2 {
  color: #222;
  font-size: 24px;
  line-height: 1.6;
}

.fst-intro-text {
  max-width: 650px;
}

.fst-intro-text p {
  color: #333;
  line-height: 2;
}

@media (min-width: 768px) {
  .fst-intro-sec {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .fst-intro-box h2 {
    font-size: 32px;
  }
}

/* ② セクション1（スプリットレイアウト） */
.fst-01-sec {
  background-color: #E0DCC8;
  /* ベージュ背景 */
  padding-top: 0;
  padding-bottom: 0;
}

.fst-split-img {
  width: 100%;
  height: 400px;
  /* スマホ時の高さ */
}

.fst-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fst-split-text {
  background-color: #E0DCC8;
}

.fst-split-text h3 {
  color: #222;
}

.fst-split-text p {
  color: #333;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .fst-split-img {
    height: 100%;
    min-height: 500px;
  }
}

/* ③ セクション2（ダークトーン強調） */
.fst-02-sec {
  background-color: #222222;
  padding-top: 100px;
  padding-bottom: 100px;
}

.fst-02-sec .fst-point-num {
  color: var(--color-bg-light) !important;
}

.fst-dark-text {
  max-width: 700px;
}

.fst-dark-text p {
  line-height: 2;
  font-size: 16px;
}

@media (min-width: 768px) {
  .fst-02-sec {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .fst-dark-text p {
    font-size: 17px;
  }
}

/* ④ セクション3（グリッド/カードレイアウト） */
.fst-03-sec {
  background-color: #FFFFFF;
  padding-top: 100px;
  padding-bottom: 100px;
}

.fst-03-sec .fst-sec-title {
  color: #222;
}

.fst-rule-card {
  background-color: #F9F9F9;
  border-top: 3px solid var(--color-primary);
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  text-align: center;
}

.fst-rule-title {
  font-size: 20px;
  color: #222;
}

.fst-rule-card p {
  color: #444;
  line-height: 1.8;
  text-align: left;
}

@media (min-width: 768px) {
  .fst-03-sec {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .fst-rule-card {
    padding: 50px 40px;
  }

  .fst-rule-title {
    font-size: 22px;
  }
}

/*==========================================================*/
/* 固定ページ：店舗案内・アクセス (.acc-xxx-sec)
/*==========================================================*/

/* 共通スタイル */
.acc-sec-title {
  font-size: 24px;
  line-height: 1.5;
  color: #222;
}

@media (min-width: 768px) {
  .acc-sec-title {
    font-size: 28px;
  }
}

/* ① 導入セクション */
.acc-intro-sec {
  background-color: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 80px;
}

.acc-intro-text-wrap p {
  color: #444;
  line-height: 2;
}

@media (min-width: 768px) {
  .acc-intro-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* ② 店舗基本情報 (dl/dt/dd テーブル風) */
.acc-info-sec {
  background-color: #F9F9F9;
  padding-top: 80px;
  padding-bottom: 80px;
}

.acc-info-box {
  max-width: 900px;
  border-top: 4px solid var(--color-primary);
  padding: 30px 20px;
}

.acc-info-box .acc-sec-title {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px dashed #CCC;
}

.acc-info-list {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #EEE;
}

.acc-info-list dt,
.acc-info-list dd {
  padding: 20px 10px;
  margin: 0;
  border-top: 1px solid #EEE;
}

.acc-info-list dt {
  width: 100%;
  font-weight: 600;
  color: #222;
  background-color: #FAFAFA;
}

.acc-info-list dd {
  width: 100%;
  color: #444;
}

.acc-tel-link {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-decoration: none;
}

@media (min-width: 768px) {
  .acc-info-sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .acc-info-box {
    padding: 60px;
  }

  .acc-info-list dt {
    width: 30%;
    padding: 25px 20px;
  }

  .acc-info-list dd {
    width: 70%;
    padding: 25px 20px;
  }
}

/* ③ 送迎サービス (ダークボックス) */
.acc-pickup-sec {
  background-color: #222222;
  padding-top: 100px;
  padding-bottom: 100px;
}

.acc-pickup-sec i.text-primary {
  color: var(--color-bg-light) !important;
}

.acc-pickup-box {
  max-width: 700px;
}

.acc-pickup-box p {
  line-height: 2;
}

/* ④ 近隣地域からのアクセス (グリッド) */
.acc-area-sec {
  background-color: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 80px;
}

.acc-area-item {
  background-color: #F9F9F9;
  border-left: 4px solid var(--color-primary);
  padding: 20px;
  font-weight: 500;
  color: #222;
  height: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

@media (min-width: 768px) {
  .acc-area-sec {
    padding-top: 120px;
    padding-bottom: 80px;
    /* タイムラインに続くので下余白少なめ */
  }
}

/* ⑤ 道順案内 (タイムライン風 CSS) */
.acc-route-sec {
  background-color: #FFFFFF;
  padding-top: 40px;
  padding-bottom: 80px;
}

.acc-timeline {
  max-width: 1100px;
  position: relative;
  padding-left: 30px;
}

/* 縦線 */
.acc-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 2px;
  background-color: #E0DCC8;
  /* Beige */
}

.acc-timeline-item {
  position: relative;
  margin-bottom: 50px;
  padding-left: 40px;
}

.acc-timeline-item:last-child {
  margin-bottom: 0;
}

/* 番号円 */
.acc-timeline-num {
  position: absolute;
  top: 0;
  left: -20px;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(122, 25, 26, 0.3);
}

.acc-timeline-content {
  background-color: #F9F9F9;
  padding: 20px 25px;
  border: 1px solid #EEE;
  position: relative;
  text-align: left;
}

.acc-timeline-content h4 {
  font-size: 18px;
  color: var(--color-primary);
  border-bottom: 1px dashed #CCC;
  padding-bottom: 10px;
}

.acc-timeline-content p {
  color: #444;
  line-height: 1.8;
}

/* 吹き出しの三角 */
.acc-timeline-content::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -8px;
  width: 16px;
  height: 16px;
  background-color: #F9F9F9;
  border-top: 1px solid #EEE;
  border-left: 1px solid #EEE;
  transform: rotate(-45deg);
}

@media(max-width:767px) {
  .acc-route-sec .acc-sec-title {
    font-size: 22px;
  }
}

@media (min-width: 768px) {
  .acc-route-sec {
    padding-bottom: 120px;
  }

  .acc-timeline {
    padding-left: 0;
  }

  .acc-timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .acc-timeline-item {
    width: 50%;
    margin-bottom: 20px;
    padding-left: 0;
  }

  .acc-timeline-item:nth-child(odd) {
    padding-right: 50px;
    text-align: right;
  }

  .acc-timeline-item:nth-child(even) {
    margin-left: 50%;
    padding-left: 50px;
  }

  .acc-timeline-num {
    left: auto;
    right: -20px;
  }

  .acc-timeline-item:nth-child(even) .acc-timeline-num {
    right: auto;
    left: -20px;
  }

  .acc-timeline-content::before {
    left: auto;
    right: -8px;
    transform: rotate(135deg);
  }

  .acc-timeline-item:nth-child(even) .acc-timeline-content::before {
    right: auto;
    left: -8px;
    transform: rotate(-45deg);
  }
}

/* ⑥ Googleマップ */
.acc-map-sec {
  background-color: #F9F9F9;
  padding-top: 60px;
  padding-bottom: 60px;
}

.acc-map-wrap {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 3 / 2;
  background-color: #EEE;
}

@media (min-width: 768px) {
  .acc-map-sec {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .acc-map-wrap {
    aspect-ratio: 21 / 9;
    /* PCではよりワイドに */
  }
}

/*==========================================================*/
/* カスタム投稿：スタイルギャラリー (style_gallery)
/*==========================================================*/

/* カテゴリーフィルター (Archive/Taxonomy) */
.style-cat-filter {
  margin-bottom: 40px;
}

.style-cat-link {
  color: #444;
  text-decoration: none;
  font-size: 15px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.style-cat-link:hover,
.style-cat-link.current {
  background: rgba(255, 255, 255, 0);
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (min-width: 768px) {
  .style-cat-filter {
    margin-bottom: 60px;
  }

  .style-cat-link {
    font-size: 16px;
  }
}

/* スタイルカードレイアウト (Archive/Taxonomy) */
.style-gallery-grid {
  margin-bottom: 60px;
}

.style-card {
  color: #222;
  transition: opacity 0.3s ease;
}

.style-card:hover {
  opacity: 0.9;
}

.style-card-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #f5f5f5;
}

.style-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.style-card:hover .style-card-img-wrap img {
  transform: scale(1.05);
}

.style-card-title {
  font-size: 16px;
  color: #222;
  line-height: 1.4;
}

.style-card-term {
  font-family: var(--font-family-body);
}

.style-card-term::before {
  content: "#";
  margin-right: 3px;
}



/* 詳細ページ (Single) */
.single-style-title {
  font-size: 24px;
  color: #222;
  line-height: 1.5;
}

.single-style-term {
  font-family: var(--font-family-body);
  color: var(--color-primary);
  font-size: 14.5px;
  letter-spacing: 0.05em;
  border-color: var(--color-primary) !important;
  transition: all .3s;
}

.single-style-term:hover {
  color: var(--color-bg-white);
  background: var(--color-primary);
}

.single-style-eyecatch {
  width: 100%;
  background-color: #f5f5f5;
}

.style-entry-body {
  font-size: 16px;
  line-height: 2;
  color: #444;
}

h2.wp-block-heading {
  border-top: 1px var(--color-primary) dotted;
  border-bottom: 1px var(--color-primary) dotted;
}

h3.wp-block-heading {
  border-bottom: 1px var(--color-primary) dotted;
}

.bar-btn a {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  border-color: var(--color-bg-dark);
  background: var(--color-bg-dark);
}

.bar-btn a:hover {
  color: var(--color-bg-dark);
  background: rgba(255, 255, 255, 0);
}

@media (min-width: 768px) {
  .single-style-title {
    font-size: 32px;
  }

  .style-entry-body {
    font-size: 17px;
  }
}

/* ACFギャラリー (Single) */
.style-acf-gallery {
  margin-top: 60px;
}

.style-gallery-item {
  width: 100%;
  aspect-ratio: 3 / 4;
  /* 一覧と同じアスペクト比 */
  overflow: hidden;
  background-color: #f5f5f5;
}

/*==========================================================*/
/* ページネーション (pagination) 共通スタイル
/*==========================================================*/
.navigation.pagination {
  margin-top: 60px;
  text-align: center;
}

.navigation.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.navigation.pagination .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  color: var(--color-text-main, #333333);
  font-family: var(--font-family-body);
  text-decoration: none;
  border: 1px solid var(--color-border, #E5E5E5);
  transition: all 0.3s ease;
}

.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers:not(.dots):hover {
  border-color: var(--color-primary);
  color: #fff;
}

.navigation.pagination .page-numbers.dots {
  background-color: transparent;
  border-color: transparent;
}

/*==========================================================*/
/* 共通サイドバー (SIARE カテゴリ用)
/*==========================================================*/
.siare-sidebar-widget {
  background: transparent;
}

.siare-sidebar-title {
  font-size: 18px;
  color: #222;
  border-color: #E5E5E5 !important;
}

.siare-cat-list {
  margin-top: 20px;
}

.siare-cat-list li {
  border-bottom: 1px solid #E5E5E5;
}

.siare-cat-list li:last-child {
  border-bottom: none;
}

.siare-cat-link {
  color: #444;
  text-decoration: none;
  font-size: 15px;
  display: block;
  padding: 12px 5px;
  position: relative;
  transition: all 0.3s ease;
}

.siare-cat-link:hover,
.siare-cat-link.current {
  color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.5);
  /* slight highlight */
}

/* ========================================================== */
/* Single Style Gallery Slider                                */
/* ========================================================== */
.single-style-slider-wrap {
  position: relative;
  padding-bottom: 40px;
}

.style-slider-img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--color-bg-light);
}

/* Custom Arrows */
.single-style-slider .slick-prev,
.single-style-slider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-hover);
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0;
  /* text hide */
}

.single-style-slider .slick-prev:hover,
.single-style-slider .slick-next:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.single-style-slider .slick-prev {
  left: -15px;
}

.single-style-slider .slick-next {
  right: -15px;
}

.single-style-slider .slick-prev::before,
.single-style-slider .slick-next::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-text-main);
  border-right: 2px solid var(--color-text-main);
  transition: var(--transition-hover);
}

.single-style-slider .slick-prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.single-style-slider .slick-next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

.single-style-slider .slick-prev:hover::before,
.single-style-slider .slick-next:hover::before {
  border-color: #fff;
}

@media (max-width: 767px) {
  .single-style-slider .slick-prev {
    left: 10px;
  }

  .single-style-slider .slick-next {
    right: 10px;
  }
}

/* Custom Dots */
.single-style-slider .slick-dots {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 40px 0 0 0;
}

.single-style-slider .slick-dots li {
  margin: 0 6px;
}

.single-style-slider .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: var(--color-text-light);
  border-radius: 50%;
  transition: var(--transition-hover);
}

.single-style-slider .slick-dots li.slick-active button {
  background: var(--color-primary);
  transform: scale(1.2);
}


.single-style-slider .slick-dots li button::before {
  display: none !important;
  content: none !important;
}


.single-style-slider .slick-dots {
  bottom: -40px !important;
}


/* ========================================================== */
/* FAQ Accordion                                              */
/* ========================================================== */
.faq-question {
  cursor: pointer;
  outline: none;
  color: var(--color-text-main);
  transition: var(--transition-hover);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-q-mark {
  font-family: var(--font-family-heading);
  min-width: 35px;
  color: var(--color-primary) !important;
}

.faq-a-mark {
  font-family: var(--font-family-heading);
  min-width: 35px;
  color: #222 !important;
}

.faq-q-text {
  line-height: 1.5;
}

.faq-a-text {
  font-family: var(--font-family-body);
  color: var(--color-text-main);
  line-height: 1.8;
}

/* Accordion Icon (+ / -) */
.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-text-main);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-icon::before {
  width: 16px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 16px;
}

.faq-question.is-open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-question:hover .faq-icon::before,
.faq-question:hover .faq-icon::after {
  background-color: var(--color-primary);
}


.faq-q-mark,
.faq-a-mark {
  font-size: 1.5rem;
}

.faq-q-text {
  font-size: 1.15rem;
}

@media (max-width: 767px) {

  .faq-q-mark,
  .faq-a-mark {
    font-size: 1.25rem;
  }

  .faq-q-text {
    font-size: 1.05rem;
  }
}


/* Post List Title Size */
.post-siteContent {
  padding-top: 60px;
}

.siare-post-list .p-ttl {
  font-size: 1.25rem;
}

.siare-post-list img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

@media (max-width: 767px) {
  .siare-post-list .p-ttl {
    font-size: 1.1rem;
  }
}


/* Bootstrap Primary Override & Tag Styles */
:root {
  --bs-primary: #7A191A;
  --bs-primary-rgb: 122, 25, 26;
}

/* Sidebar Tag List */
.ul-taglist a.siare-tag-link {
  color: #222 !important;
}

.ul-taglist a.current.siare-tag-link {
  background-color: transparent !important;
  color: var(--bs-primary) !important;
  font-weight: bold;
}

.ul-taglist a.siare-tag-link:hover {
  color: var(--bs-primary) !important;
  text-decoration: underline !important;
}

/* Single Category & Tag Hover */
a.siare-single-cat:hover {
  background-color: var(--bs-primary);
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}

a.siare-single-tag:hover {
  color: var(--bs-primary) !important;
  text-decoration: underline !important;
}


/* Section Spacing */
.style_gallery-sec,
.faq-sec {
  padding-top: 60px;
  padding-bottom: 60px;
}


/* Button Transition */
.btn {
  transition: all 0.3s ease;
}