/* Reset / Base */
    *,*::before,*::after{box-sizing:border-box}
	:root{

	/* --main-color: var(--main-color); */
		--main-color:#08001B;
		--rev-color:#ffffff;
		/*--accent-color: rgb(48 68 103);*/
		--accent-color:rgb(48 68 103 / 76%);
	
	}

    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:var(--rev-color); 
      background:#000000;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;        
      background: url(../img/page_back.jpg);       
      font-family: 'Playfair Display', serif;
      background-size: contain;
    }
    

	h2 {
	    height: 88px;
	    margin-bottom: 40px;
	    padding-top: 22px;
	    /* color: #353535; */
	    line-height: 1;
	    letter-spacing: 2px;
	    font-family: adobe-garamond-pro, serif;  
	    
	}
	
	.italic{
		font-style: italic;	
	}
	
	.time{
		color: #b8a790;	
	}
	
	.smaller{
		font-size:small;
	}
	
	.strong{
		font-weight: 700;
    	letter-spacing: 0.04em;	
	}
    
    @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{
	    padding: 5px;	
	    color:var(--rev-color);
    }
    .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}
    .sp-only{display:initial}
     /*.pc-hide{display:initial !important}*/
    .pc-hide:not([hidden]){display:initial}
    .sp-hide{display:none}
    
    @media (min-width:700px){
      .pc-only{display:initial}
      .sp-only{display:none !important}
      .pc-hide{display:none !important}
      .sp-hide{display:initial}
      
      .section{
      	  	margin: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:5px !important;
      }
      .card_sp2pc4{width:33%;}
      .price-row{flex-direction: column;}

      .sp-only{display:initial}
      .pc-only{display:none !important}
      .sp-hide{display:none !important}
      .pc-hide{display:initial}

    }

    /* Header */
    .site-header{
      position:fixed;
      width:100%;
      top:0;z-index:50;
      background:var(--main-color);
      border-bottom:1px solid var(--border);
      box-shadow: 1px -1px 5px 1px #4f4a45;
      color:var(--rev-color);
    }
    .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;
	    text-shadow: 1px 4px 6px #ffffff;
        user-select: none;
    }
    .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;
      
		border-style: solid;
	    border-width: 1px;
	    border-color: white;
	    border-radius: 0px;      
	    text-align:center;
    }
    .hamburger:focus-visible{outline:3px solid #3b82f6}
    .hamburger__bars,
    .hamburger__bars::before,
    .hamburger__bars::after{
      content:""; display:block; width:22px; height:2px;
      background:var(--rev-color); margin:auto; border-radius:2px; transition:transform .2s ease, opacity .2s ease;
    }
    .hamburger__bars::before{transform:translateY(-6px)}
    .hamburger__bars::after{transform:translateY(-14px)}
    /* 開閉アニメ */
    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(--main-color); box-shadow:var(--rev-color); 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: var(--main-color);
	    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{
		--gap: 5px;
	    --cols: 1;
	    display: grid;
	    gap: var(--gap);
	    grid-template-columns: repeat(var(--cols), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)));
	    margin: 0;
	    padding: 0;    
	}

	.shift-grid_mini{
		--gap: 5px;
	    --cols: 1;
	    display: grid;
	    gap: var(--gap);
	    grid-template-columns: repeat(var(--cols), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)));
	    margin: 0;
	    padding: 0;      
	}
	@media (min-width: 300px) {/* 400px以上 */
	  .shift-grid{ --cols: 2; }	
	  .shift-grid_mini{ --cols: 2; }
	}	
	@media (min-width: 400px) {/* 400px以上 */
	  .shift-grid{ --cols: 3; }	
	  .shift-grid_mini{ --cols: 3; }
	}
	/* 600px 以上: 4列 */
	@media (min-width: 600px) {/* 600px以上 */
	  .shift-grid{ --cols: 4; }	
	  .shift-grid_mini{ --cols: 4; }
	}
	
	.shift-card_mini{
	  border-radius: 1px;
	  overflow: hidden;
	  box-shadow: var(--shadow-2, 0 1px 2px #2e310340);
	}
		

	/* カード */
	.shift-card{
	  border-radius: 1px;
	  overflow: hidden;
	  box-shadow: var(--shadow-2, 0 1px 2px #2e310340);
      margin-left: 10px;
      margin-top: 10px;
	}
	.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;
	  aspect-ratio: 0.8;
	}

	/* 本文 */
	.shift-card__body{
		text-align:center;
		padding: 10px; 
		background-color: var(--accent-color);
	}
	.shift-card__name{
		font-weight: 700;
		margin-bottom: 4px;
		color: #ffe0a1;	
		text-shadow: 0 0 7px #ffffff5e;
	}
	.shift-card__size{
		display: block; font-size: 0.9rem;
	 	color: #ffffff;
	 	font-weight: 600;
	 }
	 	
	.shift-card__time{
	    color: red;
	    text-shadow: 0px 0px 2px #ff0000;
	    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}

	/* ステータス（簡易） */
	.shift-card__status{
	  display: inline-block;
	  margin-top: 6px;
	  padding: 2px 8px;
	  border-radius: 999px;
	  font-size: 0.8rem;
	  background: #eef2ff;
	  color: red;
	  font-family: monospace;
      border-radius: 5px;
      padding: 5px;
      border: none;	  
      margin:2px;
	}
	.shift-card__status.is-now{
	  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;
	}
	.price-p{
	    text-align: left;
	    padding-left: 10px;	
	}

	.plan-header {
	    padding: 15px 10px;
	    color: #fff;
	    font-size: 1.35rem;
	    font-style: italic;
	}
	.plan-price {
	    padding: 15px 6px;
	    font-size: 1.1rem;
	    font-weight: bold;
	    width: 45%;
	}
	
	.yen-mini{
		font-size: 0.9rem;
		font-family: none;		
	}

    /* Footer */
    .site-footer{
    		border-top:1px solid var(--border);padding:28px 0;
    		color:#64748b;
    		background-color: var(--main-color);
    }
    #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;
	    height: auto;    	
	    max-width: 200px;
	    margin-top: 20px;
    }
    .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; */
    text-shadow: 1px 1px 7px var(--rev-color);    
}
.note{
	font-family:'Noto Sans', sans-serif	;
    font-weight: bold;
    margin: 0 auto;
}
.pricesystem_title{
	text-align:center;	
}


