/* Reset / Base */
    *,*::before,*::after{box-sizing:border-box}
    html{color-scheme:light dark}
    body{
      margin:0;
      font-family: Cabin, sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      line-height:1.7;
      color:#0f172a; /* slate-900 */
      background:#ffffff;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;        
      background: url(./img/bg.png);  
    }
    

	h2 {
	    height: 88px;
	    margin-bottom: 40px;
	    padding-top: 22px;
	    /* color: #353535; */
	    line-height: 1;
	    letter-spacing: 2px;
	    font-family: adobe-garamond-pro, serif;  
	    
	}
	
	.time{
		color: #b8a790;	
	}
	
	.smaller{
		font-size:small;
	}
    
    @media (prefers-color-scheme: dark){
      body{color:#e5e7eb;background:#0b1220}
    }
    a{color:inherit;text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;height:auto;vertical-align:middle}
    [hidden]{display:none !important}
    :focus-visible{outline:3px solid #3b82f6; outline-offset:2px} /* 強めのフォーカスリング */
    .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Tokens */
    :root{
      --container-max: 1100px;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 16px;
      --space-4: 24px;
      --space-5: 32px;
      --space-6: 48px;
      --radius-2: 10px;
      --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.04);
      --border: #e5e7eb;
      --surface: #ffffff;
    }
    @media (prefers-color-scheme: dark){
      :root{
        --border: #263041;
        --surface:#0f172a;
      }
    }

    /* Layout helpers */
    .container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:clamp(16px, 4vw, 28px)}
    .container_border_outer{
		background: #fff;
	    padding: 5px;	
    }
    .container_border_inner{
	    /* border: 1px solid #dcd5c9; */
	    padding: 1% 5% 5% 5%;
		box-shadow: var(--shadow-2, 0 1px 2px #2e310340);	    
    }    
    .stack > * + *{margin-top:var(--space-3)}
    .cluster{display:flex;align-items:center;gap:var(--space-3)}
    .grid-3{display:grid;grid-template-columns:1fr;
	    word-wrap: break-word;
	    background-color: #fff;
	    background-clip: border-box;
	    border: 1px solid rgba(0, 0, 0, .125);
	    border-radius: .25rem;    
    }
    @media (min-width:700px){
      .grid-3{grid-template-columns:repeat(3,1fr)}
    }

	.shadow {
	    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
	}

    /* PC / SP 切替ユーティリティ
       - .pc-only: PC(>=700px)で表示、SPで非表示
       - .sp-only: SP(<700px)で表示、PCで非表示
       - .pc-hide : PCで非表示
       - .sp-hide : SPで非表示
    */
    .pc-only{display:none !important}
    .sp-only{display:initial !important}
     /*.pc-hide{display:initial !important}*/
    .pc-hide:not([hidden]){display:initial !important}
    .sp-hide{display:none !important}
    @media (min-width:700px){
      .pc-only{display:initial !important}
      .sp-only{display:none !important}
      .pc-hide{display:none !important}
      .sp-hide{display:initial !important}
      
      .section{
      	  	margin-left:15px;
      	  	margin-right:15px;
      }     
      .card_sp2pc4{width:16%;}
    }

    /* SP向けユーティリティ（<700px時のみ効く） */
    @media (max-width:699.98px){
      .sp-block{display:block !important}
      .sp-flex{display:flex !important}
      .sp-w-100{width:100% !important}
      .sp-px-16{padding-left:16px !important;padding-right:16px !important}
      .sp-mb-16{margin-bottom:16px !important}
      .sp-text-center{text-align:center !important}
      .sp-stack > * + *{margin-top:12px !important}
      .sp-gap-12{gap:12px !important}
      
      .section{
      	  	margin-left:5px;
      	  	margin-right:5px;
      }
      .card_sp2pc4{width:33%;}
      .price-row{flex-direction: column;}
    }

    /* Header */
    .site-header{
      top:0;z-index:50;
      background:var(--surface);
      border-bottom:1px solid var(--border);
      box-shadow: 1px -1px 5px 1px #4f4a45;
    }
    .site-header__bar{
      display:flex; align-items:center; justify-content:space-between;
      min-height:64px;
    }
    .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
    .brand__logo{height:100px;}
    .brand__name{font-weight:700;letter-spacing:.02em}

    /* PCグローバルナビ */
    .]{text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);}
    .global-nav .nav-list{
    	display:flex;gap:24px;list-style:none;margin:0;
    	padding:0;
   		line-height: 1;
    }
    .global-nav a{display:inline-block;padding:10px 6px;border-radius:8px}
    .global-nav a:hover{background:rgba(0,0,0,.04);text-decoration:none}
    @media (prefers-color-scheme: dark){
      .global-nav a:hover{background:rgba(255,255,255,.06)}
    }
    .global-nav{
	    font-family: 'Playfair Display', serif;
	    text-align:center;
    }

    /* ハンバーガーメニュー（SP） */
    .hamburger{
      appearance:none;border:none;background:transparent;cursor:pointer;
      width:44px;height:44px;padding:0;border-radius:9px;
    }
    .hamburger:focus-visible{outline:3px solid #3b82f6}
    .hamburger__bars,
    .hamburger__bars::before,
    .hamburger__bars::after{
      content:""; display:block; width:22px; height:2px; background:currentColor; margin:auto; border-radius:2px; transition:transform .2s ease, opacity .2s ease;
    }
    .hamburger__bars::before{transform:translateY(-6px)}
    .hamburger__bars::after{transform:translateY(6px)}
    /* 開閉アニメ */
    body.menu-open .hamburger__bars{background:transparent}
    body.menu-open .hamburger__bars::before{transform:rotate(45deg)}
    body.menu-open .hamburger__bars::after{transform:rotate(-45deg)}

    /* SPメニュー本体 */
    .nav-overlay{
      position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(1px); z-index:40;
    }
    .mobile-nav{
      position:fixed; inset:0 0 0 auto; width:min(82vw, 320px); max-width:85vw; height:100vh;
      background:var(--surface); box-shadow:var(--shadow-1); z-index:41;
      transform:translateX(100%); transition:transform .2s ease; padding:24px 20px; overflow:auto;
    }
    body.menu-open .mobile-nav{transform:translateX(0)}
    .mobile-nav__title{margin:0 0 10px;font-weight:700}
    .mobile-nav .nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
    .mobile-nav a{display:block;padding:14px 10px;border-radius:10px}
    .mobile-nav a:hover{background:rgba(0,0,0,.04);text-decoration:none}
    @media (prefers-color-scheme: dark){
      .mobile-nav a:hover{background:rgba(255,255,255,.06)}
    }

    /* Hero */
    .hero{border-bottom:1px solid var(--border); background:
      radial-gradient(1200px 300px at 50% -20%, rgba(59,130,246,.12), transparent 50%)}
    .hero__lead{font-size:clamp(22px, 2.8vw, 36px);line-height:1.3;margin:0 0 12px;font-weight:800;letter-spacing:.01em}
    .hero__sub{color:#64748b; margin:0 0 24px}
    @media (prefers-color-scheme: dark){
      .hero__sub{color:#94a3b8}
    }
    .btn{
      display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; letter-spacing:.02em;
      border:1px solid #0ea5e9; background:#0ea5e9; color:#fff; text-decoration:none;
      transition:transform .06s ease, box-shadow .06s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn--ghost{background:transparent;color:#0ea5e9}
    .btn--ghost:hover{background:rgba(14,165,233,.08)}
    @media (prefers-color-scheme: dark){
      .btn{border-color:#38bdf8;background:#38bdf8}
      .btn--ghost{color:#38bdf8}
      .btn--ghost:hover{background:rgba(56,189,248,.12)}
    }
    
    /*  セクション内 */
    .inner{
    	position: relative;
	    max-width: 1000px;
    }
    .section_h2{
		width: 100%;
	    margin: 0 auto 10px;
	    padding-top: 38px;
	    padding-bottom: 65px;
	    background-size: 80px;
	    background-image: url(../img/img_bgmark.png);
	    background-repeat: no-repeat;
	    background-position: top center;
	    background-position-y: center;
	    font-size: 22px;
	    text-align: center;
	    background-color: #211715;
	    color: white;
	    font-weight: 400;
    }

    /* カード / セクション */
    .section{
    	margin: 0 auto;
    	max-width:1000px;
    	margin-bottom: 20px;
		border-radius: 0px;
	    padding: 3px;
	    /*background-color: rgba(255, 255, 255, 0.7);
	    border: 3px double rgba(196, 181, 173, 0.3);
	    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);  */
	    
		border: #c3a495;
	    border-style: solid;
	    border-width: 1px;
	    padding: 2px;
	    margin-top: 10px;
	    margin-bottom: 10px;
	    border-radius: 2px;	    
    }
    .list_card{
    	list-style: none;
	    padding: 0px;
	    margin-bottom: 0px;    	
    }
    
    .card{
      background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2);  box-shadow:var(--shadow-1);
    }
    .skeleton{
      position:relative;overflow:hidden;background:linear-gradient(90deg,#eee,#f5f5f5,#eee);
      background-size:200% 100%;animation:skeleton 1.1s linear infinite;border-radius:10px;min-height:140px
    }
    @keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}


	/* グリッド本体：横並び数・幅を自動調整（PC/SP共通・ノーJS） */
	.shift-grid{
	  --card-min: 150px;                 /* カードの最小幅（お好みで） */
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
	  gap: 12px;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}

	.shift-grid_mini{
	  --card-min: 50px;                 /* カードの最小幅（お好みで） */
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
	  gap: 1px;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	  font-size:10px;
      font-family: monospace;
	}
	.shift-card_mini{
	  background: var(--surface, #fff);
	  border-radius: 1px;
	  overflow: hidden;
	  box-shadow: var(--shadow-2, 0 1px 2px #2e310340);
	}
		

	/* カード */
	.shift-card{
	  background: var(--surface, #fff);
	  border-radius: 5px;
	  overflow: hidden;
	  box-shadow: var(--shadow-2, 0 1px 2px #2e310340);
	}
	.shift-card a{ 
		display: block; color: inherit;
		text-decoration: none; 	
		background-color: rgba(255, 255, 255, 0.7);
	}

	/* サムネ：比率を一定にして崩れ防止 */
	.shift-card__thumb{
	  width: 100%;
	  object-fit: cover;
	  display: block;
	}

	/* 本文 */
	.shift-card__body{ padding: 10px; }
	.shift-card__name{ font-weight: 700; margin-bottom: 4px; color: #ff0000;}
	.shift-card__size{ display: block; font-size: 0.9rem; color: #475569; font-weight: 600;}	
	.shift-card__time{ font-size: 0.9rem; color: #475569; }

	/* ステータス（簡易） */
	.shift-card__status{
	  display: inline-block;
	  margin-top: 6px;
	  padding: 2px 8px;
	  border-radius: 999px;
	  font-size: 0.8rem;
	  background: #eef2ff;
	  color: #1e40af;
	}
	.shift-card__status.is-now{
	  background: #dcfce7;
	  color: #166534;
	}

	/* スライダー本体：高さ固定 */
	.topslide{
	  width: 100%;
	  height: 125px;                 /* 指定どおり固定 */
	  position: relative;            /* ボタンの絶対配置に必要 */
	  --swiper-theme-color: #fff;
	}

	/* 連続スクロールを滑らかに（一定速度） */
	.topslide .swiper-wrapper{
	  height: 100%;
	  transition-timing-function: linear !important;
	}
	.topslide .swiper-slide{
	  height: 100%;
	  width: auto !important;        /* 可変幅スライドが肝 */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  overflow: hidden;
	}
	.topslide img{
	  height: 100%;
	  width: auto;
	  display: block;
	  object-fit: contain;           /* 端まで埋めたいなら cover に */
	}

	/* カスタム左右ボタン（必要なら色・影・サイズを調整） */
	.flow-btn{
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  width: 44px; height: 44px;
	  border: 0; border-radius: 999px;
	  background: rgba(0,0,0,.4);
	  color: #fff;
	  display: grid; place-items: center;
	  cursor: pointer;
	  transition: transform .12s ease, background .12s ease, opacity .12s ease;
	  opacity: .9;
	}
	.flow-btn:hover{ background: rgba(0,0,0,.55); transform: translateY(-50%) scale(1.05); }
	.flow-btn:active{ transform: translateY(-50%) scale(0.97); }
	.flow-btn--left{ left: 10px; z-index:1;}
	.flow-btn--right{ right: 10px;z-index:1; }

	/* 選択中の方向をうっすらハイライト（任意） */
	.flow-btn.is-active{ box-shadow: 0 0 0 3px rgba(59,130,246,.55) inset; }



	/* ドット位置の微調整（任意） */
	.topslide .swiper-pagination{ bottom: 10px !important; }


	/* ▼ 基本：縦にフィット（高さ=100%）・横幅は可変
	   → 画像の横幅が不足する場合は左右に余白が出ます（ノークロップ） */
	.topslide img{
	  height: 100%;
	  width: auto;
	  display: block;
	  object-fit: contain; /* 保険。なくてもOK */
	}


	/* ドットが画像上で見づらい場合の下マージン（任意） */
	.topslide .swiper-pagination{ bottom: 10px !important; }
	
	.topics_h3{
		width: 100%;
	    border-left: 3px solid #ccbc99;
	    font-size: 1.1rem;
	    padding: 0 15px;		
	    font-family:adobe-garamond-pro, serif;
	}


	/* 料金表 */
	.price-box{
	    display: flex;
	    max-width: 1000px;
	    margin: 0 auto;
	    margin-bottom: 30px;
	    border-radius: 10px;
	    overflow: hidden;
	    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);		
	}
	.price-row {
		display: flex;
	    width: 100%;	    
	}

	.price-col {
	    flex: 1 1 33.333%;
	    text-align: center;
	    background: #fff;
	    border-right: 1px solid #ddd;
	}
	.price-col:not(:first-child) {
	    border-left: 2px solid #fff;
	}

	.plan-header {
	    padding: 15px 10px;
	    color: #fff;
	    font-weight: bold;
	    font-size: 1.25rem;
	}
	.plan-price {
	    padding: 15px 6px;
	    font-size: 1.75rem;
	    font-weight: bold;
	}

    /* Footer */
    .site-footer{
    		border-top:1px solid var(--border);padding:28px 0;
    		color:#64748b;
    		background-color: #636363;
    }
    #footer_info{
		font-size: 20px;
	    margin: -50px 0 35px;    
	    color:#ffffff;
    }    
	    
	#footer_info .info_title {
	    font-size: 12px;
	    margin: 0 5px 0;
	}   
	.f_tel{
		font-family: math;
		margin:0 auto;
	}
	.f_time{
		font-family: math;
		margin:0 auto;
	}	
    .f_logo{
		margin: 0 auto;
	    width: 400px;
	    height: auto;    	
    }
    .f_reservation_system{
    	width:50%;
    	witdh-max:50px;
    	margin:0 auto;
    	background-color:#ffffff;
    	color:black;
    }
    @media (prefers-color-scheme: dark){.site-footer{color:#94a3b8}}
    
    
.shadow-w {
    text-shadow: #fff 2px 0px 2px, #fff -2px 0px 2px, #fff 0px -2px 2px, #fff -2px 0px 2px, #fff 2px 2px 2px, #fff -2px 2px 2px, #fff 2px -2px 2px, #fff -2px -2px 2px, #fff 1px 2px 2px, #fff -1px 2px 2px, #fff 1px -2px 2px, #fff -1px -2px 2px, #fff 2px 1px 2px, #fff -2px 1px 2px, #fff 2px -1px 2px, #fff -2px -1px 2px, #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}
.note{
	font-family:'Noto Sans', sans-serif	;
    font-weight: bold;
    margin: 0 auto;
}
.pricesystem_title{
	text-align:center;	
}


.option_box{
	padding: 15px 25px;
    border: 3px solid;
    max-width: 520px;
    margin: 0 auto;
}


    .profile_inner{
	    /* border: 1px solid #dcd5c9; */
	    padding: 3%;    	
		/*box-shadow: var(--shadow-2, 0 1px 2px #2e310340);*/
		color: #8d8774;
	    position: relative;
	    max-width: 900px;
	    margin: 0 auto;
    }    
    
    .schedule_top{
		background-color: #bfa268;
		color:#ffffff;
		font-size:15px;
		text-align:center;
    }
    .schedule_next{
		background-color: #ffffff;
		color:#bfa268;
		font-size:18px;
		text-align:center;		
    }    
    
    /* フェードで点滅 */
	.blink-slow {
	  animation: fadeBlink 1.5s ease-in-out infinite alternate;
	}

	/* 0→1→0… と透明度を往復させる */
	@keyframes fadeBlink {
	  from { opacity: 1; }
	  to   { opacity: 0; }
	}

	/* 端末が「動きを減らす」を希望している場合はアニメを止める（アクセシビリティ配慮） */
	@media (prefers-reduced-motion: reduce) {
	  .blink-slow { 
	    animation: none;
	  }
	}
	
	

	.profile_name{
		font-size:32px;
	}
	.profile_style{
		font-size:25px;
		text-align: right;
   	}
	@media (max-width:700px){
		.profile_name{
			font-size:15px;
			font-weight:600;
		}
		.profile_style{
			font-size:15px;
			text-align: right;
	   	}	
	}
	
	.fixed_menu{
		position: fixed;
	    bottom: 0px;
	    right: 0px;
	    width: 100%;
	    margin:0 auto;
	    text-align:right;		
	}	
	
	.schedule_select{
		font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
		text-align:center;
		color:#a1203f;
		width:100%;
		margin-bottom:10px;
	}
	.schedule_select td{
		padding: 0;
	    border: 1px solid #a1203f;	
	}
	
	.schedule_active{
		background: #a1203f;
		    color: #FFF;	
	}