@charset "UTF-8";
/* ----------------------------------------------------------------------
 基本設定
---------------------------------------------------------------------- */
@media only screen and (max-width: 1600px) {
    .header-bar-inner {
        padding: 20px 45px;
    }

    .top-slider {
        margin-left: 45px;
        margin-right: 45px;
    }

    .top-slider-content-inner {
        padding: 60px 15px 20px 15px;
    }

    .top-slider-content-inner:before {
        bottom: 90px;
    }

    .top-slider-content-inner::after {
        bottom: 60px;
    }

    .top-slider-logo {
        font-size: 64px;
    }

    .content-inner {
        padding: 0 45px;
    }

    #index-1 .content-inner {
        padding-left: 90px;
    }

    #index-points .content-inner {
        padding-left: 90px;
    }

    .content01-title {
        font-size: 40px;
    }

    .content02-title, .content03-title {
        font-size: 32px;
    }

    #index-text-2 h2 {
        font-size: 56px;
    }

    .text02-button strong {
        font-size: 22px;
    }

    .text02-button span {
        font-size: 18px;
    }

    #index-1:before {
        left: 45px;
    }

    #index-points:before {
        left: 45px;
    }

    .footer-inner {
        padding: 0 45px;
    }

    .content03-item:not(:first-child) .content03-img {
        margin-top: 0px;
    }

    .content01-text .contact-line {
        font-size: 26px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .content01-text .contact-tel {
        font-size: 32px;
    }

    .concept-body {
        padding-left: 40px;
    }
}

@media only screen and (max-width: 1440px) {
    .content01-text .contact-line {
        font-size: 22px;
        padding-top: 18px;
        padding-bottom: 18px;
        background-size: 36px auto;
        padding-left: 45px;
    }
    .content01-text .contact-tel {
        font-size: 24px;
        line-height: 36px;
        margin-left: 0;
    }
}

@media only screen and (max-width: 1200px) {
    .header-bar-fixed ~ .top-slider-wrapper {
        margin-top: 60px;
    }

    .header-bar-fixed ~ .signage {
        margin-top: 60px;
    }

    .header-bar {
        border-bottom: 0 !important;
        height: auto !important;
    }

    .header-bar-inner {
        align-items: center;
        display: flex !important;
        padding: 10px 15px;
    }

    .header-bar .logo {
        line-height: 40px;
        margin-left: 0;
        width: auto;
    }

    .header-bar .logo img {
        max-height: 40px;
    }

    .header-bar-fixed .global-nav {
        position: fixed;
        top: 0;
    }

    .global-nav {
        display: block !important;
        position: fixed !important;
        right: 0;
        top: 0;
        width: 0;
        height: 100% !important;
        overflow-y: auto;
        z-index: 9999;
        transition: all 0.3s;
        opacity: 0;
        visibility: hidden;
        background: rgba(255, 255, 255, 0.8);
    }

    .global-nav-button {
        border: none;
        display: block;
        font-size: 16px;
        height: auto;
        line-height: 1;
        position: relative;
        width: auto;
        z-index: 1000;
    }

    .global-nav-button::before, .global-nav-button::after {
        display: none;
    }

    .global-nav > ul {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 100%;
        padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
    }

    .global-nav > ul > li > a {
        height: 80px;
        padding: 0;
    }

    .global-nav > ul > li > a::after, .global-nav .current-menu-item > a::after {
        bottom: 5px;
    }

    .content01-text {
        padding-left: 0;
    }

    .content01-text .contact-line, .content01-text .contact-tel {
        display: block;
    }
}

@media only screen and (max-width: 991px) {
    .admin-bar .header-bar-fixed ~ .top-slider-wrapper, .header-bar-fixed ~ .top-slider-wrapper {
        margin-top: 60px;
    }

    .top-slider-wrapper {
        display: block;
    }

    .top-slider {
        height: calc(40vh - 60px) !important;
        margin: 0;
        width: 100%;
    }

    .top-slider-content {
        width: 100% !important;
    }

    .top-slider-content-inner {
        width: 100% !important;
    }

    .top-slider-text {
        position: static;
    }

    .top-slider-wrapper .header-youtube, .top-slider-wrapper .header-video {
        /* height: calc(70vh - 55px); */
        height: 350px;
    }

    .top-slider-logo {
        margin: 0;
        font-size: 36px;
    }

    .top-slider-logo strong {
        font-size: 50px;
    }

    .top-slider-logo small {
        font-size: 24px;
    }

    body.single-news .main > .inner {
        padding: 0 30px 30px;
        width: 91%;
    }
}

