/* Refined Yellow Marker */
.yellow-marker {
    background: linear-gradient(to top, rgba(253, 200, 0, 0.4) 35%, transparent 35%);
}
.yellow-marker-hover {
    background-size: 100% 100%;
    background-image: linear-gradient(to top, rgba(253, 200, 0, 0.4) 35%, transparent 35%);
    transition: background-size .3s;
}
.group:hover .yellow-marker-hover, .yellow-marker-hover:hover {
    background-size: 100% 80%;
}
.bg-nexcy-navy {
    --tw-bg-opacity: 1;
    background: linear-gradient(
        90deg,
        var(--main-grd-color-1) 0%,
        var(--main-grd-color-2) 50%,
        var(--main-grd-color-3) 100%
    );
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
:root{
    --main-grd-color-1: #60afff;
    --main-grd-color-2: #0086ce;
    --main-grd-color-3: #003bbe;
}
.storage_blue{
    background: #0086ce !important;
}
.card_blue{
   background: #ccf4fe !important;
}
/* 1. フォント読み込み（明朝体・英字・ゴシック） */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700&family=Montserrat:wght@700;900&family=Noto+Sans+JP:wght@300;500;700&display=swap');

/* 2. 背景ズームアニメーション (Ken Burns Effect) */
@keyframes kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}
.zoom-img {
    animation: kenburns 12s ease-in-out infinite alternate;
}

/* 3. コンテンツのフェードイン */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-content-fade {
    animation: heroFadeIn 1.5s ease-out forwards;
}

/* 4. スライド切り替え制御 */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 2500ms ease-in-out;
    z-index: 0;
}
.hero-slide.active {
    opacity: 1;
    z-index: 10;
}

.vertical-text { writing-mode: vertical-rl; }
.top_vew_h1_title_001{
    background: url(../../assets/img//bg_head01.jpg) left top / 338px;
    color: transparent;
    line-height: 1;
    word-break: break-word;
    -webkit-background-clip: text;
    background-clip: 'text';
    font-weight: bold;
}
.top_vew_h1_title_002{
     background: url(../../assets/img//bg_head02.jpg) left top / 338px;
    color: transparent;
    line-height: 1;
    word-break: break-word;
    -webkit-background-clip: text;
    background-clip: 'text';
    font-weight: bold;
}
.nexcy_water_area{
    height:150px;
    position: relative;
    margin-bottom:-2px;
}
.nexcy_top_white_area{
    color:#fff;
}
.nexcy_main_water_blue_bg{
    background-color: rgba(0, 159, 230, 1);
}
.nexcy_card_white{
    background-color:#fff;
}
.naname{
    position: absolute;
    top: 50%;
    color: #fff;
    background: rgba(0,0,0,8);
    font-size: 31px;
    margin: 0 auto;
    left: 42px;
    font-weight: bold;
    display: inline-block;
    transform: rotate(-10deg);
}
.nexcy_main_navy_blue_bg{
    background-color: rgb(8 47 73 / var(--tw-bg-opacity, 1));
}
.text-nexcy-blue {
    --tw-text-opacity1: 1;
    color: rgb(77 133 211 / var(--tw-text-opacity, 1));
}
.nayami_img_margin{
    margin-bottom: 32px;
}

.text-accent-blue {
    color: #0086ce;
}
.form-input {
        width: 100%;
        border-radius: 0.5rem;
        background-color: #F7FAFD;
        border: 1px solid #E2E8F0;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        color: #1A202C;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-input::placeholder {
        color: #A0AEC0;
    }
    .form-input:focus {
        outline: none;
        border-color: #0086ce;
        box-shadow: 0 0 0 3px rgba(0, 134, 206, 0.2);
    }
    .nexcy_opacty_black_area{
        height: 150px;
    position: relative;
    margin-bottom: -2px;
        background-color: rgb(247 250 253 / var(--tw-bg-opacity, 1));
    }
    .nexcy_top_gray_area{
        color: rgb(247 250 253 / var(--tw-bg-opacity, 1));
    }
 #faq-nav{
                position: fixed;
                top: 40px !important;
            }
            .vertical-text {
                writing-mode: vertical-rl;
                text-orientation: upright;
            }
@media screen and (max-width: 767px) {
  .sp_p_L_40 section {
    padding-left: 24px !important;
  }
  .sp_none{
    display: none;
  }
}
.tab-button{
    border: #0086ce 2px solid;
    padding: 16px 32px;
    border-radius: 25px;
    color: #0086ce;
    font-weight: bold;
    margin: 0px 8px;
}
.tab-button-active{
    color: #fff;
    background-color:#0086ce;;
}