@charset "UTF-8";
/* CSS Document */


a {
  color: inherit;         /* 親要素の文字色をそのまま使う */
  text-decoration: none;  /* 下線も消したい場合 */
}
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;         /* または任意の色 */
  text-decoration: none;
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
.shippori-mincho-b1-regular {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  font-style: normal;
}

.shippori-mincho-b1-medium {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 500;
  font-style: normal;
}

.shippori-mincho-b1-semibold {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  font-style: normal;
}

.shippori-mincho-b1-bold {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-style: normal;
}

.shippori-mincho-b1-extrabold {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 800;
  font-style: normal;
}

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

        body {
            font-family: "Hiragino Kaku Gothic ProN", sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #FFFFFF;
            overflow-x: hidden; /* Prevent horizontal scroll bar */
        }

        a {
            text-decoration: none;
            color: #333;
        }

        ul {
            list-style: none;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            
        }
        .space{
            padding: 40px;
        }

        .space_small{
            padding: 20px;
        }

        /* Top Bar */
        .top-bar {
            background-color: #3768B7; /* Light blue, slightly different from main header */
            padding: 10px 0;
            font-size: 0.85rem;
            margin-bottom: -5px;
        }

        .top-bar-content {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .top-bar-links {
            color: #FFFFFF;
        }
        .top-bar-links a {
            margin-left: 20px;
            color: #FFFFFF;
        }

        /* Header */
        .header {
            background-color: #fff;
            padding: 20px 0;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            background-image: url("images/rogo.png");
            width: 112px;
            height: 53px;
            font-size: 0rem;
            background-repeat: no-repeat;
            background-size: 112px;
                }

        .main-nav {
            display: flex;
            align-items: center;
            flex-grow: 1; /* Allow navigation to take available space */
            justify-content: center; /* Center the navigation links */
            margin: 20px 0;
        }

        .main-nav ul {
            display: flex;
            gap: 25px; /* Space between main nav links */
        }

        .main-nav a {
            font-weight: 300;
            position: relative;
            padding-bottom: 10px;
        }

        .main-nav a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: #2a6db7;
            transition: width 0.3s ease;
        }

        .main-nav a:hover::after {
            width: 100%;
        }

        .search-bar {
            display: flex;
            align-items: right;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 5px 15px;
            background-color: #fefefe;
            margin-right: -500px; /* Space from main nav */
        }

        .search-bar input {
            border: none;
            outline: none;
            padding: 5px;
            font-size: 1rem;
            width: 300px; /* Adjust width as needed */
            background-color: transparent;
        }

        .search-bar button {
            background: none;
            border: none;
            cursor: pointer;
            color: #777;
            font-size: 1.1rem;
            padding-left: 5px;
        }

        .header-icons {

            gap: 15px;
            margin-left: 20px; /* Space from search bar */
        }

        .header-icons a {
            color: #555;
            font-size: 1.5rem;
        }

        /* Mobile Menu 
        .hamburger {
            display: none; 
            color: #555;
            font-size: 1.7rem;
            cursor: pointer;
        }*/

        .mobile-menu-modal {
            display: none; /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow: hidden; /* Prevent scrolling within modal background */
        }

        .mobile-menu-modal.active {
            display: block;
        }

        .mobile-menu-content {
            background-color: #3768B7;
            opacity: 0.8;
            width: 40%;
            height: 100%;
            position: absolute;
            right: 0;
            padding: 30px;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
            transform: translateX(100%);
            transition: transform 0.3s ease-out;
            overflow-y: auto; /* Allow scrolling for menu items */
        }

        .mobile-menu-modal.active .mobile-menu-content {
            transform: translateX(0);
        }

        .close-button {
            position: sticky; /* Sticky or fixed based on desired behavior */
            top: 20px;
            right: 20px;
            font-size: 2rem;
            cursor: pointer;
            color: #fff;
            z-index: 1001; /* Ensure close button is above content */
        }

        .mobile-menu-content ul {
            padding-top: 20px; /* Space from close button */
        }

        .mobile-menu-content li {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .mobile-menu-content a {
            font-size: 1.2rem;
            font-weight: 500;
            color: #fff;
            display: block;
        }









        /***************************************************************** Hero Section ******************************************************************/
        /* Hero Section */
        .hero-section {
            background-size: 80%;
            background-position: right;
            background-repeat: no-repeat;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            left: -4%;
        }

        .hero-content {
            padding: 0 20px;
            position: absolute;
            left: 10%;
            top: 50%;
            transform: translateY(-50%);
            max-width: 350px;
            padding: 15px 10px;

        }

        .hero-content h1 {
            font-size: 2rem;
            line-height: 1.5;
            writing-mode: vertical-rl;
            text-orientation: upright;
            color: #4a4a4a;
            white-space: nowrap;
            text-shadow:0 0 10px #FFF;
        }

        .hero-content h1 span {
            display: block;
            margin-bottom: 10px;
        }
        .hero-content h1 span:last-child {
             margin-bottom: 0;
        }

        .hero-action-button {
            position: absolute;
            bottom: 30px;
            right: -20px;
            background-color: rgba(255, 255, 255, 0.9);
            color: #2a6db7;
            padding: 12px 40px;
            border-radius: 25px;
            font-weight: 700;
            font-size: 0.95rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .hero-action-button:hover {
            background-color: #2a6db7;
            color: #fff;
        }

        .hero-action-button i {
            font-size: 1rem;
}
        /* Mobile Devices (max-width: 768px) */
        @media (max-width: 768px) {
            /* Header adjustments for mobile */

            /* Hero section */
        .hero-section {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 400px;
			  /* まずは既存の left: ‑4% を打ち消して中央寄せ */
  position: relative !important;
  left: 0 !important;
  margin: 0 auto !important;
  
  /* 画像の表示位置を「上中央」に */
  background-position: top center !important;
			
        }
            .hero-content {
                left: 5%; /* Closer to left edge */
                max-width: 250px;
            }
            .hero-content h1 {
                font-size: 1.5rem;
            }
            .hero-action-button {
                bottom: 15px;
                right: 15px;
                padding: 8px 15px;
                font-size: 0.8rem;
                gap: 5px;
            }}
/* Smaller Mobile Devices (max-width: 480px) */
        @media (max-width: 480px) {
            .hero-section {
                height: 350px;
				  /* まずは既存の left: ‑4% を打ち消して中央寄せ */
  position: relative !important;
  left: 0 !important;
  margin: 0 auto !important;
  
  /* 画像の表示位置を「上中央」に */
  background-position: top center !important;
            }
            .hero-content {
                max-width: 200px;
            }
            .hero-content h1 {
                font-size: 1.5rem;
            }
            .hero-action-button {
                font-size: 0.7rem;
                padding: 6px 12px;
            }
        /* Section Styling */
        section {
            padding: 60px 0;
            text-align: center;
            background-color: #fff;
            margin-bottom: 20px; /* Space between sections */
            overflow: hidden; /* Clear floats / contain children */
        }
            }

        /************************************************************************************************************************* カテゴリ */
        section.bg-lighten {
            background-color: #E6ECF6; /* Light bluish background similar to the original site */
            padding-bottom: 30px;
            text-align: center;
            margin-top: -50px;
        }
        /* Smaller Mobile Devices (max-width: 480px) */
        @media (max-width: 780px) {
            section.bg-lighten {
            margin-top: -10px;
            margin-bottom: -20px;
            }
            .card-grid div img{
            width: 100%
        }
            .contact-card div img{
            width: 15%
        }
            }

        /************************************************************************************************************************* Card Grid General Styles */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: 900px;
            margin: 0 auto;
        }

        .card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            overflow: hidden;
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }
.circle-card-grid .card-image {
  align-items: flex-start;  /* 垂直方向の揃えを start (= 上端) に */
  padding-top: 0;          /* 念のため padding の余白もリセット */
}

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }

        .card-image {
            width: 100%;
            height: 200px; /* Fixed height for consistency */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .card-content {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .card-content i{
            color: #3768B7;
            margin-right: 10px;
        }
        .card-content h3 {
            font-size: 1rem;
            margin-bottom: 10px;
            color: #333;
        }

        .card-content p {
            font-size: 0.95rem;
            color: #666;
            flex-grow: 1;
        }

        .card-link {
            display: flex;
            align-items: center;
            margin-top: 15px;
            color: #2a6db7;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .card-link i {
            margin-left: 5px;
            font-size: 0.8rem;
        }

        /* Specific round images for product showcases (e.g., Cold Noodles, Tableware) */
        .circle-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .circle-card {
            background-color: #fff;
            border-radius: 10px; /* Keep outer card shape */
            box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Apply shadow to card */
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            padding: 20px;
            padding-bottom: 30px; /* More padding at bottom for text */
            display: flex;
            flex-direction: column;
            align-items: center;
			
        }

         .circle-card_clear {
            background-color: #E6ECF6;
            box-shadow: none; /* Apply shadow to card */
        }
         .circle-card_white {
            background-color: #fff;
            box-shadow: none; /* Apply shadow to card */
        }
         .circle-card_clear:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
         .circle-card_white:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }

        .circle-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 20px;
            border: 1px solid #ddd;
        }

        .circle-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%; /* Make image itself round */
        }

        .circle-card h3 {
            font-size: 1rem;
            margin-bottom: 10px;
            color: #333;
        }
        .circle-card i{
            color: #3768B7;
            margin-right: 10px;
        }
        .circle-card p {
            font-size: 0.9rem;
            color: #666;
            flex-grow: 1; /* Allow description to take available height */
        }
        
        /* Pick Up Section specific styling */
        .pickup-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
            text-align: left; /* Align text within card */
        }
        
        .pickup-card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 20px;
        }
        
        .pickup-card-left {
            flex: 0 0 auto; /* Content decides width */
            padding-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .pickup-card-left img {
            max-width: 150px; /* Control image size specific to pickup */
            height: auto;
            border-radius: 5px;
        }

        .pickup-card-left .sale-badge {
            background-color: #20b2aa; /* MediumTurquoise */
            color: #fff;
            padding: 2.5rem 1.5rem; /* Ajust padding to make it look like a badge */
            border-radius: 10px;
            font-size: 1.5rem;
            font-weight: 700;
            text-align: center;
            line-height: 1.2;
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
            position: relative;
            min-width: 150px; /* Ensure a minimum width for the badge */
        }

        .pickup-card-left .sale-badge::before {
            content: 'SPECIAL SALE';
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8em;
            font-weight: normal;
            background-color: rgba(0,0,0,0.2);
            padding: 3px 8px;
            border-radius: 5px;
        }
        .pickup-card-left .sale-badge .best-price {
            font-size: 0.7em;
            display: block;
            margin-top: 5px;
        }
        
        .pickup-card-right {
            flex: 1; /* Text content on right */
        }
        
        .pickup-card-right h3 {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pickup-card-right h3 i {
            color: #2a6db7; /* Blue icon */
            font-size: 1.2em;
        }
        
        .pickup-card-right p {
            font-size: 0.95rem;
            color: #666;
        }

        /* Product lineup grid ******************************************************************************************************************************************/
        .product-lineup-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 10px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .product-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .product-item-image {
            width: 110px;
            height: 110px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .product-item-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .product-item p {
            font-size: 1rem;
            margin-bottom: 10px;
            color: #333;
            font-weight: bold;
        }
        .product-item i {
            color: #3768B7;
            margin-right: 10px;
        }
        /* Information section (Banners) */

.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.flexbox {
  display: flex;
  align-content: space-between;
}


        /* Contact Section */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 20px;
            grid-row-gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }



        .contact-card {
            background-color: #fff;
            border: 2px solid #3768B7;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            color: #3768B7;
        }
        .contact-card div{
            display: flex;
          align-items: center;
        }
        .contact-card img {
            margin-bottom: 20px;
        }

        .contact-card h3 {
            font-size: 1.3rem;
            margin-left: 15px;
        }

        .contact-card p {
            font-size: 0.95rem;
            margin-bottom: 10px;
            text-align: left;
			
        }
        .contact-card .contact-number {
            font-size: 1.4rem;
            font-weight: bold;
            text-align: left;
        }
        .contact-card a.button {
            display: inline-block;
            background-color: #2a6db7;
            color: #fff;
            padding: 10px 20px;
            border-radius: 25px;
            margin-top: 15px;
            font-weight: 500;
            transition: background-color 0.3s ease;

        }

        .contact-card a.button:hover {
            background-color: #1e5a9c;
        }


.card-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr)!important;
  gap: 20px;
  margin: 0 auto ;

}



        /* Footer */
        .footer {
            background-color: #2a6db7; /* Dark blue */
            color: #fff;
            padding: 80px 0 20px;
            font-size: 0.9rem;
            text-align: left;
            margin-top: -30px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-content .footer-info {
 			float: none !important;
  			display: flex !important;
  			flex-direction: column !important;
			align-items: flex-start;
		}
		.footer-content .footer-info > * {
  			margin-bottom: 8px;
		}
        .footer-logo {
            color: #fff;
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .footer-address p {
            margin-bottom: 8px;
            margin-top: 8px;
            line-height: normal;
        }

        .footer-address a {
            color: #fff;
            opacity: 0.8;
        }



        .footer-links-a h4 {
            color: #fff;
            font-size: 1.5rem;
            margin-bottom: 20px;
            font-weight: 500;
        }

        .footer-links-a ul li {
            margin-bottom: 10px;
        }

        .footer-links-a a {
            color: #fff;
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }

        .footer-links-a a:hover {
            opacity: 1;
        }

        .social-icons {
            text-align: center;
            margin-bottom: 30px;
        }

        .social-icons a {
            color: #3768B7;
            font-size: 1.8rem;
            margin: 0 10px;
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }

        .social-icons a:hover {
            opacity: 1;
        }

        .copyright {
            text-align: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            opacity: 0.7;
        }

        /* Media Queries */
        @media (max-width: 1024px) {
            .main-nav ul {
                gap: 15px;
            }
            .search-bar input {
                width: 200px;
            }
            .hero-section {
                height: 450px;

            }
            .hero-content h1 {
                font-size: 2.2rem;
            }

            .decoration-lines {
                width: 100%;
                margin: 0 auto;
            }
            .section-pickup-header .subtitle {
                font-size: 2.5rem;
            }
            .pickup-card-grid {
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            }
            .info-banners {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
            .contact-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
            .footer-content {
                grid-template-columns: 1fr 1fr;
                row-gap: 30px;
            }
            .footer-links-a h4 {
                margin-top: 20px;
            }
        }

        @media (max-width: 768px) {
            .main-nav, .search-bar, .header-icons {
                /* display: none; Hide desktop nav, search bar, and other icons */
            }
            .hamburger {
                display: block; /* Show hamburger */
                margin-left: 20px; /* Space from logo */
            }
            .hero-section {
                height: 400px;
				  /* まずは既存の left: ‑4% を打ち消して中央寄せ */
  position: relative !important;
  left: 0 !important;
  margin: 0 auto !important;
  
  /* 画像の表示位置を「上中央」に */
  background-position: top center !important;
				
            }
            .hero-content {
                left: 37%;
                max-width: 250px;
            }
            .hero-content h1 {
                font-size: 1.4rem!important;
            }
            .hero-action-button {
                bottom: 15px;
                right: -20px;
                padding: 8px 35px 8px 15px;
                font-size: 0.7rem!important;
                gap: 5px;
            }
            section {
                padding: 40px 0;
            }
            .decoration-lines {
                width: 100%;
                margin: 0 auto;
            }

            .section-pickup-header .subtitle {
                font-size: 2rem;
            }
            .card-grid, .pickup-card-grid, .product-lineup-grid, .info-banners, .contact-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .circle-card-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr)!important;
                gap: 10px!important;
                margin: 0px auto;
            }
           .circle-card-grid .card-image {
                height: 120px;
			   
            }
            .circle-card {
                padding: 20px 0!important;
            }
			
            .pickup-card {
                flex-direction: column; /* Stack content vertically */
                padding: 20px;
            }
            .pickup-card-left {
                padding-right: 0;
                margin-bottom: 20px;
                width: 100%;
                text-align: center;
            }
            .pickup-card-left .sale-badge {
                width: 60%; /* Make badge slightly smaller */
                padding: 2rem 1rem;
                font-size: 1.3rem;
            }
            .pickup-card-left img {
                max-width: 120px; /* Smaller image on mobile */
            }
            .footer-content {
                grid-template-columns: 1fr;
            }
            .footer-links-a {
                margin-bottom: 20px;
            }
			
			
		.card-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr)!important;
  gap: 20px;
  margin: 0 auto ;

}	
            .info-banner {
                flex-direction: row; /* Keep icon and text side-by-side on smaller mobiles */
                text-align: left;
                padding: 20px 25px;
                justify-content: flex-start;
            }
            .info-banner .icon {
                margin-bottom: 0;
                margin-right: 15px;
                font-size: 2.5rem;
            }
            .top-bar {
                display: none;
            }
            .header-content {
                flex-wrap: wrap;
                justify-content: space-between; /* Adjusted for hamburger positioning */
                padding: 15px 20px;
            }
            .logo {
                display: none;

            }
            .decoration-lines{
                margin:  20px auto 30px!important;
            }
            .social-icons{
                margin: 20px 0!important;
            }
            .footer {
            padding: 30px 0 20px;
            margin-top: -15px;

        }
			
			
			

			
}
        @media (max-width: 480px) {
            .logo {
                display: none;
            }
            .hero-section {
                height: 350px;
				  /* まずは既存の left: ‑4% を打ち消して中央寄せ */
  position: relative !important;
  left: 0 !important;
  margin: 0 auto !important;
  
  /* 画像の表示位置を「上中央」に */
  background-position: top center !important;
            }
            .hero-content {
                max-width: 200px;
            }
            .hero-content h1 {
                font-size: 1.5rem; /* Smaller text on tiny screens */
            }
            .hero-action-button {
                font-size: 0.7rem;
                padding: 6px 12px;
            }
            .decoration-lines {
                width: 100%;
                margin: 0 auto;
            }
            .section-pickup-header .subtitle {
                font-size: 1.8rem;
            }
            .card-content h3, .circle-card h3, .pickup-card-right h3 {
                font-size: 1.1rem;
            }
            .product-lineup-grid{
                grid-template-columns: repeat(auto-fit, minmax(90px, 3fr))!important;
                gap: 5px!important;
            }
            .contact-card {
                padding: 20px;
            }
            .contact-card i {
                font-size: 2.5rem;
            }
        }




        .info-banners {
            display: grid;
            /*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
            grid-column:1 / 2;
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .info-banner {
            padding: 25px;
            border-radius: 10px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center; /* Center content within banner vertically */
            font-weight: 700;
            min-height: 100px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            text-align: center; /* Center text within banner */
            flex-direction: column; /* Stack icon and text */
        }

        .info-banner.free-shipping {
} /* Orange */
        .info-banner.points { background-color: #00bfff; } /* Deep Sky Blue */
        .info-banner.business { background-color: #2a6db7; } /* Souke Blue */
        .info-banner.new-member { background-color: #2ecc71; } /* Emerald Green */

        .info-banner .icon {
            font-size: 3rem;
            margin-bottom: 10px; /* Space between icon and text */
            opacity: 0.9;
        }

        .info-banner span {
            display: block;
            font-size: 0.9em;
            font-weight: 400;
            margin-top: 5px;
            opacity: 0.8;
        }
        
/***************************************** 3本線　H2*******************************************/
    .topics-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      margin: 30px 0 40px 0;
    }

    .lines {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .line {
      width: 120px;
      height: 4px;
      background-color: #a6c0e4; /* 薄い青色 */
      border-radius: 2px;
    }

    .topics-text {
      font-family: 'Georgia', serif;
      font-size: 32px;
      color: #333;
    }
@media (max-width: 768px) {
       .topics-container {
        margin: 0 0 20px;
/*        gap: 40px;*/
    }
    .line {
      width: 60px;
      height: 4px;
    }

    .topics-text {
      font-family: 'Georgia', serif;
      font-size: 22px;
      color: #333;
    }
    .decoration-lines img{
    width: 100%; /* 親要素の幅いっぱいに */
}
    .contact-tit{
     width: 80%!important; /* 親要素の幅いっぱいに */
    }
	
			.card-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr)!important;
  gap: 20px;
  margin: 0 auto ;

}

	
}
/**************************************************************消す********************************************************************/
.decoration-lines {
    display: flex; /* Flexboxを使って要素を横並びに */
    align-items: center; /* 要素を垂直方向の中央に揃える */
    justify-content: center; /* 要素を水平方向の中央に寄せる (厳密にはflex-growが効くのでおまけ) */
    margin: 40px auto 20px; /* 上下左右のマージン。autoで中央寄せ */
    width: 100%; /* 親要素の幅いっぱいに */
    max-width: 800px; /* ライン全体の最大幅を制限 (デザインに合わせて調整) */
}


.main-nav-sp{
    display: none;
}
.pc_btn{
        display: none;
    }
/*.header-icons_sp{
    display: none;
}*/
/**************************************************************↑消す********************************************************************/


/* レスポンシブ対応 (画面幅が狭くなった場合) */
@media (max-width: 768px) {
    .decoration-lines {
        margin: 30px auto 15px; /* マージンを少し狭く */
    }
    .decoration-lines h2 {
        font-size: 1.8rem; /* 文字サイズを小さく */
    }
    .decoration-lines hr {
        margin: 0 5px; /* マージンを小さく */
    }
    .decoration-lines.blue i {
        font-size: 1.5rem; /* アイコンサイズを小さく */
        margin-right: 5px;
    }
    .main-nav{/* スマホナビ */
        display: none;
    }
    
    .main-nav-sp {
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            background-color: #FFF;
            color: var(--text-dark);
            border-bottom: 1px solid var(--border-light);
            box-shadow: 0 2px 5px rgba(0,0,0,0.03);
        }

    .main-nav-sp .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            flex: 1; /* Distribute space evenly */
            color: #3768B7;
		justify-content: center;
        }

   .main-nav-sp .nav-item i {
            font-size: 20px;
            margin-bottom: 5px;
            color: var(--primary-blue);
        }
    .main-nav-sp .nav-item span {
            font-size: 10px;
        }
    .fa-solid, .fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
    .header{
        padding: 0!important;
    }
    .header-content{
        padding: 0 20px!important;
    }
    .logo{
         display: none;

    }
    .top-bar-links{
        display: none;
        
    }
	
    .loginout{
         display: none;

    }
    .top-bar-sp{
        height: 10px;
        width: 100%;
        background-color: #2a6db7;
        margin-bottom: -15px;
    }
    .search-bar{
        display: none;
    }
    .pc_btn{
        display: none;
    }
    .header-icons{
        display: none;
    }
    .header-icons_sp{
        display: flex;
        align-items: center;
        gap: 15px;
        margin-left: 20px; 
    }
    .header-icons_sp a {
        color: #2a6db7;
        font-size: 1.5rem;
        cursor: pointer;
        }
    .card-content{
        padding: 10px 20px!important;
    }
    .card-content h3{
       margin-bottom: 0!important;
}
    .space_small {
    padding: 0px;
}
    .space {
    padding: 0px;
}

        .mobile-menu-content {
            width: 80%;
            padding: 10px;
        }

        .close-button {
            position: sticky; /* Sticky or fixed based on desired behavior */
            top: 10px;
            right: 0px;
            font-size: 2rem;
        }

        .mobile-menu-content ul {
            padding-top: 10px; /* Space from close button */
        }

        .mobile-menu-content li {
            margin-bottom: 5px;
            padding-bottom: 5px;
            font-size: 0.8rem;
        }
    .product-lineup-grid{
            display: flex;
    overflow-x: scroll;
    gap: 15px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    border-top: 1px solid var(--border-light);
    padding-top: 15px;
    }
    .contact-number{
        font-size: 21px!important;
    }
    .contact-card div h3{
                font-size: 21px!important;
    }
    p,a,h3{
        font-size: 90%!important;
    }
	
			.card-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr)!important;
  gap: 20px;
  margin: 0 auto ;

}
	
	
	
    
}
@media (max-width: 480px) {
	
	    .logo{
      display: none;
    }
    .decoration-lines {
        margin: 20px auto 10px;
    }
    .decoration-lines h2 {
        font-size: 1.5rem;
    }
    .decoration-lines hr {
        margin: 0 3px;
    }
    .decoration-lines.blue i {
        font-size: 1.3rem;
    }
	
			.card-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr)!important;
  gap: 20px;
  margin: 0 auto ;


}

  .fab.fa-facebook-f {
    font-size: 2rem;  /* スマホでは大きめに */
  }
	  .fab.fa-instagram {
    font-size: 2rem;  /* スマホでは大きめに */
  }
	
	
	


}