.option_box{
	padding: 30px 5px;
    text-align: center;
    border: 1px solid;
	border-color: rgba(255, 255, 255, 0.18);
    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: -110px;
	    right: 0px;
	    width: 100%;
	    margin:0 auto;
	    text-align:right;		
	    z-index:100;
	    transition-property: bottom;
	    transition-duration: .3s;
	    transition-timing-function: cubic-bezier(.2,.9,.2,1);
	    will-change: bottom;	    
	    
	}	
	
  .fixed_menu.is-show {
    bottom: 0;                 /* せり上がって表示 */
    transition-duration: .8s;  /* 表示はゆっくりめ */
  }
  .fixed_menu.is-hide {
    bottom: -110px;             /* すっと下げて隠す */
    transition-duration: .5s; /* 非表示は少し速く */
  }

	  	  
	
	.schedule_select{
		font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
		text-align:center;
		color:var(--accent-color);
		width:100%;
		margin-bottom:10px;
	}
	.schedule_select td{
		padding: 0;
	    border: 1px solid var(--accent-color);	
	}
	
	.schedule_active{
		background: var(--accent-color);
		    color: #FFF;	
	}
 
    img.swap-image { display: block; width: 100%; height: auto; }
	
	
	.adress_head{
		text-align:center;
		background-color:var(--main-color);
		color:var(--rev-color);		
		min-width:100px;
	}
	
	.adress_body{
		text-align:left;	
		padding:15px;
		color:var(--main-color);
		background-color:var(--rev-color);
	}	
	
	
	@property --glow {
	  syntax: '<color>';
	  inherits: false;
	  initial-value: rgb(255, 0, 0);
	}

	.rgb-rainbow{
	  color: #fff;
	  /* 影は同じ色を重ねて発光感 */
		text-shadow: 0 0 1px var(--glow), 0 0 9px var(--glow), 0 0 6px var(--glow), 0 0 15px var(--glow);
		animation: rainbow-rgb 10s linear infinite;
	}

	/* 7色（赤→橙→黄→緑→青→藍→紫→赤）をRGBで指定。
	   中間はブラウザが sRGB で連続補間してくれます。 */
	@keyframes rainbow-rgb{
	  0%    { --glow: rgb(255,   0,   0); }   /* 赤 */
	  16.7% { --glow: rgb(255, 127,   0); }   /* 橙 */
	  33.3% { --glow: rgb(255, 255,   0); }   /* 黄 */
	  50.0% { --glow: rgb(  0, 255,   0); }   /* 緑 */
	  66.7% { --glow: rgb(  0,   0, 255); }   /* 青 */
	  83.3% { --glow: rgb( 75,   0, 130); }   /* 藍(Indigo) */
	  100%  { --glow: rgb(255,   0, 255); }   /* 紫(Magenta) → 最後に赤へ戻る */
	}

	/* 動きを苦手な方への配慮 */
	@media (prefers-reduced-motion: reduce){
	  .rgb-rainbow{ animation: none; }
	}
	

  /* ---- 基本設定 ---- */
  :root{
  
	  --overscan: 60px; /* 画像を左右に合計 X*2 px大きくしておく */
	  --shift: 30px;     /* 実際に動かす距離 */  
    /* 時間（必要ならここを調整） */
    --t-logo-fade: 1.5s;   /* ロゴ 0→1 */
    --t-move: 3s;         /* 各スライドの移動/ズーム時間 */
    --t-xfade: 1.5s;       /* スライド切替のクロスフェード */
    /* タイムラインの節目（合計：0.5 + 5 + 0.5 + 5 + 0.5 + 5 = 16s弱） */
    --d0: 0s;                                 /* ロゴ開始 */
    --dA: calc(var(--t-logo-fade));           /* A開始（=0.5s） */
    --dAB: calc(var(--dA) + var(--t-move));   /* A→B 切替開始（=5.5s） */
    --dB: var(--dAB);                         /* B開始（=5.5s） */
    --dBC: calc(var(--dB) + var(--t-move));   /* B→C 切替開始（=10.5s） */
    --dC: var(--dBC);                         /* C開始（=10.5s） */
  }

  /* ---- ヒーローエリア ---- */
  .hero_maintitle {
    position: relative;
    width: min(100vw, 1200px);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    background: #000;
  }
  
  .hero_maintitle.ready{
	position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    height: calc(100vh - 110px);
    max-height: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;  	  
  }

  /* 画像はすべて重ねる（初期は非表示） */
  .hero_maintitle img.slide,
  .hero_maintitle img.logo {
    position: absolute;
    inset: 0;
	  width: calc(100% + var(--overscan));
	  object-fit: cover;
	  opacity: 0;
	  transform-origin: center center;
  }

  /* ---- ロゴ（中央配置） ---- */
  .hero_maintitle img.logo {
    width: auto;
    height: auto;
    max-width: 40%;
    max-height: 40%;
    margin: auto;
    inset: 0;           /* 中央 */
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.6));
    animation: logoFadeIn var(--t-logo-fade) var(--d0) forwards;
    pointer-events: none;

  }

  .hero_maintitle picture {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* インラインの opacity:0 を上書き（必要に応じて削除してください） */
    opacity: 1 !important;
  }


  .hero_maintitle img.slide,
  .hero_maintitle img.logo {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transform-origin: center center;
   }


  .hero_maintitle img.slide.test {
    animation: 
    	slideFadeIn 0.5s linear var(--dA) forwards,
    	bigbang-pop 10.0s cubic-bezier(0, 0, 0.04, 0.97) var(--dA) forwards;	    
    z-index: 1;
	position: relative;
    width: 100%;
    min-width: 1500px;
    height: auto;    
   
  }


   
  /* ---- スライド A：0.5sでフェードイン & 5sで左に50px移動、5.5sで0.5sフェードアウト ---- */
  .hero_maintitle img.slide.a {
	  animation:
	    slideFadeIn var(--t-xfade) linear var(--dA) forwards,
	    moveToCenterFromRight linear var(--t-move) var(--dA) forwards,
	    slideFadeOut var(--t-xfade) linear var(--dAB) forwards;
	  z-index: 1;
    filter: brightness(0.8);    
	position: relative;
    width: 100%;
    min-width: 1500px;
    height: auto;    
   
  }

  /* ---- スライド B：5.5sで0.5sフェードイン & 5sで右に50px移動、10.5sで0.5sフェードアウト ---- */
  .hero_maintitle img.slide.b {
	  animation:
	    slideFadeIn var(--t-xfade) linear var(--dB) forwards,
	    moveToCenterFromLeft linear var(--t-move) var(--dB) forwards,
	    slideFadeOut var(--t-xfade) linear var(--dBC) forwards;
	  z-index: 2;
    filter: brightness(0.8);
	position: relative;
    width: 100%;
    min-width: 1500px;
    height: auto;    
  }

  /* ---- スライド C：10.5sで0.5sフェードイン & 5sで10%ズームイン、最終状態で固定 ---- */
  .hero_maintitle img.slide.c {
    animation:
      slideFadeIn var(--t-xfade) linear var(--dC) forwards,
      zoomIn      var(--t-move) linear var(--dC) forwards,
      brighten var(--t-move) linear var(--dC) forwards;
    z-index: 3;
	position: relative;
    width: 100%;
    min-width: 1500px;
    height: auto;    
  }

