@charset "utf-8";

    body {
        font-family: 'Noto Sans JP', sans-serif;
        background-color: #FFFCF1;
        margin: 0;
        padding: 0;
        color: #333;
        font-size: 14px;
    }

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

    header {
        background-color: #FFFCF1;
        padding: 20px 0;
    }

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

    h1, h2 {
        font-family: 'Zen Maru Gothic', sans-serif;
        color: #3E704D;
    }
    h2{
        display: inline-block;
        margin-bottom: 40px;
        font-size: 1.8em;
    }
    img{
        max-width: 100%;
    }
    .pc{
        display: inline-block;
    }
    .mb{
        display: none;
    }
    @media (max-width: 768px) {
        header{
            padding: 3%;
        }
        header .container {
            display: block;
            position: relative;
            padding: 0;
        }
        header .container img{
            width: 60%;
        }
        header .btn {
            position: fixed;
            z-index: 999;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding: 0.5em 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        header #headbtn.hidden {
            opacity: 0;
            visibility: hidden;
        }
        h2{
            font-size: 1.5em;
        }
        .pc{
            display: none;
        }
        .mb{
            display: inline-block;
        }
    }
    .title-container {
    position: relative;
    text-align: center;
    display: inline;
    padding-bottom: 10px;
    }

    .title-container::before,
    .title-container::after {
    content: '';
    position: absolute;
    top: 100%;
    width: 50%;
    height: 2px; /* 線の太さ */
    background-color: #3E704D; /* 緑の色 */
    z-index: 10;
    }

    .title-container::before {
    left: 0;
    }

    .title-container::after {
    right: 0;
    }

    .title-container h2::after {
    content: '';
    background: url(../img/midashi-underline.png) no-repeat #fefcf1;
    background-size: contain;
    position: absolute;
    transform: translateX(-50%);
    left: 50%; /* 位置調整 */
    bottom: -18px; 
    width: 15px;
    height: 18px;
    z-index: 20;
    }
    .process .title-container h2::after {
        background: url(../img/midashi-underline.png) no-repeat #CFEBD3;
        background-size: contain;
    }

    .hero {
    position: relative;
    height: 600px;
    }

    .hero-content {
        position: relative;
        max-width: 1150px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .hero-text {
        position: absolute;
        top: 4em;
        left: 0;
        z-index: 2;
        background: url(../img/mv-h1-background.png) no-repeat;
        background-size: contain;
        padding: 75px 45px;
        border-radius: 60px;
        max-width: 600px;
    }

    .hero-text h1 {
        color: #3E704D;
        font-size: 2.4em;
        font-weight: 500;
        margin: 0 0 10px;
        line-height: 1.4;
    }

    .hero-text p {
        color: #3E704D;
        font-size: 1.4em;
        margin: 0;
    }

    .hero-image {
        position: absolute;
        right: 0;
        width: 90%;
        height: auto;
        clip-path: ellipse(70% 100% at 70% 50%);
    }

    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

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

        .hero-content {
            flex-direction: column;
        }

        .hero-text {
            position: relative;
            width: 100%;
            margin-bottom: -4em;
            margin-top: 0;
            background-size: cover;
            padding: 2em 0 3em;
            top: 1em;
        }
        .hero-text h1{
            font-size: 1.8em;
            line-height: 1.6;
            padding: 0 8%;
        }
        .hero-text p{
            font-size: 0.89em;
            padding: 0 8%;
        }


        .hero-image {
            position: relative;
            width: 100%;
            height: auto;
            clip-path: ellipse(100% 100% at 50% 50%);
        }
    }

    .btn {
        display: inline-block;
        background-color: #E77894;
        color: #fff;
        padding: 0.5em 2.5em;
        text-decoration: none;
        border-radius: 5px;
        border: none;
        font-weight: 500;
        font-size: 1.3em;
        box-shadow: #ccc 3px 4px 2px;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }
    .btn:hover {
        background-color: #e55c7e;
    }
    .btn.gray{
        background-color: #757575;
        font-size: 1em;
    }


    .about, .products, .program, .process, .contact {
        padding: 30px 0;
        text-align: center;
    }
    .about p{
        line-height: 3;
        margin: 0 auto 3em;
    }

    .products {
        padding: 0;
        position: relative;
        max-width: 1100px;
        margin: 0 auto;
    }

    .products::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -60px;
        width: 20%;
        height: 35%;
        background: url(../img/circle01-pink.png) no-repeat;
        background-size: contain;
        z-index: 1;
    }

    .products::after {
        content: '';
        position: absolute;
        bottom: -40px;
        left: -40px;
        width: 15%;
        height: 33%;
        background: url(../img/circle02-beige.png) no-repeat;
        background-size: contain;
        z-index: 2;
    }

    .products .container {
        position: relative;
        max-width: 970px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .products h2 {
        background-color: #57B38A;
        color: #fff;
        display: inline-block;
        padding: 8px 20px;
        border-radius: 15px;
        border-bottom-right-radius: 0;
        position: absolute;
        top: -40px;
        left: -10px;
        z-index: 3;
        font-size: 1.3rem;
        line-height: 1.4;
        margin: 0;
        font-weight: 500;
    }

    .products h2::after {
        content: '';
        position: absolute;
        bottom: -10px;
        right: 0;
        height: 40px;
        border-width: 0 10px 10px 0;
        border-radius: 10px;
        border-style: solid;
        border-color: transparent #57B38A;
    }

    .products-content {
        background-color: #CFEBD3;
        border-radius: 30px;
        padding: 0px 0px 35px;
        margin-top: 30px;
        position: relative;
        z-index: 2;
        overflow: hidden;
    }

    .background-text {
        white-space: nowrap;
        pointer-events: none;
        display: flex;
        justify-content: flex-end;
        padding-top: 5px;
        padding-right: 5px;
    }

    .product-images {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        gap: 20px;
        margin: 0 auto;
        width: 85%;
    }

    .product-image {
        max-width: 100%;
        height: auto;
    }

    .product-btn {
        background-color: #57B38A;
        border: none;
        color: white;
        padding: 13px 20px;
        border-radius: 5px;
        font-weight: 500;
        text-decoration: none;
        display: inline-block;
        margin-top: 15px;
        transition: background-color 0.3s ease;
        box-shadow: #ACDDB3 3px 4px 3px;
    }

    .product-btn:hover {
        background-color: #4a9c76;
    }

    @media (max-width: 768px) {
        .background-text {
            font-size: 4rem;
        }
        .background-text img{
            width: 75%;
        }
        .about .container{
            padding: 0;
        }
        .about p{
            line-height: 2.5;
        }
        .products{
            width: 92%;
        }
        .products h2 {
            font-size: 1.2rem;
            padding: 10px 20px;
        }
        .products::before,
        .products::after{
            display: none;
        }
        
        .product-images {
            flex-direction: column;
            align-items: center;
            padding-top: 2em;
            width: 90%;
        }
        .product-btn{
            padding: 10px 30px;
        }
    }

    .program{
        padding: 9em 0 6em;
    }

    .program p{
        margin: 10px auto;
    }

    .program-benefits {
        display: flex;
        justify-content: space-around;
        margin: 40px auto 10px;
        width: 70%;
    }

    .benefit {
        flex-basis: 30%;
    }

    .benefit h3 {
        background-color: #F5EFD9;
        width: 125px;
        height: 33px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
    }

    .benefit img{
        height: 80px;
    }
    .benefit:nth-child(2) img{
        height: 70px;
        padding-top: 10px;
    }

    .benefit p{
        background: url(../img/benefit-text-bg.png) no-repeat center;
        background-size: 85%;
        padding: 1.2em 0 2em;
        margin: 0;
        line-height: 1.8;
    }

    .process {
        background-color: #CFEBD3;
        padding-top: 40px;
        position: relative;
    }

    .process-steps {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 10px auto 30px;
        width: 90%;
    }
    .process-steps span {
        width: 2%;
        padding-top: 3em;
    }
    .process-steps span img {
        width: 75%;
    }

    .process-step {
        flex-basis: calc(20% - 20px);
        margin-bottom: 20px;
        width: 20%;
    }

    .process-step p{
        margin: 0.5em auto;
        font-size: 1.2em;
    }

    .process-step img {
        width: 70%;
    }

    .faq {
        background-color: #F1FBF4;
        position: relative;
        padding: 8em 0;
    }

    .faq-decoration {
        position: absolute;
        width: 100%;
        height: 200px;
        bottom: -100px;
        background: radial-gradient(ellipse at center, rgba(207, 235, 211, 0.3) 0%, rgba(207, 235, 211, 0) 70%);
        z-index: 1;
    }

    .background-circles {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .circle {
        content: '';
        position: absolute;
    }
    .circle-1 {
        top: 10em;
        left: 11em;
        width: 15%;
        height: 15%;
        background: url(../img/circle04-pink.png) no-repeat;
        background-size: contain;
    }

    .circle-2 {
        bottom: 14em;
        right: 8em;
        width: 15%;
        height: 15%;
        background: url(../img/circle05-beige.png) no-repeat;
        background-size: contain;
    }

    .circle-3 {
        bottom: -5em;
        left: 5em;
        width: 14%;
        height: 14%;
        background: url(../img/circle06-green.png) no-repeat;
        background-size: contain;
    }
    .circle-4 {
        top: -5em;
        right: 4em;
        width: 13%;
        height: 33%;
        background: url(../img/circle03-green.png) no-repeat;
        background-size: contain;
    }

    .faq-container {
        position: relative;
        max-width: 680px;
        margin: 0 auto;
        padding: 0 ;
        z-index: 2;
    }

    .faq-content {
        background-color: #fff;
        border-radius: 30px;
        padding: 4em 5em;
        position: relative;
    }

    .faq-content::before {
        content: '';
        position: absolute;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-radius: 36px;
        background: #3E704D;
        z-index: -1;
    }

    .faq-title {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 15px;
        margin-bottom: 5em;
    }

    .faq-icon {
        width: 40px;
        height: 40px;
    }

    .faq-title h2 {
        color: #3E704D;
        margin: 0;
        font-size: 1.8em;
    }

    .faq-item {
        margin-bottom: 5em;
    }

    .faq-item:last-child {
        margin-bottom: 0;
    }

    .faq-question {
        color: #3E704D;
        font-weight: bold;
        margin-bottom: 18px;
        text-indent: -1em;
        padding-left: 1em;
    }

    .faq-answer {
        color: #333;
        line-height: 1.6;
        text-indent: -1em;
        padding-left: 1em;
    }


    @media (max-width: 768px) {
        .background-circles{
            display: none;
        }
        .faq{
            padding: 5em 0;
        }
        .faq-container{
            width: 90%;
        }
        .faq-content {
            padding: 30px 20px;
        }
        .faq-title{
            gap:0;
            margin-bottom: 3em;
        }
        .faq-item{
            margin-bottom: 3em;
        }

        .circle {
            display: none;
        }
    }

    .contact{
        padding: 6em 0 0;
        border-bottom:#f5efd9 3px solid;
    }
    .contact h2 {
        color: #000;
        font-weight: 400;
        font-size: 1.5em;
        margin: 0 auto 1em;
    }
    .contact .imasugu{
        margin: 0 auto 1.5em;
        font-size: 1.6em;
        color: #E77894;
    }
    .contact form {
        background-color: #fff;
        padding: 2em 0 5em;
    }
    .contact form table{
        max-width: 500px;
        margin: 0 auto;
        border-spacing: 0 20px;
    }
    .contact form table tr{
        margin-bottom: 2em;
        position: relative;
    }
    .contact form table tr th{
        font-weight: 400;
        width: 28%;
        font-size: 1.1em;
    }
    .contact.kakunin{
        padding-top: 4em;
    }
    .contact.kakunin form{
        margin: 3em 0;
    }
    .contact.kakunin form table tr th {
        width: 45%;
    }
    .form-group {
        margin-bottom: 20px;
        text-align: left;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
    }

    .form-group input, .form-group textarea, .form-group select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .form-group ul{
        padding-left: 0;
        margin: 0;
    }
    .form-group ul li{
        list-style: none;
        display: flex;
    }
    .form-group.address ul{
        margin-bottom: 10px;
        position: relative;
    }
    .form-group.address ul li {
        align-items: center;
    }
    .form-group.address ul.addressNumber input{
        width: 40%;
    }

    .submit-btn{
        display: flex;
        justify-content: center;
        margin-top: 3em;
    }

    .submit-btn input {
        display: inline-block;
        background-color: #E77894;
        color: #fff;
        padding: 0.5em 2.5em;
        text-decoration: none;
        border-radius: 5px;
        border: none;
        font-weight: 500;
        font-size: 1.3em;
        box-shadow: #ccc 3px 4px 2px;
        transition: background-color 0.3s ease;
        margin: 0 1.5em;
    }
    .submit-btn input:hover {
        background-color: #e55c7e;
    }
    .submit-btn input.backbtn {
        background-color: #757575;
    }


    footer .copylight{
        text-align: center;
        padding: 1em 0;
        color: #A5A5A5;
        font-size: 0.7em;
    }

    @media (max-width: 768px) {
        .program{
            padding: 5em 0 5em;
        }
        .program-benefits {
            flex-direction: column;
        }
        .benefit {
            margin-bottom: 20px;
        }
        .process{
            padding-top: 3em;
        }
        .process-step {
            flex-basis: calc(50% - 20px);
            margin-bottom: 0;
        }
        .process-step img{
            width: 40%;
        }
        .process-steps span {
            width: 6%;
            padding: 1em 0;
        }
        .process-steps span img{
            transform: rotate(90deg);
        }

        .contact{
            padding-top: 4em;
        }
        .contact form table{
            width: 90%;
        }
        .contact form table tr{
            display: flex;
            flex-direction: column;
        }
        .contact form table tr th{
            width: 100%;
        }
        .form-group input{
            width: 94%;
            padding: 10px 2%;
            font-size: 1.2em;
        }
        .form-group textarea{
            width: 94%;
            padding: 10px 2%;
            font-size: 1.2em;
            min-height: 150px;
        }
        .form-group select{
            padding: 10px 2%;
        }
    }

    @media (max-width: 480px) {
        .process-step {
            flex-basis: 100%;
        }
    }

        /*必須エラーメッセージ*/
        div.error{
            font-size:13px;
            color:#F00;
            padding:2px 0;
            margin:0;
        }
    
    .sample{
        border: #E1D9BA 6px solid;
        border-radius: 30px;
        background: #fff;
        width: 55%;
        margin: 0 auto;
        text-align: left;
        padding: 10px 3%;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
    }
    .sample h3{
        color: #cbbb7b;
    }
    .sample p{
        line-height: 1.8;
    }
    .sample .sample-image{
        width: 26%;
    }
    @media (max-width: 768px) {
        .sample{
            width: 80%;
            display: block;
            padding: 10px 8%;
        }
        .sample .sample-image{
            width: 50%;
            margin: 0 auto;
        }
    }