/* --- 購入ボタンを商品情報欄で横並び配置 --- */
#basketBtn{
  display:flex;
  gap:12px;
  flex-wrap:wrap;      /* SPで折返し */
  margin-top:20px;
}
#basketBtn .hero-action-button-syouhin{
  flex:1 1 auto;
  justify-content:center;
  text-align:center;

  /* 通常：青 / ホバー：白 */
  background-color:#2a6db7 !important;
  color:#fff !important;
  border:2px solid #2a6db7;
  transition:all 0.3s ease;
}
#basketBtn .hero-action-button-syouhin:hover{
  background-color:#fff !important;
  color:#2a6db7 !important;
}

/* ▼ 再入荷お知らせボタン：購入ボタンの下で“左揃え” ▼ */
#basketBtn #restockSend{
  order:3;                       /* 他ボタンの下に配置 */
  flex:0 0 100%;                 /* 1行占有して改行 */
  max-width:220px;               /* 少し小さめの横幅 */
  margin:8px 0 0 0;              /* 左揃え（autoを使わない） */
  padding:8px 16px;
  font-size:0.9rem;
  background-color:#fff !important;   /* 通常：白 */
  color:#2a6db7 !important;           /* 通常：青文字 */
  border:2px solid #2a6db7;
  text-align:center;
}
#basketBtn #restockSend:hover{
  background-color:#2a6db7 !important; /* ホバー：青 */
  color:#fff !important;               /* ホバー：白文字 */
}
/* ▲ 再入荷お知らせここまで ▲ */


