@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?=Lato:wght@400;700&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");
.roboto {
    font-family: 'Roboto', sans-serif;
}
.lato {
    font-family: 'Lato', sans-serif;
}
body, h1, h2, h3, h4, h5, h6, td, th, p, div, pre, ul, ol {
    font-family: 'Hiragino UD Sans F W3 JIS2004','Noto Sans JP', 'ＭＳ Ｐゴシック', sans-serif;
    font-weight: normal;
}
.modal-subtitle {
    width: 100%;
    padding: 10px 20px;
    text-align: center;
    border: 1px solid var(--base-color);
}
.modal-subtitle h3 {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
    color: var(--base-color);
}
ol.no-list {
    counter-reset: my-counter;
    list-style: none;
    padding: 0;
    margin: 0;
}
ol.no-list li  {
    font-size: 15px;
    line-height: 1.5;
    padding-left: 30px;
    margin-bottom: 5px;
    position: relative;
    color: #282828;
    text-align: left;
    font-feature-settings: "palt";
}
ol.no-list li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    border: 1px solid #282828;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 22px;
    width: 22px;
    color: #282828;
    font-size: 85%;
    line-height: 1;
    position: absolute;
    top: 2px;
    left: 0;
}
.top-i-mainContents #top-i-content5 {
    margin-top: 100px;
}
#top-i-content5 .top-i-text1 h2 {
    margin-top: 0;
}
#top-i-cam .top-i-camIn .top-i-text1 h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--base-color);
    margin-top: 0;
}
#top-i-content1 .top-i-content-title {
    padding-top: 60px;
}
#top-i-content1 .top-i-content-title h2 {
    width: calc(240 / 370 * 100%);
    margin: 0 auto;
    position: relative;
    padding: 0;
    z-index: 2;
}

#top-i-content1 .top-i-content-title h2::before {
    content: "";
    display: inline-block;
    top: -3px;
    right: 0;
    position: absolute;
    background: url("../img/neon/n_con1-1_text1_before.png") no-repeat;
    background-size: contain;
    width: 95px;
    height: 20px;
    z-index: 2;
}
#top-i-content1 .top-i-slider {
    min-height: 139px;
}
#top-i-content1 .top-i-image2 {
    position: relative;
    z-index: 2;
    width: calc(333 / 370 * 100%);
    cursor: pointer;
}
#top-i-content2 .top-i-content-title h2 {
    width: calc(240 / 370 * 100%);
    height: 40px !important;
    margin: 40px auto 40px -15px;
    position: relative;
    z-index: 2;
}
#top-i-content2 .top-i-content-title h2::before {
    content: "";
    display: inline-block;
    top: -25px;
    left: 30px;
    position: absolute;
    background: url("../img/neon/n_con2-1_text1_before.png") no-repeat;
    background-size: contain;
    width: 95px;
    height: 20px;
    z-index: 2;
}
#top-i-content3 .top-i-content-title h2 {
    width: calc(330 / 370 * 100%);
    height: 40px !important;
    margin: 15px 40px -15px;
    position: relative;
    z-index: 2;
}
#top-i-content3 .top-i-content-title h2::before {
    content: "";
    display: inline-block;
    top: -20px;
    right: 30px;
    position: absolute;
    background: url("../img/neon/n_con3_text1_before.png") no-repeat;
    background-size: contain;
    width: 70px;
    height: 17px;
    z-index: 2;
}
#top-i-content4 .top-i-text1 h2 {
    width: calc(330 / 370 * 100%);
    height: 64px;
    margin: 15px auto 40px 5px;
    position: relative;
    z-index: 2;
}
#top-i-content4 .top-i-text1 h2::before {
    content: "";
    display: inline-block;
    top: -20px;
    left: 25px;
    position: absolute;
    background: url("../img/neon/n_con4_text1_before.png") no-repeat;
    background-size: contain;
    width: 50px;
    height: 16px;
    z-index: 2;
}
#top-i-content5 .top-i-text1 h2 {
    width: calc(302.7 / 370 * 100%);
    height: 40px !important;
    margin-top: 100px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}
