@charset "UTF-8";
/* CSS Document */
/* --- 基本設定 --- */
        :root {
            --color-bg: #fefefe;
            --color-bg-light: #faf8f5;
            --color-bg-dark: #2c2c2c;
            --color-text: #4a4a4a;
            --color-text-light: #666;
            --color-gold: #b8860b;
            --color-gold-light: #d4af37;
            --color-gold-pale: #f5f1eb; /* 濃いペールゴールド */
            --color-accent: #d63384;
            --color-accent-dark: #c41e3a;
            --font-title: 'Shippori Mincho', serif;
            --font-body: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
            --header-height: 80px;
        }

        *, *::before, *::after {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0;
    box-sizing: border-box;
        }
.slider {
    margin-right: auto;
    margin-left: auto;
}
.mincho {
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
}
.slider div {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
      .slider img {
  width: 100%;
     backface-visibility: hidden;/*追加*/      
}
element{
  backface-visibility: visible;/*初期値 背面が可視になる*/
  backface-visibility: hidden;/*背面が非表示になる*/
}
      .slick-slider {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.notes p {
    margin-bottom: 15px;
    /* [disabled]text-align: justify; */
}
.txtpink {
    color: rgba(210,34,130,1.00);
}

.Q {
    font-family: "futura-pt", sans-serif;
    font-weight: 300;
    color: rgba(146,123,93,1.00);
    vertical-align: middle;
    font-size: 1.2em;
}
.clear {
    float: none;
    clear: both;
}
.spnone{display: block;
    }
.pcnone{display: none;
    }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            line-height: 1.8;
            color: var(--color-text);
            background-color: var(--color-bg);
        }
 .txtmed {
    font-size: medium;
    vertical-align: middle;
}
        .txt11 {
    font-size: 1.1em;
}
.txt12 {
    font-size: 1.2em;
}
.txt13 {
    font-size: 1.3em;
}
        .page-wrapper {
            padding-top: var(--header-height);
        }

        .page {
       /*display: none;*/
        }
        .page.active {
            display: block;
        }
a:hover img {
    opacity: 0.8;
}

        .container {
    max-width: 1150px;
    margin-top: 0;
    margin-left: 5%;
    margin-bottom: 0;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
        }
.container3 {
    max-width: 1350px;
    margin-top: 0;
    margin-left: 5%;
    margin-bottom: 0;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    text-align: justify;
    line-height: 160%;
        }
.containertop {
    max-width: 1150px;
    margin-top: 20px;
    margin-left: 12%;
    margin-bottom: 0;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    color: #FFFFFF;
    text-align: left;
        }
.container2 {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    background-image: url(../imgnew/LabGrown_Padparadsha_Sapphire.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
        }
img.valign{
vertical-align: middle;
}

        .title-font {
            font-family: var(--font-title);
        }
        
        section {
            padding: 100px 0;
        }
.f-rightC {
    float: right;
    margin-left: 30px;
}

        .section-title {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--color-bg-dark);
    margin-bottom: 20px;
    line-height: 140%;
        }
.titwhBr {
    color: #FFFFFF;
}

        .section-subtitle {
    text-align: justify;
    font-size: 1.2rem;
    color: var(--color-text-light);
    /* [disabled]margin-bottom: 60px; */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
        }
p {
    margin-bottom: 10px;
    font-size: 1.1em;

}
.benefit-grid .benefit-item p {
    font-size: 1.2em;
}

        .cta-button, .secondary-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            cursor: pointer;
        }
        
        .cta-button .arrow, .secondary-button .arrow {
            transition: transform 0.3s ease;
        }
        .cta-button:hover .arrow, .secondary-button:hover .arrow {
            transform: translateX(5px);
        }
.cta-button2 {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            cursor: pointer;
  transition: all 0.65s;
}
.cta-button2.isActive {
  opacity: 1;
  transition: all 0.65s;
}