/* --- 万一、既存スクリプト等で右下に浮くボタンが出ても打ち消す --- */
.hero-action-button-syouhin{
  position:static !important;
  inset:auto !important;
}
.hero-action-button-syouhin--floating,
.fixed-buy,
.sticky-buy,
.buy-now-float,
#buyNowFloat,
#buy-now-fab{
  display:none !important;
}
.hero-action-button-syouhin[aria-label="すぐに購入"]:not(#basketBtn .hero-action-button-syouhin){
  display:none !important;
}
	
/* 商品画像の拡大表示 */
#itemImg img {
  max-width: 100% !important;
  height: auto !important;
}
#itemImg {
  max-width: 400px;
  margin: 0 auto;
}
	
/* === 注意バー：container と同じ幅で中央配置 === */
/* ※以前の .notice-bar の “フル幅（vw/dvw）” の記述は削除してください */
.notice-bar{
  position: static;            /* フルブリード解除 */
  box-sizing: border-box;
  width: 100%;                 /* container と同じ幅 */
  max-width: 100%;
  margin: 8px 0 14px;          /* 上下の余白はお好みで */
  padding: 10px 12px;

  background:#eaf4ff;
  /* 上下の青ライン（以前の box-shadow をそのまま使用） */
  box-shadow:
    inset 0 3px 0 #c7dcff,
    inset 0 -3px 0 #c7dcff;

  color:#204a7a;
  text-align:center;
  line-height:1.6;
  font-size: clamp(13px, 1.6vw, 14px);
}
.notice-bar b{ font-weight:700; }

