@charset "UTF-8";

/* ==========================================================================
   Reset & Base
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "M PLUS 1", sans-serif;
    color: #333;
    line-height: 1.6;
    letter-spacing: 0.05em;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    opacity: 0.7;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
    display: block;
  }
  
  .sp {
    display: none!important;
  }
  
  /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
  @media (max-width: 769px) {
    .pc {
      display: none !important;
    }
    .sp {
      display: block !important;
    }
  }

/* ==========================================================================
   Utilities
   ========================================================================== */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.bg-gray {
    background-color: #f9f9f9;
}

.margin-bottom {
    margin-bottom: 0;
    /* Adjusted per section spacing */
}

.inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    /* Consistent with header padding? Or 20px? Header was 40px. Let's start with 40 to match header width style. */
}
@media (max-width: 768px) {
    .inner {
        padding: 0 15px;
    }
}

/* Section Common */
.section {
    padding: 80px 0;
}

.section-header {
    margin-bottom: 50px;
}

.section-title {
    font-size: 7rem;
    color: rgba(95, 183, 173, 0.2);
    /* Muted teal - clean medical feeling */
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    font-family: 'Optima', 'Segoe', 'Segoe UI', 'Candara', 'Calibri', 'Arial', sans-serif !important;
}

.section-title-ja {
    display: block;
    font-size: 2.3rem;
    color: #666;
    margin-top: -40px;
    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "M PLUS 1", sans-serif;
}
@media (max-width: 768px) {
    .section-title {
        font-size: 5rem;
    }
    .section-title-ja {
        font-size: 1.8rem;
        margin-top: -20px;
    }
    .reco_small{
        font-size: 3.5rem!important;
        line-height: 1!important;
        padding-bottom: 20px;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.btn-primary {
    background-color: #aecdcc;
    color: #fff;
}

.btn-outline {
    border: 1px solid #ccc;
    color: #555;
    background: #fff;
    min-width: 200px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

.header-inner {
    max-width: 100%;
    /* Changed to full width or near full width to match widespread headers? User said "Pixel Perfect", image shows a wide header. Let's keep a max-width but maybe larger, or full width with padding. The reference site has 1200px equivalent. */
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    /* More padding on sides */
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 206px;
    height: auto;
}

.nav {
    display: none;
    /* Mobile first hidden */
}

.header-cta {
    display: none;
    /* Mobile first hidden */
}

.inner2 {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    /* Add some padding for smaller screens */
    width: 100%;
}

/* Header (c-head03) mapping */
/* Hamburger Menu Trigger */
.hamburger {
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #444;
    position: absolute;
    left: 0;
    transition: 0.3s;
}

.hamburger span:nth-child(1) {
    top: 4px;
}

.hamburger span:nth-child(2) {
    top: 14px;
}

.hamburger span:nth-child(3) {
    top: 24px;
}

@media (min-width: 1200px) {
    .hamburger {
        display: none;
    }

    .nav {
        display: block;
        margin-left: auto;
        /* Push nav to the right */
        margin-right: 30px;
        /* Space between nav and CTA */
        height: 100%;
        /* Fill header height */
        align-self: stretch;
    }

    .nav-list {
        display: flex;
        gap: 0;
        /* Handle spacing via padding for separators */
        align-items: center;
        height: 100%;
        /* Fill header height */
    }

    .nav-item {
        position: relative;
        padding: 0 15px;
        /* Spacing around items */
        height: 100%;
        /* Fill header height */
        display: flex;
        align-items: center;
        /* Vertically center the text link */
    }

    /* Vertical Divider */
    .nav-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 12px;
        background-color: #ccc;
    }

    .nav-item a {
        font-size: 0.95rem;
        color: #555;
        /* Slightly softer dark gray */
        font-weight: 500;
        text-decoration: none;
        display: inline-block;
        transition: color 0.3s;
    }

    .nav-item a:hover {
        color: #aecdcc;
        opacity: 1;
    }

    /* Remove old underline effect */
    .nav-item a::after {
        display: none;
    }

    /* Submenu Arrow for 診療案内 */
    .nav-item.nav-has-child a::after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-right: 1px solid #555;
        border-bottom: 1px solid #555;
        transform: rotate(45deg);
        margin-left: 8px;
        margin-bottom: 3px;
    }

    .nav-item.nav-has-child a:hover::after {
        border-color: #aecdcc;
    }

    .header-cta {
        display: block;
        height: 100%;
        /* Fill header height */
        display: flex;
        align-items: center;
    }

    .header-btn {
        height: 100%;
        display: block;
    }

    .header-btn img {
        height: 90px;
        /* Exact match to header height */
        width: auto;
        vertical-align: top;
        /* Ensure no gap */
    }

    /* Mega Menu */
    .mega-menu {
        display: none;
        /* Hidden by default */
        position: fixed;
        top: 90px;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        z-index: 999;
        border-top: 1px solid #eee;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    }

    .nav-item.nav-has-child:hover .mega-menu {
        display: block;
    }

    .mega-menu-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0;
        /* Flush with edge if full width? Image shows items having no outer padding? Actually image shows items filling the space. */
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        /* Small white gap between items */
        background-color: #fff;
    }

    .mega-item {
        display: flex;
        flex-direction: row;
        /* Icon left, text right? Or stacked? Image shows icon left, text right vertical centered */
        align-items: center;
        justify-content: center;
        /* Center content */
        padding: 20px 10px;
        text-decoration: none;
        color: #fff;
        height: 100px;
        /* Fixed height for boxes */
        transition: opacity 0.3s;
        gap: 15px;
    }

    .mega-item:hover {
        opacity: 0.8;
        color: #fff;
    }

    .mega-icon {
        font-size: 2rem;
    }

    .mega-text {
        font-size: 0.9rem;
        line-height: 1.4;
        font-weight: 500;
        text-align: left;
    }

    /* Colors */
    .bg-green {
        background-color: #8cc672;
    }

    .bg-teal {
        background-color: #78c2ad;
    }

    .bg-yellow {
        background-color: #e9d568;
    }

    .bg-pink {
        background-color: #eeb5c8;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    height: 500px;
    /* Reduced height as requested (banner style) */
    min-height: auto;
    background-color: #cbb69d;
    /* Warm placeholder to match reference tone */
    background-image: url('../img/modelcase/DSCF3314.webp');
    /* Placeholder for image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

.hero-content-box {
    background-color: #fff;
    padding: 40px 80px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    position: relative;
    z-index: 1;
    min-width: 600px;
    /* Ensure box has width */
}

.hero-title-jp {
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 3rem;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    font-weight: normal;
}

.hero-subtitle-en {
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 1.5rem;
    color: #e88663;
    /* Terracotta orange */
    font-style: italic;
    /* Looks italic in image? Yes. */
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .hero {
        height: 360px;
    }

    .hero-content-box {
        padding: 30px 20px;
        min-width: 90%;
    }

    .hero-title-jp {
        font-size: 2rem;
    }
    .hero-subtitle-en{
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   First Section
   ========================================================================== */
.first-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.6rem;
    line-height: 1.8;
    text-align: left;
    /* Or center? Reference text looks like it might be block text. Let's keep it left aligned for readability or justify. User said "text-center" in HTML? Ah, HTML has text-center class. Let's use text-align left inside a centered box or just left align if usually long text. I'll make it left aligned but centered container. */
    text-align: left;
    padding-bottom: 30px;
    /* Reduced from 50px */
    color: #333;
}

@media (min-width: 768px) {
    .first-text {
        text-align: center;
        /* Center on desktop? Or kept left? Usually "Greeting" text requires good readability. Let's try centered for now as per HTML class, but I'll override specific centering if needed. Actually the HTML has `text-center`, so it will be centered. I will explicitly set it to center here too to be sure or remove my text-align: left override if needed. I'll stick to center since it's a "message". */
        text-align: center;
    }
}

/* ==========================================================================
   Reasons Section
   ========================================================================== */
.reason-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 80px;
    align-items: center;
}

.reason-image img {
    width: 100%;
    height: 100%;
    /* Fill container */
    aspect-ratio: 3 / 2;
    /* Enforce aspect ratio */
    object-fit: cover;
    /* Crop to fit */
    border-radius: 4px;
    /* Optional slight rounding for polish */
}

.reason-content {
    text-align: center;
    padding: 10px;
}

.reason-number {
    width: 60px;
    height: 60px;
    background-color: #111;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Times New Roman", serif;
    font-size: 1.5rem;
    margin: 0 auto 20px;
}

.reason-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 2.1rem;
    margin-bottom: 20px;
    font-weight: normal;
}

.reason-desc {
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify;
}

.marker {
    background: linear-gradient(transparent 60%, #ffcc99 60%);
    font-weight: bold;
}

.btn-teal {
    display: inline-block;
    background-color: #5FB7AD;
    /* Teal as requested */
    color: #fff;
    padding: 15px 60px;
    text-decoration: none;
    font-size: 1.6rem;
    transition: background-color 0.3s;
}

.btn-teal:hover {
    background-color: #4da096;
}

@media (min-width: 768px) {
    .reason-item {
        flex-direction: row;
        gap: 60px;
        padding-bottom: 120px;
    }

    .reason-item:nth-child(even) {
        flex-direction: row-reverse;
    }

    .reason-image,
    .reason-content {
        flex: 1;
    }

    .reason-content {
        text-align: left;
        padding: 0;
    }

    .reason-number {
        margin: 0 auto 20px;
        /* Centered above title? Or left? Image shows centered above title actually. Let's keep it consistent. Wait, image shows Number centered above title. */
    }

    .reason-title {
        font-size: 1.8rem;
        text-align: center;
        /* Title centered under number */
    }

    .reason-desc {
        text-align: left;
        /* Text left aligned? */
    }

    /* Adjust text alignment to match image: Center Number and Title, Left Body? 
       Image: 
       (I)
       Title
       
       Body text....
       
       This implies the header part is centered.
    */
    .reason-header {
        text-align: center;
    }
}

#reasons {
    padding-bottom: 0;
    /* Remove bottom padding of the section itself */
}

/* ==========================================================================
   Checklist Section
   ========================================================================== */
.checklist {
    padding-top: 0;
}

.bg-pale {
    background-color: #f4f8f7;
    /* Very pale teal/gray */
}

.checklist-box {
    padding: 40px 20px;
}

.check-title {
    font-size: 2rem;
    margin-bottom: 40px;
    font-weight: normal;
    /* Mincho works better with normal weight usually */
    font-family: "游明朝", "Yu Mincho", serif;
    letter-spacing: 0.1em;
}

.check-list-container {
    max-width: 800px;
    margin: 0 auto;
}

.check-list {
    border-top: 1px solid #ddd;
}

.check-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    font-size: 1.6rem;
}

