@charset "UTF-8";

/* Variables */
:root {
    --color-main: #d37042;
    /* Orange/Brown tone */
    --color-accent: #6b8c42;
    /* Green tone */
    --color-text: #333333;
    --color-bg: #f9f9f9;
    --color-white: #ffffff;
    --font-base: 'Zen Maru Gothic', sans-serif;
}

/* Base */
body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    user-select: none;
    /* Text selection prevention slightly helps 'copy prevention' feel */
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* Header */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.2;
}

.logo_sub {
    font-size: 0.7rem;
    color: #666;
}

.pc_nav {
    display: none;
}

.header_btn {
    display: none;
    /* Hidden on SP */
}

/* Hamburger */
.sp_menu_btn {
    position: relative;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 102;
}

.sp_menu_btn span {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--color-main);
    transition: 0.3s;
}

.sp_menu_btn span:nth-of-type(1) {
    top: 0;
}

.sp_menu_btn span:nth-of-type(2) {
    top: 11px;
}

.sp_menu_btn span:nth-of-type(3) {
    bottom: 0;
}

.sp_menu_btn.active span:nth-of-type(1) {
    top: 11px;
    transform: rotate(45deg);
}

.sp_menu_btn.active span:nth-of-type(2) {
    opacity: 0;
}

.sp_menu_btn.active span:nth-of-type(3) {
    bottom: 11px;
    transform: rotate(-45deg);
}

.sp_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 101;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.sp_nav.active {
    opacity: 1;
    pointer-events: auto;
}

.sp_nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.sp_nav li {
    margin: 20px 0;
}

.sp_nav a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-main);
}

.section_title_img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.sp_nav_cta {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    width: 80%;
    max-width: 300px;
}

.sp_nav_cta .cta_btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    min-width: unset;
    padding: 15px 0;
    color: white;
}

/* FV */
#fv {
    margin-top: 90px;
}

.fv-swiper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Flex Container */
.flex-container {
    display: flex;
    align-items: center;
    gap: 60px;
    /* 余白を広げる */
}

.flex-container.reverse {
    flex-direction: row-reverse;
}

.flex-item {
    flex: 1;
}

.img-area img {
    border-radius: 20px;
    /* 画像も角丸 */
    box-shadow: var(--shadow-modern);
}

.text-area .section-desc {
    margin-top: 25px;
}

@media (max-width: 768px) {

    .flex-container,
    .flex-container.reverse {
        flex-direction: column;
        gap: 40px;
    }
}

.scroll_down {
    position: absolute;
    bottom: 80px;
    /* Above fixed CTA */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.8rem;
    letter-spacing: 2px;
    z-index: 10;
    animation: bounce 2s infinite;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Sections Common */
.section {
    padding: 60px 0;
}

.bg_color {
    background-color: #fdf6f0;
    /* Very light orange/beige */
}

.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.section_header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 0;
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.section_header h2 {
    margin: 0;
}

/* CTA Section */
.section_cta {
    background-color: var(--color-bg);
    padding: 60px 0;
    text-align: center;
}

.cta_text {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--color-main);
}

.cta_buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta_btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--color-main);
    color: white;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(211, 112, 66, 0.3);
    min-width: 200px;
}

.cta_btn.line {
    background-color: #06c755;
    box-shadow: 0 4px 10px rgba(6, 199, 85, 0.3);
}

/* Layouts */
.two_col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Reverse on SP (column-reverse) */
.reverse_sp {
    flex-direction: column-reverse;
}

.gallery_container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.col_img img {
    width: 100%;
    border-radius: 10px;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
    object-fit: cover;
    height: 100%;
    max-height: 400px;
}

.col_text h3 {
    color: var(--color-main);
    font-size: 1.4rem;
    margin-top: 0;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
    display: inline-block;
}

/* Recommend */
.check_list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.check_list li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 10px;
    font-weight: 700;
}

.check_list li::before {
    content: '✔';
    color: var(--color-accent);
    position: absolute;
    left: 0;
}

/* Service */
.service_item {
    margin-bottom: 50px;
}

.service_item h3 {
    color: var(--color-main);
    border-left: 5px solid var(--color-accent);
    padding-left: 15px;
    font-size: 1.3rem;
}

.service_img img {
    border-radius: 10px;
    margin-bottom: 15px;
    width: 100%;
}

/* Menu */
#menu .container {
    display: block;
}

