@charset "utf-8";

/* ****************************************************
Title: index.css
---------------------------------------------------------------------------- */
        body {
            position: relative;
        }

        .fixbtmbtn{
            position: fixed;
    z-index: 10;
    bottom: 0;
    border-radius: 0 !important;
        }

        /* Custom styles */
        
        .card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            border: 1px solid #e5e7eb;
        }
        
        .card-content {
            padding: 0.2rem 1rem 1.5rem;
        }
        .card-content2 {
            padding: 0.2rem 1.5rem 1.5rem;
        }

        .card-header {
    padding: 1.5rem 1.5rem 0 1.5rem;
}
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.375rem;
            font-weight: 500;
            transition: all 0.2s;
            cursor: pointer;
            text-decoration: none;
        }
        
        .btn-primary {
            background-color: #00c300;
            color: white;
            padding: 0.05rem 1.2rem 0.05rem 1rem;
        }
        
        .btn-primary:hover {
            opacity: 0.7;
        }

        .btn-success {
            background-color: #F66AAC;
            color: white;
            padding: 0.75rem 2rem;
        }
        
        .btn-success:hover {
            background-color: #bb2d3b;
        }

        
        .btn-outline {
            border: 1px solid #d1d5db;
            color: #374151;
            padding: 0.75rem 2rem;
        }
        
        .btn-outline:hover {
            background-color: #f9fafb;
        }
        
        .btn-lg {
            padding: 0.05rem 2rem;
            font-size: 1.125rem;
        }
        
        .mobile-menu {
            display: none;
        }
        
        .mobile-menu.active {
            display: block;
        }



#paypay img{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#paypay ol li{
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: dashed 1px #ccc;
}

        
        @media (max-width: 768px) {
            .desktop-nav {
                display: none;
            }
            #paypay{
                padding: 20px 5%;
            }
        }
        
        .smooth-scroll {
            scroll-behavior: smooth;
        }
        
        .icon {
            width: 1.25rem;
            height: 1.25rem;
            margin-right: 0.5rem;
        }
        
        .icon-lg {
            width: 2rem;
            height: 2rem;
        }
        
        .icon-xl {
            width: 2.5rem;
            height: 2.5rem;
        }

/* =============================
 .section1
==============================*/
.hero-gradient {
	    position: relative;
	    width: 100%;
    overflow: hidden;
}
.hero-gradient .bgpng {
	position: absolute;
	top: 0;
	left: -12%;
	z-index: 1;
    width: auto;
    max-width: fit-content;

}
.hero-gradient .bglady {
	    padding: 3rem 0 0;
}

.hero-gradient .bglady .bgwebp {
position: absolute;
    top: 0;
    right: -26%;
    z-index: 2;
    width: auto;
    max-width: fit-content;
}
.hero-gradient .container{
	position: relative;
	z-index: 10;
}

.cta {
	background: url(../img/ctabg.webp) no-repeat center center;
	background-size: cover;
}
.br05rem{
	border-radius: 0.5rem 0.5rem 0 0;
}


.dc a img {
  transition: filter 0.3s;
}
.dc a img:hover {
  filter: brightness(130%);
}


/* =============================
 .faq ver1
==============================*/
    .faq-block {
      max-width: 800px;
      margin: 0 auto 15px auto;
    }

    .faq-block dl {
      margin: 0;
      transition: background 0.3s ease;
    }

    .faq-block dl dt {
      background: #004080;
      color: #fff;
      padding: 15px;
      cursor: pointer;
      border-radius: 5px 5px 0 0;
      transition: background 0.3s ease;
    }

    .faq-block dl dt:hover {
      background: #002e5d;
    }

    .faq-block dl dd {
      background: #fff;
      padding: 0 15px;
      margin: 0;
      border: 1px solid #ddd;
      border-top: none;
      border-radius: 0 0 5px 5px;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.4s ease, padding 0.4s ease;
    }

    .faq-block dl.open dd {
      padding: 15px;
      max-height: 300px; /* アニメーション展開上限：高さがある程度必要 */
    }


/* =============================
 .faq ver2
==============================*/
        .faq-item {
      background: #fff;
      border-bottom: 1px solid #ddd;
    }

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

    .faq-icon {
      color: #005bac;
      font-weight: bold;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .faq-text {
      flex-grow: 1;
    }

    .faq-toggle {
      font-size: 40px;
      transition: transform 0.3s ease;
    }

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

    .faq-answer {
      padding: 0 20px;
      font-size: 14px;
      color: #444;
      max-height: 0;
      overflow: hidden;
      transition: all 0.3s ease;
          display: flex;
    }


.faq-item .faq-answer p{
    font-size: 16px;
}

    .faq-item.open .faq-answer {
      max-height: 300px;
          padding: 0px 20px 30px;
    }

    .faq-icon-a {
      display: inline-block;
      color: #f00;
      font-weight: bold;
      margin-right: 8px;
      font-size: 16px;
    }