.main_top_logo{
	animation:logoFadeIn var(--t-logo-fade) forwards;
	z-index:5;
}
  /* ---- キーフレーム ---- */
  @keyframes logoFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes slideFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes slideFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  @keyframes moveLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50px); }
  }
  @keyframes moveRight {
    from { transform: translateX(0); }
    to   { transform: translateX(50px); }
  }
  @keyframes zoomIn {
    from { transform: scale(1); }
    to   { transform: scale(1.05); } /* 10%ズームイン */
  }

  @keyframes zoomInHard {
    from { transform: scale(1); }
    to   { transform: scale(2.0); } /* 10%ズームイン */
  }
  @keyframes zoomOutHard {
    from { transform: scale(0.5); }
    to   { transform: scale(1.0); }
  }
  
	@keyframes moveToCenterFromRight {
	  from { transform: translateX(var(--shift)); }    /* 右に+50pxずらして開始 */
	  to   { transform: translateX(0); }               /* 5秒かけて中央へ */
	}
	@keyframes moveToCenterFromLeft {
	  from { transform: translateX(calc(-1 * var(--shift))); } /* 左に-50pxずらして開始 */
	  to   { transform: translateX(0); }
	}
	
	@keyframes bigbang-pop {
	  0% {
	    transform: translateZ(-220px) scale(0.82);
	    filter: blur(2px) brightness(.95) contrast(1.02);
	    opacity: .9;
	  }
	  35% {                               /* ほぼ最大到達（勢いのピーク） */
	    transform: translateZ(140px) scale(1.28);
	    filter: blur(0) brightness(1.15) contrast(1.06);
	    opacity: 1;
	  }
	  55% {                               /* 反動で少し戻す（自然な減速） */
	    transform: translateZ(70px) scale(1.16);
	  }
	  100% {                              /* 最終安定位置 */
	    transform: translateZ(0) scale(1);
	    filter: none;
	    opacity: 1;
	  }
	}

	/* 残像：本体の軌跡を“手前側”に少し遅れて伸ばしつつ、すぐ消える */
	@keyframes afterimage-trail {
	  0% {
	    opacity: .45;
	    transform: translateZ(40px) scale(1.06);
	  }
	  60% {
	    opacity: .18;
	    transform: translateZ(110px) scale(1.22);
	  }
	  100% {
	    opacity: 0;
	    transform: translateZ(150px) scale(1.3);
	  }
	}	


	@keyframes brighten {
	  0% {
	    filter: brightness(0.1);
	  }
	  50% {
	    filter: brightness(1.3);
	  }	  
	  60% {
	    filter: brightness(0.7);
	  }
	  100% {
	    filter: brightness(0.7);
	  }	  
	}


  /* ---- 簡易ヘルパー：読み込み時にスムーズに始めたい場合の遅延（任意） ---- */