@media only screen and (max-width: 767px) {	
    .header-youtube:not(.bg-image){
        height: calc(100svw * 9 / 16) !important;
        margin-inline: auto;
        border-radius: 0;
    }
    
    .top-slider-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    .global-nav-button.active + .global-nav {
        width: 100%;
    }

    .top-slider-content-inner::after {
        display: none;
    }

    p {
        font-size: 16px;
        line-height: 2;
    }

    #index-1 {
        margin: 35px 0 0;
    }

    #index-1::before {
        left: 0;
    }

    #index-points:before {
        left: 0;
    }

    #index-1 .content-inner {
        padding-left: 15px;
    }

    #index-points .content-inner {
        padding-left: 15px;
    }

    #index-text-1 {
        padding: 50px 0 0;
    }

    #index-text-1 .flex {
        flex-direction: column;
    }

    .content01-img, .content01-text {
        width: 100%;
    }

    .content01-img {
        padding-right: 0;
    }

    .content01-text {
        padding-top: 20px;
        padding-right: 0;
        text-align: center;
    }
    .content01-text>p{
        text-align: left;
    }

    .content01-text .contact-line {
        background-size: 36px auto;
        display: inline-block;
        font-size: 20px;
        padding-left: 45px;
    }

    .content01-text .contact-tel {
        font-size: 28px;
        display: inline-block;
        margin-left: 0;
    }

    .content-inner {
        padding: 0 15px;
    }

    .content03-item h2 {
        left: -5px;
    }

    #index-points .content02-inner {
        padding: 0 15px;
    }

    #index-text-2 {
        margin: 70px 0 0;
    }

    #index-text-2 .contact-text .contact-tel {font-size: 32px;}
    #index-text-2 .contact-text {
        font-size: 18px;
        margin-top: 30px;
    }
    #index-text-2 .open-title {
        padding: 0 20px;margin-top: 24px;
    }

    #index-3column {
        padding: 50px 0 0;
    }

    #index-3column .flex {
        flex-direction: column;
    }

    #index-3column .content02-item {
        padding: 0 0 20px;
    }

    .concept-slider {
        padding: 50px 0;
    }

    .concept-slider .slick-slide p {
        margin: 10px;
    }

    .concept-img {
        margin: 0 0 40px;
    }

    #index-text-2 h4 {
        font-size: 24px;
    }

    #index-points .flex {
        flex-direction: column;
    }

    .content03-item {
        margin: 0;
        width: 100%;
    }

    .content03-item .content03-img, .content03-item .content03-text {
        padding-right: 0;
        width: 100%;
    }

    .content03-item h3 {
        margin: 20px 0 0;
    }

    .content03-item .content03-title {
        font-size: 24px;
        margin: 20px 0;
    }

    .content03-text p {
        font-size: 16px;
    }

    #index-blog .inner, #index-instagram .inner {
        padding: 0 15px;
    }

    .article03 {
        background: #fff;
    }

    .article03 .article03-content {
        padding: 10px !important;
    }

    .headline-primary span {
        display: block;
    }

    .top-slider-logo {
        font-size: 7vw !important;
    }

    .top-slider-text {
        display: none;
    }

    #content01 .content01-img{
        text-align: center;
    }

    #index-blog{
        padding-top: 30px;
    }

    #index-blog .headline-primary, #index-instagram .headline-primary {
        font-size: 32px;
        margin: 0 0 24px;
    }

    #index-instagram {
        padding: 0 0 50px;
    }

    #index-instagram .follow-btn {
        right: 15px;
    }

    #index-text-2 .content01-inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    #index-text-2 .flex {
        flex-direction: column;
    }

    .concept-img, .concept-body {
        width: 100%;
    }

    .concept-body {
        padding-left: 0;
    }

    #index-text-2:before {
        right: 0;
    }

    #index-text-2 h2 {
        font-size: 24px;
    }

    #index-text-2 .content01-title {
        font-size: 30px;
    }

    .text02-button {
        font-size: 20px;
        padding: 15px 15px 15px 110px;
    }

    .content02-item h3 {
        font-size: 18px;
    }

    .content01-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .content01-title small {
        font-size: 24px;
    }

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

    .content03-item:nth-child(2n+1) .content03-text {
        padding-left: 0;
        padding-right: 0;
    }

    .content03-item:not(:first-child) .content03-img {
        margin-top: 0;
    }

    .content03-item .content03-body {
        border-left: none;
    }

    .content03-item:nth-child(2n) .content03-text {
        padding-right: 0;
    }

    .content02-button {
        font-size: 16px;
        margin: 15px auto 40px;
        line-height: 100px;
        position: relative;
        width: 100px;
        height: 100px;
    }

    .article03-title {
        margin: 0;
    }

    .footer {
        padding-bottom: 70px;
    }

    .footer-inner {
        padding: 0 15px;
    }

    .footer-logo img {
        width: 200px;
    }	

    .footer .footer_address, .footer .footer_phone {
        display: block;
    }

    .footer .footer_address {
        font-size: 18px;
    }

    .footer .footer_phone {
        margin-left: 0;
    }

    .footer-menu {
        margin: 50px 0 0;
    }

    .footer-menu ul li {
        width: 50%;
        padding: 10px 20px;
    }

    .copyright {
        margin: 0;
        padding:0;
    }

    
    .top-slider-wrapper:after,
    #index-text-2:after, #index-blog:after {
        background-size: 100% auto;
        width: 92px;
        height: 253px;
    }
    .top-slider-wrapper:before{
        background-size: 100% auto;
        width: 100%;
        height: 100%;
    }

    .blog-inner .headline-primary {
        line-height: 1;
    }

    .blog-inner .headline-primary img {
        height: 30px;
        width: auto;
    }

    .admin-bar .header-bar-fixed {
        top: 46px;
    }

    .contact-text > span {
        flex-direction: column;
    }

    .contact-text .contact-tel {
        letter-spacing: 1px;
    }

    #index-instagram .flex {
        flex-direction: column;
        align-items: start;
    }

    #index-bottom {
        margin: 70px 0 0;
        padding: 20px 0;
    }

    .header:before {
        width: 135px;
        height: 148px;
        bottom: -60px;
        right: 15px;
    }

    .post-content .s_table {
        white-space: normal;
        padding: 0;
        overflow: hidden;
    }

    table.price_table th {
        width: auto;
    }
    .post-title{
        font-size: 18px !important;
    }
    
    
    table.menu-table tr{
        display: flex;
        flex-wrap: wrap;
    }
    table.menu-table tr th{
        display: block;
        width: 100%;
    }
    table.menu-table tr td{
        display: block;
        width: 50%;
    }
	
	.shop_content {
		flex-direction: column;
	}
	
	.shop_content .img, .shop_content .shop_content_table {
		width: 100%;
	}
}