#top-i-content5 .top-i-text1 h2::before {
    content: "";
    display: inline-block;
    top: -35px;
    right: -80px;
    position: absolute;
    background: url("../img/neon/n_con5_text1_before.png") no-repeat;
    background-size: contain;
    width: 160px;
    height: 25px;
    z-index: 2;
}
#top-i-content6 .top-i-text1 h2::before {
    content: "";
    display: inline-block;
    top: -35px;
    left: 30px;
    position: absolute;
    background: url("../img/neon/n_con6_text1_before.png") no-repeat;
    background-size: contain;
    width: 95px;
    height: 30px;
    z-index: 2;
}
#top-i-content6 .top-i-text2.inquiry h2::before {
    content: "";
    display: inline-block;
    top: -30px;
    right: -20px;
    position: absolute;
    background: url("../img/neon/n_con6_text2_before.png") no-repeat;
    background-size: contain;
    width: 95px;
    height: 30px;
    z-index: 2;
}
#top-i-content1 .top-i-content-title h2,
#top-i-content2 .top-i-content-title h2,
#top-i-content3 .top-i-content-title h2,
#top-i-content4 .top-i-text1 h2,
#top-i-content5 .top-i-text1 h2,
#top-i-content6 .top-i-text1 h2,
#top-i-content6 .top-i-text2.inquiry h2 {
    padding: 0;
    display: flex;
    align-items: center;
}

/* heading */
.top-i-content-title h2 p {
    font-size: 20px;
    font-weight: 800;
    color: var(--base-color);
    text-align: center;
    line-height: 1.0;
    font-feature-settings: "palt";
    white-space: nowrap;
    width: 100%;
    display: inline-block;
    background: #ffffff;
    position: relative;
    margin: 0 auto;
    padding: 7px 8px 8px;
    border: 1px solid #0c176b;
    border-right: 11px solid #0c176b;
    background-color: #FFF !important;
    background-image: none !important;
    filter: drop-shadow(3px 3px 0px #5b846499);
    z-index: 3;
}
#top-i-content3 .top-i-text3 {
    width: 100%;
    left: calc(63.4 / 370 * 100%);
}
#top-i-content3 .top-i-text3 span {
    font-size: calc(100vw * 4.5 / 370);
    color: var(--base-color);
}
#top-i-content4 .top-i-text1 h2 p {
    font-size: 19px;
    text-align: left;
    top: 3px;
    padding-left: 17px;
    height: initial;
    line-height: 1.2;
    white-space: nowrap;
}
#top-i-content5 .top-i-accordion .top-i-title {
    text-align: left;
    font-feature-settings: "palt";
}
#top-i-content6 .top-i-text3 h3 {
    margin-top: 0;
    font-size: 16px;
    font-feature-settings: "palt";
    text-align: center;
    font-weight: 700;
    color: var(--base-color);
}
#top-i-content6 .top-i-text3 h4 {
    width: fit-content;
    margin: 0 auto;
    font-weight: 400;
    padding: 0 10px;
    border: 1px solid var(--base-color);
    border-radius: 2.0rem;
    font-size: 12px;
}
#top-i-content6 .top-i-text3 p {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    margin-top: 20px;
}
#top-i-content1 .top-i-content-title-text {
    width: calc(325 / 385 * 100%);
    margin: 15px auto calc(45 / 360 * 100%) auto;
}
#top-i-content1 .top-i-content-title-text p {
    font-size: 14px;
    font-feature-settings: "palt";
    line-height: 1.5;
    text-align: center;
    color: var(--base-color);
    margin: 0 auto;
}
#top-i-content2 #top-i-scene2 .top-i-text7.border-box {
    border: 1px solid var(--base-color);
    padding: 6px 6px 6px 20px;
    font-size:14px;
    width: calc(322 / 370 * 100% - 12px);
    position: absolute;
}
#top-i-content2 #top-i-scene2 .top-i-text7.border-box p {
    color: var(--base-color);
    position: relative;
    margin-left: 15px;
    padding-left: 0;
    font-size: 13px;
    line-height: 1.4;
    display: inline-block;
    margin: 0 auto;
    font-feature-settings: "palt";
}
#top-i-content2 #top-i-scene2 .top-i-text7.border-box p::before {
    content: "※";
    display: inline-block;
    position: absolute;
    left: -15px;
}
#top-i-content6 .top-i-text2 {
    top: calc(-20 / 340 * 100%);
}
#top-i-content6 .top-i-text4.border-box {
    border: 1px solid var(--base-color);
    padding: 6px;
    width: calc(322 / 370 * 100% - -15px);
    font-feature-settings: "palt";
    left: 50%;
    transform: translateX(-50%);
}
#top-i-content6 .top-i-text4.border-box p {
    color: var(--base-color);
    position: relative;
    margin-left: 15px;
    padding-left: 0;
    font-size: 11.5px;
    font-feature-settings: "palt";
    line-height: 1.6;
    display: inline-block;
    margin: 0 auto;
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 10px;
}