.cta-button2 .arrow, .secondary-button .arrow {
            transition: transform 0.3s ease;
        }
        .cta-button2:hover .arrow, .secondary-button:hover .arrow {
            transform: translateX(5px);
        }
        .cta-button {
    background-position: 0%;
    color: white!important;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    background-image: -webkit-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: -moz-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: -o-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: linear-gradient(131deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-color: #DBCC8D;
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(212, 175, 55, 0.4);
        }
        
.cta-button2 {
    color: white!important;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    background-image: -webkit-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: -moz-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: -o-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: linear-gradient(131deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-color: #DBCC8D;
      z-index: 100;
  position: fixed;
  right: 3%; /* 画面左端に固定 */
  bottom: 5%; /* 画面下に固定 */
        }

        .cta-button:hover2 {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(212, 175, 55, 0.4);
        }
        .secondary-button {
            background: transparent;
            color: var(--color-gold);
            border-color: var(--color-gold);
            padding: 12px 30px;
            font-size: 1rem;
        }
        
        .secondary-button:hover {
            background: var(--color-gold);
            color: white;
        }

        /* --- ヘッダー --- */
        .main-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(254, 254, 254, 0.9);
            backdrop-filter: blur(8px);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            height: var(--header-height);
            display: flex;
            align-items: center;
        }

        .main-header .container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 100%;
        }

        .main-nav ul {
            display: flex;
            list-style: none;
            gap: 35px;
        }

        .main-nav a {
            text-decoration: none;
            color: var(--color-text);
            font-weight: 500;
            position: relative;
            padding-bottom: 5px;
            cursor: pointer;
        }

        .main-nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: var(--color-gold);
            transition: width 0.3s ease;
        }

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

        .menu-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 1001;
            width: 30px;
            height: 22px;
            position: relative;
        }

        .menu-toggle span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: var(--color-bg-dark);
            position: absolute;
            left: 0;
            transition: all 0.3s ease;
        }

        .menu-toggle span:nth-child(1) { top: 0; }
        .menu-toggle span:nth-child(2) { top: 10px; }
        .menu-toggle span:nth-child(3) { bottom: 0; }

        body.nav-open .menu-toggle span:nth-child(1) {
            transform: translateY(10px) rotate(45deg);
        }
        body.nav-open .menu-toggle span:nth-child(2) {
            opacity: 0;
        }
        body.nav-open .menu-toggle span:nth-child(3) {
            transform: translateY(-10px) rotate(-45deg);
        }
        
        /* --- ヒーローセクション --- */
        .hero {
    background-image: url(../imgnew/BG-KKJ202509.jpg);
    background-size: cover;
    background-position: center;
    height: calc(100vh - var(--header-height));
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
        }

       /* .hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255, 255, 255, 0.5);
        }*/

        .hero-content {
            text-align: left;
        }

        .hero-text h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #323232;
    margin-bottom: 10px;
    line-height: 1.3;
        }
        .hero-text h1 .pre-title {
    font-size: 1.8rem;
    display: block;
    font-weight: 500;
    line-height: 140%;
        }

        .hero-subtitle {
    font-size: 1.3rem;
    color: var(--color-accent);
    margin-bottom: 30px;
    font-weight: bold;
        }
        
        /* --- サポートナビセクション --- */
        .support-nav {
            background: white;
            padding: 80px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .support-nav-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            text-align: center;
        }
        .support-nav-item {
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.3s ease;
        }
        .support-nav-item:hover {
    transform: translateY(-10px);
        }
        .support-nav-image {
            width: 100%;
            aspect-ratio: 1 / 1;
            background: #f0f0f0;
            border-radius: 15px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-light);
        }
        .support-nav-item h4 {
    font-size: 1.3rem;
    color: #B69C61;
    font-weight: bold;
        }