@media screen and (min-width: 768px){
    .pcbr { display:block; }
    .spbr { display:none; }
}

@media screen and (max-width: 767px){
    .top-slider span{
        border-radius: 0;
    }
    .pcbr { display:none; }
    .spbr { display:block; }
    .footer_phone_nmber {
        display: flex;
        flex-direction: column;
    }
    .content03-item .content03-text::before {
        bottom: -30px;
        width: 30px;
        height: 81px;
        background-size: cover;
    }
}

@media only screen and (max-width: 575px) {
    .global-nav > ul > li > a {
        line-height: 80px;
        height: 80px;
    }

    .global-nav > ul > li > a::after, .global-nav .current-menu-item > a::after {
        bottom: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .post-content p {
        font-size: 17px !important;
    }
}

@charset "UTF-8";
/* ======================================================================
   FV（ファーストビュー）洗練ミニマル仕様
   既存の top-slider 関連スタイルに上書き／追記する形で動作します
   ====================================================================== */

/* ---- 1. 動画背景の上にグラデーションオーバーレイ ---- */
.top-slider-wrapper {
    position: relative;
    overflow: hidden;
}

/* 上下から薄く落とすグラデ（文字の視認性を確保しつつ動画の動きは残す） */
.top-slider-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.10) 30%,
            rgba(0, 0, 0, 0.10) 60%,
            rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    z-index: 2;
}

/* 微細なノイズ感を演出する radial グラデ（質感アップ） */
.top-slider-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 60%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
}

/* スライダー／動画は z-index:1 想定。コンテンツは z-index:3 で前面に */
.top-slider,
.header-video,
.header-youtube {
    position: relative;
    z-index: 1;
}

.top-slider-content {
    z-index: 3;
}


/* ---- 2. キャッチコピー枠（中央寄せレイアウトに変更） ---- */
.top-slider-catch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    color: #fff;
    text-align: center;
    width: 94%;
    max-width: 1100px;
    pointer-events: none;
    /* テキストにわずかな影を入れて動画背景でも常に読める */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* 縦線アクセント（コピーの上） */
