/* PayForm Custom Styles */

/* フォント表示最適化 */
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-display: swap;
}

@font-face {
  font-family: 'icomoon';
  font-display: swap;
}

/* フォント読み込み最適化 */
.fa, .fas, .far, .fal, .fab {
  font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
  font-display: swap;
}

/* Noto Sans JP統一最適化 */
.font_family_noto {
  font-family: 'Noto Sans JP', sans-serif;
  font-display: swap;
}

/* Optimize hero images for faster loading */
.banner-one .image-box img {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.banner-one .image-box {
    contain: layout style paint;
}

/* Hide content until page is fully loaded */
body {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

html {
    scroll-behavior: smooth;
}

body.loaded {
    opacity: 1;
}

/* SP margin for payment method image */
@media (max-width: 767px) {
    .flow-image-sp {
        margin-top: 16px !important;
    }
}

/* Responsive text alignment */
.text-right-sp-left {
    text-align: right;
}

@media (max-width: 767px) {
    .text-right-sp-left {
        text-align: left;
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }
}

/* Security list styling */
.security-list {
    list-style: disc !important;
    color: white !important;
    padding-left: 20px !important;
}

.security-list li {
    color: white !important;
    margin-bottom: 8px !important;
    list-style: disc !important;
}

/* Footer text white */
.footer-text-white {
    color: white !important;
}

/* Prevent layout shift during load */
.wow {
    visibility: hidden;
}

.wow.animated {
    visibility: visible;
}

/* Smooth transitions for all elements */
* {
    transition: all 0.3s ease;
}

/* Ensure proper stacking context */
.boxed_wrapper {
    position: relative;
    z-index: 1;
}

/* Additional smooth loading styles */
body.fully-loaded {
    opacity: 1;
}

/* Prevent layout shifts */
img {
    max-width: 100%;
    height: auto;
}

/* Smooth section transitions */
section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* g-color class styling */
.g_color {
    background: -webkit-linear-gradient(45deg, #4e2582, #0066cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Font family for Japanese text */
body, h1, h2, h3, h4, h5, h6, p, span, div, a, li, ul, ol {
    font-family: 'Noto Sans JP', 'Noto Sans', sans-serif !important;
}

/* Icon center alignment */
.service-one .icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
}

.service-one .icon img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
}

.service-one .icon-box {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* About three feature block responsive layout */
@media (min-width: 768px) {
    .about-three .feature-block-three .inner-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .about-three .feature-block-three .icon-box {
        margin-bottom: 20px !important;
        margin-right: 0 !important;
    }
    .about-three .feature-block-three h4 {
        text-align: center !important;
    }
}

/* Feature two responsive layout */
@media (min-width: 768px) {
    .feature-two .feature-block-two .inner-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    .feature-two .feature-block-two .icon-box {
        margin-bottom: 20px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        order: 1 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        text-align: center !important;
        width: 100px !important;
        height: 100px !important;
        line-height: 100px !important;
    }
    .feature-two .feature-block-two h4 {
        text-align: center !important;
        order: 2 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
    .feature-two .feature-block-two p {
        order: 3 !important;
        text-align: center !important;
    }
}

/* Override any existing styles */
.feature-two .feature-block-two .inner-box * {
    position: relative !important;
    float: none !important;
}

/* Icon image size */
.feature-two .feature-block-two .icon-img {
    width: 100px !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.feature-two .feature-block-two .icon-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100px !important;
    height: 100px !important;
}

/* Ruby text spacing */
ruby {
    ruby-position: over;
    ruby-align: center;
}

rt {
    font-size: 0.6em !important;
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
}

/* Feature two mobile layout */
@media (max-width: 767px) {
    .feature-two .feature-block-two .inner-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .feature-two .feature-block-two .icon-box {
        margin-right: 20px !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        position: relative !important;
        left: 0 !important;
    }
    .feature-two .feature-block-two h4 {
        margin: 0 !important;
        margin-left: 24px !important;
        text-align: left !important;
        order: 2 !important;
        position: relative !important;
        left: 0 !important;
    }
    .feature-two .feature-block-two p {
        order: 3 !important;
    }
}

@media (max-width: 767px) {
    .about-three .feature-block-three .inner-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .about-three .feature-block-three .icon-box {
        margin-right: 20px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    .about-three .feature-block-three h4 {
        margin: 0 !important;
        text-align: center !important;
    }
}

/* Smooth FAQ accordion animations */
.faq-page-section .accordion-box .block .acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.faq-page-section .accordion-box .block .acc-content.current {
    max-height: 500px;
    padding-top: 20px;
    padding-bottom: 20px;
    opacity: 1;
}

.faq-page-section .accordion-box .block .acc-btn {
    transition: all 0.3s ease-out;
    cursor: pointer;
}

.faq-page-section .accordion-box .block .acc-btn .icon-outer {
    transition: transform 0.3s ease-out;
}

.faq-page-section .accordion-box .block .acc-btn.active .icon-outer {
    transform: rotate(180deg);
}

/* Prevent layout shift during animation */
.faq-page-section .accordion-box .block {
    margin-bottom: 30px;
    will-change: auto;
}

/* Smooth text color transitions */
.faq-page-section .accordion-box .block .acc-btn h4 {
    transition: color 0.3s ease-out;
}

.faq-page-section .accordion-box .block .acc-content p {
    transition: opacity 0.3s ease-out;
    opacity: 0;
}

.faq-page-section .accordion-box .block .acc-content.current p {
    opacity: 1;
}

/* Performance optimizations for FAQ animations */
.faq-page-section .accordion-box .block .acc-content {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.faq-page-section .accordion-box .block .acc-btn {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Improved hover effects */
.faq-page-section .accordion-box .block .acc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Focus states for accessibility */
.faq-page-section .accordion-box .block .acc-btn:focus {
    outline: 2px solid #5FB9E6;
    outline-offset: 2px;
}

/* Loading state */
.faq-page-section .accordion-box .block.loading .acc-btn {
    pointer-events: none;
    opacity: 0.7;
}

/* Mini SP center alignment for images */
@media only screen and (max-width: 399px) {
    .service-block-four .inner-box .icon-box {
        position: relative !important;
        left: 50% !important;
        top: 0px !important;
        transform: translateX(-50%) !important;
        margin-bottom: 15px !important;
    }
    
    .service-block-four .inner-box .icon-box img {
        display: block !important;
        margin: 0 auto !important;
    }
} 

/* ヘッダーの背景を透明に戻す */
.header-lower {
  background: transparent !important;
}

.header-lower .outer-container {
  background: transparent !important;
}

.header-lower .outer-box {
  background: transparent !important;
}

/* header-style-14のスタイルを上書き */
.main-header.header-style-14 {
  position: relative !important;
}

.main-header.header-style-14 .header-lower {
  background: transparent !important;
}

.main-header.header-style-14 .header-lower .outer-container {
  background: transparent !important;
  padding: 0px !important;
}

.main-header.header-style-14 .header-lower .outer-box {
  background: transparent !important;
}

/* ヘッダーの基本スタイル復元 */
.header-lower .outer-box .logo-box {
  padding: 30px 0px;
}

.header-lower .outer-box .logo-box .logo {
  max-width: 224px;
}

.header-lower .outer-box .logo-box .logo img {
  width: 100%;
}