.check-icon {
    display: inline-block;
    width: 24px;
    height: 12px;
    border-left: 3px solid #e88663;
    /* Orange accent */
    border-bottom: 3px solid #e88663;
    transform: rotate(-45deg);
    margin-right: 20px;
    margin-bottom: 6px;
    margin-left: 10px;
}

@media (min-width: 768px) {
    .check-title {
        font-size: 2.6rem;
    }
    .checklist-box {
        padding: 60px 40px;
        /* Inner spacing for the box */
        max-width: 850px;
        /* Limit box width */
        margin: 0 auto;
        /* Center the box */
    }
}

/* ==========================================================================
   Influencer Section
   ========================================================================== */
.influencer-text {
    margin-bottom: 60px;
    font-size: 1.6rem;
}

.youtube-container {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 0 auto 30px;
    aspect-ratio: 16 / 9;
    /* Modern aspect ratio preservation */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.influencer-caption {
    font-weight: bold;
    margin-bottom: 40px;
    font-size: 1.6rem;
}

/* ==========================================================================
   Recommended Menu Section
   ========================================================================== */
/* ==========================================================================
   Recommended Menu Section
   ========================================================================== */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.menu-card {
    border: 1px solid #ddd;
    padding: 40px 20px;
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s;
    height: 100%;
    /* Ensure card fills grid cell */
}

.menu-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.menu-icon-circle {
    width: 60px;
    height: 60px;
    background-color: #333;
    border-radius: 50%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-icon-circle img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: invert(1);
    /* Invert placeholder to white if it's black */
}

.menu-icon-circle.icon-original {
    background-color: transparent;
    width: 100px;
    height: 100px;
}

.menu-icon-circle.icon-original img {
    width: 100%;
    height: 100%;
    filter: none;
    object-fit: contain;
}

.menu-card-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: normal;
}