/*アニメーション*/
/*2フレーム*/
.top-i-css-frame-anim.frame-2 .frame-2-img {
    position: relative;
    margin-top: 0;
    height: auto;
    aspect-ratio: 29 / 27;
}
.top-i-css-frame-anim.frame-2 .frame-2-img img {
    position: absolute;
    top: 0;
    left: 0;
    animation: ChangeImageframe2 2.1s infinite;
    opacity: 0;
}
@keyframes ChangeImageframe2 {
    0% { opacity: 0; }
    25% { opacity: 0; }
    30% { opacity: 0; }
    43% { opacity: 1; }
    52% { opacity: 1; }
    75% { opacity: 1; }
    85% { opacity: 1; }
    96% { opacity: 1; }
    98% { opacity: 1; }
    100% { opacity: 0; }
}
.top-i-css-frame-anim.frame-2 .frame-2-img img:nth-of-type(1) {
    animation-delay: 0s;
}
.top-i-css-frame-anim.frame-2 .frame-2-img img:nth-of-type(2) {
    animation-delay: 1.1s;
}
/*4フレーム*/
.top-i-css-frame-anim.frame-4 .frame-4-img {
    position: relative;
    height: auto;
    aspect-ratio: 67 / 77;
}
.top-i-css-frame-anim.frame-4 .frame-4-img img {
    position: absolute;
    top: 0;
    left: 0;
    animation: ChangeImageframe4 4.0s infinite;
    opacity: 0;
}
@keyframes ChangeImageframe4 {
    0%   { opacity: 1; }
    25%  { opacity: 1; }
    25.01% { opacity: 0; }
    100% { opacity: 0; }
}
.top-i-css-frame-anim.frame-4 .frame-4-img img:nth-of-type(1) {
    animation-delay: 0s;
}
.top-i-css-frame-anim.frame-4 .frame-4-img img:nth-of-type(2) {
    animation-delay: 1s;
}
.top-i-css-frame-anim.frame-4 .frame-4-img img:nth-of-type(3) {
    animation-delay: 2s;
}
.top-i-css-frame-anim.frame-4 .frame-4-img img:nth-of-type(4) {
    animation-delay: 3s;
}

