/*
Style.cssが親テーマのみのページに適用されないようにstyle.cssの内容はここに記述します。
*/

:root {
    --font-color: rgb(83, 71, 65);
    --header-color: rgb(35, 24, 21);
    --footer-color: rgb(35, 24, 21);
}

html {
    color: var(--font-color);

    body {
        color: var(--font-color);
    }
}

/*** 共通ページ：共通スタイル ***/

/* heading-bottom: image */
main#main {
    background-color: #ffffff;
    padding-top: 0;
    /* default: 142px */

    & .header-under-image {
        background-image: url(https://sanshiro-kamisu.tsukubair.com/wp-content/uploads/2026/04/5f1338bbefd62bb22648ddba4356b993.jpg);
        background-repeat: repeat;

        /* 142px: header-size */
        width: 100%;
        height: calc(142px * 2);

        @media (width <= 770px) {
            /* header to humberger */
            height: 142px;
        }
    }

    @media (width <= 770x) {
        padding-top: 0;
    }
}

#page_header h2,
#main-contents h2,
#main-contents h3,
#main-contents p,
#main-contents table th,
#main-contents table td {
    color: var(--font-color);
}

#main-contents h2 {
    margin: 0;
    padding: 1rem 0 1rem 0;
}

#main-contents h3 {
    margin: 1rem 0 1rem 0;
    padding: 0;
    border: none;
}

#main-contents p {
    margin: 0;
}

#main-contents hr {
    width: 100%;
    background-color: rgb(136, 136, 136);
}

/* page_XXX */
header#header.common-top-header,
main#main-contents [class^=page_] {
    color: var(--font-color);
}

/* button */
#main-contents .wp-block-buttons > .wp-block-button .wp-block-button__link {
    color: var(--font-color) !important;

    &::after {
        background-color: var(--font-color) !important;
    }
}

/*** ユーティリティ ***/

.no-break-text {
    display: inline-block;
}

@media (width <= 480px) {
    .sp-flex-to-column {
        flex-direction: column;
        gap: 0rem !important;
    }

    .sp-clear-padding {
        padding: 0 !important;
    }
}

/* ul li */
ul.menu-list {
    column-count: 2;
    column-gap: 6rem;

    @media (width <= 480px) {
        column-count: 1;
        column-gap: 1rem;

        & .break-from {
            break-before: auto !important;
        }

    }

    /* sub-menu styles */

    & ul.sub-menu_no-margin,
    & ul.sub-menu_margin {
        list-style-type: none;
        break-inside: avoid;
    }

    & ul.sub-menu_no-margin {
        margin: 0 !important;
    }

    & ul.sub-menu_margin {
        margin: 0 0 0 2rem !important;
    }

    & > li,
    & > li + li {
        margin: 0 !important;
        padding: 0.5rem;
    }

    /* utitlity */

    & .no-marker {
        list-style-type: none;
        margin-left: -3rem !important;
    }

    & .annotation {
        font-size: 0.75rem;
        vertical-align: text-bottom;
    }

    & .break-from {
        break-before: column;
        /* IE/Edge */
        column-break-before: always;
    }
}

.no-break {
    column-count: 1 !important;
}

/* button アニメーション */
.btn-sink {
    display: inline-block;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;

    &:hover {
        transform: translateY(4px);
        /* 4px下に移動 */
    }

    &:active {
        transform: translateY(6px);
    }
}

/*** ***/

/*** 三城グループ総合トップ ***/
main#main:has(.sanshiro-group-page) {
    /* size of header */
    padding-top: 142px !important;
    background-color: rgb(242, 238, 228);

    color: var(--font-color);

    & #inner-content {
        width: 100%;
        max-width: 100%;

        & .main-contents_wrapper {
            width: 100%;
            padding-left: 15rem;
            padding-right: 15rem;

            /* tablet */
            @media (width <= 1024px) {
                padding-left: 10rem;
                padding-right: 10rem;
            }

            @media (480px <= width < 1024px) {
                padding-left: 5rem;
                padding-right: 5rem;
            }

            @media (width <= 480px) {
                padding-left: 0rem;
                padding-right: 0rem;
            }
        }
    }

    /* ホバーアニメーション */

    & .hover-sink {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        /* 動きを滑らかにする */

        &:hover {
            transform: translateY(8px);
            /* 下方向に8px移動 */
        }
    }
}