.menu-card-desc {
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: left;
    width: 100%;
}

.menu-btn {
    display: block;
    width: 100%;
    background-color: #5FB7AD;
    /* Teal */
    color: #fff;
    text-align: center;
    padding: 15px 0;
    text-decoration: none;
    font-size: 1.6rem;
    position: relative;
    transition: background-color 0.3s;
    margin-top: auto;
    /* Push to bottom */
    overflow: hidden;
}

.menu-btn:hover {
    background-color: #4da096;
}

.menu-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
    z-index: 1;
}

.menu-btn:hover::before {
    left: 100%;
    transition: left 0.5s ease;
}

.menu-btn::after {
    content: ">";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "M PLUS 1", sans-serif;
}

@media (min-width: 768px) {
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for card layout */
        gap: 40px;
    }

    .menu-card-desc {
        text-align: left;
    }
}

/* ==========================================================================
   Q&A Section
   ========================================================================== */
.qa {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #fff;
}

.qa-header {
    position: relative;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 180px;
}

.qa-bg-text {
    font-family: 'Optima', 'Segoe', 'Segoe UI', 'Candara', 'Calibri', 'Arial', sans-serif;
    font-size: 88px;
    color: #e0efed;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.6;
}

.qa-title {
    font-family: "Shippori Mincho", serif;
    font-size: 2.4rem;
    color: #555;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-top: 40px;
}