@media (max-width: 480px){
  .notice-bar{ padding: 8px 10px; }
}
	
	/* =================================================
   商品ページ冒頭の“勝手に中央寄せ”を解除（MakeShop用）
   影響範囲：注意バー／パンくず／商品名／属性テーブル
================================================= */

/* 注意バー：タイトルだけ中央、本文は左 */
.notice-bar{
  text-align: left !important;
}
.notice-bar b{
  display: block;
  text-align: center !important;
}

/* パンくずは常に左寄せ */
.pankuzu{
  text-align: left !important;
}

/* 商品名（見出し）を左寄せ＋折返し可 */
#itemInfo h1, #itemInfo h2, #itemInfo h3{
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 4px 0 6px !important;
}
#itemInfo h1 i, #itemInfo h2 i, #itemInfo h3 i{
  margin-right: .4em;
}

/* テーマの table{text-align:center} を打ち消す */
#detailInfo table{ margin-left: 0 !important; margin-right: 0 !important; }
#detailInfo th, #detailInfo td{
  text-align: left !important;
}

/* 画像・サムネイルは中央でOK（念のため保持） */
#itemImg, #itemImg > div, #viewButton{
  text-align: center;
}
/* ご注意バー：見出しは中央、本文は左寄せのまま“箱”を中央に */
.notice-bar{
  text-align: center !important;      /* 全体は中央寄せ（箱を中央にするため） */
  line-height: 1.6;
}
.notice-bar b{
  display: block;
  margin: 0 0 6px;
}
.notice-bar .notice-inner{
  display: inline-block;              /* 中央に来る“箱” */
  text-align: left;                   /* 箱の中身は左揃え */
  max-width: var(--block-max);        /* 横幅を本文と同じ基準に */
  padding: 0 8px;                     /* 端の圧迫感を軽減 */
}