.sanshiro-group-page {

    & h3 {
        border-bottom: 1px solid #c2beb7;
        padding-bottom: 0.6em;
        margin: 0 !important;
    }

    & .body-top {

        & .sanshiro-card {
            background-color: transparent;

            & .sinsyu-soba_img-logo {
                background-image: url(https://sanshiro-kamisu.tsukubair.com/wp-content/uploads/2026/04/4a7c70825d57509b9bc6f18cabb3533b.jpg);
            }

            & .kaisen-miyabi_img-logo {
                background-image: url(https://sanshiro-kamisu.tsukubair.com/wp-content/uploads/2026/04/8e33d69ef6805b1ebb843b9f34835f88-edited.jpg);
            }

            & .sinsyu-soba_img-logo,
            & .kaisen-miyabi_img-logo {

                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;

                aspect-ratio: 1 / 1;
                width: 100%;

                & .sinsyu-soba-figure,
                & .kaisen-miyabi-figure {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    width: 100%;
                    height: 100%;
                    margin: 0;
                }

                & .sinsyu-soba-figure img {
                    object-fit: cover;
                    width: 80%;
                    height: auto;
                }

                & .kaisen-miyabi-figure img {
                    object-fit: cover;
                    width: 50%;
                    height: auto;
                    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.8));
                }
            }
        }
    }

    & .body-bottom {

        & .wrapper-hotel-images {
            position: relative;
            /* 子要素の absolute の起点になる */
            width: 100%;
            margin: 0 auto;
            /* 中央寄せ */
        }

        & .img-grid {
            /* grid-layout */
            align-items: stretch;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: repeat(6, minmax(0, 1fr));
            /* grid-template-areas:
                "building bath"
                "building bed"; */
            gap: 0;

            aspect-ratio: 21 / 9;

            & .building {
                /* grid-area: building; */
                grid-column: 1 / 3;
                grid-row: 1 / 7;
            }

            & .bath {
                /* grid-area: bath; */
                grid-column: 3 / 5;
                grid-row: 1 / 4;
            }

            & .bed {
                /* grid-area: bed; */
                grid-column: 3 / 5;
                grid-row: 4 / 7;
            }

            /* figure */

            & :is(.building, .bath, .bed) {
                height: 100%;
                margin: 0;
                min-width: 0;
                overflow: hidden;

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            /* logo */

            & .hotel-logo {
                z-index: 1001;
                grid-column: 2 / 4;
                grid-row: 3 / 5;
                place-self: center;

                display: flex;
                height: 100%;
                width: 100%;

                img {
                    width: 100% !important;
                    height: auto !important;
        object-fit: contain;
                }
            }
        }
    }
}

/*** 海鮮雅トップページ ***/
#main:has(.page_kaisen-top) {
    padding-top: 0;

    & #inner-content:has(.page_kaisen-top) {
        padding: 0;
        margin: 0;
    }

    & #main-contens {
        color: var(--font-color);
    }

    @media (width <= 780px) {
        padding-top: 60px;
    }
}

.kaisen-page-top_figure {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    aspect-ratio: 16 / 9;

    background-image: url(https://sanshiro-kamisu.tsukubair.com/wp-content/uploads/2026/04/93264dc5016eeb493347bf893011e02b-e1776042554997.jpg);
    background-size: cover;
    background-position: center;

    & .kaisen-background_logo {
        width: auto;
        height: 50%;

        color: #ffffff;
        font-size: 5rem;
        text-align: center;

        filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.8)) brightness(1.1);
    }
}

