@charset "utf-8";
/* CSS Document */
/* Basic reset and font settings */
html {
  box-sizing: border-box; /* Set box-sizing to border-box */
  scroll-behavior: smooth; /* Enable smooth scrolling */
}
*, *::before, *::after {
  box-sizing: inherit; /* All elements inherit html's box-sizing */
}
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif; /* Changed to Noto Sans JP */
  color: #333;
  line-height: 1.8; /* Increase line height for readability */
  background-color: #f8f8f8; /* Background color */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 18px; /* Increase base font size */
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px; /* Left and right padding */
}
/* Header */
header {
  background-color: #87CEEB; /* Changed to light blue */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed; /* Fix the entire header */
  top: 0;
  width: 100%;
  height: 60px; /* Height to accommodate navigation */
  z-index: 1000;
  display: flex; /* Use flexbox to center content */
  align-items: center;
  justify-content: center; /* Changed to center alignment */
  padding: 0; /* No padding for the header itself */
}
header .header-content {
  /* Container for navigation and buttons */
  width: 100%; /* Expand to full header width */
  display: flex;
  justify-content: center; /* Changed to center alignment */
  align-items: center;
  padding: 0 15px; /* Left and right padding for navigation */
}
.logo-fixed {
  /* Position logo fixed, adjusted to overlap header and hero section */
  position: fixed;
  top: 50px; /* Adjust top position (to overlap header and hero section) */
  left: 30px; /* Left position */
  z-index: 9999; /* Display in front of other elements */
  display: block; /* Display as a block element */
}
.logo-fixed img {
  /* Maintain original logo image size */
  height: 80px; /* Original image height */
  width: auto; /* Auto width to maintain aspect ratio */
  display: block; /* Remove unnecessary whitespace */
}
header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 25px; /* Space between navigation items */
}
header nav a {
  text-decoration: none;
  color: #fff; /* Changed to white */
  font-weight: 500;
  transition: color 0.3s ease;
  font-size: 18px; /* Navigation font size */
}
header nav a:hover {
  color: #f0f0f0; /* Slightly lighter gray on hover */
}
.mobile-menu-button {
  display: none; /* Hidden by default */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}