.top-slider-catch::before {
    content: "";
    display: block;
    width: 1px;
    height: 0;
    margin: 0 auto 28px;
    background: rgba(255, 255, 255, 0.85);
    animation: fv-line-grow 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

/* 英文タグライン（小さめ） */
.top-slider-catch .fv-tagline {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 14px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 28px;
    opacity: 0;
    animation: fv-fade-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

/* メインコピー */
.top-slider-catch .fv-headline {
    font-family: 'Noto Serif JP', 'Yu Mincho', '游明朝', serif;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.15em;
    margin: 0;
}

/* 各行をブロック化（改行は<br>ではなく.lineの構造で表現） */
.top-slider-catch .fv-headline .line {
    display: block;
    white-space: nowrap;
    text-indent: 0.15em; /* letter-spacingの右端アキを補正 */
}

/* span(.char) 自体は折り返しの起点にしない */
.top-slider-catch .fv-headline .char {
    white-space: nowrap;
}

/* 文字単位フェード（spanごとに animation-delay）
   ※ iOS Safari で filter:blur() が適用されたままだとテキストがビットマップ
      ラスタライズされて残り、2行目などで滲んで見える不具合がある。
      animation-fill-mode を backwards にし、ベーススタイルを「最終表示状態」
      （filter/transform/opacity を素の値）にすることで、アニメ完了後に filter
      プロパティ自体が外れ、ラスタライズレイヤーが解除されてシャープに表示される。 */
.top-slider-catch .fv-headline .char {
    display: inline-block;
    animation: fv-char-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.top-slider-catch .fv-headline .char.space {
    width: 0.4em;
}

/* 改行ブレイク用 */
.top-slider-catch .fv-headline br + .char,
.top-slider-catch .fv-headline .br {
    display: block;
    height: 0.3em;
}

/* 下線（コピーの下にスーッと伸びる） */
.top-slider-catch::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    margin: 36px auto 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.85) 50%,
        transparent 100%);
    animation: fv-underline 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
}


/* ---- 3. 既存の .top-slider-logo / .top-slider-text を非表示化 ----
   PHP側で出力される旧キャッチは非表示にして、新キャッチに差し替え
   （ボタン .top-slider-content は残す） */
.top-slider-content .top-slider-logo,
.top-slider-content .top-slider-text {
    display: none !important;
}


/* ---- 4. 丸ボタン（.top-slider-content）にブリージング演出 ---- */
.top-slider-content {
    animation: fv-breathe 4s ease-in-out 2.4s infinite;
    opacity: 0;
    animation:
        fv-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) 2.0s forwards,
        fv-breathe 4.5s ease-in-out 3.2s infinite;
}

.top-slider-content-inner {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s ease;
/*    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);*/
}

.top-slider-content-inner:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}


/* ---- 5. キーフレーム ---- */
@keyframes fv-line-grow {
    0%   { height: 0; opacity: 0; }
    100% { height: 56px; opacity: 1; }
}

@keyframes fv-fade-up {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fv-char-in {
    0%   { opacity: 0; transform: translateY(24px); filter: blur(6px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes fv-underline {
    0%   { width: 0; }
    100% { width: 240px; }
}

@keyframes fv-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}


/* ---- 6. レスポンシブ調整 ---- */
@media only screen and (max-width: 991px) {
    .top-slider-catch {
        width: 92%;
    }
    .top-slider-catch .fv-tagline {
        font-size: 11px;
        letter-spacing: 0.35em;
        margin-bottom: 20px;
    }
    .top-slider-catch::before {
        margin-bottom: 20px;
    }
    .top-slider-catch::after {
        margin-top: 26px;
    }
    @keyframes fv-line-grow {
        0%   { height: 0; opacity: 0; }
        100% { height: 40px; opacity: 1; }
    }
    @keyframes fv-underline {
        0%   { width: 0; }
        100% { width: 160px; }
    }
}

@media only screen and (max-width: 767px) {
    .top-slider-catch {
        width: 96%;
    }
    .top-slider-catch .fv-headline {
        font-size: clamp(18px, 5.6vw, 28px);
        line-height: 1.85;
        letter-spacing: 0.08em;
    }
    .top-slider-catch .fv-tagline {
        font-size: 10px;
        margin-bottom: 16px;
    }
    .top-slider-wrapper::before {
        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(0, 0, 0, 0.2) 40%,
                rgba(0, 0, 0, 0.2) 60%,
                rgba(0, 0, 0, 0.6) 100%);
    }
}


/* ---- 7. アクセシビリティ：モーション軽減設定への配慮 ---- */
@media (prefers-reduced-motion: reduce) {
    .top-slider-catch::before,
    .top-slider-catch::after,
    .top-slider-catch .fv-tagline,
    .top-slider-catch .fv-headline .char,
    .top-slider-content {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .top-slider-catch::before { height: 56px; }
    .top-slider-catch::after { width: 240px; }
}