@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================
   カスタム追加CSS（ここから下に記述）
   ========================================== */

.is-vertical-text {
    display: block !important;
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    max-height: 500px;
    overflow-x: auto;
    padding: 10px;
}

/*-------------------------------------------
         お知らせスクロール
-------------------------------------------*/

/* お知らせエリア全体（スクロールと枠線） */
.custom-news-scroll {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
    padding-top: 10px;
    border: 1px solid #333333;
    border-radius: 6px;

    /* ▼ スマホ・Firefox対応用のスクロールバー設定を追記 ▼ */
    scrollbar-width: thin; /* スクロールバーの太さ（thinで細めになります） */
    scrollbar-color: #ccc #333333; /* つまみの色  背景(トラック)の色 */
}

/* スクロールバーのデザイン（Webkit系ブラウザ向け・変更なしでOK） */
.custom-news-scroll::-webkit-scrollbar { width: 6px; }
.custom-news-scroll::-webkit-scrollbar-track { background: #333333; }
.custom-news-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.custom-news-scroll::-webkit-scrollbar-thumb:hover { background: #999; }

/* サムネイルの枠全体を小さくして中央寄せ */
.custom-news-scroll .p-postList__thumb {
    width: 300px !important; /* ここで画像の最大幅を調整（%でも可） */
    margin: 0 auto !important; 
    box-shadow: none !important;
}

/* 画像そのものを元の比率で表示する */
.custom-news-scroll .c-postThumb__img {
    object-fit: contain !important;  /* 見切れないように全体を表示 */
}

/* タイトルと抜粋文を中央寄せ */
.custom-news-scroll .p-postList__body {
    text-align: center !important;
}

/* 日付を中央寄せ */
.custom-news-scroll .p-postList__meta {
    justify-content: center !important;
}

/* ホバー時の「浮き上がり」や「影が濃くなる」動きを無効化 */
.custom-news-scroll .p-postList__link:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* ホバー時の「画像がズームする・少し薄くなる」動きを無効化 */
.custom-news-scroll .p-postList__link:hover .c-postThumb__img {
    transform: none !important;
    opacity: 1 !important;
}

/* アニメーションの変化時間（transition）をゼロにして即座に切り替える */
.custom-news-scroll .p-postList__link,
.custom-news-scroll .c-postThumb__img {
    transition: none !important;
}

/* -------------------------------------------
 * NO IMAGE画像のサムネイルを非表示にする
 * ------------------------------------------- */
.custom-news-scroll .p-postList__thumb.noimg_ {
    display: none !important;
}

/*-------------------------------------------
           子ページタイトル削除
-------------------------------------------*/
.page .c-pageTitle {
    display: none !important;
}

.post_content {
    margin: 0 !important;
    padding-top: 0em;
}

.l-content {
    padding-top: 0em;
}

/*-------------------------------------------
           Aboutセクション調整
-------------------------------------------*/
@media screen and (min-width: 960px) {
    .about_title {
        margin-left: 2em;
    }
    .about_txt {
        margin-top: 50px;
    }
}

/*-------------------------------------------
           font
-------------------------------------------*/

.yuji-syuku-regular {
    font-family: "Yuji Syuku", serif;
    font-weight: 400;
    font-style: normal;
}

.yuji-mai-regular {
    font-family: "Yuji Mai", serif;
    font-weight: 400;
    font-style: normal;
}

/*-------------------------------------------
           underline
-------------------------------------------*/

.underline {
    border-bottom: 1px solid #333333;
}

.underline2 {
    border-bottom: 2px solid #ffffff;
}

/*-------------------------------------------
           ループスライダー
-------------------------------------------*/
.loop-slider {
    display: flex;
    overflow: hidden;
    gap: 1rem; /* 画像間の余白を指定 */
}

.loop-slider .wp-block-group__inner-container,
.loop-slider .swell-block-columns {
    display: contents;
}

.loop-slider .swell-block-columns__inner {
    flex-wrap: nowrap;
    animation: infinity-scroll-left 30s infinite linear; /* アニメーションの時間を指定 */
}

.loop-slider .swell-block-column figure {
    width: 600px; /* 画像の横幅を指定（パソコン） */
    position: relative;
}

.loop-slider .swell-block-column figure::before {
    padding-top: 70%; /* 画像の縦横比を指定 */
    display: block;
    content: "";
}

.loop-slider .swell-block-column figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 959px) {
    .loop-slider .swell-block-column figure {
        width: 200px; /* 画像の横幅を指定（スマホ） */
    }
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/*-------------------------------------------
         デフォルトフッター削除
-------------------------------------------*/

.l-footer__foot{
    display:none;
}

/*-------------------------------------------
         フッターリスト・削除
-------------------------------------------*/
ul.wp-block-list.-list-flex.is-style-index li::before {
    display: none !important;
    content: none !important;
}

/* =======================================
   SWELL: リスト型をテキスト型風に改造するCSS
   （画像非表示・タイトル下線・抜粋文表示・右矢印）
======================================= */

/* 1. サムネイル画像を強制的に非表示にする */
.custom-text-list .p-postList__thumb {
    display: none !important;
}

/* 2. リンク全体（各項目）のレイアウト調整と、仕切り線の画像設定 */
.custom-text-list .p-postList__link {
    position: relative;
    padding: 15px 45px 25px 0 !important; /* 仕切り線用に下の余白（25px部分）を少し広めに確保 */
    display: block !important;
    border-bottom: none !important; /* 元の直線（border）を消す */
    
    /* 画像を仕切り線として一番下に配置 */
    background-image: url('https://sushidokoro-kan.com/wp-content/uploads/2026/07/yoko-1.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 120% 10px; /* 100%で横幅いっぱい、8pxが縦幅（太さ） */
}

/* 3. 画像が消えた分の余白を詰める */
.custom-text-list .p-postList__body {
    margin-left: 0 !important;
    margin-top: 0 !important;
	width:auto;
	
}

/* 4. タイトルに下線を引く */
.custom-text-list .p-postList__title {
    border-bottom: 1px solid #949593; /* 下線の色と太さ */
    display: inline-block;
    line-height: 1.5;
    margin-bottom: 5px;
}

/* 5. 本文（抜粋文）のスタイルと強制表示 */
.custom-text-list .p-postList__excerpt {
    display: block !important; /* 確実に表示させる */
    font-size: 0.9em;
    color: #666;
    margin-top: 8px;
    line-height: 1.6;
}

/* 6. メタ情報（日付やカテゴリ）の余白調整 */
.custom-text-list .p-postList__meta {
    margin-top: 10px !important;
}

/* 7. 右端・上下中央に矢印を配置する */
.custom-text-list .p-postList__link::after {
    content: '→';
    position: absolute;
    top: 50%;
    right: 15px; /* 右端からの距離 */
    transform: translateY(-50%);
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    transition: right 0.3s ease;
}

/* 8. ホバー時の矢印のアニメーション */
.custom-text-list .p-postList__link:hover::after {
    right: 8px;
}

/* =======================================
   【全ページ共通】カテゴリラベルのスタイル・色分け（完全版）
======================================= */

/* 基本スタイル（両方のクラスに対応） */
body span.p-postList__cat,
body span.c-postThumb__cat {
    padding: 2px 8px !important;
    border-radius: 3px !important;
    color: #fff !important;
    background-color: #999 !important;
    border: none !important;
}

/* フォルダアイコンを消したい場合は以下のコメントアウト（/* * /）を外す */
/*
body span.p-postList__cat::before,
body span.c-postThumb__cat::before {
    display: none !important;
}
*/

/* ---------------------------------------
   カテゴリごとの個別カラー設定
--------------------------------------- */

/* ID:11（おすすめ）の色 */
body span.p-postList__cat[data-cat-id="11"],
body span.c-postThumb__cat[data-cat-id="11"] {
    background-color: #ff9800 !important;
}

/* ID:10（店休日）の色 */
body span.p-postList__cat[data-cat-id="10"],
body span.c-postThumb__cat[data-cat-id="10"] {
    background-color: #e53935 !important;
}

/* ID:9（お知らせ）の色 */
body span.p-postList__cat[data-cat-id="9"],
body span.c-postThumb__cat[data-cat-id="9"] {
    background-color: #039be5 !important;
}