.support-nav-item h4:hover  {
    font-size: 1.3rem;
    color: #D4C839;
    font-weight: bold;
        }

        /* --- フェア日程セクション --- */
        .fair-dates {
            background: white;
            padding: 100px 0;
        }

        .dates-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .date-card {
    background: linear-gradient(135deg, #fefefe 0%, #f9f7f4 100%);
    padding-top: 3%;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 3%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease;
        }
.date-card1 {
    background: linear-gradient(135deg, #fefefe 0%, #f9f7f4 100%);
    padding-top: 260px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease;
    background-image: url(../img2024/RA-osaka.jpeg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
        }
.date-card2 {
    background: linear-gradient(135deg, #fefefe 0%, #f9f7f4 100%);
    padding-top: 260px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease;
    background-image: url("../imgnew/rainbow-nakame.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
        }
.date-card3 {
    background: linear-gradient(135deg, #fefefe 0%, #f9f7f4 100%);
    padding-top: 260px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease;
    background-image: url(../imgnew/web.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
        }
        .date-card:hover {
            transform: translateY(-5px);
        }

        .date-card h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 20px;
        }
.date-card1:hover {
            transform: translateY(-5px);
        }

        .date-card1 h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 20px;
        }
.date-card2:hover {
            transform: translateY(-5px);
        }

        .date-card2 h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 20px;
        }
.date-card3:hover {
            transform: translateY(-5px);
        }

        .date-card3 h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 20px;
        }


        .date-info {
    margin-bottom: 5px;
        }

        .date-info strong {
        }
.txtberge {
    color: #A5854A;
}
        
        .map-link {
    text-decoration: none;
    font-weight: bold;
        }
        
        /* --- フェアのポイントセクション --- */
        .fair-points {
            background: var(--color-bg-light);
        }
        .point-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: start;
            margin-bottom: 80px;
        }
        .point-item:last-child {
            margin-bottom: 0;
        }
        .point-item:nth-child(even) .point-image {
            order: 2;
        }
        .point-image {
    width: 100%;
    /*　background: #e0e0e0; */
    /* [disabled]border-radius: 15px; */
    display: flex;
    align-items: start;
    justify-content: center;
    color: var(--color-text-light);
        }
.point-image {
    width: 100%;
    /*　background: #e0e0e0; */
    /* [disabled]border-radius: 15px; */
    display: flex;
    align-items: start;
    justify-content: center;
    color: var(--color-text-light);
        }
.point-image img {
    border-radius: 15px;
        }
        .point-text h3 {
    font-size: 1.8rem;
    color: #A5854A;
    margin-bottom: 20px;
    text-align: left;
        }

        /* --- ジェムストーン & ライトコードセクション --- */
        .light-code {
            background: white;
            padding: 100px 0;
        }
        
        .light-code-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
        }
        .stone-card {
            text-align: center;
        }
        .stone-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* [disabled]background: #e0e0e0; */
    border-radius: 15px;
    /* [disabled]margin-bottom: 15px; */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
        }
        .stone-image:hover {
    transform: scale(1.05);
    /* [disabled]box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
    /* [disabled]-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
        }
.stone-image img:hover {
    transform: scale(1.05);
    /* [disabled]box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
    /* [disabled]-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
        }
        
        .benefits-list {
    list-style: none;
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    justify-content: center;
    font-weight: bold;
        }

        .benefits-list li {
            position: relative;
            padding-left: 25px;
        }

        .benefits-list li::before {
            content: '●';
            position: absolute;
            left: 0;
            color: var(--color-accent);
        }

        /* --- 量子フィールドセクション --- */
        .quantum-field {
            background: var(--color-bg-light);
            padding: 100px 0;
        }

        .quantum-content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .quantum-image-placeholder {
    width: 100%;
    height: 500px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--color-text-light);
    background-image: url(../imgnew/QTF-kkj.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
        }
        
        .booster-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 40px;
            align-items: center;
        }
        .booster-item {
            text-align: center;
        }
        .booster-image-placeholder {
            width: 150px;
            height: 150px;
            background: #e0e0e0;
            border-radius: 10px;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-light);
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .booster-image-placeholder:hover {
            transform: scale(1.05);
        }

        /* --- ブランド紹介セクション --- */
        .about-brand {
    background-color: white;
    padding: 100px 0;
    background-image: url(../imgnew/img2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
    min-height: 900px;
        }

        .about-brand-grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 60px;
            align-items: center;
        }

        .about-icon-placeholder {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border: 2px solid var(--color-gold-pale);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .about-icon-placeholder svg {
            width: 80px;
            height: 80px;
            stroke: var(--color-gold);
        }

        /* --- アプローチセクション --- */
        .approach {
    padding: 100px 0;
    background-image: url(../imgnew/BGpink.jpg);
    background-position: center 0%;
    background-size: cover;
        }
        
        .approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 60px;
    text-align: center;
        }
        
        .approach-card {
    background: white;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    text-align: center;
        }
