:root {
    --primary: #283795;
}

body {
    color: #333;
    font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
    /* color: var(--dark); */
    color: #333;
    font-weight: 700;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    opacity: .6;
    transition: all .3s;
}

.section {
    padding-top: 120px;
    padding-bottom: 120px;
}
@media only screen and (max-width : 1200px) {
    .section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.btn {
    padding: 12px 16px;
    color: #fff;
    border-radius: 5px;
}

.btn-primary {
    padding: 14px 18px;
    background-color: var(--dark);
    color: #fff;
    background-color: #283795;
    border-radius: 50px;
    font-weight: bold;
    border: none;
}

.btn-primary:hover {
    background-color: #6476ee;
    opacity: 1!important;
    color: #fff;
}

.btn-outline-primary {
    border: #283795 2px solid;
    background-color: #fff;
    border-radius: 50px;
    font-weight: bold!important;
    color: #283795!important;
}

.btn-outline-primary:hover {
    color: #fff!important;
    background-color: #2c92ff;
    opacity: 1!important;
    border-radius: 50px;
    font-weight: bold;
    border: 2px solid #fff;
}

.underline {
    background: linear-gradient(transparent 50%, var(--primary) 50%);
}

.bg-primary {
    background-color: #010344!important;
}

.title {
    font-size: 40px;
}


img {
    width: 100%;
}

.row {
    --bs-gutter-x: 0rem!important;
}

.fs-4 {
    font-size: 1.7rem!important;
}

.amazon-logo {
    width: 150px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 15px 15px 18px -10px #010344;
}

.amazon-logo:hover {
    box-shadow:none;
    position:relative;
    top:4px;
    opacity: 1!important;
}
.amazon-logo a:hover {
    opacity: 1!important;
}

.amazon-small {
    color: #fff;
    font-size: 12px;
    margin-top: 10px;
    display: block;
    width: 150px;
}



/* ----------------header----------------- */

.navbar .nav-link {
    color: #333333!important;
    font-size: 17px;
    font-weight: 700;
    padding-top: 16px;
}

.logo-container {
    display: flex;
}

.logo {
    width: 170px;
}

.product-title {
    font-size: 15px;
    line-height: 1.2;
    font-weight: bold;
    margin: auto;
    padding-left: 10px;
}

@media only screen and (max-width : 1333px) {
    .logo-container {
        display: block;
        /* margin-left: 10px; */
    }
    .product-title {
        margin-left: .5rem;
        margin-top: .2rem;
        padding-left: 0px;
    }
    .btn {
        padding: 14px 10px;
        color: #fff;
        font-size: 15px;
    }
    .navbar .nav-link {
        font-size: 15px;
    }
    
}



@media only screen and (max-width : 992px) {
    a.nav-link {
        text-align: center;
    }

    .btn-primary {
        margin-bottom: 2rem;
    }

    .btn-outline-primary {
        margin-bottom: 1rem;
    }
    .logo-container {
        display: flex;
    }
    .product-title {
        margin: auto;
        padding-left: 10px;
    }
}

@media only screen and (max-width : 600px) {
    .product-title {
        margin: auto;
        padding-left: 5px;
    }
}

@media (max-width: 1030px){
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.2rem!important;
        padding-left: 0.2rem!important;
    }

}



/*--------------- mainvisual ---------------*/

.main-visual{
    overflow: hidden;
}

.main-visual img{
    margin:0 auto;
}

.hero {
    background-image: url("../img/cover.jpg");
    background-position: top;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    padding-top: 50px;
}

.iconbox {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: #fff;
    font-size: 32px;
    border-radius: 100px;
    flex: none;
}

.product-name {
    font-size: 50px!important;
}

.hero-text-innner {
    padding: 0 65px ;
}
.hero-text-innner p {
    font-size: 20px;
}

.hero-br {
    display: block;
}

@media only screen and (max-width : 1400px) {
    .hero-br {
        display: none;
    }
    .hero-text-innner {
        padding: 0;
    }
}


/* ------------------feature------------------- */