.menu_category {
    margin-bottom: 20px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    /* 1 Column on SP */
    box-sizing: border-box;
}

/* Ensure full width for small content if needed, but request was explicit about columns.
   However, price list text might wrap awkwardly on small width. Let's adjust font size for price list on SP if needed. */
.price_list dt {
    font-size: 0.85rem;
    width: 65%;
}

.price_list dd {
    font-size: 0.9rem;
    width: 35%;
}

.menu_category h3 {
    text-align: center;
    color: var(--color-main);
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px dotted #ccc;
}

.price_list dt {
    float: left;
    width: 70%;
    font-weight: 500;
}

.price_list dd {
    float: left;
    width: 30%;
    text-align: right;
    font-weight: 700;
    margin: 0;
    margin-bottom: 15px;
}

.price_list::after {
    content: "";
    display: block;
    clear: both;
}

/* Gallery */
.gallery_slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 0 20px 20px;
}

.gallery_item {
    width: 100%;
    height: 200px;
    min-width: unset;
    /* Remove fixed width */
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.gallery_item:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .gallery_slider {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Message */
.message_body {
    font-size: 1.1rem;
    line-height: 2;
}

/* Staff */
.staff_container {
    text-align: center;
}

.staff_img img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 0 0 3px var(--color-accent);
    margin-bottom: 20px;
}

.staff_info h3 {
    font-size: 1.5rem;
    color: var(--color-main);
}

.staff_info .position {
    font-size: 0.9rem;
    color: #666;
    margin-left: 10px;
}

/* Contact */
.access_info {
    background: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.access_info .tel a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-main);
}

.instagram_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    margin-top: 15px;
    font-weight: 700;
}

.instagram_btn img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Footer */
footer {
    background: var(--color-main);
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    padding-bottom: 80px;
    /* Space for sticky CTA */
}

/* Fixed CTA (SP) */
.sp_fixed_cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.sp_fixed_cta a {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-weight: 700;
    color: white;
}

.btn_tel {
    background-color: #d37042;
}

.btn_web {
    background-color: #06c755;
    /* LINE Green */
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    animation: zoom 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* PC Specific Styles (Media Query) */
@media (min-width: 768px) {
    .pc_only {
        display: block;
    }

    .sp_nav,
    .sp_menu_btn,
    .sp_fixed_cta {
        display: none;
    }

    .pc_nav,
    .header_btn {
        display: block;
    }

    .pc_slide {
        display: block;
    }

    .sp_slide {
        display: none;
    }

    .pc_nav ul {
        display: flex;
        gap: 30px;
        list-style: none;
    }

    .pc_nav a {
        font-weight: 500;
        position: relative;
    }

    .pc_nav a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--color-main);
        transition: 0.3s;
    }

    .pc_nav a:hover::after {
        width: 100%;
    }

    .header_btn {
        background: var(--color-accent);
        color: white;
        padding: 10px 25px;
        border-radius: 5px;
        font-weight: 700;
        margin-left: 20px;
    }

    .two_col {
        flex-direction: row;
        align-items: center;
    }

    .two_col>div {
        flex: 1;
    }

    .reverse_sp {
        flex-direction: row;
        /* Force row on PC even if reversed on SP */
    }

    .service_item {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    /* PC: Explicit Alternating (Zic-Zac) */
    .service_item:nth-child(even) {
        flex-direction: row-reverse;
    }

    .service_item:nth-child(odd) {
        flex-direction: row;
    }

    .service_item>div {
        flex: 1;
    }

    .service_img img {
        margin-bottom: 0;
    }

    /* PC Menu: 2 Columns Grid */
    #menu .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .menu_category {
        width: 48%;
        /* 2 columns with gap */
        vertical-align: top;
        margin-right: 0;
        /* Clear margin */
        margin-bottom: 30px;
    }

    footer {
        padding-bottom: 20px;
    }

    .scroll_down {
        bottom: 30px;
    }
}

/* Page Top Button */
#page_top {
    position: fixed;
    right: 20px;
    bottom: 80px;
    /* Above SP CTA */
    z-index: 98;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

#page_top.show {
    opacity: 1;
    pointer-events: auto;
}

#page_top a {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: var(--color-main);
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    #page_top {
        bottom: 30px;
    }
}

.nomargin {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.spon {
    display: block;
}

@media screen and (min-width: 991px) {

    .spon {
        display: none !important;
    }

}