/* スマホは従来どおり：見出しだけ中央・本文は左 */
@media (max-width: 767px){
  .notice-bar{ text-align: left !important; }
  .notice-bar b{ text-align: center !important; }
  .notice-bar .notice-inner{
    display: block;
    max-width: none;
    padding: 0;
  }
}

/* ================================
   SPだけの修正（～767px）
   1) サムネイル確実にセンター
   2) 見出しはSPだけセンター
   3) ボタン下の余白を増やす
================================ */
@media (max-width: 767px){

  /* 1) サムネイル（MakeShopの table 出力対応） */
  /* テーブル自体を中央配置 */
  #itemImg .M_imageCatalog table{
    margin-left:auto !important;
    margin-right:auto !important;
  }
  /* セル内の画像も中央寄せ */
  #itemImg .M_imageCatalog td{ text-align:center !important; }
  #itemImg .M_imageCatalog img{ display:inline-block; vertical-align:middle; }

  /* 2) 見出し（商品名）はSPのみセンター。アイコンは非表示 */
  #itemInfo h1,#itemInfo h2,#itemInfo h3{
    text-align:center !important;
    margin:6px auto 10px !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  #itemInfo h1 i,#itemInfo h2 i,#itemInfo h3 i{ display:none !important; }

  /* 3) カート⇔SNS⇔下コンテンツの余白 */
  #basketBtn{ margin-bottom:18px !important; }
  #r_sns{ margin-top:18px !important; margin-bottom:28px !important; }
  #r_detailWrap{ margin-bottom:40px !important; }
}

