body, h1, h2, h3, h4, p, ul, li, figure, figcaption, blockquote, dl, dd, form, input, textarea, button { margin: 0; padding: 0; font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; box-sizing: border-box; }
body { line-height: 1.6; color: #333; background-color: #f8f9fa; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }


.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.btn { padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; font-size: 16px; transition: background-color 0.3s, transform 0.2s; }
.btn-primary { background-color: #007bff; color: white; }
.btn-primary:hover { background-color: #0056b3; transform: translateY(-2px); }
#global-nav { background-color: #003366; height: 60px; color: white; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.nav-container { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 10px; margin: 0; }
#logo img { height: auto; width: 150px; }
#hamburger-menu { display: block; cursor: pointer; padding: 10px; position: relative; z-index: 1001; }
.hamburger-icon span { display: block; width: 25px; height: 3px; background-color: white; margin: 5px 0; transition: 0.3s; border-radius: 1px; }
#nav-links { display: none; position: absolute; top: 60px; right: 0; background-color: rgba(0, 51, 102, 0.98); list-style: none; padding: 0; width: 250px; box-shadow: -2px 2px 5px rgba(0,0,0,0.2); border-bottom-left-radius: 8px; }
#nav-links.active { display: block; }
#nav-links li:first-child { margin-top: 20px; }
#nav-links li.menu-bottom-links { margin-bottom: 20px; }
#nav-links li a, #nav-links li span { display: flex; align-items: center; padding: 0 10px; height: 40px; line-height: 40px; color: white; font-size: 14px; white-space: nowrap; transition: background-color 0.3s; border-bottom: 1px solid rgba(255,255,255,0.1); }
#nav-links li a:hover, #nav-links li span:hover { background-color: #999999; }
.nav-icon { margin-right: 10px; font-size: 1.1em; }
.nav-separator { height: 1px; background-color: rgba(255,255,255,0.2); margin: 0; }
.menu-bottom-links { padding: 0; font-size: 13px; }
.menu-bottom-links a { height: 40px; line-height: 40px; padding: 0 20px; display: flex; align-items: center; color: #ccc; margin-bottom: 0; }
.menu-bottom-links a:hover { color: white; background-color: #999999; }
#nav-links li:first-child a, #nav-links li:first-child span { border-top: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 992px) {
    .wrapper{width: 100%; overflow: hidden;}
    .container{max-width: 100%;}
    #global-nav{max-width: 100%;}
}






#hero { background-image: url('./img/header.jpg'); background-size: cover; background-position: center; background-attachment: fixed; color: white; text-align: center; padding: 150px 20px 50px; margin-top: 60px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; /* height: 570px; */ min-height: 741px; }
#hero .sub-copy { font-size: 22px; margin-bottom: 15px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); color: #FF0000; }
#hero .main-catch { font-size: 104px; font-weight: bold; margin-bottom: 25px; text-shadow: 2px 2px 5px rgba(0,0,0,0.8); line-height: 1.1; }
#hero .description { font-size: 19px; max-width: 700px; margin: 0 auto; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-align: left; }
@media (max-width: 992px) {
    #hero { background-size: contain; background-position: top center; background-attachment: fixed; background-repeat: no-repeat; background-size: 300%; min-height: unset; padding: 50px 0 0;}
    #hero .main-catch {font-size: 50px;}
    #hero .description{padding: 0 10px;}
}




.section { padding: 0 0 70px; }
.section-title-wrapper { color: white; padding: 20px 0; margin-bottom: 50px; text-align: center; }
.section-title-wrapper .container { display: flex; justify-content: center; align-items: center; }
.section-title { font-size: 28px; font-weight: bold; }
.title-icon { font-size: 50px; width: 50px; height: 50px; line-height: 50px; text-align: center; margin-right: 15px; display: inline-flex; justify-content: center; align-items: center; }
#about { background: linear-gradient(to bottom, #FFFDE7 0%, #FFEB3B 100%); }
#imagine { background: linear-gradient(to bottom, #FFF3E0 0%, #FFB74D 100%); }
#recommend { background: linear-gradient(to bottom, #E8F5E9 0%, #81C784 100%); }
#overview { background: linear-gradient(to bottom, #FFFFFF 0%, #C8E6C9 100%); }
#features { background: linear-gradient(to bottom, #E1F5FE 0%, #4DD0E1 100%); }
#options { background: linear-gradient(to bottom, #FFF9C4 0%, #FFEE58 100%); }
#contact-section { background: linear-gradient(to bottom, #FFFFFF 0%, #90CAF9 100%); padding-bottom: 40px; }
#about .section-title-wrapper { background-color: #FBC02D; }
#imagine .section-title-wrapper { background-color: #FFA726; }
#recommend .section-title-wrapper { background-color: #66BB6A; }
#overview .section-title-wrapper { background-color: #AED581; }
#features .section-title-wrapper { background-color: #29B6F6; }
#options .section-title-wrapper { background-color: #FDD835; }
#contact-section .section-title-wrapper { background-color: #64B5F6; }
.content-box { background-color: rgba(255, 255, 255, 0.9); padding: 35px; border-radius: 15px; box-shadow: 0 6px 22px rgba(0,0,0,0.09); margin-bottom: 30px; }
.content-box h3 { font-size: 26px; color: #0056b3; margin-bottom: 20px; }
.content-box p, .content-box ul { margin-bottom: 18px; font-size: 17px; line-height: 1.8; }
.content-box ul { list-style: disc; padding-left: 25px; }
.content-box li { margin-bottom: 10px; }
.scenario-container { display: flex; flex-wrap: wrap; gap: 25px; }
@media (max-width: 992px) {
    .scenario-container{display: flex; flex-direction: column;}
}



.scenario-box { border: 1px solid #0056b3; margin-bottom: 20px; border-radius: 10px; background-color: rgba(240, 248, 255, 0.8); flex: 1; max-width: calc(50% - 13px); position: relative;}
.left-human{background-image: url(./img/left-img.jpg); background-repeat: no-repeat;}
.right-human{background-image: url(./img/right-img.jpg); background-repeat: no-repeat;}
.scenario-box h4 { color: #fff; font-size: 44px; margin-bottom: 12px; position: absolute; top:10px; left:10px;}
.scenario-box p { font-size: 16px; line-height: 1.6; background-color: rgba(255, 255, 255, 0.8); padding: 10px; }
@media (max-width: 992px) {
    .scenario-box{max-width: 100%;}
    .right-human{background-position: right top;}
}
.highlight { color: #e74c3c; font-weight: bold; text-align: center; font-size: 1.4rem; }
.price-highlight { font-size: 22px; color: #27ae60; font-weight: bold; }
.recommend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.recommend-item { min-width: 0; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.07); text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; opacity: 1; animation: fadeInSlideUp 0.6s ease-out forwards; }
.recommend-item img { width: 100%; max-width: 120px; height: 80px; object-fit: contain; margin-bottom: 15px; border-radius: 6px; }
.recommend-item p { font-size: 15px; color: #333; font-weight: bold; line-height: 1.8; }
.recommend-item:nth-child(1) { animation-delay: 0.1s; }
.recommend-item:nth-child(2) { animation-delay: 0.25s; }
.recommend-item:nth-child(3) { animation-delay: 0.4s; }
.recommend-item:nth-child(4) { animation-delay: 0.55s; }
@media (max-width: 992px) {
    .recommend-grid{display: flex; flex-direction: column;}
}


/*4コママンガ　横スライド*/
.slide-wrapper{display: flex;gap: 40px;}
.slide-box {width: 500px;height: 500px;border: 2px solid #ccc;border-radius: 10px;background: white;overflow: hidden;position: relative;}
.slider-track {display: flex;width: max-content;height: 100%;transition: transform 0.5s ease-in-out;}
.slide {width: 500px;height: 500px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;font-size: 48px;font-weight: bold;color: white;}

.text-label {text-align: center;margin-top: 8px;font-weight: bold;}
.click-overlay {position: absolute;inset: 0;cursor: pointer;z-index: 2;}

.slide-box .scenario-box{border: none; background-color: unset;}
.slide-box .scenario-box p{background-color: unset;}
.slide-box .bubble-container{position: relative;}
.slide-box .bubble{position: absolute; top: 177px;left: 78%;transform: translateX(-50%);background-color: white !important; color:#000; padding: 15px;border-radius: 10px;border: 2px solid #333;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);width: 200px;font-size: 16px;}
.slide-box .bubble::after {content: "";position: absolute;bottom: 201px;left: 0%;transform: translateX(-50%);border-style: solid;border-width: 10px 10px 0;border-color: white transparent;display: block;width: 0;}

.slide-wrapper .text-title{font-size: 40px; font-weight: bold; text-align: left;}
.slide-wrapper .text-title:nth-of-type(1){text-align: right;}
.slide-wrapper .text-title:nth-child(1){text-align: left;}








.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature-item { min-width: 0; background-color: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.07); display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; opacity: 1; animation: fadeInSlideUp 0.6s ease-out forwards; }
.feature-icon-img { width: 80px; height: 80px; object-fit: cover; margin-bottom: 15px; }
.feature-item .marker { display: none; }
.feature-item p { font-size: 15px; color: #333; margin: 0; line-height: 1.8; }
.feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-item:nth-child(2) { animation-delay: 0.25s; }
.feature-item:nth-child(3) { animation-delay: 0.4s; }
.feature-item:nth-child(4) { animation-delay: 0.55s; }
@media (max-width: 992px) {
    .features-grid{display: flex; flex-direction: column;}
}



.contact-intro { font-size: 12px; color: #666666; text-align: center; margin-bottom: 30px; line-height: 1.6; }
.required-asterisk { color: #FF0000; margin-left: 3px; }
#contact-form { max-width: 700px; margin: 0 auto; background-color: rgba(255,255,255,0.8); padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }


        #contact-form { max-width: 700px; margin: 0 auto; background-color: rgba(255,255,255,0.8); padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .form-group { margin-bottom: 15px; display: flex; flex-wrap: wrap; align-items: center; }
        .form-group label { display: block; margin-bottom: 0; font-weight: bold; color: #333; flex-basis: 130px; margin-right: 10px; }
        .form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: auto; flex-grow: 1; padding: 12px; border: 1px solid #ced4da; border-radius: 8px; font-size: 16px; }
        .form-group.textarea-group label { flex-basis: 100%; margin-bottom: 8px; margin-right:0; }
        .form-group.textarea-group textarea { width: 100%; }
        .form-group textarea { min-height: 120px; resize: vertical; }
        .form-group.submit-group { display: block; }
        .form-group button { width: 100%; padding: 15px; font-size: 18px; background-color: #28a745; color:white; border-radius:8px; }
        .form-group button:hover { background-color: #218838; }

        #company-info { padding: 0; text-align: center; font-size: 13px; color: #555; line-height: 1.8; background-color: #e9ecef; display: flex; align-items: center; justify-content: center; }
        #company-info .container p { margin: 0; }

        #footer { background-color: #003366; color: white; text-align: center; padding: 0; height: 50px; font-size: 13px; display:flex; justify-content:center; align-items:center; }
        #footer img { height: 24px; vertical-align: middle; margin-right: 10px; }
        #footer span { vertical-align: middle; }

        #page-top-btn { display: none; position: fixed; bottom: 20px; right: 20px; background-color: #990000; color: white; width: 45px; height: 45px; text-align: center; line-height: 45px; font-size: 22px; border-radius: 50%; cursor: pointer; z-index: 999; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: background-color 0.3s, transform 0.2s; }
        #page-top-btn:hover { background-color: #7a0000; transform: translateY(-2px); }

        .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
        .modal-content { background-color: #fefefe; margin: 10% auto; padding: 30px; border: 1px solid #888; width: 80%; max-width: 700px; border-radius: 10px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
        .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 20px; }
        .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; }
        .modal-content h2 { margin-bottom:20px; color: #003366; }
        .modal-content p { margin-bottom:15px; font-size:15px; line-height:1.7; }

/* @media (max-width: 992px) {
    .recommend-grid, .features-grid { grid-template-columns: repeat(2, 1fr); }
    .scenario-box { min-width: calc(100% - 13px); }
    #hero {
        height: auto; 
        padding-top: 100px; 
    }
}
@media (max-width: 768px) {
    #hero .main-catch { font-size: 76px; line-height: 1.1; }
    #hero .sub-copy { font-size: 18px; }
    #hero .description { font-size: 16px; }
    #hero {
        padding-top: 80px; 
    }
    .section-title { font-size: 24px; }
    .title-icon { font-size: 40px; width: 40px; height: 40px; line-height: 40px; }

    .recommend-grid, .features-grid { grid-template-columns: 1fr; }

}
        @media (max-width: 480px) {
    #hero { padding: 70px 20px 50px; margin-top:50px; height: auto; } 
    #global-nav { height: 50px;}
    #nav-links {top:50px;}
    #logo img { width: 120px; }
    #hero .main-catch { font-size: 60px; line-height: 1.1; }
    #hero .sub-copy { font-size: 16px; }
    .section-title { font-size: 22px; }
    .title-icon { font-size: 35px; width: 35px; height: 35px; line-height: 35px; }

            .section-title { font-size: 22px; }

            .content-box { padding: 25px; }
            .modal-content { width: 90%; margin: 15% auto; padding:20px; }
            .modal-content h2 {font-size:20px;}
            .modal-content p {font-size:14px;}
        } */