.mobile-menu-button svg {
  width: 30px;
  height: 30px;
  color: #fff; /* Changed to white */
}
.mobile-menu {
  display: none; /* Hidden by default */
  background-color: #87CEEB; /* Changed to light blue */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  text-align: center;
  position: fixed; /* Mobile menu also fixed */
  top: 60px; /* Display below header (adjust according to header height) */
  width: 100%;
  z-index: 999;
}
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu ul li {
  margin-bottom: 15px;
}
.mobile-menu ul a {
  text-decoration: none;
  color: #fff; /* Changed to white */
  font-weight: 500;
  display: block;
  padding: 8px 0;
  transition: background-color 0.3s ease;
  font-size: 18px; /* Mobile menu font size */
}
.mobile-menu ul a:hover {
  background-color: #7AC5DA; /* Slightly darker light blue on hover */
}
.mobile-menu .contact-buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.mobile-menu .contact-buttons a {
  display: block;
  width: 90%; /* Responsive width */
  max-width: 250px; /* Limit max width for mobile menu */
  padding: 10px;
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: background-color 0.3s ease;
  white-space: normal; /* Allow text wrapping */
  box-sizing: border-box; /* Ensure padding is included in width */
  font-size: 18px; /* Button font size */
}
.mobile-menu .contact-buttons .tel-button {
  background-color: #007bff;
}
.mobile-menu .contact-buttons .tel-button:hover {
  background-color: #0056b3;
}
.mobile-menu .contact-buttons .mail-button {
  background-color: #6c757d;
}
.mobile-menu .contact-buttons .mail-button:hover {
  background-color: #5a6268;
}
/* Main content */
main {
  flex-grow: 1;
  margin-top: 60px; /* Adjust to header height to remove gap */
}
section {
  padding: 60px 0;
  border-bottom: 1px solid #eee; /* Section separator */
}
section:last-of-type {
  border-bottom: none;
}
/* Common style for all h2 headings (base) */
.section-title {
  font-size: 44px;
  font-weight: bold;
  text-align: center;
  width: fit-content; /* Fit to text width */
  margin-left: auto; /* Center alignment */
  margin-right: auto; /* Center alignment */
  padding-bottom: 10px; /* Space between underline and text */
  margin-bottom: 30px; /* Space below content */
  color: #333; /* Default text color */
  border-bottom: 4px solid #007bff; /* Default underline */
}
/* Styles for individual h2 headings */
.service-overview-title {
  color: #007bff; /* Example: Change text color to blue */
  border-bottom-style: dotted; /* Example: Change underline to dotted */
  font-size: 20px;
}
.before-after-title {
  font-size: 48px; /* Example: Slightly larger font size */
  border-bottom-style: double; /* Example: Change underline to double */
  border-bottom-color: #f8af3c; /* Example: Also change color */
}
/* Customer Reviews (Review Excerpts) Heading Style - Speech Bubble Design */
.speech-bubble-title {
  font-size: 48px; /* Larger font size */
  background-color: #f8af3c; /* Changed to #f8af3c */
  border: none; /* Remove border */
  border-radius: 10px; /* Adjust border-radius */
  padding: 15px 30px; /* Inner padding */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow */
  position: relative;
  display: inline-block; /* Fit to content width */
  color: #fff; /* Changed text color to white */
  z-index: 2; /* Main bubble in front */
  /* width: fit-content; does not work with margin: auto when display: inline-block; Use text-align: center; on parent element */
  margin-left: auto; /* Ineffective with display: inline-block; but kept for reference */
  margin-right: auto; /* Ineffective with display: inline-block; but kept for reference */
  margin-bottom: 50px; /* Space below content */
  line-height: 1.4; /* Adjust line height */
}
/* Speech bubble "tail" */
.speech-bubble-title::after {
  content: '';
  position: absolute;
  bottom: -8px; /* Adjust position below heading, slightly overlapping */
  left: 50%;
  transform: translateX(-50%) rotate(45deg); /* Rotate to form a triangle */
  width: 15px; /* Adjust tail size */
  height: 15px; /* Adjust tail size */
  background-color: #f8af3c; /* Same as background color */
  border-right: none; /* Remove border */
  border-bottom: none; /* Remove border */
  box-shadow: none; /* Remove tail shadow */
  z-index: 1; /* Position tail behind main bubble */
}
/* Unified style applied to headings below "Achievements" */
.unified-section-title {
  font-size: 44px; /* Maintain current */
  font-weight: bold; /* Maintain current */
  text-align: center;
  width: fit-content; /* Maintain current */
  margin: 47px auto; /* New margin and center alignment */
  color: #444; /* Maintain current (dark gray) */
  border-bottom: none; /* Maintain current */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Maintain current (light shadow) */
  position: relative; /* Required for pseudo-elements */
  /* padding-bottom is no longer needed, so removed */
  z-index: 1; /* 擬似要素より手前に表示させる */
}
.unified-section-title::before {
  content: "";
  position: absolute;
  background: #e0f7fa; /* Changed light blue to a lighter shade */
  width: 70px; /* Smaller size */
  height: 70px; /* Smaller size */
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1; /* Behind text */
  box-shadow: 0px 0px 0px 4px #e0f7fa; /* Outer shadow also light blue, adjust thickness */
}
.subsection-title {
  font-size: 28px; /* Larger sub-section title */
  font-weight: 600;
  margin-bottom: 25px;
  color: #333;
  text-align: center;
  position: relative; /* Required for pseudo-elements */
  padding-bottom: 0; /* No underline by default */
}
/* h3 heading decoration (applied only to "Reasons We Are Chosen") */
.subsection-title-decorated {
  font-size: 30px; /* Changed: Even larger text */
  font-weight: 700;
  margin-bottom: 15px;
  color: #333; /* Changed: Revert to normal color */
  text-align: left;
  position: relative;
  padding-left: 40px; /* Wider space for checkmark */
  padding-bottom: 15px; /* Space below underline */
}
.subsection-title-decorated::before {
  content: '✔'; /* Checkmark */
  color: #f8af3c; /* Changed: Revert to normal color */
  font-weight: bold;
  position: absolute;
  left: 0; /* Position at left edge */
  top: 0; /* Position at top edge */
  font-size: 1.3em; /* Size adjustment */
}
.subsection-title-decorated::after {
  content: '';
  display: block;
  position: absolute; /* Changed to absolute positioning */
  left: 0; /* Start from left edge */
  right: 0; /* Extend to right edge */
  bottom: 0; /* Position below text */
  height: 3px;
  background-color: #333; /* Changed: Revert to normal color */
  border-radius: 2px; /* Rounded corners */
}
/* Hero section */
.hero {
  /* Update background image */
  background-image: url('https://www.mouton-noble.jp/noble-cleaning/main.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; /* Maintain white text color */
  padding: 80px 0; /* Maintain top/bottom padding */
  text-align: center;
  height: 500px; /* Height of hero section. Adjustable as needed */
  display: flex; /* Enable flexbox to center content */
  flex-direction: column; /* Stack elements vertically */
  align-items: center;
  justify-content: center; /* Horizontally center */
  position: relative; /* Required for child element positioning */
}
/* Remove overlay */
/* .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 1;
        } */
.hero .container {
  position: relative;
  z-index: 2; /* Display text and buttons in front of overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; /* Container height also matches parent */
}
/* Hero section logo */
.hero-logo {
  max-width: 500px; /* Slightly smaller */
  height: auto;
  margin-bottom: 20px; /* Space between logo and title */
  z-index: 3; /* In front of overlay and main text */
  position: relative; /* Allow z-index to work */
  margin-top: 50px; /* Move down */
}
/* Style applied to main title in hero section */
.hero-main-title {
  font-size: 58px; /* Larger hero title */
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #fff; /* Maintain white text color */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Maintain shadow */
  margin-top: 0; /* Reset margin-top to allow logo to push down */
}
.hero p {
  font-size: 30px; /* Larger hero subtext */
  margin-bottom: 40px; /* Space below text */
  color: #fff; /* Revert text color to white */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); /* Darker shadow */
}
/* Removed button-primary style as it's no longer used in hero */
.button-primary {
  display: inline-block;
  background-color: #fff;
  color: #007bff;
  padding: 20px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  font-size: 22px;
}
.button-primary:hover {
  background-color: #f0f0f0;
  color: #0056b3;
}
/* Service overview, reasons for choosing, etc., sections with image and text side-by-side */
.content-block {
  display: flex;
  align-items: center;
  gap: 5px; /* Modified: Adjust spacing to 0px */
  margin-bottom: 40px;
}
.content-block.reverse {
  flex-direction: row-reverse; /* Reverse image and text order */
}
.content-block .image-wrapper {
  flex: 5; /* Image takes more space than text */
  min-width: 0; /* Prevent overflow */
}

.content-block .text-content {
  flex: 4; /* Space for text */
  min-width: 0; /* Prevent overflow */
}
.content-block img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Container for "Reasons We Are Chosen" section */
.reason-grid-container {
  display: flex; /* Use flexbox instead of grid */
  flex-direction: column; /* Stack vertically */
  gap: 15px; /* Changed: Further reduce space between items */
  margin: 0 auto; /* Center alignment */
}
/* Individual item blocks for "Reasons We Are Chosen" */
/* CSS Grid layout for PC display */
.reason-item-block {
  display: grid;
  /* Default: Image on left, text on right */
  grid-template-columns: minmax(auto, 400px) 1fr; /* Image max width, text takes remaining space */
  gap: 30px; /* Space between image and text */
  align-items: center;
  margin-bottom: 50px;
  /* Remove card style */
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
.reason-icon-img {
  grid-column: 1; /* Position image in column 1 */
  grid-row: 1 / span 2; /* Span across item name and description rows */
  width: 100%; /* Adjust image to parent width */
  height: auto;
  max-width: 400px; /* Max width of image */
  margin: 0 auto; /* Center image within grid cell */
}
/* New classes for item name and description */
.reason-title {
  grid-column: 2; /* Position item name in column 2 */
  grid-row: 1; /* Position in row 1 */
  font-size: 2em;
  margin-bottom: 10px; /* Space between item name and description */
  color: #333;
  font-weight: 600;
}
.reason-description {
  grid-column: 2; /* Position description in column 2 */
  grid-row: 2; /* Position in row 2 */
  font-size: 1.1em;
  color: #555;
}
/* Even-numbered blocks: Image on right, text on left */
.reason-item-block:nth-of-type(even) {
  flex-direction: row-reverse; /* Text on left, image on right */
  grid-template-columns: 1fr minmax(auto, 400px); /* Text on left, image on right */
}
.reason-item-block:nth-of-type(even) .reason-icon-img {
  grid-column: 2; /* Move image to column 2 */
  grid-row: 1 / span 2;
}
.reason-item-block:nth-of-type(even) .reason-title {
  grid-column: 1; /* Move item name to column 1 */
  grid-row: 1;
}
.reason-item-block:nth-of-type(even) .reason-description {
  grid-column: 1; /* Move description to column 1 */
  grid-row: 2;
}
/* List styles */
.list-with-icons-wrapper { /* New wrapper added */
  max-width: 800px; /* Set max width for list to group it */
  margin: 0 auto; /* Center alignment */
  /* New styles added here */
  background-color: #fff; /* White background */
  border: 1px solid #e0e0e0; /* Light gray border */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Light shadow */
  padding: 30px; /* Inner padding */
  box-sizing: border-box; /* Include padding in width */
}
.list-with-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Modified: Adjust item width */
  gap: 10px; /* Modified: Reduce spacing */
  font-size: 20px; /* Modified: Increase font size */
  color: #555;
}
.list-with-icons li::before {
  content: '✔'; /* Checkmark */
  color: #007bff;
  font-weight: bold;
  margin-right: 8px;
}
/* Styles for Before & After pairs */
.before-after-pair {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Always 2 columns side-by-side */
  gap: 20px; /* Space between Before and After */
  margin-bottom: 30px; /* Space between each pair */
  align-items: start; /* Align card tops */
  /* New style: Function as outer frame */
  background-color: #fff; /* Add background color */
  padding: 30px; /* Overall padding */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Shadow */
}
.before-after-pair:last-of-type {
  margin-bottom: 0; /* No bottom margin for the last pair */
}
.before-after-pair .card {
  /* Adjust internal card styles */
  background-color: transparent; /* Transparent background */
  padding: 0; /* Reset individual padding (as before-after-pair covers overall) */
  border-radius: 0; /* Reset border-radius */
  box-shadow: none; /* Remove shadow */
  transition: none; /* Remove hover effect */
}
.before-after-pair .card:hover {
  box-shadow: none; /* Remove hover shadow */
}
.before-after-pair .card h3 {
  margin-bottom: 15px; /* Space between title and image */
  font-size: 24px; /* Larger h3 for Before & After */
  text-align: center; /* Center align for Before/After titles */
}
.before-after-pair .card p {
  font-size: 18px; /* Adjust font size for description */
}
/* Fix Before & After images from overflowing */
.before-after-pair .card img {
  max-width: 100%;
  height: auto;
  width: 100%; /* Explicitly set width to 100% */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Flow list style for "From Order to Delivery" */
.flow-list {
  list-style: none; /* Remove default numbers */
  padding: 0;
  margin: 0 auto; /* Center alignment */
  max-width: 900px; /* Slightly wider max width for PC */
  font-size: 18px; /* Base font size for flow list */
  line-height: 1.8;
  color: #555;
  display: block; /* Revert to single column display */
}
.flow-list li {
  display: flex; /* Make the li a flex container */
  align-items: center; /* Align items to the center for uniform height */
  gap: 15px; /* Space between header and description */
  margin-bottom: 25px; /* Slightly wider spacing */
  padding: 20px 25px; /* Wider padding */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  background-color: #f6f6f6; /* Background color for each step */
}
.flow-list li:last-child {
  margin-bottom: 0; /* No bottom margin for the last element */
}
.flow-list li .step-title {
  flex-shrink: 0; /* Prevent header from shrinking */
  width: auto; /* Default auto adjustment */
  font-size: 22px; /* Larger step title */
  font-weight: bold;
  color: #333;
  text-align: left; /* Default left alignment */
  white-space: normal; /* Allow text wrapping by default */
}
.flow-list li .step-description {
  flex-grow: 1; /* Allow description to take remaining space */
  font-size: 18px; /* Larger description text */
  color: #555;
}
/* Style for p tags within step-description */
.flow-list li .step-description p {
  margin: 0; /* Reset default margin */
  margin-bottom: 10px; /* Add space between paragraphs */
  line-height: 1.6; /* Adjust line height */
  color: #555;
  /* User's additional CSS */
  text-indent: -1em; /* Hanging indent */
  padding-left: 1em; /* Space for hanging indent */
}
.flow-list li .step-description p:last-child {
  margin-bottom: 0; /* No bottom margin for the last paragraph */
}
/* User's additional CSS: Bullet point */
.flow-list li .step-description p::before {
  content: "・";
  color: #555; /* Symbol color */
  font-size: 1em; /* Symbol size */
  line-height: inherit; /* Inherit line height from parent */
}
/* Downward triangle arrow */
.flow-list li:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -20px; /* Adjust arrow position */
  left: 50%;
  transform: translateX(-50%) rotate(45deg); /* Rotate 45 degrees for triangle */
  width: 20px;
  height: 20px;
  border-right: 3px solid #ccc; /* Arrow color and thickness */
  border-bottom: 3px solid #ccc;
  z-index: 1;
}
/* Style for customer steps */
.flow-list li.customer-step {
  background-color: #E6F3FF; /* Light blue */
}
/* Style for our steps */
.flow-list li.our-step {
  background-color: #E6FFE6; /* Light green */
}
/* Legend style */
.legend-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}
.legend-item {
  display: flex;
  align-items: center;
  font-size: 20px; /* Larger legend font size */
  font-weight: bold;
  color: #333;
}
.legend-color-box {
  width: 50px; /* Modified: Wider width */
  height: 25px;
  border-radius: 5px;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1); /* Modified: Add subtle border */
}
.legend-color-box.customer-color {
  background-color: #E6F3FF; /* Match legend blue color */
}
.legend-color-box.our-color {
  background-color: #E6FFE6; /* Match legend green color */
}
/* New cleaning process flow format */
.cleaning-flow-container {
  max-width: 1200px; /* Modified: Set to 1200px */
  margin: 0 auto;
  padding: 20px;
  display: flex; /* Use flex instead of grid to stack groups vertically */
  flex-direction: column;
  gap: 30px; /* Gap between groups */
}
.cleaning-flow-group {
  display: grid; /* Define grid for each group */
  gap: 30px; /* Gap between items */
}
/* 4-column group */
.group-4-columns {
  grid-template-columns: repeat(4, 1fr);
}
/* 2-column group (for steps 6-7) */
.group-2-columns {
  grid-template-columns: repeat(4, 1fr); /* Use 4 columns for alignment */
}
.group-2-columns .cleaning-flow-item:nth-child(1) {
  grid-column: 1 / span 1; /* First item occupies column 1 */
}
.group-2-columns .cleaning-flow-item:nth-child(2) {
  grid-column: 2 / span 1; /* Second item occupies column 2 */
}
/* Single item group (Step 5) */
.group-single-item {
  grid-template-columns: 1fr; /* 1 column */
}
.cleaning-flow-item {
  display: flex;
  flex-direction: column; /* Default vertical stacking */
  align-items: center;
  text-align: center;
  padding: 20px;
  background-color: #fff; /* Background color for each step */
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
}
/* Special layout for Step 5 */
.cleaning-flow-item-step5 {
  display: flex;
  flex-direction: column; /* Stack entire content vertically */
  align-items: center;
  text-align: center;
}
.cleaning-flow-item-step5 .step-content {
  display: flex;
  flex-direction: row; /* Horizontal arrangement */
  align-items: flex-start; /* Align to top */
  gap: 20px; /* Space between image and text */
  width: 100%; /* Expand to parent width */
  margin-top: 15px; /* Space from title */
}
.cleaning-flow-item-step5 .left-content, .cleaning-flow-item-step5 .right-content {
  flex: 1; /* Equal width */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center alignment */
  text-align: center; /* Center alignment */
}
.cleaning-flow-item-step5 .left-content img, .cleaning-flow-item-step5 .right-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cleaning-flow-item-step5 .left-content p, .cleaning-flow-item-step5 .right-content p {
  font-size: 18px;
  text-align: left; /* Left align text */
  width: 100%; /* Full width of parent */
}
.cleaning-flow-item-step5 .step-number {
  margin-bottom: 15px; /* Space between number and content */
}
.cleaning-flow-item-step5 h3 {
  font-size: 24px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  text-align: center; /* Center align title */
  width: 100%;
}
.cleaning-flow-item-step5 .button-secondary {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  font-size: 16px;
  margin-top: 15px; /* Space from text */
}
.cleaning-flow-item-step5 .button-secondary:hover {
  background-color: #0056b3;
}
.cleaning-flow-item .step-number {
  flex-shrink: 0; /* Prevent number from shrinking */
  width: 55px; /* Slightly larger number circle */
  height: 55px; /* Slightly larger number circle */
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px; /* Larger number font size */
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 15px; /* Space between number and content */
}
.cleaning-flow-item .step-content {
  flex-grow: 1;
}
.cleaning-flow-item .step-content h3 {
  font-size: 24px; /* Larger h3 for cleaning process */
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  text-align: center; /* Center alignment */
}
.cleaning-flow-item .step-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cleaning-flow-item .step-content p {
  font-size: 18px; /* Larger description text for cleaning process */
}
.cleaning-flow-item::after {
  content: none; /* Remove arrow */
}
/* Usage Guide / Notes */
.info-card {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  margin-left: auto; /* Maintain */
  margin-right: auto; /* Maintain */
}
.info-card ul {
  list-style: disc;
  padding-left: 25px;
  font-size: 18px; /* Larger list for usage guide */
  line-height: 1.7;
  color: #555;
}
.info-card ul li {
  margin-bottom: 10px; /* Wider line spacing for list */
}
.info-card p.note {
  font-size: 16px; /* Font size for notes */
  color: #dc3545; /* Red color */
  margin-top: 15px;
}
/* New style for the "クリーニング不可の事例集" link */
.case-study-link {
  display: block; /* Make it a block element */
  width: fit-content; /* Fit to content width */
  margin: 20px auto 0 auto; /* Center it and add top margin */
  background-color: #007bff; /* Blue background */
  color: #fff; /* White text */
  padding: 12px 25px; /* Padding */
  border-radius: 50px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  font-weight: bold;
  font-size: 18px; /* Font size */
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.case-study-link:hover {
  background-color: #0056b3; /* Darker blue on hover */
}
/* FAQ */
.faq-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  overflow: hidden;
}
.faq-item summary {
  font-size: 20px; /* Larger FAQ question */
  font-weight: 600;
  padding: 18px 25px; /* Wider padding */
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: color 0.3s ease;
  display: block; /* Make entire area clickable */
  position: relative;
}
.faq-item summary::-webkit-details-marker { /* Chrome, Safari */
  display: none;
}
.faq-item summary::marker { /* Firefox */
  display: none;
}
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 25px; /* Adjust position from right */
  font-size: 26px; /* Larger icon */
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.faq-item details[open] summary::after {
  content: '−';
  transform: translateY(-50%) rotate(45deg);
}
.faq-item details[open] summary {
  color: #007bff;
  border-bottom: none;
}
.faq-item p {
  font-size: 18px; /* Larger FAQ answer */
  padding: 0 25px 20px; /* Wider padding */
  color: #555;
}
/* Style for FAQ images */
.faq-image {
  max-width: 100%;
  height: auto;
  display: block; /* For centering */
  margin: 15px auto; /* Top/bottom margin and centering */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Price list */
.price-category {
  margin-bottom: 60px;
}
/* New price category layout */
.price-category-content-wrapper { /* Wrapper applied to all categories */
  display: grid;
  grid-template-columns: minmax(auto, 500px) 1fr; /* Left image 500px, right price list variable */
  gap: 50px; /* Adjust overall left/right spacing */
  align-items: start; /* Align to top */
  max-width: 1000px; /* Max width for entire section to 1000px */
  margin: 0 auto; /* Center alignment */
}
.price-category-content-wrapper .left-column {
  display: flex;
  flex-direction: column; /* Stack vertically */
  align-items: flex-start; /* Left align */
  gap: 20px; /* Gap between image and description */
}
.price-category-content-wrapper .category-image-wrapper {
  width: 100%;
  max-width: 500px; /* Fix main image max width to 500px */
}
.price-category-content-wrapper .category-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.price-category-content-wrapper .category-description {
  font-size: 18px;
  color: #555;
  line-height: 1.8;
  padding-top: 0; /* Reset */
}
.price-category-content-wrapper .category-description p {
  margin-bottom: 10px;
}
.price-category-content-wrapper .right-column {
  display: flex;
  flex-direction: column; /* Stack vertically */
  gap: 20px; /* Gap between description text and price cards */
}
.price-card-list { /* Price card list (stacked vertically) */
  display: flex;
  flex-direction: column; /* Stack vertically */
  gap: 10px; /* Adjust gap between cards */
  width: 100%; /* Expand to parent width */
  height: auto; /* Auto height */
}
.price-card {
  background-color: #fff;
  padding: 20px; /* Adjust padding */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
  display: flex; /* Maintain Flexbox */
  flex-direction: column; /* Maintain vertical stacking */
  align-items: center; /* Maintain center alignment */
  gap: 10px; /* Add gap here to control spacing between child elements */
}
/* price-details-top: Container for product name, size, price side-by-side */
.price-card .price-details-top {
  display: flex;
  justify-content: center; /* Center alignment */
  align-items: baseline; /* Align to baseline */
  width: 100%;
  flex-wrap: wrap; /* Wrap if necessary */
  padding: 0 !important; /* Force padding to 0 */
  margin: 0 !important; /* Force margin to 0 */
  gap: 5px 10px; /* Set vertical and horizontal gap */
}
.price-card h4, .price-card .size-info, .price-card .price-value {
  margin: 0 !important; /* Force reset internal element margins */
  line-height: 1; /* Reset line height to remove extra space */
}
.price-card h4 {
  font-size: 24px; /* Larger price card title */
  font-weight: 600;
  color: #333;
}
.price-card .size-info {
  font-size: 16px; /* Slightly smaller size info but readable */
  color: #333; /* Changed: Darker text color */
}
.price-card .price-value {
  font-size: 30px;
  font-weight: bold;
  color: #007bff;
}
.price-card .add-to-cart-button {
  display: block;
  width: 100%;
  background-color: #007bff;
  color: #fff;
  padding: 5px 20px; /* Adjust button padding */
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  font-size: 18px; /* Larger button font size */
  margin-top: 0 !important; /* Force top margin to 0 */
}
.price-card .add-to-cart-button:hover {
  background-color: #0056b3;
}
/* Footer */
footer {
  background-color: #222;
  color: #eee;
  padding: 40px 0;
  text-align: center;
  margin-top: 60px; /* Space from main content */
}
footer .footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
}
footer .footer-nav a {
  text-decoration: none;
  color: #ccc;
  transition: color 0.3s ease;
  font-size: 16px; /* Footer navigation font size */
}
footer .footer-nav a:hover {
  color: #fff;
}
footer .social-links {
  margin-top: 20px; /* Space from navigation */
  margin-bottom: 25px; /* Space from copyright */
}
footer .social-links a {
  display: inline-block; /* Display icons side-by-side */
  margin: 0 10px; /* Space between icons */
}
footer .social-links img {
  width: 30px; /* Icon size */
  height: 30px;
  vertical-align: middle; /* Align text and icons vertically */
  transition: transform 0.3s ease;
}
footer .social-links img:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}
footer .copyright {
  font-size: 16px; /* Larger copyright text */
  color: #999;
  margin-top: 25px;
}
footer .copyright span {
  display: block; /* Line break for copyright text */
  margin-bottom: 5px;
}
/* Scroll to top button */
.scroll-to-top {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 55px; /* Slightly larger button */
  height: 55px; /* Slightly larger button */
  font-size: 28px; /* Larger button arrow */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, opacity 0.3s ease;
  z-index: 999;
}
.scroll-to-top:hover {
  background-color: #0056b3;
}
/* Bottom link group on page */
.bottom-link-group {
  text-align: center;
  margin-top: 10px; /* Space from content above */
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.bottom-link {
  display: block; /* Place each link on a new line */
  margin-bottom: 15px; /* Space between links */
  font-size: 20px; /* Larger bottom links */
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}
.bottom-link:hover {
  color: #0056b3;
}
.bottom-link:last-child {
  margin-bottom: 0;
}
/* New order method section style */
.order-method-content {
  /* Changes */
  background-color: transparent; /* Transparent background */
  padding: 30px 0; /* Remove left/right padding */
  border-radius: 0; /* Remove border-radius */
  box-shadow: none; /* Remove shadow */
  border-top: 1px solid #ddd; /* Add top border */
  border-bottom: 1px solid #ddd; /* Add bottom border */
  margin-bottom: 40px; /* Space from category below */
  text-align: center; /* Center alignment */
}
.order-method-content .subsection-title {
  margin-top: 0; /* Reset top margin */
  margin-bottom: 25px; /* Space below */
  color: #333; /* Adjust color */
}
.order-steps-list {
  list-style: none; /* Remove default list style */
  padding: 0;
  margin: 0 auto 30px auto; /* Center alignment and bottom margin */
  max-width: 800px; /* Max width for list */
  text-align: left; /* Left align text */
  font-size: 18px; /* Font size */
  line-height: 1.8;
  color: #555;
}
.order-steps-list li {
  margin-bottom: 15px; /* Space between each step */
}
.order-steps-list li:last-child {
  margin-bottom: 0; /* No bottom margin for the last step */
}
.order-steps-list .step-number-text {
  font-weight: bold;
  color: #007bff; /* Step number color */
  margin-right: 5px; /* Space between number and text */
}
.payment-link-wrapper {
  margin-top: 30px; /* Top margin for link */
}
.payment-link-wrapper .bottom-link {
  font-size: 20px; /* Link font size */
  color: #007bff;
  text-decoration: underline;
  font-weight: bold;
}
/* Additional style for Mouton Boot Cleaning */
.mouton-boot-cleaning-link {
  display: block;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 60px; /* Space from section below */
  text-decoration: none; /* Remove underline */
}
.mouton-boot-cleaning-link img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.mouton-boot-cleaning-link img:hover {
  transform: translateY(-5px); /* Lift slightly on hover */
}
.mouton-boot-cleaning-link p {
  font-size: 22px;
  font-weight: bold;
  color: #007bff;
  margin-top: 15px;
  transition: color 0.3s ease;
}
.mouton-boot-cleaning-link:hover p {
  color: #0056b3;
}
/* Customer Reviews Specific Styles */
.review-list {
  display: grid;
  /* PC: 3 columns */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Space between review cards */
}
.review-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column; /* Stack content vertically */
  text-align: left;
}
.review-header {
  display: flex;
  align-items: center; /* Align items vertically */
  justify-content: flex-start; /* Align to the start */
  gap: 15px; /* Space between avatar and text */
  margin-bottom: 10px;
}
.review-meta-text {
  flex-grow: 1; /* Allow text to take available space */
  text-align: left;
}
.review-headline {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1.1em;
  color: #333;
  line-height: 1.4; /* Adjust line height for headlines */
}
.review-attributes {
  font-size: 0.85em;
  color: #888;
  margin-bottom: 0; /* Remove default paragraph margin */
}
.review-avatar {
  width: 60px; /* Smaller avatar size */
  height: 60px; /* Smaller avatar size */
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0; /* Prevent avatar from shrinking */
  /* margin-left: 15px; /* Removed as avatar is now at the beginning */
  background-color: #f0f0f0; /* Placeholder background */
  display: flex;
  justify-content: center;
  align-items: center;
}
.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* Ensure image is also circular */
}
.stars {
  color: #f8af3c; /* Star color */
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: left;
}
.review-text {
  font-size: 0.95em;
  color: #555;
  line-height: 1.6;
  margin-top: 0; /* Remove default paragraph margin */
}
.before-after-subsection-title {
  font-size: 20px;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
  ;
}
/* 「続きを見る」ボタンをデフォルトで非表示にする */
#show-more-reviews {
  display: none;
}