/* ※PCには影響させないため、グローバルの
   「#itemInfo h1,h2,h3 { text-align:left !important; }」
   を使っている場合は削除するか、この下に来る
   上記SPルールでのみ上書きされるようにしてください。 */

/* ================================
   PC(>=768px) サムネイルも中央に
   MakeShopの M_imageCatalog テーブル対応
================================ */
@media (min-width: 768px){
  /* サムネイルのテーブルを中央配置 */
  #itemImg .M_imageCatalog table{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 画像をセル中央に */
  #itemImg .M_imageCatalog td{
    text-align: center !important;
    vertical-align: middle;
  }
  #itemImg .M_imageCatalog img{
    display: inline-block;
  }
}

/* 商品名と価格の間を広げる（PC／SP 共通） */
#itemInfo > h1,
#itemInfo > h2,
#itemInfo > h3{
  margin-bottom: 20px !important;  /* お好みで 16〜24px に調整可 */
}

/* スマホはさらに少し余白を足す */
@media (max-width: 767px){
  #itemInfo > h1,
  #itemInfo > h2,
  #itemInfo > h3{
    margin-bottom: 22px !important;
  }
}
	
	/* 「拡大画像を見る」の上下にゆったり余白を付ける（PC/スマホ両方） */
#viewButton{
  text-align:center !important;
  margin: 14px 0 28px !important; /* 上14px / 下28px に拡張 */
}

/* スマホはさらに少しだけ下に余白を増やす（好みで調整可） */
@media (max-width: 767px){
  #viewButton{
    margin: 14px 0 32px !important;
  }
}
/* ===== base ===== */
.hero-action-button-syouhin {
  position: absolute;
  bottom: 30px;
  right: -20px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #2a6db7;
  padding: 12px 40px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hero-action-button-syouhin:hover {
  background-color: #2a6db7;
  color: #fff;
}
.hero-action-button-syouhin i {
  font-size: 1rem;
}

/* ===== responsive ===== */
/* (1) max-width: 768px */
@media (max-width: 768px) {
  .hero-action-button-syouhin {
    bottom: 15px;
    right: 15px;
    padding: 8px 15px;
    font-size: 0.8rem;
    gap: 5px;
  }
}

/* (1) max-width: 480px */
@media (max-width: 480px) {
  .hero-action-button-syouhin {
    font-size: 0.7rem;
    padding: 6px 12px;
  }
}

/* (2) max-width: 768px（別ブロック） */
@media (max-width: 768px) {
  .hero-action-button-syouhin {
    bottom: 15px;
    right: -20px;
    padding: 8px 35px 8px 15px;
    font-size: 0.7rem !important;
    gap: 5px;
  }
}

/* (2) max-width: 480px（別ブロック） */
@media (max-width: 480px) {
  .hero-action-button-syouhin {
    font-size: 0.7rem;
    padding: 6px 12px;
  }
}

/* ===== variations in product detail ===== */
#basketBtn .hero-action-button-syouhin{
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
  background-color: #2a6db7 !important;
  color: #fff !important;
  border: 2px solid #2a6db7;
  transition: all 0.3s ease;
}
#basketBtn .hero-action-button-syouhin:hover{
  background-color: #fff !important;
  color: #2a6db7 !important;
}

/* ===== global overrides included in the CSS ===== */
.hero-action-button-syouhin{
  position: static !important;
  inset: auto !important;
}
.hero-action-button-syouhin[aria-label="すぐに購入"]:not(#basketBtn .hero-action-button-syouhin){
  display: none !important;
}












/* 商品詳細（詳細部分） */

/* =========================
   TOKENS
========================= */
:root{
  --block-max: 860px;
  --sq-max: var(--block-max);
  --recipe-max: var(--block-max);
  --section-gap: clamp(32px, 6vw, 88px);
  --subsection-gap: clamp(24px, 4.5vw, 56px);
}

/* =========================
   共通カード（正方形）
   ※ #content にスコープして干渉を低減
========================= */
#content .sq-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:24px;align-items:center;
}
#content .sq-card{
  width:100%;max-width:var(--sq-max);margin:0 auto;
  background:#fff;border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.10);overflow:hidden;
}
#content .sq-media{position:relative;width:100%;aspect-ratio:1/1;}
#content .sq-media::before{content:"";display:block;padding-top:100%;}
@supports (aspect-ratio: 1 / 1){
  #content .sq-media::before{display:none;}
}
#content .sq-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
#content .sq-body{padding:14px 16px 16px;}
#content .sq-card .sq-title{margin:0 0 8px;font-weight:700;font-size:clamp(18px,2vw,21px);line-height:1.4;}
#content .sq-text{margin:0;color:#555;line-height:1.7;}
#content .sq-card:hover,#content .sq-card:focus-within{transform:none!important;box-shadow:0 6px 16px rgba(0,0,0,.10)!important;filter:none!important;}

/* 作り方直後の注意書きは中央で基準幅（影響範囲を #content に限定） */
#content .card-grid + .note.space_small{max-width:var(--block-max);margin:16px auto 0;text-align:center;}

/* =========================
   テーブル（食品表示／ガイド）
========================= */
#content .nutrition-table-wrap{max-width:var(--block-max);margin:0 auto;}
#content .info-table{
  width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