/*10フレーム*/
.top-i-css-frame-anim.frame-10 .frame-10-img {
    position: relative;
    height: auto;
    aspect-ratio: 248 / 205;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img {
    position: absolute;
    top: 0;
    left: 0;
    animation: ChangeImageframe10 9.6s infinite;
    border-radius: 3.7rem;
    opacity: 0;
}
@keyframes ChangeImageframe10 {
    0%   { opacity: 1; }
    10%  { opacity: 1; }
    10.01% { opacity: 0; }
    100% { opacity: 0; }
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(1) {
    animation-delay: 0s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(2) {
    animation-delay: 0.96s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(3) {
    animation-delay: 1.92s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(4) {
    animation-delay: 2.88s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(5) {
    animation-delay: 3.84s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(6) {
    animation-delay: 4.80s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(7) {
    animation-delay: 5.76s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(8) {
    animation-delay: 6.72s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(9) {
    animation-delay: 7.68s;
}
.top-i-css-frame-anim.frame-10 .frame-10-img img:nth-of-type(10) {
    animation-delay: 8.64s;
}
.modal-inner {
    padding-bottom: 20px;
}
.modal-btn {
    margin: 20px auto 10px;
}
@media (min-width: 769px) {
    .modal-inner {
        padding-bottom: 10px;
    }
}
@media screen and (min-width: 1000px) {
    #top-i-content1 .top-i-content-title {
        padding-top: 60px;
    }
    #top-i-content1 .top-i-content-title h2 {
        width: 240px;
    }
    #top-i-content1 .top-i-content-title h2 p {
        font-size: 20px;
        width: calc(100% - 12%);
        top: 3px;
    }
    #top-i-content1 .top-i-content-title h2::before {
        top: -25px;
        width: 100px;
        height: 23px;
    }
    #top-i-cam .top-i-camIn .top-i-text1 h2 {
        text-align: center;
    }
    #top-i-content2 .top-i-content-title h2 {
        height: 40px;
        margin-top: 55px;
    }
    #top-i-content2 .top-i-content-title h2 p {
        top: 3px;
    }
    #top-i-content2 .top-i-content-title h2::before {
        top: -20px;
        left: 25px;
        width: 70px;
        height: 14px;
    }
    #top-i-content3 .top-i-content-title h2 {
        width: calc(400 / 370 * 100%);
        height: 40px;
        margin: 15px auto 40px -15px;
    }
    #top-i-content3 .top-i-content-title h2::before {
        top: -19px;
        right: 20px;
        width: 75px;
        height: 17px;
    }
    #top-i-content3 .top-i-content-title h2 p {
        top: 4px;
        text-align: left;
    }
    #top-i-content3 .top-i-text3 {
        width: 100%;
        left: calc(69.4 / 370 * 100%);
    }
    #top-i-content3 .top-i-text3 span {
        font-size: 11px;
        color: var(--base-color);
    }
    #top-i-content4 .top-i-text1 h2 {
        width: calc(345 / 370 * 100%);
        margin: 15px auto 40px 0px;
    }
    #top-i-content4 .top-i-text1 h2::before {
        top: -20px;
        left: 40px;
        width: 50px;
        height: 15px;
    }
    #top-i-content4 .top-i-text1 h2 p {
        font-size: 17px;
        line-height: 1.2;
        padding-top: 5px;
    }
    #top-i-content5 .top-i-text1 h2::before {
        top: -30px;
        right: -60px;
        width: 125px;
        height: 23px;
    }
    #top-i-content6 .top-i-text2 {
        top: calc(-20 / 340 * 100%);
    }
    #top-i-content6 .top-i-text1 h2 {
        width: calc(360 / 370 * 100%);
        height: 46px;
    }
    #top-i-content6 .top-i-text1 h2 p {
        font-size: 19px;
        top: 7px;
        height: initial;
    }
    .modal-btn {
        width: 250px;
    }
}
@media screen and (max-width: 769px){
    #top-i-content1 .top-i-content-title {
        padding-top: 95px;
    }
    #top-i-content1 .top-i-content-title h2 {
        /* width: 373px; */
        height: 60px;
        margin-bottom: 35px;
    }
    #top-i-cam .top-i-camIn .top-i-text1 h2 {
        font-size: calc(100vw * 46 / 768);
        font-weight: 800;
    }
    #top-i-content2 .top-i-content-title h2 {
        margin-bottom: 20px;
        background-size: contain;
    }
    #top-i-content1 .top-i-content-title-text {
        margin-top: 0;
    }
    #top-i-content1 .top-i-content-title h2 p {
        width: 100%;
    }
    #top-i-content1 .top-i-content-title-text p {
        font-size: calc(100vw * 27 / 767);
        line-height: 1.6;
    }
    #top-i-content1 .top-i-image1 {
        margin-top: 34%;
    }
    .top-i-mainContents #top-i-content2 {
        margin-top: 48px;
    }
    #top-i-content2 #top-i-scene2 .top-i-text7.border-box p {
        font-size: calc(100vw * 28 / 767);
    }
    #top-i-content3 .top-i-content-title h2 {
        height: 119px;
        left: 0px;
        text-align: left;
    }
    #top-i-content3 .top-i-css-frame-anim.frame-2 .text-box {
        bottom: 0;
        top: 618px;
        width: calc(100vw * 550 / 767);
        right: -5px;
    }
    #top-i-content3 .top-i-css-frame-anim.frame-2 .text-box p {
        font-size: calc(100vw * 20 / 767);
    }
    #top-i-content3 .top-i-text3 {
        left: calc(80.4 / 370 * 100%);
        text-align: right;
        width: fit-content;
    }
    #top-i-content3 .top-i-text3 span {
        font-size: calc(100vw * 9.5 / 370);
    }
    #top-i-content4 .top-i-text1 h2 {
        width: 100%;
        margin-bottom: 0;
    }
    #top-i-content5 .top-i-text1 h2 {
        height: 80px;
    }
    #top-i-content6 .top-i-text2.inquiry {
        top: calc(-30 / 340 * 100%);
    }
    #top-i-content6 .top-i-text2.inquiry h2 {
        height: 69px;
    }
    #top-i-content6 .top-i-text3 h3 {
        font-size: calc(100vw * 30 / 767);
    }
    #top-i-content6 .top-i-text3 h4 {
        font-size: calc(100vw * 20 / 767);
        margin-top: 5%;
    }
    #top-i-content6 .top-i-text3 p {
        font-size: calc(100vw * 25 / 767);
        margin-top: 6%;
    }
    #top-i-content6 .top-i-text4.border-box p {
        font-size: calc(100vw * 23 / 767);
    }
    #top-i-content2 #top-i-scene2 .top-i-text7.border-box {
        width: inherit;
        max-width: calc(100vw - 70px);
        left: 50%;
        transform: translateX(-50%);
        width: inherit;
    }
}
@media screen and (max-width: 700px){
    #top-i-content1 .top-i-content-title h2 {
        width: calc(240 / 370 * 100%);
        height: 68px;
        padding: 0;
        margin-top: 30px;
    }
    #top-i-content1 .top-i-image1 {
        margin-top: 0px;
        margin-bottom: 70px;
    }
    #top-i-content2 #top-i-scene2 .top-i-text7.border-box p {
        font-size: calc(100vw * 27 / 767);
    }
    #top-i-content3 .top-i-content-title h2 p {
        text-align: left;
    }
    #top-i-content3 .top-i-css-frame-anim.frame-2 .text-box {
        top: 470px;
    }
    #top-i-content3 .top-i-content-title h2 {
        width: 100%;
        height: 56px;
        margin-right: 5px;
        margin: 0;
        margin-top: 30px;
    }
}
@media screen and (max-width: 560px){
    ol.no-list li {
        font-size: 14px;
        padding-left: 25px;
    }
    ol.no-list li:before {
        width: 20px;
        height: 20px;
        top: 1px;
    }
    #top-i-content1 .top-i-content-title h2::before {
        width: 95px;
        height: 19px;
        right: 0px;
    }
    #top-i-content1 .top-i-content-title h2 {
        margin-top: 0;
        height: 48px;
        margin-bottom: 15px;
    }
    #top-i-content3 .top-i-content-title h2::before {
        right: 30px;
    }
    #top-i-content5 .top-i-text1 h2::before {
        top: -30px;
        right: -54px;
        width: 130px;
        height: 22px;
    }
    .modal-btn {
        width: 100%;
    }
}
@media screen and (max-width: 440px) {
    #top-i-content1 .top-i-content-title {
        padding-top: 65px;
    }
    #top-i-content6 .top-i-text2.inquiry {
        top: calc(-36 / 340 * 100%);
    }
}
@media screen and (max-width: 390px) {
    #top-i-content1 .top-i-text1 {
        width: 300px;
    }
}
@media (max-width: 767.98px) {
    .top-i-sp-ui__hamburger {
        background-color: transparent;
    }
}