/* ==================================== */
/* Responsive design media queries */
/* ==================================== */

/* For screens between 768px and 1024px (tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 17px; /* タブレットの基本フォントサイズを調整 */
  }

  header {
    height: 70px; /* タブレットのヘッダーの高さを調整 */
  }

  .logo-fixed {
    top: 60px; /* タブレットでのロゴのトップ位置を調整 */
    left: 20px; /* タブレットでのロゴの左位置を調整 */
  }

  .logo-fixed img {
    height: 70px; /* タブレットでのロゴの高さを調整 */
  }

  main {
    margin-top: 70px; /* メインコンテンツのトップマージンをヘッダーの高さに合わせる */
  }

  .hero-main-title {
    font-size: 50px; /* タブレットでのヒーローセクションのタイトルサイズを調整 */
  }

  .hero p {
    font-size: 26px; /* タブレットでのヒーローセクションのサブテキストサイズを調整 */
  }

  .section-title {
    font-size: 40px; /* タブレットでのセクションタイトルサイズを調整 */
  }

  .subsection-title {
    font-size: 26px; /* タブレットでのサブセクションタイトルサイズを調整 */
  }

  .subsection-title-decorated {
    font-size: 28px; /* タブレットでの装飾付きサブセクションタイトルサイズを調整 */
    padding-left: 30px; /* チェックマークのパディングを調整 */
  }

  .subsection-title-decorated::before {
    font-size: 1.2em; /* チェックマークのサイズを調整 */
  }

  .content-block {
    flex-direction: column; /* タブレットでは縦にスタック */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストも中央揃え */
  }

  .content-block .text-content {
    text-align: left; /* テキストコンテンツは左揃えに戻す */
  }

  .reason-grid-container {
    gap: 20px; /* タブレットでの理由グリッドのギャップを調整 */
  }

  .reason-item-block {
    flex-direction: column; /* タブレットでは縦にスタック */
    align-items: center; /* 中央揃え */
    /* text-align: center; */ /* テキストは左揃えに戻す */
    grid-template-columns: unset; /* グリッド設定をリセット */
    gap: unset; /* ギャップ設定をリセット */
    display: flex; /* Flexboxで制御 */
  }

  .reason-item-block.reverse {
    flex-direction: column; /* 縦にスタックを維持 */
  }

  .reason-title {
    order: 1; /* タイトルを最初に */
    text-align: left; /* 左揃え */
    font-size: 1.8em; /* フォントサイズを調整 */
  }

  .reason-icon-img {
    order: 2; /* 画像を次に */
    width: 80%; /* 画像の幅を調整 */
    max-width: 400px; /* 最大幅を設定 */
    margin: 0 auto 20px auto; /* 中央揃えと下マージン */
  }

  .reason-description {
    order: 3; /* 説明を最後に */
    text-align: left; /* 左揃え */
    font-size: 1em; /* フォントサイズを調整 */
  }

  .list-with-icons-wrapper {
    max-width: 700px; /* タブレットでのリストの最大幅を調整 */
    padding: 25px; /* パディングを調整 */
  }

  .list-with-icons {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* タブレットでは2列 */
    font-size: 18px; /* フォントサイズを調整 */
  }

  .before-after-pair {
    padding: 20px; /* パディングを調整 */
  }

  .before-after-pair .card h3 {
    font-size: 22px; /* タブレットでのビフォーアフターのh3サイズを調整 */
  }

  .before-after-pair .card p {
    font-size: 17px; /* タブレットでのビフォーアフターの説明文サイズを調整 */
  }

  .flow-list {
    max-width: 800px; /* タブレットでのフローリストの最大幅を調整 */
  }

  .flow-list li {
    padding: 18px 22px; /* パディングを調整 */
  }

  .flow-list li .step-title {
    font-size: 20px; /* タブレットでのステップタイトルサイズを調整 */
  }

  .flow-list li .step-description {
    font-size: 17px; /* タブレットでのステップ説明文サイズを調整 */
  }

  .legend-item {
    font-size: 19px; /* タブレットでの凡例フォントサイズを調整 */
  }



  
  /* クリーニング工程のグループ (ステップ1-4, 6-7) - 既にタブレットで2列表示になっているため変更なし */
  .cleaning-flow-group {
    grid-template-columns: repeat(2, 1fr); /* タブレットでは2列 */
    gap: 20px; /* ギャップを調整 */
  }
  .group-2-columns .cleaning-flow-item:nth-child(1) {
    grid-column: 1 / span 1; /* 1列目 */
  }
  .group-2-columns .cleaning-flow-item:nth-child(2) {
    grid-column: 2 / span 1; /* 2列目 */
  }
 .cleaning-flow-group.group-single-item {
    grid-template-columns: 1fr;
  }
 

  .info-card {
    padding: 25px; /* パディングを調整 */
  }

  .info-card ul {
    font-size: 17px; /* タブレットでの情報カードのリストフォントサイズを調整 */
  }

  .faq-item summary {
    font-size: 19px; /* タブレットでのFAQ質問文サイズを調整 */
    padding: 16px 22px;
  }

  .faq-item summary::after {
    right: 22px;
    font-size: 24px;
  }

  .faq-item p {
    font-size: 17px; /* タブレットでのFAQ回答文サイズを調整 */
    padding: 0 22px 18px;
  }

  .price-category-content-wrapper {
    flex-direction: column; /* タブレットでは縦にスタック */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストも中央揃え */
    grid-template-columns: 1fr; /* シングルカラム */
    gap: 30px; /* ギャップを調整 */
  }

  .price-category-content-wrapper .left-column {
    width: 100%; /* 幅を100%に */
    align-items: center; /* 中央揃え */
  }

  .price-category-content-wrapper .category-image-wrapper {
    width: 90%; /* 画像の幅を調整 */
    max-width: 450px; /* 最大幅を設定 */
  }

  .price-category-content-wrapper .category-description {
    text-align: left; /* 説明文は左揃え */
  }

  .price-card-list {
    gap: 15px; /* カード間のギャップを調整 */
  }

  .price-card {
    padding: 15px 20px; /* パディングを調整 */
  }

  .price-card h4 {
    font-size: 20px; /* タブレットでの価格カードのタイトルサイズを調整 */
  }

  .price-card .size-info {
    font-size: 14px; /* タブレットでの価格カードのサイズ情報サイズを調整 */
  }

  .price-card .price-value {
    font-size: 26px; /* タブレットでの価格カードの価格サイズを調整 */
  }

  .price-card .add-to-cart-button {
    padding: 8px 15px; /* ボタンのパディングを調整 */
    font-size: 16px; /* ボタンのフォントサイズを調整 */
  }

  .mouton-boot-cleaning-link p {
    font-size: 20px; /* タブレットでのムートンブーツリンクのフォントサイズを調整 */
  }

  .scroll-to-top {
    width: 50px; /* タブレットでのトップへ戻るボタンのサイズを調整 */
    height: 50px;
    font-size: 26px;
  }

  .bottom-link {
    font-size: 19px; /* タブレットでの下部リンクのフォントサイズを調整 */
  }

  .speech-bubble-title {
    font-size: 30px; /* タブレットでの吹き出しタイトルのフォントサイズを調整 */
    padding: 12px 20px; /* パディングを調整 */
  }

  .unified-section-title {
    font-size: 38px; /* タブレットでの統一セクションタイトルのフォントサイズを調整 */
  }

  .unified-section-title::before {
    width: 60px; /* タブレットでの円のサイズを調整 */
    height: 60px;
  }

  .review-list {
    grid-template-columns: repeat(2, 1fr); /* タブレットでは2列 */
  }

  .review-card {
    padding: 18px; /* パディングを調整 */
  }

  .review-header {
    gap: 10px; /* ギャップを調整 */
  }

  .review-avatar {
    width: 55px; /* アバターのサイズを調整 */
    height: 55px;
  }

  .review-headline {
    font-size: 1.05em; /* フォントサイズを調整 */
  }

  .review-attributes {
    font-size: 0.82em; /* フォントサイズを調整 */
  }

  .stars {
    font-size: 1.1em; /* フォントサイズを調整 */
  }

  .review-text {
    font-size: 0.92em; /* フォントサイズを調整 */
  }

  /* Fix for contact form button overflow on mobile */
  .contact-form-button {
    width: 80%; /* Adjust width to prevent overflow */
    max-width: 350px; /* Limit max width */
    padding: 15px 20px; /* Adjust padding for better fit */
    font-size: 18px; /* Adjust font size for tablet */
  }
}