.qa-subtitle {
    font-size: 0.95rem;
    color: #333;
    position: relative;
    z-index: 1;
}

.qa-list {
    max-width: 800px;
    margin: 0 auto;
}

.qa-item {
    border-bottom: 1px solid #ddd;
    padding: 30px 0;
}

.qa-item:first-child {
    border-top: 1px solid #ddd;
}

.qa-question {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
}

.qa-q-mark {
    font-family: "Times New Roman", serif;
    font-size: 1.8rem;
    color: #aecdcc;
    margin-right: 20px;
    font-weight: bold;
    font-style: italic;
}

.qa-q-text {
    font-size: 1.1rem;
    font-weight: 500;
}

.qa-answer {
    display: flex;
    align-items: flex-start;
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
}

.qa-a-mark {
    font-family: "Times New Roman", serif;
    font-size: 1.8rem;
    color: #e88663;
    margin-right: 20px;
    font-weight: bold;
    font-style: italic;
    line-height: 1;
}

.qa-a-text {
    font-size: 1rem;
    line-height: 1.8;
}

/* ==========================================================================
   Concept
   ========================================================================== */
.concept-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.concept-text {
    flex: 1;
}

.concept-head {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #444;
    line-height: 1.5;
}

.concept-image {
    flex: 1;
}

.dummy-image {
    width: 100%;
    height: 300px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .concept-content {
        flex-direction: row;
        align-items: center;
    }
}

/* ==========================================================================
   News
   ========================================================================== */
.news-list {
    max-width: 800px;
    margin: 0 auto 40px;
    border-top: 1px solid #eee;
}