.page_kaisen-top {

    & .content-sushi {
        /* grid-layout */
        grid-template-columns: 2fr 1fr 2fr;
        grid-template-areas: "text title img";

        height: 100vh;

        @media (width <= 1024px) {
            height: auto;

            & > *:not(:last-child) {
                padding: 1rem !important;
            }
        }

        @media (480px < width <= 1024px) {
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas:
                "text title"
                "img img";
        }

        @media (width <= 480px) {
            grid-template-columns: 1fr;
            grid-template-areas:
                "title"
                "text"
                "img";
        }

        & .detail-text {
            grid-area: text;
            opacity: 0.5;
        }

        & .title-text {
            grid-area: title;
        }

        & .sushi-image {
            grid-area: img;
        }

        & .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            color: rgb(35, 24, 21) !important;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        & .detail-text {
            justify-content: right;

            @media (480px < width <= 1200px) {
                line-height: 2 !important;
            }

            @media (width <= 480px) {
                justify-content: center;
                line-height: 2 !important;
            }
        }

        & h3.vertical-text {
            margin: 1rem 0 0 0 !important;
            padding: 0 !important;
            border: none !important;
        }

        & .sushi-image {
            /* figure tag */
            text-align: right;
            background-color: white;

            display: flex;
            justify-content: stretch;
            align-items: flex-end;

            & img {
                width: 100%;

                /* グラデーション */
                mask-image: linear-gradient(to left, black 90%, transparent 100%);
                -webkit-mask-image: linear-gradient(to left, black 90%, transparent 100%);
            }
        }
    }

    & .content-menu {
        min-height: 80vh;

        & .width-handle {
            width: min(928px, 90%);
            margin: 0 auto 0;

            /* adjust width .menu-image-grid */
            @media (width <= 780px) {
                height: auto;
            }

            & h2 {
                border: none !important;
            }

            & p {
                width: auto;
                margin-left: 0;
                margin-right: 0;
            }

            & .menu-image-grid {

                & figcaption {
                    font-size: 1rem;
                }

                & .dark-background img {
                    background-color: #000000;
                }

                @media (width <= 780px) {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
                }

                @media (width <= 480px) {
                    grid-template-columns: 1fr !important;
                    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
                }
            }

            & .right-button {
                /* grid-layout */
                grid-template-columns: repeat(4, minmax(0, 1fr));
                grid-template-rows: 1fr;
                width: 100%;

                & .button-oshinagaki {
                    grid-column: 4 / 5;
                }

                @media ( width <= 800px ) {
                    & .button-oshinagaki {
                        grid-column: 3 / 5;
                    }
                }
                @media ( width <= 600px ) {
                    grid-template-columns: repeat(2, minmax(0, 1fr));

                    & .button-oshinagaki {
                        grid-column: 1 / 3;
                    }
                }

                @media (width <= 480px) {
                    grid-template-columns: 1fr;
                }
            }

            @media (width <= 480px) {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }
    }

    & .content-restaurant {

        & .width-handle {
            width: min(928px, 90%);
            margin: 0 auto 0;

            & h3 {
                margin: 1rem 0 1rem 0 !important;
                border: none !important;
            }

            & > p {
                @media (width <= 480px) {
                    margin: 0;
                }
            }

            & .table-and-image {

                & > * {
                    width: 50%;

                    @media (width <= 480px) {
                        width: auto;
                    }
                }

                & .info-heading {
                    @media (width <= 480px) {
                        text-align: center;
                        font-size: 1.5rem !important;
                    }
                }

                & .info-table {

                    & table {
                        width: 100%;
                        border: none !important;

                        & tr,
                        & th,
                        & td {
                            vertical-align: top;
                            border: none !important;
                        }

                        & tr td:first-child {
                            margin: 0;
                            padding-right: 0 !important;
                            padding-left: 0 !important;
                        }

                        & tr td:nth-child(2) {
                            text-align: justify;
                            text-align-last: justify;
                            text-justify: inter-ideograph;
                            white-space: nowrap;
                            padding-left: 0 !important;
                        }
                    }
                }

                @media (width <= 680px) {
                    flex-direction: column;
                    gap: 1rem;

                    & > * {
                        width: auto;
                    }
                }
            }
        }

        @media (width <= 480px) {
            padding: 0 !important;
        }
    }
}

/* takeout: button */
#main-contents .wp-block-buttons > .wp-block-button.takeout .wp-block-button__link {

    color: #ffffff !important;
    background-color: rgb(83, 71, 65) !important;
    background-image: none;

    border-radius: 10px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;

    &::before,
    &::after {
        all: unset !important;
    }

    /* &:hover {
        all: unset !important;
    } */
}