#content .info-table th,#content .info-table td{padding:12px 16px;border-bottom:1px solid #eee;vertical-align:top;line-height:1.8;}
#content .info-table th{width:38%;min-width:9em;text-align:left;font-weight:700;background:#fafafa;color:#222;}
#content .info-table tr.section th{background:#f3f6ff;color:#334;}
#content .info-table tr:last-child th,#content .info-table tr:last-child td{border-bottom:none;}
@media (max-width:560px){#content .info-table th{width:44%;}}
#content .info-table .plain-list{margin:0;padding-left:1.2em;}
#content .info-table .plain-list li{margin:.25em 0;}
#content .info-table td img{max-width:100%;height:auto;}
#content .info-table .pay-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;}
#content .info-table .pay-badges img{height:28px;width:auto;display:block;}

/* =========================
   レシピ（画像左・材料右 → 下に手順）
========================= */
#content .recipe-wrap{max-width:var(--recipe-max);margin:0 auto;}
#content #other-recipe .sub-mini{max-width:var(--recipe-max);margin-left:auto;margin-right:auto;}
#content .recipe-card{
  background:#fff;border-radius:12px;border:1px solid #EEF2F6;
  box-shadow:0 6px 16px rgba(0,0,0,.10);padding:22px;
}
#content .recipe-grid{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:24px;align-items:start;}
#content .recipe-photo{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  margin:0;line-height:0;
}
#content .recipe-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
#content .recipe-title{margin:0 0 6px;text-align:center;font-size:22px;font-weight:700;color:#1d4ea6;}
#content .recipe-servings{margin:0 0 12px;text-align:center;color:#666;}
#content .ing-section{margin-top:10px;}
#content .ing-section h5{
  margin:10px 0 6px;padding:6px 10px;text-align:center;font-size:14px;font-weight:700;
  color:#2f3a56;background:#f7f9ff;border:1px solid #e7eefc;border-radius:8px;
}
#content .ing-table{list-style:none;margin:0;padding:0;}
#content .ing-table li{display:grid;grid-template-columns:1fr auto;gap:14px;padding:6px 4px;border-bottom:1px dotted #ddd;}
#content .ing-table li:last-child{border-bottom:none;}
#content .ing-table span:last-child{white-space:nowrap;color:#333;}
#content .recipe-bottom{margin-top:18px;}
#content .recipe-prep{margin:0 0 12px;padding:8px 10px;text-align:center;color:#666;font-size:13px;border-top:1px dashed #e1e7f0;border-bottom:1px dashed #e1e7f0;}
#content .recipe-steps{list-style:none;margin:0;padding:0;counter-reset:step;}
#content .recipe-steps li{position:relative;margin:8px 0;padding-left:2.4em;line-height:1.8;}
#content .recipe-steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:.15em;display:inline-flex;align-items:center;justify-content:center;
  width:1.6em;height:1.6em;border:1.5px solid #999;border-radius:50%;font-weight:700;color:#333;
}
@media (max-width:900px){#content .recipe-grid{grid-template-columns:1fr;} #content .recipe-title,#content .recipe-servings{margin-top:8px;}}

/* =========================
   セクション見出し・余白（スコープ化）
========================= */
#content .topics-container{
  margin-top:0;padding-top:var(--section-gap);clear:both;position:relative;z-index:1;
  scroll-margin-top:calc(var(--section-gap) + 16px);
}
/* 本ページでは .sub-mini はレシピでのみ使用するため #other-recipe に限定 */
#content #other-recipe .sub-mini{
  --accent:#9fb6d8;
  margin:var(--subsection-gap) auto 12px;
  text-align:center;
  line-height:1.4;
  scroll-margin-top:var(--subsection-gap);
}
#content #other-recipe .sub-mini>span{
  position:relative;display:inline-block;padding:2px 10px 4px;
  font-size:clamp(18px,2vw,20px);font-weight:700;color:#2f3a56;
}
#content #other-recipe .sub-mini>span::before,
#content #other-recipe .sub-mini>span::after{
  content:"";position:absolute;top:50%;width:56px;height:2px;background:var(--accent);
}
#content #other-recipe .sub-mini>span::before{right:100%;margin-right:12px;}
#content #other-recipe .sub-mini>span::after{left:100%;margin-left:12px;}
@media (min-width:768px){
  #content #other-recipe .sub-mini>span::before,
  #content #other-recipe .sub-mini>span::after{width:72px;}
}

/* =========================
   PCのみ：関連画像/特色 & 商品詳細を2段組に
========================= */
@media (min-width:1024px){
  #content .sq-list{
    display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:24px;
    align-items:stretch;justify-items:stretch;max-width:var(--block-max);margin-left:auto;margin-right:auto;
  }
  #content .sq-card{max-width:none;margin:0;}
}

/* =========================
   MakeShop用パッチ（#other-recipe に限定）
========================= */
/* 文字組みの過度な上書きを回避。必要要素に限定して安全に制御 */
#content #other-recipe .recipe-card,
#content #other-recipe .recipe-title,
#content #other-recipe .recipe-servings,
#content #other-recipe .ing-section,
#content #other-recipe .ing-table,
#content #other-recipe .recipe-steps,
#content #other-recipe .recipe-prep{
  letter-spacing: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
/* 見出しは中央固定（装飾線安定） */
#content #other-recipe h4.sub-mini,
#content #other-recipe .sub-mini{ text-align:center; margin-left:auto; margin-right:auto; }
#content #other-recipe .sub-mini>span{ display:inline-block; }

/* レシピ枠の外観（DWに合わせる） */
#content #other-recipe .recipe-wrap{ max-width:var(--recipe-max); margin:0 auto; }
#content #other-recipe .recipe-card{
  padding:22px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.1);background:#fff;border:1px solid #EEF2F6;
}

/* 材料テーブル（左右2カラム＆右列右寄せ） */
#content #other-recipe .ing-table{ list-style:none;margin:0;padding:0; }
#content #other-recipe .ing-table li{
  display:grid;grid-template-columns:1fr auto;gap:clamp(12px,3vw,18px);
  padding:10px 4px;border-bottom:1px dotted #ddd;line-height:1.9;
}
#content #other-recipe .ing-table li:last-child{ border-bottom:none; }
#content #other-recipe .ing-table span:last-child{ justify-self:end; white-space:nowrap; color:#333; }

/* 手順番号の丸 */
#content #other-recipe .recipe-steps{ counter-reset:step; margin:0; padding:0; list-style:none; }
#content #other-recipe .recipe-steps li{ position:relative; margin:10px 0; padding-left:2.4em; line-height:1.8; }
#content #other-recipe .recipe-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:.12em; display:inline-flex; align-items:center; justify-content:center;
  width:1.6em; height:1.6em; border:1.5px solid #999; border-radius:50%; font-weight:700; color:#333;
}
#content #other-recipe .recipe-prep{ line-height:1.7; }
#content #other-recipe .recipe-grid{ gap:24px; align-items:start; }