/* ==================================== */
/* Responsive design media queries */
/* ==================================== */
/* For screens smaller than 768px (smartphones) */
@media (max-width: 767px) {
  body {
    font-size: 16px; /* Base font size for mobile */
    line-height: 1.6;
  }
  header {
    height: 50px; /* Adjust header height for mobile */
    background-color: #87CEEB; /* Light blue on mobile too */
  }
  header .header-content {
    padding-left: 90px; /* Left padding adjusted for logo size on mobile */
    justify-content: flex-end; /* Right align button on mobile */
  }
  header nav {
    display: none; /* Hide desktop navigation */
  }
  .mobile-menu-button {
    display: block; /* Show mobile button */
  }
  .mobile-menu-button svg {
    color: #fff; /* White mobile button */
  }
  .hero-logo {
    max-width: 250px; /* Max width of logo on mobile */
    margin-bottom: 10px;
    margin-top: 30px; /* Adjust margin-top for mobile */
  }
  .hero-main-title {
    font-size: 42px; /* Mobile hero title */
    margin-top: 20px; /* Push down on mobile too */
  }
  .hero p {
    font-size: 24px; /* Mobile hero subtext */
    margin-bottom: 20px; /* Adjust as button is removed */
  }
  /* .button-primary {
                font-size: 20px;
                padding: 18px 35px;
            } */
  section {
    padding: 20px 0;
  }
  .section-title {
    font-size: 38px; /* Changed: Adjust font size for mobile */
    padding-bottom: 8px; /* Adjust padding for mobile */
    margin-bottom: 25px; /* Adjust margin for mobile */
    border-bottom-width: 3px; /* Adjust underline thickness for mobile */
    overflow-wrap: break-word;
  }
  .service-overview-title {
    font-size: 15px;
  }
  .subsection-title {
    font-size: 24px; /* Mobile sub-section title */
  }
  .subsection-title-decorated {
    font-size: 26px; /* Changed: Adjust h3 size for mobile */
    padding-left: 0; /* Reset checkmark padding */
    text-align: left; /* Force left alignment on smartphone */
  }
  .subsection-title-decorated::before {
    position: static; /* Reset position */
    margin-right: 8px; /* Space from text */
  }
  .subsection-title-decorated::after {
    left: 0; /* Align to left */
    transform: none; /* Remove transform */
    width: 80%; /* Adjust width */
  }
  .content-block {
    flex-direction: column; /* Stack vertically */
    /* text-align: center; */ /* Removed this to allow left-alignment */
  }
  .content-block .text-content {
    flex: none; /* Reset flex ratio on mobile */
    width: 100%; /* Full width on mobile */
    text-align: left; /* Force left alignment for text content */
  }
  .content-block.reverse {
    flex-direction: column; /* Stack vertically */
  }
  .content-block .image-wrapper {
    margin-bottom: 20px;
    flex: none; /* Reset flex ratio on mobile */
    width: 100%; /* Full width on mobile */
  }
  .content-block p {
    font-size: 16px; /* Mobile body text */
  }
  /* Mobile adjustments for "Reasons We Are Chosen" section */
  .reason-grid-container {
    /* This container remains Flexbox (column direction) */
    gap: 15px; /* Reduce space between items */
  }
  .reason-item-block {
    /* Remove card style */
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    flex-direction: column; /* Vertical stacking */
    align-items: center; /* Center alignment */
    /* text-align: center; */ /* Removed this to allow left-alignment */
    flex-wrap: nowrap; /* No wrapping on smartphone */
    /* Reset grid properties applied on PC */
    display: flex; /* Override with Flexbox */
    grid-template-columns: unset;
    gap: unset;
  }
  .reason-item-block.reverse {
    flex-direction: column; /* Maintain vertical stacking */
  }
  /* Element order on mobile */
  .reason-title {
    order: 1; /* Item name displayed first */
    text-align: left; /* Force left alignment */
    margin-bottom: 15px; /* Space below item name */
    font-size: 1.5em; /* Adjust font size for mobile */
  }
  .reason-icon-img {
    order: 2; /* Image displayed second */
    width: 100%;
    height: auto;
    max-width: 300px; /* Added: Limit max width on mobile */
    margin: 0 auto 15px auto; /* Space below image and center */
    /* Reset grid properties applied on PC */
    grid-column: unset;
    grid-row: unset;
  }
  .reason-description {
    order: 3; /* Description displayed last */
    text-align: left; /* Force left alignment */
    font-size: 0.95em; /* Adjust font size for mobile */
    /* Reset grid properties applied on PC */
    grid-column: unset;
    grid-row: unset;
  }
  /* No special handling needed for even-numbered blocks on mobile as order doesn't change */
  .reason-item-block:nth-of-type(even) {
    flex-direction: column; /* Maintain vertical stacking */
  }
  /* Adjustments for h3 and p within reason-text-content (old class name) */
  /* Adjustments for h3 and p within reason-text-content (old class name) are now applied directly to .reason-title and .reason-description, so no longer needed */
  /* However, adjust existing subsection-title-decorated style for mobile */
  .subsection-title-decorated {
    font-size: 26px; /* Changed: Adjust h3 size for mobile */
    padding-left: 0; /* Reset checkmark padding */
    text-align: left; /* Force left alignment on smartphone */
  }
  .subsection-title-decorated::before {
    position: static; /* Reset position */
    margin-right: 8px; /* Space from text */
  }
  .subsection-title-decorated::after {
    left: 0;
    transform: none;
    width: 80%;
  }
  .list-with-icons-wrapper { /* Reset max width on mobile */
    max-width: none;
    padding: 20px; /* Adjust padding for mobile */
  }
  .list-with-icons {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Modified: 2 columns on mobile, adjusted min width */
    font-size: 14px; /* Adjust font size for mobile */
    gap: 5px; /* Smaller gap for mobile */
  }
  .before-after-pair {
    padding: 10px;
  }
  .before-after-pair .card h3 {
    font-size: 20px; /* Mobile Before & After h3 */
  }
  .before-after-pair .card p {
    font-size: 16px; /* Mobile Before & After description */
  }
  .faq-item summary {
    font-size: 18px; /* Mobile FAQ question */
    padding: 15px 20px;
  }
  .faq-item summary::after {
    right: 20px;
    font-size: 22px;
  }
  .faq-item p {
    font-size: 16px; /* Mobile FAQ answer */
    padding: 0 20px 15px;
  }
  footer .footer-nav ul {
    flex-direction: column; /* Stack footer nav vertically */
    gap: 10px;
  }
  footer .social-links {
    margin-top: 20px;
  }
  footer .copyright {
    font-size: 14px; /* Mobile copyright text */
  }
  footer .footer-nav a {
    font-size: 15px; /* Mobile footer nav */
  }
  .logo-fixed {
    left: 15px; /* Adjust logo left position for mobile */
    top: 60px; /* Adjust logo top position for mobile */
  }
  .logo-fixed img {
    height: 60px; /* Adjust logo height for mobile */
  }
  main {
    margin-top: 50px; /* Adjust top margin of main content for mobile (match header height) */
  }
  /* Mobile adjustments for "From Order to Delivery" flow */
  .flow-list {
    padding: 0; /* Reset padding on mobile */
    max-width: none; /* Reset max width on mobile */
  }
  .flow-list li {
    flex-direction: column; /* Stack vertically on smartphone */
    align-items: flex-start; /* Left align */
    gap: 5px; /* Space between title and description */
    padding: 15px 20px; /* Adjust padding for mobile */
    min-height: auto; /* Reset min height on mobile */
    margin-bottom: 15px; /* Spacing for mobile */
  }
  .flow-list li .step-title {
    width: auto; /* Auto width */
    text-align: left; /* Left align */
    font-size: 20px; /* Adjust font size for mobile */
    margin-bottom: 5px; /* Space between title and description */
    white-space: normal; /* Allow wrapping on mobile */
  }
  .flow-list li .step-description {
    font-size: 16px; /* Mobile description text */
  }
  /* Mobile adjustments for p tags within step-description */
  .flow-list li .step-description p {
    margin-bottom: 8px; /* Adjust paragraph spacing for mobile */
  }
  .legend-item {
    font-size: 18px; /* Mobile legend */
  }
  .bottom-link {
    font-size: 18px; /* Mobile bottom links */
  }
  /* Mobile adjustments for price list */
  .price-category-content-wrapper { /* Wrapper applied to all categories */
    flex-direction: column; /* Stack vertically on mobile */
    align-items: center; /* Center align */
    text-align: center; /* Center align text */
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 20px; /* Space between items */
  }
  .price-category-content-wrapper .left-column {
    width: 100%; /* Full width on mobile */
    align-items: center; /* Center align */
  }
  .price-category-content-wrapper .category-image-wrapper {
    width: 90%; /* Set image width to 90% on mobile */
    margin: 0 auto; /* Ensure centering */
  }
  .price-category-content-wrapper .category-image {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  .price-category-content-wrapper .category-description {
    width: 100%; /* Full width on mobile */
    padding-top: 0; /* Reset */
  }
	  .price-category-content-wrapper .category-description p {
    text-align: left;
  }
  .price-card-list {
    flex-direction: column; /* Stack cards vertically */
    gap: 10px; /* Space between cards */
    width: 100%; /* Full width of parent */
    max-width: none; /* Reset max width */
  }
  .price-card {
    padding: 10px 15px; /* Adjust padding */
    display: flex; /* Flexbox for card content */
    flex-direction: column; /* Vertical stacking */
    align-items: center; /* Center alignment */
    text-align: center; /* Center alignment */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Slightly lighter shadow */
    box-sizing: border-box; /* Include padding and border in width */
  }
  .price-card .price-details-top {
    display: flex;
    justify-content: center; /* Center alignment */
    align-items: baseline; /* Align to baseline */
    width: 100%;
    flex-wrap: wrap; /* Wrap if necessary */
  }
  .price-card h4, .price-card .size-info, .price-card .price-value {
    margin-bottom: 0;
    white-space: nowrap; /* Prevent text wrapping */
    display: inline-block;
  }
  .price-card h4 {
    font-size: 15px; /* Adjust font size for smartphone */
    margin-right: 8px; /* Adjust space */
  }
  .price-card .size-info {
    font-size: 11px; /* Adjust font size for smartphone */
    color: #333; /* Changed: Darker text color */
    margin-right: 8px; /* Adjust space */
  }
  .price-card .price-value {
    font-size: 17px; /* Adjust font size for smartphone */
    font-weight: bold;
    color: #007bff;
  }
  .price-card .add-to-cart-button {
    width: 100%; /* Full width button */
    padding: 6px 10px; /* Adjust button padding */
    margin-top: 0; /* Adjust top margin */
    font-size: 12px; /* Adjust button font size */
  }
  /* Mobile adjustments for cleaning process */
  .cleaning-flow-group {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 10px; /* Adjust space between items */
  }
  /* Step 5 remains single column */
  .cleaning-flow-group.group-single-item {
    grid-template-columns: 1fr;
  }
  .cleaning-flow-item-step5 .step-content {
    flex-direction: column; /* Revert to vertical stacking on mobile */
    text-align: center;
  }
  .cleaning-flow-item-step5 .left-content, .cleaning-flow-item-step5 .right-content {
    width: 100%; /* Full width on mobile */
    flex: none; /* Reset flex ratio */
  }
  .cleaning-flow-item-step5 .left-content p, .cleaning-flow-item-step5 .right-content p {
    text-align: center; /* Center align on mobile */
  }
  .cleaning-flow-item-step5 .left-content img, .cleaning-flow-item-step5 .right-content img {
    width: 80%; /* Full width on mobile */
    max-width: none;
  }
  .cleaning-flow-item {
    padding: 10px;
  }
  .cleaning-flow-item .step-number {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  .cleaning-flow-item .step-content h3 {
    font-size: 20px;
  }
  .cleaning-flow-item .step-content p {
    font-size: 16px;
  }
  /* Mobile style for FAQ images */
  .faq-image {
    max-width: calc(100% - 30px); /* Account for left/right padding */
  }
  /* Adjust speech bubble title for mobile */
  .speech-bubble-title {
    font-size: 20px; /* Smaller font size for mobile */
    padding: 10px 10px; /* Adjust padding for mobile */
  }
  /* Reset grid-column for mobile for group-2-columns items */
  .group-2-columns .cleaning-flow-item:nth-child(1), .group-2-columns .cleaning-flow-item:nth-child(2) {
    grid-column: auto; /* Reset to default auto placement */
  }
  /* Customer Reviews Specific Styles for Mobile */
  .review-list {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
  .review-header {
    flex-direction: row; /* Keep avatar and text side-by-side on mobile */
    align-items: center; /* Center align items vertically */
    gap: 15px; /* Space between avatar and text */
  }
  .review-avatar {
    margin-left: 0; /* Remove left margin */
    margin-bottom: 0; /* Remove bottom margin */
    width: 60px; /* Keep smaller avatar on mobile */
    height: 60px; /* Keep smaller avatar on mobile */
  }
  .review-meta-text {
    width: auto; /* Allow width to be determined by content */
    flex-grow: 1; /* Allow text to grow */
  }
  .review-headline {
    font-size: 1em; /* Adjust font size for mobile */
  }
  .review-attributes {
    font-size: 0.8em; /* Adjust font size for mobile */
  }
  .stars {
    font-size: 1em; /* Adjust font size for mobile */
  }
  .review-text {
    font-size: 0.9em; /* Adjust font size for mobile */
  }
  /* Fix for contact form button overflow on mobile */
  .contact-form-button {
    width: 90%; /* Adjust width to prevent overflow */
    max-width: 300px; /* Limit max width */
    white-space: normal; /* Allow text to wrap */
    box-sizing: border-box; /* Include padding in width */
    padding: 12px 15px; /* Adjust padding for better fit */
    font-size: 16px; /* Adjust font size for mobile */
  }
  .subsection-title-decorated::after {
    width: 100%; /* 下線の幅を親要素の100%にする */
    left: 50%; /* 中央寄せにする */
    transform: translateX(-50%); /* 中央寄せの微調整 */
  }
  .reason-grid-container {
    gap: 5px;
  }
  .reason-item-block {
    margin-bottom: 0px;
  }
  .unified-section-title {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 30px;
  }
  .before-after-subsection-title {
    font-size: 20px;
  }
  .cleaning-flow-container {
    padding: 0;
    gap: 10px; /* Gap between groups */
  }
  html {
    scroll-padding-top: 60px; /* ヘッダーの高さに合わせて調整 */
  }
  .hidden-review {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* 0.5秒かけてゆっくりと透明度が変化する */
  }
  /* スマホではボタンを表示する */
  #show-more-reviews {
    display: block;
    border: none;
    cursor: pointer;
    background-color: #007bff; /* 青色の背景 */
    color: white; /* 白色の文字 */
    padding: 10px 20px; /* パディングでサイズを調整 */
    border-radius: 5px; /* 角を丸くする */
    font-size: 16px; /* フォントサイズ */
    font-weight: bold; /* フォントの太さ */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
    margin: 20px auto; /* 左右のマージンを自動調整して中央に */
  }
}