.approach-card p {
    background: white;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    text-align: center;
        }
        
        .approach-card .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background-color: #F2E6EF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
        }
        .approach-card .icon svg {
            width: 24px;
            height: 24px;
            stroke: var(--color-gold);
        }
        
        .approach-card h4 {
    color: var(--color-gold);
    margin-bottom: 15px;
    font-size: 1.6em;
        }

        /* --- ケイト紹介セクション --- */
        .about-kate {
    color: white;
    padding-top: 60px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 40px;
    background-image: url(../imgnew/kateBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
        }
        .about-kate .section-title, .about-kate .section-subtitle {
            color: white;
        }
        .about-kate-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 50px;
            align-items: center;
            max-width: 900px;
            margin: 0 auto;
            text-align: left;
        }
        .about-kate-photo {
    width: 90%;
    aspect-ratio: 1/1;
    background-color: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/Kate.png);
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: cover;
    margin-right: auto;
    margin-left: auto;
        }
.about-shop-photo {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 5%;
    /* [disabled]display: flex; */
    align-items: center;
    justify-content: center;
    background-image: url(../img/mise2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    margin-right: auto;
    margin-left: auto;
        }
        .about-kate-content p {
    color: #ccc;
    padding-top: 0px;
        }

        /* --- お客様の声セクション --- */
        .testimonials {
            background: white;
            padding: 100px 0;
        }
#testimonials {
    background-image: url(../imgnew/wBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 0%;
}

        .testimonial-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            margin-top: 60px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .testimonial {
            background: var(--color-bg-light);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 30px;
        }
.testimonial2 {
            background: var(--color-bg-light);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 30px;
        }
        .testimonial-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-image: url(../imgnew/pat.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
        }
.testimonial-image1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url(../img2024/cons-1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    margin-right: auto;
    margin-left: auto;
        }
.testimonial-image3 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url(../img2024/cons-2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    margin-right: auto;
    margin-left: auto;
        }
.testimonial-image2 {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-image: url(../imgnew/horry2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
        }
        .testimonial-text {
            max-height: 80px; /* 約2行分 */
            overflow: hidden;
            position: relative;
            transition: max-height 0.5s ease-in-out;
        }
        .testimonial-text.expanded {
            max-height: 1000px; /* 十分な高さ */
        }
        .read-more-btn {
            background: none;
            border: none;
            color: var(--color-gold);
            font-weight: bold;
            cursor: pointer;
            margin-top: 10px;
        }
        
        .testimonial-author {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-top: 15px;
    border-top: 1px solid #ddd;
    padding-top: 15px;
        }
        
        .more-testimonials-btn {
            text-align: center;
            margin-top: 50px;
        }

        /* --- フッター --- */
        .footer {
            background: var(--color-bg-dark);
            color: white;
            padding: 60px 0;
            text-align: center;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
            text-align: left;
        }
        
        .footer-cta {
            margin-top: 20px;
            font-size: 0.9rem !important;
            padding: 10px 25px !important;
            background: transparent !important;
            color: white !important;
            border: 1px solid white !important;
            box-shadow: none !important;
        }
        .footer-cta:hover {
            background: white !important;
            color: var(--color-bg-dark) !important;
        }

        /* --- モーダル --- */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background: white;
            padding: 40px;
            border-radius: 15px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }
        .modal-overlay.active .modal-content {
            transform: scale(1);
        }
        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 2rem;
            cursor: pointer;
            line-height: 1;
        }
        
        /* --- コンサルページ --- */
        .consult-hero {
            padding: 80px 0;
            text-align: center;
            background: var(--color-bg-light);
        }