/* =========================
   Smartphone overrides（～767px）
   スマホでは本文を左揃えに統一
========================= */
@media (max-width: 767px){
  /* 本文（段落・リスト・注意書き・説明文） */
  #content p,
  #content li,
  #content .sq-text,
  #content .addTxt,
  #content .detailTxt,
  #content .detailExtTxt,
  #content .plain-list li,
  #content .note,
  #content .note *{
    text-align:left !important;
  }

  /* レシピ内の本文（手順・材料ラベル・補足） */
  #content .recipe-steps,
  #content .recipe-steps li,
  #content .ing-section h5,
  #content .recipe-prep{
    text-align:left !important;
  }

  /* テーブル内の文字も左 */
  #content .info-table th,
  #content .info-table td{
    text-align:left !important;
  }

  /* 作り方直後の注意書きを左揃え */
  #content .card-grid + .note.space_small{
    text-align:left !important;
  }

  /* 「その他レシピ」の見出しブロックは本文優先で左揃え */
  #content #other-recipe h4.sub-mini,
  #content #other-recipe .sub-mini{
    text-align:left !important;
    margin-left:0;
    margin-right:0;
  }
}



/* ===== ご案内テキスト（br区切りの既存HTML向け） ===== */
.guide-legacy{
  --ink:#1f2937;           /* 本文色 */
  --muted:#5b6b82;         /* 補助テキスト色 */
  --bd:#e5e7eb;            /* 枠線 */
  --bg:#fff;               /* 背景 */
  --r:14px;                /* 角丸 */
  --pad-pc:20px;           /* 余白 */
  --pad-sp:16px;

  max-width: 960px;
  margin: 16px auto;
  padding: var(--pad-pc);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  color: var(--ink);
  line-height: 1.9;
  font-size: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.04);
}

/* 強調（<b>）の見た目を整える：見出し/行頭ドットどちらでも馴染む */
.guide-legacy b{
  font-weight: 700;
  color: #0f172a;
}

/* 行間を“段落っぽく”：連続する <br><br> は1つ分の余白にする */
.guide-legacy br + br{ display:none; }
.guide-legacy br{ line-height: 1.2; }

/* 文章の横スクロールを防止（長い英数も折り返す） */
.guide-legacy{ word-break: break-word; overflow-wrap: anywhere; }

/* 「↓」を中央寄せで見やすく（あれば） */
.guide-legacy :where(.arrow, .flow-arrow){ display:block; text-align:center; color:var(--muted); }

/* 罫線でセクションを軽く区切る（“■キャンセルについて■”などの前後に <br> がある想定） */
.guide-legacy b:contains("キャンセルについて"){ /* モダン環境用（対応外なら無視されます） */
  display: inline-block;
  margin: 8px 0 4px;
  padding: 2px 6px;
  background: #f3f6fb;
  border: 1px solid #dee6f5;
  border-radius: 8px;
  color: #0d47a1;
}

/* ===== スマホ最適化 ===== */
@media (max-width: 768px){
  .guide-legacy{
    padding: var(--pad-sp);
    font-size: 15.5px;       /* iOSズーム防止の16px近辺 */
    line-height: 1.95;
    border-radius: 12px;
  }
  .guide-legacy b{
    display:inline-block;
    margin-top: 6px;         /* 行頭<b>ドットの詰まりを防ぐ */
  }
}

/* ===== PCワイド時の読みやすさ強化 ===== */
@media (min-width: 1024px){
  .guide-legacy{
    font-size: 16.5px;
    line-height: 1.9;
  }
}

/* ===== 宋家 知る・楽しむ（SP専用追記）=====
   対象ページ判定：タイトル画像 top_titlesirutanosimi.jpg を含む場合のみ有効
   既存CSSは変更せず、下記を追加で読み込んでください
================================================ */

/* 768px以下：レイアウト最適化＆読みやすさ */
@media (max-width: 768px){

  /* ページ全体（このページのみ） */
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page{
    --fun-fz: 15px;      /* 本文 */
    --fun-h3: 17px;      /* 見出し */
    --fun-bc: 13.5px;    /* パンくず */
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: clip;    /* 横スクロール抑止（このページのみ） */
  }

  /* パンくず */
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .pankuzu{
    font-size: var(--fun-bc) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* タイトル画像（top_titlesirutanosimi） */
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .section img[src*="top_titlesirutanosimi"]{
    display: block;
    width: 100%;
    height: auto;
    margin: 8px 0 12px;
    border-radius: 10px;
  }

  /* 内部メニュー */
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .contact-card{
    margin: 0 0 12px;
  }
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .contact-card h3{
    font-size: var(--fun-h3) !important;
    margin: 0 0 8px !important;
    text-align: left;
  }
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .contact-card .category-list{
    grid-template-columns: 1fr 1fr;  /* SPは2列維持（後述420pxで1列に） */
    gap: 8px 12px;
  }

  /* 一覧カード */
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .card-grid{
    justify-items: stretch;  /* カードを全幅に */
    gap: 12px;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 0;
  }
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .card{
    width: 100%;
  }

  /* サムネイル画像：幅固定を解除して可変に（このページのみ） */
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .card-image1.gs-imgbox{
    margin-top: 10px;
    padding: 8px 0;
  }
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .card-image1.gs-imgbox img{
    width: 100% !important;   /* 既存の 300px 指定を安全に上書き */
    max-width: none !important;
    height: auto;
    object-fit: contain;
  }

  /* テキスト（このページのみ左寄せ・読みやすく） */
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .card-content1{
    font-size: var(--fun-fz) !important;
    line-height: 1.8;
    text-align: left !important;
    align-items: flex-start !important;
    gap: 4px;
    padding: 12px 14px 18px !important;
  }
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .card-content1 h3{
    font-size: calc(var(--fun-h3) + 1px) !important;
    margin: 0 0 4px !important;
  }
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .card-content1 p{
    margin: 0;
  }
}

/* 420px以下：内部メニューを1列にして誤タップ防止 */
@media (max-width: 420px){
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .contact-card .category-list{
    grid-template-columns: 1fr;
  }
}