.feature-list-item {
    font-size: 20px;
    line-height: 1.5;
    padding-bottom: 10px;
}

.feature-small {
    font-size: 16px;
}



/* ------------equipment--------------- */

.included {
    align-items: center;
    padding: 50px;
}

.not-included {
    padding: 50px;
    background-color: #fff;
    border-radius: 15px;
    align-items: center;
    margin: 0 auto;
}


.equipment-item {
    background-color: #d0e7ff;
    border-radius: 15px;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
}

.equipment-name {
    margin-top: 10px;
}

.equipment-name-small {
    font-weight: normal;
}

#equipment {
    margin-top: 570px;

}
@media only screen and (max-width : 1500px) {
    #equipment {
        margin-top: 100px;
    }
}


/* ---------------footer-------------------- */

.footer {
     --bs-gutter-x: 0rem;
}

.f-container {
    padding: 40px 80px 60px;
    display: flex;
}

.footer-nav {
    list-style: none;
    align-items: center;
    display: flex;
}
.footer-nav li a {
    color: #fff;
}

.footer-nav li a:hover {
    opacity: .6;
}

.f-logo {
    /* width: 200px; */
    display: inline-block;
    height: auto;
    max-width: 100%;
}

.f-nav-list {
    margin-left: 20px;
}

.company {
    font-size: 14px!important;
    color: #ffffff!important;
}
.company:hover {
    opacity: .6!important;
    color: #ffffff!important;
}

@media only screen and (max-width : 1200px) {
    .f-container {
        display: block;
    }
    .footer-nav {
        display: block;
        margin-top: 20px;
    }
    .f-nav-list {
        margin-top: 10px;
        margin-left: 0px;
    }

    .f-btn {
        margin-top: 10px; 
    }


}

/* -------------------img------------------------- */

.img-section{
    height: 200px;
    width: 100%;

}


.img-container1 {
    padding-top: 30px;
    margin-top: 30px;
    position: relative;
}
.img-container2 {
    padding: 30px 0;
    margin-top: 30px;
    position: relative;
}
.img-container3 {
    padding-top: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;

}

.jidaifestival {
    position: absolute;
    width: 60%;
    height: auto;
    left: 0;
    top: 0%;
    z-index: 3;
}

.bullettrain {
    position: absolute;
    width:55%;
    height: auto;
    top: 150px;
    right: 0px;
    z-index: 2;
    padding-top: 150px;
    margin-bottom: 100px;
}

.photo-caption {
    color: #ffffffcb;
    font-size: 14px;
}

.sp-only {
    display: none;
}

.pc-only {
    display: block;
}

@media only screen and (max-width : 1600px) {
    .bullettrain {
        position: absolute;
        width:55%;
        height: auto;
        top: 100px;
        right: 0;
        z-index: 2;
        padding-top: 30px;
    }

}

.marathon {
    position: absolute;
    width: 60%;
    height: auto;
    left: 0;
    z-index: 1;
    height: auto;
    top: 300px;
}

@media only screen and (max-width : 1500px) {
    .marathon {
        top: 32px;
    }
    
}

    .img-container {
        position: relative;
    }



@media only screen and (max-width : 1200px) {
    .f-nav-list {
        padding-right: 20px;
    }
    

}
/* Mサイズ、デスクトップ : Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

    .section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

}

/* Sサイズ、タブレット : Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .bullettrain {
        position: absolute;
        width:55%;
        height: auto;
        top: 50%;
        right: 0;
        z-index: 2;
        padding-top: 30px;
    }
    .img-section {
        height: 39px;
        margin-bottom: 39px;
    }

}

/* XSサイズ : Extra Small Devices, Phones */
@media only screen and (max-width : 576px) {
    .f-nav-list {
        padding-right: 15px;
    }
    .sp-only {
        display: block;
    }
    
    .pc-only {
        display: none;
    }
    .section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .logo {
        width: 120px;
    }
    .product-title {
        font-size: 13px;
        line-height: 1.1;
    }
    .hero-text-innner p {
        font-size: 16px;
    }
    .hero_copy {
        font-size: 20px!important;
    }

}