/* -------------------- 
   繝輔か繝ｳ繝郁ｨｭ螳�
-------------------- */
.kint-r {
    font-family: "kinto-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.kint-b {
    font-family: "kinto-sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* --------------------
     繝吶�繧ｹ繧ｹ繧ｿ繧､繝ｫ
-------------------- */
body {
    margin: 0;
    background-color: #F2F7FF;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

/* --------------------
     繝輔ぃ繝ｼ繧ｹ繝医ン繝･繝ｼ�医ヲ繝ｼ繝ｭ繝ｼ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ��
-------------------- */
.hero {
    position: relative;
    background: url(https://rsy-labo.sakura.ne.jp/startup-test/wp-content/uploads/2025/05/mv_pc.png) center/cover no-repeat;
    height: 100vh;
    color: white;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 60px;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero-content h1 {
    font-size: 2.2rem;
    margin-bottom: 30px;
    line-height: 1.5;
    position: relative;
}

/* 繧ｵ繝ｼ繝薙せ繝ｪ繧ｹ繝� */
.services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0px;
    margin-bottom: 40px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-item img {
    width: 32px;
}

/* --------------------
     辟｡譁吶〒逶ｸ隲��繧ｿ繝ｳ
-------------------- */
.btn {
    display: block;
    background-color: #ffa867;
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    width: fit-content;
}

.cta-button {
    position: absolute;
    bottom: 0px;
    left: 60px;
    z-index: 3;
}


.btn:hover {
    background-color: #E3853E;
}

/* 繝偵�繝ｭ繝ｼ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ縺ｮ逕ｻ蜒� */
.hero-image {
    position: absolute;
    right: 30px;
    bottom: 0;
    max-width: 600px;
    z-index: 1;
    top: 100px;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* --------------------
     縲後％繧薙↑謔ｩ縺ｿ繧定ｧ｣豎ｺ縺励∪縺吶€阪そ繧ｯ繧ｷ繝ｧ繝ｳ
-------------------- */
h2 img {
    height: 32px;
}

h2 {
    color: #003B99;
    margin-bottom: 20px;
}

.problems {
    padding: 40px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* 繧ｫ繝ｼ繝峨Μ繧ｹ繝亥�菴� */
.problem-list {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 蜷�き繝ｼ繝� */
.problem-item {
    border-radius: 24px;
    width: 90%;
    max-width: 600px;
    margin-top: -40px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* 繝峨Ο繝��繧ｷ繝｣繝峨え */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* 繧ｫ繝ｼ繝峨�菴咲ｽｮ隱ｿ謨ｴ */
.item-01 {
    transform: translateX(-100px);
}

.item-02 {
    transform: translateX(+140px);
}

.item-03 {
    transform: translateX(-50px);
}

.item-04 {
    transform: translateX(+80px);
}

.item-05 {
    transform: translateX(-180px);
}

.item-06 {
    transform: translateX(+30px);
}

/*繧ｫ繝ｼ繝峨�菴咏區繧偵Μ繧ｻ繝�ヨ */
.problem-item:first-child {
    margin-top: 0;
}

/* 繧ｫ繝ｼ繝峨�繝倥ャ繝€繝ｼ驛ｨ蛻� */
.problem-header {
    background: linear-gradient(to right, #002451, #337ed6);
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 12px 16px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: left;
}

.problem-header span {
    margin-right: 8px;
}

/* 繧ｫ繝ｼ繝峨�譛ｬ譁�Κ蛻� */
.problem-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    padding: 36px;
    color: #003B99;
}

.problem-content img {
    width: 100px;
    flex-shrink: 0;
    margin-top: 4px;
    padding: 50px 30px 50px 30px;
}

.problem-content p {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.6;
    padding: 90px 20px 90px 20px;
}

.problem-content .highlight {
    color: #f68b29;
}

.problem-content a {
    color: #337ed6;
    text-decoration: underline;
    font-size: 0.85rem;
}

.problem-content a:hover {
    color: #003B99;
}

/* 逕ｻ蜒上→繝�く繧ｹ繝医�蟾ｦ蜿ｳ蜿崎ｻ｢逕ｨ繧ｯ繝ｩ繧ｹ */
.problem-item.reverse .problem-content {
    flex-direction: row-reverse;
}

/* --------------------
     邁｡譏薙♀蝠上＞蜷医ｏ縺帙�繝�け繧ｹ
-------------------- */
.mini-contact {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 100px 50px;
    text-align: center;
    color: white;
    z-index: 1;
    background-image:url(https://rsy-labo.sakura.ne.jp/startup-test/wp-content/uploads/2025/05/mini-contact.png);
    background-size: cover;
}

/* --------------------
     蛻ｶ菴懊�豬√ｌ
-------------------- */

.card-slide h2 {
    padding-left: 50px;
}

/* 繝ｩ繝�ヱ繝ｼ蜈ｨ菴� */
.slider-container {
    position: relative;
    max-width: 1500px;
    margin: auto;
    display: flex;
    align-items: center;
    overflow: visible;
    /* 菫ｮ豁｣: overflow: visible 縺ｫ螟画峩 */
    padding: 0 50px;
}

/* 繝懊ち繝ｳ */
.prev-btn,
.next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #003B99;
    color: white;
    border: none;
    font-size: 24px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
}

/* 蟾ｦ蛛ｴ縺ｫ驟咲ｽｮ */
.prev-btn {
    left: -2px;
    /* 蟾ｦ縺ｫ蟆代＠螟悶↓驟咲ｽｮ */
}

/* 蜿ｳ蛛ｴ縺ｫ驟咲ｽｮ */
.next-btn {
    right: -2px;
    /* 蜿ｳ縺ｫ蟆代＠螟悶↓驟咲ｽｮ */
}

/* 繧ｹ繝ｩ繧､繝€繝ｼ蜀��陦ｨ遉ｺ鬆伜沺 */
.slider-window {
    overflow: hidden;
    width: 100%;
}

/* 繧ｹ繝ｩ繧､繝蛾Κ蛻� */
.slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: max-content;
}

/* 蜷�き繝ｼ繝� */
.card {
    width: 280px;
    /* 繧ｫ繝ｼ繝峨�讓ｪ蟷� */
    margin: 10px;
    background-color: #fff;
    color: #002451;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
    text-align: center;
}

.card:hover {
    transform: translateY(-5px);
    /* 繝帙ヰ繝ｼ譎ゅ↓蟆代＠豬ｮ縺� */
}

/* 繧｢繧､繧ｳ繝ｳ縺ｮ繧ｵ繧､繧ｺ繧貞ｰ上＆縺上☆繧� */
.icon img {
    width: auto;
    height: 100px;
    flex-shrink: 0;
    margin: 0 15px;
    padding: 10px;
}

/*繝峨ャ繝医リ繝薙ご繝ｼ繧ｷ繝ｧ繝ｳ */
.slider-dots {
    text-align: center;
    margin-top: 20px;
}

.slider-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #337ed6;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-dots .dot.active {
    background-color: #002451;
}

/* --------------------
     螳溽ｸｾ繝ｻ繧ｵ繝ｳ繝励Ν邏ｹ莉�
-------------------- */
.sample-list {
    margin-top: 20px;
    padding: 30px;
    background: linear-gradient(to bottom, #275EB5, #142F5B);

}

.sample-list h2,
.sample-list p,
.sample-list h3 {
    color: white;
}

.sample {
    display: flex;
    justify-content: center;


}

.sample-item {
    padding: 30px;
}

.sample-item img {
    width: 300px;
    height: auto;
}

.sample-btn {
    display: block;
    margin-left: auto;
    width: fit-content;
    margin-right: 30px;
    padding: 13px 50px;
}

/* --------------------
    譁咎≡陦ｨ
-------------------- */
.price-section {
    color: #003B99;
    padding-bottom: 30px;
}

.price-list h2 {
    margin-left: 30px;
}

.price-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 40px;

}

.box {
    background-color: white;
    border-radius: 10px;
    padding: 60px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;

}

.box img {

    height: 150px;
    width: 150px;
    object-fit: contain;
    border-radius: 5px;
    margin-bottom: 10px;
}

.box p {
    font-size: 25px;

}

/* --------------------
繧医￥縺ゅｋ縺碑ｳｪ蝠�
-------------------- */
.faq-section {
    background: #f2f7ff;
    padding: 40px;
    font-family: sans-serif;
}

.faq-section h2 {
    color: #174aa0;
    margin-bottom: 30px;
}

.faq-item {
    background: #fff;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px;
    font-size: 18px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #174aa0;
    gap: 20px;
}

.faq-question-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.faq-question .arrow {
    flex-shrink: 0;
}

.q-icon {
    border: 2px solid #174aa0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.faq-answer {
    background: linear-gradient(to right, #dceeff, #c0daff);
    padding: 20px;
    display: none;
    color: #174aa0;
    font-size: 16px;
}

.faq-item.open .faq-answer {
    display: block;
}

.faq-item.open .arrow {
    transform: rotate(180deg);
}

/* --------------------
繝輔ャ繧ｿ繝ｼ
-------------------- */
footer {
    padding: 30px;
    background: linear-gradient(to bottom, #275EB5, #142F5B);
}

footer p {
    color: white;
    font-size: 30px;
}

/* --------------------
SP蟇ｾ蠢�
-------------------- */
@media screen and (max-width: 768px) {
    .hero {
        background-image: url(https://rsy-labo.sakura.ne.jp/startup-test/wp-content/uploads/2025/05/sp_mv.png);
        height: auto;
    }

    .hero-content h1 {
        font-size: 23px;
    }

    .services {
        gap: 13px;
    }

    .hero-image {
        position: static;
        width: 90%;
        margin: 0 auto 25px auto;
    }

    .cta-button {
        position: static;
        text-align: center;
    }

    .btn {
        width: auto;
        margin: 0 auto;
    }

    .problem-content img {
        padding: 20px;
        width: 80px;
    }

    .problem-content p {
        padding: 20px;
        font-size: 1rem;
    }

    .problem-item {
        margin-top: 20px;
        transform: none !important;
        width: 100%;
        max-width: 100%;
    }

  .card {
        width: 350px 
  }





    .sample02 {
        display: none;
    }

    .sample03 {
        display: none;
    }

    .price-box {
        grid-template-columns: repeat(1, 1fr);
    }
    .footer-p{
      font-size: 25px;
    }
}