.hero_maintitle.ready img { will-change: opacity, transform; }


.concept-img-main{
	width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 35px;
}

.concept-img-L{
		float:left;
		padding:20px;
		width:100%;
		max-width:350px;
}

.concept-img-R{
		float:right;
		padding:20px;
		width:100%;		
		max-width:350px;
}

@media (max-width:699.98px){
	.concept-img-R,
	.concept-img-L{
		float:none;
		width: 100%; 
	}	
}

.concept-h{
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 15px;
	margin-bottom: 10px;
    font-family: 'Noto Serif JP', serif;
    font-size: 25px;
    filter: drop-shadow(1px 3px 5px white);
}

.concept-b{
    margin-bottom: 65px;
    font-family: 'Noto Serif JP', serif;
    font-size: 15px;
    overflow:auto;
}

    .sched-nav{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
    .sched-nav a{display:inline-block;padding:15px;border:1px solid #ddd;text-decoration:none;color:#333;background:#fff;}
    .sched-nav a.active{border-color:#111;background:#111;color:#fff}
    .sched-nav a.sat{color:#1976d2;border-color:#cfe6ff}
    .sched-nav a.sun{color:#d32f2f;border-color:#ffc9c9}
    .cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
    .cast-card{background-color: var(--accent-color);}
    .cast-card a{display:block;color:inherit;text-decoration:none}
    .cast-thumb{
    	width:100%;
    	background:#eee;display:flex;align-items:center;justify-content:center;
    	overflow:hidden;
    	aspect-ratio: 0.625;
    }
    .cast-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .cast-meta{
    	padding:.6rem .75rem;
    	text-align:center;
    }
    .cast-name{    font-weight: 700;
    margin-bottom: 4px;
    color: #ffe0a1;
    text-shadow: 0 0 7px #ffffff5e;}
    .cast-sub{
    	font-size: 14px;
    	color:var(--rev-color);
    	margin-top:.15rem;
	    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    }
    .cast-time{
    	color:red;
  	    text-shadow: 0px 0px 2px #ff0000;
		font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
    .status-btn{    border-radius: 6px;padding: 4px;border: none;}
	.status-btn.is-working{color:green;}
	.status-btn.is-reserve{color:red;}