.news-item {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.news-date {
    font-family: 'Lato', sans-serif;
    color: #888;
    font-size: 0.9rem;
}

.news-cat {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    background-color: #aecdcc;
    color: #fff;
    border-radius: 20px;
    min-width: 80px;
    text-align: center;
}

.news-title {
    flex: 1;
    color: #444;
}

/* ==========================================================================
   Services
   ========================================================================== */
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.service-item {
    background: #fff;
    padding: 30px;
    border: 1px solid #eee;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 8px;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.service-name {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #444;
}

.service-desc {
    font-size: 0.9rem;
    color: #666;
}

/* ==========================================================================
   Access
   ========================================================================== */
.access-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.access-info {
    flex: 1;
}

.clinic-name {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.address,
.tel {
    margin-bottom: 15px;
}

.hours-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.hours-table th,
.hours-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.hours-table th {
    background-color: #f0f0f0;
    font-weight: normal;
}

.hours-table tr:nth-child(even) {
    background-color: #fff;
}

.note {
    font-size: 0.8rem;
    color: #888;
}

.access-map {
    flex: 1;
}

.dummy-map {
    width: 100%;
    height: 300px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .access-content {
        flex-direction: row;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background-color: #f4f6f6;
    /* Very light gray */
    padding: 60px 0 20px;
    color: #555;
    border-top: 3px solid #aecdcc;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

.footer-logo {
    text-align: center;
}

.footer-nav {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
}

.copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #999;
}

@media (min-width: 768px) {
    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-logo {
        text-align: left;
    }
}

/* ==========================================================================
   Q&A Section (New Structure)
   ========================================================================== */
/*よくある質問*/
.c-faq01__sec {
    background-color: #F9FBFD;
    padding-top: 74px;
    padding-bottom: 96px;
}

.c-head03__inner {
    text-align: center;
}

.c-head03__sub {
    font-size: 88px;
    font-family: 'Optima', 'Segoe', 'Segoe UI', 'Candara', 'Calibri', 'Arial', sans-serif !important;
    color: rgba(95, 183, 173, 0.2);
    display: block;
    line-height: 1;
    margin-bottom: -40px;
    /* Pull main title up into this space */
}

.c-head03__main {
    font-size: 36px;
    color: #666;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    position: relative;
    /* Ensure overlapping z-index behavior if needed */
}

.c-head03__lead {
    color: #333;
}

.c-head03 {
    position: relative;
    margin-bottom: 60px;
    padding-bottom: 50px;
    /* Add space for the bottom icon */
}

.c-head03::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    width: 32px;
    aspect-ratio: 1;
    background: url(../img/modelcase/medical-menu-list-icon.svg) no-repeat center center / contain;
}


.c-faq01>dt,
.c-faq01 dd {
    padding: 19px 90px;
}

.c-faq01>dt {
    position: relative;

    background-color: #5FB7AD;
    color: white;
    font-size: 25px;
    line-height: 1.5;
    font-weight: 600;
    font-family: "Shippori Mincho", serif;
    cursor: pointer;
    letter-spacing: 0.1em;
}

.c-faq01>dt::before,
.c-faq01 dd::before {
    content: "";
    position: absolute;
    background: url(../img/modelcase/ico_q.png) no-repeat center / contain;
    top: 22px;
    left: 37px;
    width: 36px;
    height: 34px;
}

.c-faq01>dt::after {
    position: absolute;
    content: "";
    display: block;
    margin-top: -1px;
    background: url(../img/modelcase/ico_arrow02.png) no-repeat center / contain;
    transition: all 0.3s ease;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: transform 0.3s ease;
    width: 34px;
    height: 34px;
    top: 21px;
    right: 48px;
}

.c-faq01>dt.is-active::after {
    transform: rotate(0deg);
    /* ← くるっと回転 */
}

.c-faq01>dt,
.c-faq01 dd {
    padding: 19px 90px;
}

.c-faq01>dd {
    position: relative;
}

.c-faq01 dd::before {
    content: "";
    position: absolute;
    background: url(../img/modelcase/ico_a.png) no-repeat center / contain;
    top: 19px;
    left: 43px;
    width: 24px;
    height: 26px;
}

.c-btn01__link {
    background: white;
    color: #5FB7AD;
    border: 2px solid #5FB7AD;
    padding: 21px 40px 21px 25px;
    font-size: 18px;
    font-weight: 700;
    display: block;
}

.u-treatment-more-btn {
    max-width: 660px;
    width: 100% !important;
    margin: 60px auto 0;
}

.c-btn01.is-arw .c-btn01__link {
    position: relative;
    padding: 17px 20px;
}

.c-btn01.is-arw .c-btn01__link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 25px;
    height: 25px;
    background: url(../img/modelcase/ico_arrow01.svg) no-repeat center / contain;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.c-faq01+.c-faq01 {
    margin-top: 36px;
}

.js-c-toggle-content {
    display: none;
}


.js-c-toggle-trigger {
    position: relative;
    cursor: pointer;
    padding-right: 40px;
    /* 矢印のスペース */
}

.faq-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    width: 21px;
    height: 21px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

/* 開いたときに回転 */
.js-c-toggle-trigger.is-active .faq-arrow {
    transform: translateY(-50%) rotate(180deg);
}

@media screen and (max-width: 769px) {
    .c-head03__sub {
        font-size: 40px;
    }

    .c-head03__main {
        font-size: 26px;
        margin-top: -25px;
    }

    .c-head03__lead {
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 20px;
    }

    .c-faq01>dt {
        font-size: 16px;
    }

    .c-faq01>dt,
    .c-faq01 dd {
        padding: 12px 37px 12px 40px;
    }

    .c-faq01>dt::before,
    .c-faq01 dd::before {
        top: 6px;
        left: 15px;
        width: 15px;
    }

    .c-faq01 dd::before {
        top: 12px;
        left: 15px;
        width: 15px;
    }

    .c-faq01>dt::after {
        top: 30%;
        right: 10px;
        width: 21px;
    }
}