/* --- コンサルページ --- */
        .consult-hero2 {
    padding: 80px 0;
    text-align: left;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center 60%;
    background-image: url(../imgnew/kate-king-jewellery-gemstone-vibrational-jewellery.jpg);
    position: relative;
    min-height: 550px;
    height: auto;
        }
/* --- コンサルページ --- */
       /* .consult-hero2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}*/ 
        .consult-hero h1 {
            font-size: 3rem;
        }
        .consult-hero h2 {
            font-size: 1.5rem;
            font-family: var(--font-body);
            color: var(--color-text-light);
            margin-bottom: 30px;
        }
.consult-hero2 h1 {
    font-size: 3rem;
    color: rgba(255,255,255,1.00);
    line-height: 140%;
    margin-bottom: 20px;
        }
        .consult-hero2 h2 {
    font-size: 1.5rem;
    font-family: var(--font-body);
    color: rgba(255,255,255,1.00);
    margin-bottom: 30px;
        }
        
        
        .dynamic-image-section {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 50px;
            align-items: center;
        }
        .dynamic-image-section .dynamic-image {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 15px;
    background-image: url(../imgnew/Rectangle_14_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
        }
        
        .elements-image {
            max-width: 100%;
            height: auto;
            margin: 40px 0;
            border-radius: 15px;
        }
        
        .process-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        .process-step {
    padding: 30px;
    border-radius: 15px;
    background-image: url(../imgnew/BGcolumn.jpg);
    background-size: cover;
    background-position: center center;
    -webkit-box-shadow: 5px 5px 15px rgba(194,194,194,0.34);
    box-shadow: 5px 5px 15px rgba(194,194,194,0.34);
        }
        .process-step .step-image {
    width: 100%;
    /*aspect-ratio: 4/3;*/
    /* [disabled]border-radius: 10px; */
    margin-bottom: 20px;
    text-align: center;
        }
        .process-step h4 {
            font-size: 1.3rem;
            margin-bottom: 10px;
        }
        
        .recommend-list {
    list-style: none;
    padding: 0;
    max-width: 680px;
    margin: 30px auto;
    text-align: left;
    font-size: 1.3rem;
        }
        .recommend-list li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 15px;
        }
        .recommend-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--color-accent);
            font-weight: bold;
        }
        
        .benefit-grid {
    max-width: 800px;
    margin: 40px auto;
        }
       
        .benefit-item {
    align-items: center;
    background-color: #F7EAF3;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    vertical-align: middle;
    margin-bottom: 20px;
        }
        .benefit-item .icon {
    width: 40px;
    height: 40px;
    background-color: rgba(237,160,224,1.00);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
        }
        
        .booking-section {
            background: var(--color-gold-pale);
            text-align: center;
        }
        .booking-section .section-title .line-1 {
            display: block;
        }
        .booking-section .section-title .line-2 {
            display: block;
        }
        
        .price-box {
    background-color: white;
    color: var(--color-text);
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    border-radius: 15px;
    max-width: 600px;
    margin: 0 auto 40px;
    border: 1px solid #eee;
    background-image: url(../imgnew/ue.jpg);
    background-repeat: no-repeat;
    background-size: 98% auto;
    background-position: center 5px;
        }
        .price-box .old-price {
    text-decoration: line-through;
    opacity: 0.7;
    font-size: 1.2rem;
    vertical-align: middle;
        }
        .price-box .special-price {
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--color-accent);
    vertical-align: middle;
    line-height: 140%;
        }
        .price-box .arrow {
    font-size: 2rem;
    color: var(--color-gold);
    margin: 0 15px;
    vertical-align: middle;
        }
        
        .date-button {
    display: block;
    /* background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);*/
    color: white!important;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 10px;
    transition: transform 0.2s;
    background-image: -webkit-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: -moz-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: -o-linear-gradient(319deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-image: linear-gradient(131deg,rgba(185,149,83,1.00) 0%,rgba(229,190,117,1.00) 99.95%);
    background-color: #DBCC8D;
    font-size: 1.3em;
        position: relative;        
        }
        .date-button:hover {
            transform: scale(1.05);
        }
.date-button a {
    display: inline-block;
    position: relative;
}
        
        .notes {
            font-size: 1rem;
            text-align: left;
            max-width: 800px;
            margin: 40px auto;
            color: var(--color-text-light);
            background: white;
            padding: 20px;
            border-radius: 10px;
        }
        
        .flow-wrapper {
    background: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 800px;
    margin: 30px auto;
    text-align: center;
        }
        .flow-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            align-items: center;
            text-align: center!important;
            margin-bottom: 20px;
        }
        .flow-step {
    position: relative;
    text-align: center!important;
        }
        .flow-step:not(:last-child)::after {
            content: '→';
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color-gold);
            font-size: 1.5rem;
        }
        .flow-icon {
    width: 50px;
    height: 50px;
    background: var(--color-gold-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.5em;
        }
.flow-iconleft {
    width: 50px;
    height: 50px;
    background: var(--color-gold-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
    text-align: center;
    float: left;
    margin-right: 5px;
        }
        .flow-final-step {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px dashed #ccc;
        }
        
        .faq-item {
            background: var(--color-bg-light);
            margin-bottom: 10px;
            border-radius: 8px;
        }
        .faq-item summary {
            padding: 10px 20px;
            font-weight: bold;
            cursor: pointer;
            list-style: none;
        }
        .faq-item .answer {
            padding: 0 20px 20px;
        }
#henyo {
    background-image: url(../imgnew/BG3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* [disabled]color: #FFFFFF; */
    background-position: center top;
}
.notice{
    color: #f8ff26;
    background-color: #DD3F94;
    border-radius: 20px;
    font-size: 14px;
    padding: 3px 8px;
    position: absolute;
    left: -20px;
    top: -5px;
    }
#osusume {
    background-image: url(../imgnew/BG4.jpg);
    background-size: cover;
    background-position: center center;
}


        /* --- レスポンシブ対応 --- */
        @media (max-width: 992px) {
            .main-header .container {
                justify-content: flex-end;
            }
            .main-nav {
                position: fixed;
                top: 0;
                right: 0;
                width: 300px;
                height: 100vh;
                background: var(--color-bg);
                transform: translateX(100%);
                transition: transform 0.4s ease-in-out;
                padding-top: 120px;
                padding: 10px;
            }
            body.nav-open .main-nav {
                transform: translateX(0);
                box-shadow: -5px 0 20px rgba(0,0,0,0.1);
            }
            .main-nav ul {
    flex-direction: column;
                padding-top: 50px;
    align-items: left;
    gap: 20px;
    text-align: left;
            }
            .main-nav li {
                text-align: left;
            }
            .main-nav a {
    font-size: 1.2rem;
   text-align: left;
            }
            .menu-toggle {
                display: block;
            }

            .hero-content, .quantum-content-grid, .about-brand-grid, .booster-grid, .about-kate-grid, .point-item, .dynamic-image-section {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: left;
            }
            .point-item:nth-child(even) .point-image, .dynamic-image-section .dynamic-image {
                order: -1;
            }
            .hero-image, .about-brand-grid div:first-child, .about-kate-photo { order: -1; }
            .hero-text h1 {
    font-size: 2.5rem;
    color: #FFFFFF;
}
            .benefits-list, .process-grid, /*.benefit-grid { grid-template-columns: 1fr; }
            .benefit-grid .benefit-item:nth-child(n+3) {
    grid-column: auto;
}*/
            .section-title { text-align: center !important; }
        }

        @media (max-width: 768px) {
            .hero {
    background-image: url(../imgnew/BG-KKJ202509sp.jpg)!important;
    background-size: cover;
    background-position: center top;
    height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
        }
            .section-title {
    font-size: 2.1rem;
}
            .dates-grid, .support-nav-grid { grid-template-columns: 1fr; }
            .testimonial { grid-template-columns: 1fr; text-align: center; }
            .testimonial-image { margin: 0 auto 20px; }
            .flow-grid { grid-template-columns: 1fr; gap: 30px; }
            .flow-step:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -25px; transform: translateX(50%); }
        }

        /* --- フローティングCTA --- */
        .floating-cta {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            display: none;
        }
 .floating-cta2 {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
        .floating-cta.show {
            display: block;
            animation: slideIn 0.5s ease-out forwards;
        }

        @keyframes slideIn {
            from { transform: translateY(100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

@media screen and (max-width:480px){
    .hero {
    background-image: url(../imgnew/BG-KKJ202509sp.jpg)!important;
    background-size: cover;
    background-position: center top;
    height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
        }
    .containertop {
        margin-top: 70%;
    margin-left: 2%;
        }
         .hero-text h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #323232;
    margin-bottom: 20px;
    line-height: 1.5;
        }
        .hero-text h1 .pre-title {
            color:#333;
            font-size: 1.2rem;
            display: block;
            font-weight: 500;
        }

        .hero-subtitle {  
    font-size: 1.1rem;
    margin-bottom: 30px;
    }
    
 .txt11 {
    font-size: 1em;
}
.txt12 {
    font-size: 1.1em;
}
.txt13 {
    font-size: 1.1em;
}
.txt14 {
    font-size: 1.2em;
}    
.txt15 {
    font-size: 1.1em;
}
.txt2 {
    font-size: 1.4em;
}
    .txt25{font-size:2.3em;}
    .process-step h4 {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }
    .date-card1 {
    background: linear-gradient(135deg, #fefefe 0%, #f9f7f4 100%);
    padding-top: 280px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease;
    background-image: url(../img2024/RA-osaka.jpeg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
        }
.date-card2 {
    background: linear-gradient(135deg, #fefefe 0%, #f9f7f4 100%);
    padding-top: 280px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease;
    background-image: url("../imgnew/rainbow-nakame.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
        }
.date-card3 {
    background: linear-gradient(135deg, #fefefe 0%, #f9f7f4 100%);
    padding-top: 280px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease;
    background-image: url(../imgnew/web.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
        }
     .point-text h3 {
    font-size: 1.6rem;
    color: #A5854A;
    margin-bottom: 20px;
    text-align: left;
        }
    .container3 {
    color: #333;
    margin-left: 5%;
    margin-bottom: 50;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    font-weight: normal;
        }
    .titwhBr {
    color: #333333;
} .about-brand {
    background-color: white;
    line-height: 140%;
    padding: 20px 0px 0px 0px;
    background-image: url(../imgnew/img2.jpg);
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: center 250px;
    color: #FFFFFF;
    min-height: 900px;
        }
        .spnone{display: none;
    }
    .pcnone{display: block;
    }
     .testimonial-image2 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url(../imgnew/horry2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
         margin-left: auto;
         margin-right: auto;
        }
            .consult-hero2 {
    height: 90vh;
    padding: 10px 0;
    text-align: left;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-image: url(../imgnew/BG-2ndsp.jpg);
    position: relative;
        }
    .consult-hero2 h1 {
    font-size: 2.3rem;
    color: rgba(255,255,255,1.00);
    line-height: 130%;
    margin-bottom: 10px;
        }
        .consult-hero2 h2 {
    font-size: 1rem;
    font-family: var(--font-body);
    color: rgba(255,255,255,1.00);
    margin-bottom: 390px;}
    .f-rightC {
        width:280px;
    float: none;
        clear: both;
    margin-left: 22%;
         margin-right: auto;
        text-align: center;
        
}
    #aboutkate .section-title {
    text-align: center;
    font-size: 2.6rem;
        }
     .process-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
        }
        .process-step {
            background: var(--color-bg-light);
            padding: 5px;
            border-radius: 15px;
        }
          .slider div {
  width:100%;
}
      .slider img {
  width: 100%;
     backface-visibility: hidden;/*追加*/      
} 
  element{
  backface-visibility: visible;/*初期値 背面が可視になる*/
  backface-visibility: hidden;/*背面が非表示になる*/
}
      .slick-slider {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    }