/******************************************************************
Theme Name:花りん20260324
******************************************************************/

/*
WordPress Probz
So Theme Check (http://wordpress.org/plugins/theme-check/)
is constantly telling me that it needs these classes in the CSS even
though they are in the REAL stylesheet in library/css/style.css.
So we're gonna drop these here to keep it happy.
Great work, Theme Check (eye roll)
*/

/* 400px固定用のクラス */
body {

    font-family: "Klee One", cursive;
    font-weight: 400;
    font-style: normal;
  
    background-color: #fff;
    /* 背景をカンマ区切りで指定（上に重なる順に記述） */
    background-image: 
        url(/wp-content/themes/site_karin_20260324/assets/image/background-image/backart-left-up.png),     /* 左上 */
        url(/wp-content/themes/site_karin_20260324/assets/image/background-image/backart-right-up.png),    /* 右上 */
        url(/wp-content/themes/site_karin_20260324/assets/image/background-image/backart-left-bottom.png), /* 左下 */
        url(/wp-content/themes/site_karin_20260324/assets/image/background-image/backart-right-bottom.png),/* 右下 */
        url(/wp-content/themes/site_karin_20260324/assets/image/background-image/washi_enzhi_base_redder2.png); /* 一番下の和紙 */

    /* それぞれの画像の位置を指定 */
    background-position: 
        left top,      /* 左上 */
        right top,     /* 右上 */
        left bottom,   /* 左下 */
        right bottom,  /* 右下 */
        center;        /* 和紙 */
  
    /* 繰り返し設定：四隅の画像は1回、和紙はリピート */
    background-repeat: 
        no-repeat, 
        no-repeat, 
        no-repeat, 
        no-repeat, 
        repeat;
  
    /* サイズ設定：auto（実寸）で配置 */
    background-size: 
        auto, 
        auto, 
        auto, 
        auto, 
        contain;
  
    background-attachment: fixed; /* 画面スクロールしても背景を固定する場合 */
    color: #1F1C1A;
  
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
  
  }
  
  @media (max-width: 991.98px) {
    .row {
      --bs-gutter-x: 0;
      overflow-x: hidden;
    }
  }
  
  .col-fixed-mini {
  
      width: 400px;
      max-width: 100%; /* スマホなどの狭い画面で突き抜けないように */
      background-color: #fff;
      background-image: url(/wp-content/themes/site_karin_20260324/assets/image/background-image/SP-back.png);
      background-size: contain;
      background-position: center;
      background-repeat: repeat;
      color: #1F1C1A;
      overflow: visible !important;
      position: relative !important;
      overflow-y: auto; /* または auto */
      height: auto;      /* または固定の高さ */
    }
  
  .consept-backBackGroundImage {
  
    width: 100%;
    max-width: 100%; /* スマホなどの狭い画面で突き抜けないように */
    background-color: #fff;
    background-image: url(/wp-content/themes/site_karin_20260324/assets/image/background-image/Concept-back-400×900.png);
    background-color:rgba(255,255,255,0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #1F1C1A;
  }
  
  .bg-title-image {
      background-image: url(/wp-content/themes/site_karin_20260324/assets/image/background-image/H2-back.png);
      background-size: cover; 
      background-position: center center;
      background-repeat: no-repeat;
  
      padding-top: 2.5rem;    /* 値は画像の表示範囲に合わせて調整してください */
      padding-bottom: 2.5rem;
  
      color: #651722;
      text-shadow: 
      1px  1px 2px #fff,
      -1px -1px 2px #fff,
      1px -1px 2px #fff,
      -1px  1px 2px #fff;
  }
  
  .bg-image-course {
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
    background-image: url(/wp-content/themes/site_karin_20260324/assets/image/background-image/course-back.png);
      background-size: cover; 
      background-position: auto, auto;
      padding-top: 0px;    /* 値は画像の表示範囲に合わせて調整してください */
      padding-bottom: 0px;
    background-repeat: no-repeat;
  }
  
  .bg-image-course-en {
    width: 93%;
    margin-left: 3%;
    margin-right: 3%;
    background-image: url(/wp-content/themes/site_karin_20260324/assets/image/background-image/course-back.png);
      background-size: cover; 
      background-position: auto, auto;
      padding-top: 0px;    /* 値は画像の表示範囲に合わせて調整してください */
      padding-bottom: 0px;
    background-repeat: no-repeat;
  }
  
  .bg-background-shop {
      background-color:rgba(226, 219, 207, 0.7);
  }
  
  .fw-color-type1 {
      color: #651722;
  }
  
  /* ボタンのデザイン */
  /* 注釈 */
  .annotation-text{
    font-size: .85rem;
    color: #666;
    letter-spacing: .05em;
  }
  
  /* 画像ボタン共通 */
  .reservation-btn{
    aspect-ratio: 520 / 140;          /* 画像比率に合わせて調整 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #1f1c1a;
    letter-spacing: .08em;
  }
  
  /* 画像の指定 */
  .reservation-btn--gold{
    background-image: url("/wp-content/themes/site_karin_20260324/assets/image/background-image/botan.png");
  }
  
  .reservation-btn--silver{
    background-image: url("/wp-content/themes/site_karin_20260324/assets/image/background-image/tel-botan.png");
  }
  
  /* 注釈 */
  .annotation-text{
    font-size: .85rem;
    color: #666;
  }
  
  
  
  
  .footer-custom {
      /* 400pxの幅に合わせる */
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      
      /* 背景画像の設定 */
      background-image: url("/wp-content/themes/site_karin_20260324/assets/image/background-image/FT-back-400.png");
      background-size: 100% auto; /* 横幅いっぱいに合わせる */
      background-position: bottom center;
      background-repeat: no-repeat;
      
      /* 曲線部分に文字が被らないよう、上部に余白を作る */
      /* 画像の曲線の深さに合わせて調整してください */
      padding-top: 80px; 
      padding-bottom: 50px;
      
      /* 文字色を白に固定（和柄背景用） */
      color: white;
  }
  
  /* --- nav-tabsのBootstrap既定を無効化（下線とか） --- */
  .shopTabs.nav-tabs {
    border-bottom: 0 !important;
  }
  .shopTabs .nav-link {
    border: 0 !important;          /* nav-link既定borderを殺す */
    margin-bottom: 0 !important;   /* tabsのズレ防止 */
  }
  
  /* --- タブボタン共通 --- */
  .shopTabs .nav-link.shopLink1,
  .shopTabs .nav-link.shopLink2{
    display: block;
    width: 100%;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
    color: #1F1C1A !important;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.15); /* shadowが欲しいなら */
  }
  
  /* --- 未選択（非active） --- */
  .shopTabs .nav-link:not(.active){
    background-color: #E2DBCF !important;
    border: 3px solid #F4F4F6 !important;
  }
  
  /* --- 未選択（非active） --- */
  .shopTabs .nav-link:not(.active){
    background-color: #E2DBCF !important;
    border: 3px solid #F4F4F6 !important;
  }
  
  /* --- 初期値（= active） --- */
  .shopTabs .nav-link.active{
    background-color: #F4F4F6 !important;
    border: 3px solid #E2DBCF !important;
    transform: translateY(1px);
  }
  
  /* 中央のコンテンツエリア */
  .concept-main-content {
      background: #ffffff;
      width: 90%; /* 両端に少し余白 */
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      z-index: 1; /* 画像より下に配置 */
    }
    
  /* セクション全体のラッパー（横揺れ防止のみ担当） */
  /* セクション全体のラッパー（横揺れ防止のみ担当） */
  .concept-outer-wrapper {
      overflow-x: hidden; /* ブラウザの右端にはみ出さないようにする */
      width: 100%;
      background-image: url(/wp-content/themes/site_karin_20260324/assets/image/background-image/your-bg-image.png); /* 全体の背景 */
      background-size: cover;
    }
    
    /* 共通設定 */
    .pot-image {
      position: absolute;
      z-index: 2;
      pointer-events: none;
      filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    }
    
    /* --- SPのとき (400px未満) --- */
    @media (max-width: 399px) {
      .concept-section {
        overflow: hidden; /* SPは枠内でカット */
      }
      .pot-image { width: 140px; }
      .pot-left { top: -20px; left: 5%; }
      .pot-right { bottom: -20px; right: 5%; }
    }
    
    /* --- PCのとき (400px以上) --- */
    @media (min-width: 400px) {
      .concept-section {
        overflow: visible !important; /* ★ここが重要！400pxの外側も表示する */
      }
      
      .pot-left {
        width: 300px; /* 画像サイズに合わせて調整 */
        top: 50px;
        left: -100px; /* ★マイナス値を大きくして、もっと外側へ */
      }
    
      .pot-right {
        width: 400px;
        bottom: 50px;
        right: -100px; /* ★マイナス値を大きくして、もっと外側へ */
      }
  }
  
  
  /* 左メニュー:サイドメニューのコンテナ*/
  .pc-side-menu-wrapper {
    width: 300px;
    margin: 0 auto;
  }
  
  /* 上部パーツ：高さを固定 */
  .menu-part-top {
    width: 100%;
    height: 120px; /* PCmenu-back-Top.png の実際の高さに合わせて調整 */
    background: url('/wp-content/themes/site_karin_20260324/assets/image/background-image/PCmenu-back-Top.png') no-repeat center bottom;
    background-size: 100% auto;
  }
  
  /* 中央パーツ：テキスト量に応じて縦に伸びる */
  .menu-part-center {
    background: url('/wp-content/themes/site_karin_20260324/assets/image/background-image/PCmenu-back-center.png') repeat-y center center;
    background-size: 100% auto;
    padding: 0 40px; /* 左右の余白（壺のふちにかからないように） */
  }
  
  /* 下部パーツ：高さを固定 */
  .menu-part-bottom {
    width: 100%;
    height: 80px; /* PCmenu-back-bottom.png の実際の高さに合わせて調整 */
    background: url('/wp-content/themes/site_karin_20260324/assets/image/background-image/PCmenu-back-bottom.png') no-repeat center top;
    background-size: 100% auto;
  }
  
  /* 予約について */
  /* 予約セクション全体の幅制限 */
  .reservation-container {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 上部：Reservations-TopBack-400.png */
  .res-back-top {
    width: 100%;
    height: 160px; /* 画像の高さに合わせて調整 */
    background: url('/wp-content/themes/site_karin_20260324/assets/image/background-image/Reservations-TopBack-400.png') no-repeat center bottom;
    background-size: 100% auto;
    color: #651722; /* タイトル色 */
  }
  
  /* 中央（リピート）：Reservations-Textback-400.png */
  .res-back-center {
    width: 100%;
    background: url('/wp-content/themes/site_karin_20260324/assets/image/background-image/Reservations-CenterBack-400.png') repeat-y center center;
    background-size: 100% auto;
    color: #1F1C1A;
    line-height: 1.8;
  }
  
  .res-back-center-inner {
    width: 95%;
    background: url('/wp-content/themes/site_karin_20260324/assets/image/background-image/Reservations-Textback-400.png') repeat-y center center;
    background-size: 100% auto;
    color: #1F1C1A;
    line-height: 1.8;
  }
  
  /* 下部：Reservations-TopmarginBack-400.png */
  .res-back-bottom {
    width: 100%;
    height: 60px; /* 画像の高さに合わせて調整 */
    background: url('/wp-content/themes/site_karin_20260324/assets/image/background-image/Reservations-TopmarginBack-400.png') no-repeat center top;
    background-size: 100% auto;
    margin-top: -1px; /* 隙間消し */
  }
  
  /* 装飾用画像の微調整 */
  .res-back-center img {
    opacity: 0.8;
  }
  
  /* --- 縦棒（セパレーター）の修正 --- */
  .v-line {
    width: 1px !important;
    height: 20px !important;   /* 縦並びの時は少し短めの20pxくらいが綺麗です */
    background-color: #651722 !important;
    opacity: 0.5;
    display: block !important;
    flex-shrink: 0;
  }
  
  /* ************************************
    カルーセル全体の表示制御
  ************************************** */
  .slick-menu-container {
    width: 100%;
    overflow: hidden;
  }
  
  .menu-slide {
    padding: 0 10px; /* スライド間の隙間 */
    outline: none;
    transition: all 0.3s ease;
  }
  
  .menu-slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    opacity: 0.4; /* 非アクティブ（左右）を薄く */
    transform: scale(0.9); /* 少し小さく */
    transition: all 0.3s ease;
  }
  
  /* 中央に来た画像だけを強調 */
  .slick-center img {
    opacity: 1;
    transform: scale(1.0);
  }
  
  .menu-slide p {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: #651722;
  }
  
  
  
  /* ヘッダー基本 */
  .sp-header {
    background-color: #651722;
    z-index: 2000;
  }
  
  /* ボタン周りのサイズ調整 */
  .menu-icon-wrapper {
    width: 60px;
    height: 71px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* メニュー内のリンク色 */
  .offcanvas-body .nav-link {
    color: #1F1C1A;
    font-weight: bold;
    font-size: 1.1rem;
  }
  
  /* Offcanvasが表示されている間の背景のガタつき防止（Bootstrap標準機能） */
  .offcanvas-backdrop.show {
    opacity: 0; /* 背景の黒い影が不要なら0に、欲しいなら数値を上げる */
  }
  
  /* --- Offcanvasメニュー内の背景と調整 --- */
  
  .hb-menu-background {
    /* 背景画像 yリピート */
    background-image: url('/wp-content/themes/site_karin_20260324/assets/image/background-image/HBmenu-back.png');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center top;
  }
  
  /* メニューリンクの文字装飾 */
  .offcanvas-body .nav-link {
    color: #ffffff !important; /* エンジ色 */
    font-weight: bold;
    font-size: 1.2rem;
    padding-left: 10px;
  }
  
  /* ネット予約ボタン（以前のスタイルを流用） */
  .btn-gold-reservation {
    display: block;
    background-color: #651722;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 0;
    border-radius: 5px;
    font-weight: bold;
  }
  
  /* Offcanvas自体の枠線を消す */
  .offcanvas {
    border: none !important;
  }
  
  .text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
  }
  
  /* --- SP専用：はみ出しカットデザイン --- */
  
  /* 親セクションで横方向のはみ出しを禁止する */
  .concept-outer-wrapper-sp .concept-section {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
  }
  
  /* 左の画像：左端からマイナス方向に配置 */
  .pot-sp-left {
    position: absolute;
    width: 350px; /* SP用に少しサイズダウン */
    top: 0;
    left: -100px; /* 左側に100px分はみ出させる（＝切れる） */
    z-index: 10;
  }
  
  /* 右の画像：右端からマイナス方向に配置 */
  .pot-sp-right {
    position: absolute;
    width: 350px;
    top: 0;
    right: -100px; /* 右側に100px分はみ出させる（＝切れる） */
    transform: translateY(180px); /* PCより少し多めに下にずらす */
    z-index: 10;
  }
  
  .pot-sp-left img, .pot-sp-right img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* --- SP版：art-2, art-3のチラ見せ設定 --- */
  
  /* 親要素で横スクロールを完全にガード */
  .d-block.d-lg-none {
      overflow: hidden !important;
  }
  
  /* 左のart-2：左側に半分ほど押し出す */
  .pot-sp-left-art2 {
      position: absolute;
      top: 50px;
      left: -120px; /* 数値は画像の切れ具合で微調整してください */
      width: 250px;
      z-index: 10;
  }
  
  /* 右のart-3：右側に半分ほど押し出し、少し下げる */
  .pot-sp-right-art3 {
      position: absolute;
      top: 150px; /* art-2より下げる */
      right: -100px; /* 右側に100px分はみ出させて切る */
      width: 250px;
      z-index: 10;
  }
  
  .pot-sp-left-art2 img, .pot-sp-right-art3 img {
      width: 100%;
      height: auto;
      display: block;
  }
  
  /* --- SP版：3枚画像セクション専用 (art-2, art-3) --- */
  
  /* 左のart-2：左側に150px押し出す */
  .pot-left-art2 {
    position: absolute;
    top: 200px;      /* 上からの位置（お好みで） */
    left: -100px;   /* 画面左端から外へ押し出し */
    width: 250px;
    z-index: 10;
    pointer-events: none;
  }
  
  /* 右のart-3：右側に150px押し出し、かつ下へずらす */
  .pot-right-art3 {
    position: absolute;
    top: 200px;     /* art-2より下へ配置 */
    right: -100px;  /* 画面右端から外へ押し出し */
    width: 250px;
    z-index: 10;
    pointer-events: none;
  }
  
  .pot-left-art2 img, 
  .pot-right-art3 img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .concept-section {
    overflow-y: scroll;          /* スクロール機能は維持 */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .concept-section::-webkit-scrollbar {
    display: none;
  }