/******/


/*** お品書き ***/
.page_menu {

    @media ( width < 770px ) {
        .column-sp > :last-child {
            order:-1;
        }
    }
}

/*** お持ち帰り ***/
.page_takeout {

    & .image-grid {
        display: grid;
        grid-template-areas:
            "katsu katsu"
            "ebi niku";
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;

        & .katsu {
            grid-area: katsu;
        }

		& .ebi {
            grid-area: ebi;
        }

        & .niku {
            grid-area: niku;
        }
		
		& .ebi,
        & .niku {
            height: 310px;
            min-height: 0;
            overflow: hidden;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        & .ebi img,
        & .niku img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        & .ebi figure,
        & .niku figure,
        & .ebi a,
        & .niku a {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
        }
    }
}

/*** お食事 ***/
.page_dining {

    & .grid-tempra {
        @media (480px < width <= 780px) {
            grid-template-columns: 1fr 1fr;
        }

        @media (width <= 480px) {
            grid-template-columns: 1fr;
            gap: 0;
        }

    }

    & .lunch-only-menu {

        & h4 {
            border: none !important;
            margin: 0 !important;
            padding: 14px 0 !important;
        }

        @media (width <= 480px) {
            justify-content: center;
            align-items: center;
        }
    }

    & .chasoba-titles {
        @media (width <= 480px) {
            margin-bottom: 2rem;
        }
    }
}

/*** お飲み物 ***/
.page_drink {

    & ul {
        padding-left: 2rem;
    }
}

/*** コース料理 ***/
.page_cource {

    & .no-list-style {
        list-style-type: none;
        margin-top: 0 !important;
        margin-left: 0 !important
    }

    & ul {
        margin: 0;

        @media (width <= 480px) {
            margin-bottom: 3rem;

        }

        & li {
            text-align: center;
            margin: 0 !important;
        }
    }

    & .sp-centerlize {
        @media (width <= 480px) {
            justify-content: center;
            align-items: center;
        }
    }
}

/*** 丼物 ***/
.page_donmono {

    & .image_grid {
        /* grid-layout */
        grid-template-areas:
            "upper upper"
            "left right";

        & > :first-child {
            grid-area: upper;
        }

        & > :nth-child(2) {
            grid-area: left;
        }

        & > :last-child {
            grid-area: right;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background-color: black;
        }
    }

    & .no-marker {
        list-style-type: none;
    }

    & .sub-grid {
        @media (width <= 480px) {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
    }
}

/*** 寿司 ***/
.page_sushi {

    & .sushi-grid {
        /* grid-layout */
        column-gap: 2rem;
        row-gap: 4rem;

        h3 {
            margin: 0 !important;
        }

        @media (width <= 480px) {
            grid-template-columns: 1fr;
            column-gap: 0;
            row-gap: 0;
        }
    }

    & .list-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 9rem;
        list-style-type: none;

        @media (480px < width <= 780px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 6rem;
        }

        @media (width <= 480px) {
            grid-template-columns: 1fr 1fr;
            column-gap: 3rem;
        }

        & li,
        & li + li {
            margin: 0 !important;
        }
    }

    & .special {
        h3 {
            margin: 0 !important;
        }

        ul {
            margin: 0 !important;

            li {
                margin: 0 !important;
            }
        }
    }

    & .meibutsu {
        /* flex-layout */

        & > :first-child {
            flex: 6;
        }

        & > :last-child {
            flex: 4;
        }

        @media (width <= 480px) {
            flex-direction: column;

            & > :first-child {
                flex: none;
            }

            & > :last-child {
                flex: none;
                order: -1;
            }
        }
    }

    & .with-grid {

        & .no-marker {
            list-style-type: none;
        }

        @media (width <= 480px) {
            grid-template-columns: 1fr;
            padding-left: 2rem;

            & > * {
                /* flex-layout */
                gap: 0;
            }
        }
    }
}

/*** サイトマップ ***/
.page_sitemap {

    & ul li {
        & ul li {
            list-style-type: disc;
            margin-left: 2rem;
        }
    }
}

/*** プライバシーポリシー ***/
.page_privacy-policy {

    & ol.num-and-curve {
        list-style-type: none;
        /* カウンタ */
        counter-reset: my-counter;
        margin-top: 0 !important;
        margin-left: 2rem !important;

        li {
            /* カウンタ */
            counter-increment: my-counter;
        }

        li::marker {
            /* カウンタ */
            content: counter(my-counter) "）";
            color: var(--font-color);
            font-weight: bold;
        }
    }

    & li,
    & p {
        /* 文節を認識して改行する */
        word-break: auto-phrase;

        /* 英語 */
        line-break: strict;
        overflow-wrap: anywhere;
    }
}

/*** 店舗情報・アクセス ***/
.page_restaurant-access {

    & .table-kaisen-restaurant {
        & table {
            border: none !important;
            text-align: center;
            width: 80%;

            & tr,
            & th,
            & td {
                border: none !important;
                padding: 0.5rem 1.5rem !important;

                @media (width <= 480px) {
                    padding: 1rem 0.5rem !important;
                }
            }

            & tr td:first-child {
                text-align: justify;
                text-justify: inter-character;
                text-align-last: justify;
                vertical-align: top;
                white-space: nowrap;
            }
        }
    }

    & .tel-number {
        max-height: 5rem;

        /* flex-layout */

        & > :first-child {
            flex: 1;
        }

        & > :nth-child(2) {
            flex: 8;

            @media (width <= 480px) {
                font-size: 2rem !important;
            }
        }

        & > :last-child {
            flex: 1;
        }

        @media (width <= 480px) {
            flex-direction: column;
            max-height: none;
        }
    }

    & .contact-form {
        /* flex-layout */
        gap: 0;

        & form {

            & p {
                display: flex;
                flex-direction: column;
                gap: 0;

                & label {
                    margin-top: 1.25rem;
                }
            }

            & .form-anotation {
                color: red;
                vertical-align: super;
                font-size: 0.75em;
            }

            & input,
            & textarea {
                margin-top: 0;
                border: none;
                border-radius: 0;
            }

            & input {
                width: 80%;
                min-height: 3rem;
                margin-bottom: 0;
            }

            & textarea {
                min-height: 6rem;
            }

            & input[type="checkbox"] {
                width: 1.25rem;
                height: 1.25rem;
                min-height: auto;
                margin-top: 1rem;
            }

            & .contact-form-button {
                width: 150px;
                height: 40px;
                border-radius: 50px;
                margin-top: 1rem;
                background-color: rgb(74, 72, 68);
            }

            & .checkbox-anker {
                text-decoration: underline;
                padding-left: 1rem;
            }
        }

        @media (width <= 480px) {
            padding: 1rem !important;
        }
    }
}

/*** 海鮮雅のこだわり ***/
.page_uncompromising {

    & .aspcet-change {
        aspect-ratio: 21 / 9 !important;
        width: 100%;
        height: auto;
        overflow: hidden;

        & img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;

        }
    }
}