@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');



div#main-visual .container {

    height: 100%;

    justify-content: flex-end;

}



.catch_copy img {

    width: 100%;

}



.catch_copy.pc {

    max-width: 520px;

    display: none;

}



.catch_copy.sp {

    max-width: 400px;

    display: block;

}



@media (min-width: 768px) {



    .catch_copy.pc {

        display: block;

    }

    

    .catch_copy.sp {

        display: none;

    }

}





/* tool tip */

.btn_tip {

	position: relative;

    align-content: center;

}

.btn_tip .tool-tip {

	/* opacity: 1; */

	opacity: 90%;

    transition: opacity 0.2s ease-in-out;

    animation: shake 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;

    position: absolute;

    /* top: -28px; */

    top: -50px;

    /* right: -0.5rem; */

    right: 14%;

    width: 70%;

    background-color: #ffffffdb;

    /* padding: 5px; */

    padding: 8px 2px 8px;

    border-radius: 5px;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

    font-size: 0.9rem;

    /* color: #a00; */

    border: 2px solid #ffd12d;

    text-align: center;

    font-weight: 500;

    color: #585858;

    /* font-weight: 600; */

}

.btn_tip .tool-tip:after {

	content: "";

	position: absolute;

	left: 50%;

	margin-left: -4px;

	bottom: -5px;

	background-color: #fffffff2;

	transform: rotate(45deg);

	width: 10px;

	height: 10px;

}



.btn_tip .tool-tip2 {

    border: 2px solid #0093ab;

}



@keyframes shake {

	10%, 90% {

		transform: translate3d(0, 0, 0);

	}

	20%, 80% {

		transform: translate3d(0, 0, 0);

	}

	30%, 50%, 70% {

		transform: translate3d(0, -4px, 0);

	}

	40%, 60% {

		transform: translate3d(0, 4px, 0);

	}

}



.btn_tip a {

    height: 3rem;

}



@media (max-width: 767.98px) {

    .btn_tip .tool-tip {

        right: 9%;

        width: 80%;

    }

}



@media (max-width: 575.98px) {



    .btn_tip .tool-tip {

        right: 16%;

        width: 67%;

    }

    .btn_tip .tool-tip2 {

        top: -25px;

    }



    .cta_login {

        margin-top: 4rem;

    }

}



 

.btn-redirect {

    font-size: 1.75rem;

    padding: 12px 64px;

    border: 1px solid #75c3dc;

    border-radius: 5px;

    background-color: #fff;

    position: relative;     

    display: inline-block;

    transition: all 0.3s ease;

    margin-top: 3rem;

}

.btn-redirect::before {

    content: '';

    display: block;

    position: absolute;

    left: 50%;

    top: -15px;

    transform: translateX(-50%);                

    border: 25px solid transparent;

    border-top-color: #75c3dc;

    transition: all 0.3s ease; 

}



.btn-redirect:hover::before {

    top: 0;

    opacity: 0;

}

.btn-redirect:hover {

    background-color: #75c3dc; 

    color: #fff;

}



.help-content {

    padding-left: 0 !important;

}

.help-content li {        

    list-style-type: "・ ";

    /* font-weight: 450; */

    font-size: 18px;

    /* color: #444; */

    color: #5b5b5c;

    line-height: 1.6;

    margin: 10px 0;

    margin-left: 11.6px;

    /* font-family: 'Noto Sans-Mediur'; */

}



.alert {

    padding-left: 28px !important;

}



h2.extra {

    margin-top: 0 !important;

}



.text-shadow {

    text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff !important;

}



.div#main-visual p {

    font-size: 40px !important;

}



.main-title {

    position: relative;

    padding: 0;

    margin: 0;

    font-family: "Raleway", sans-serif;        

    font-size: 40px;

    color: #080808;

    -webkit-transition: all 0.4s ease 0s;

    -o-transition: all 0.4s ease 0s;

    transition: all 0.4s ease 0s;

}



.main-title h1 {

    text-align:center;

    font-size:27px; 

    line-height: 27px;

    letter-spacing:1px;

    font-weight: 400;

    

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    grid-template-rows: 13.5px 0;

    grid-column-gap: 22px;

    margin: 30px 0 63px;

}

.main-title h1:after,.main-title h1:before {

    content: " ";

    display: block;

    border-bottom: 2px solid #ccc;

}



table {

    color: #212529;

}



.table-scroll {

    position:relative;

    max-width: 100%;

    margin:auto;

    overflow:hidden;

    border: .5px solid #dee2e6;

}

.table-wrap {

    width:100%;

    overflow:auto;

}

.table-scroll table {

    width:100%;

    margin:auto;

    border-collapse:separate;

    border-spacing:0;

}

.table-scroll th, .table-scroll td {

    padding: 1em;

    border: .5px solid #dee2e6;

    background:#fff;

    white-space:nowrap;

    vertical-align:top;

}



.clone {

    position:absolute;

    top:0;

    left:0;

    pointer-events:none;

}

.clone th, .clone td {

    visibility:hidden

}

.clone td, .clone th {

    border-color:transparent

}

.clone tbody th {

    visibility:visible;

    color:red;

}



.fixed-side {

    min-width: 250px;

}

.clone .fixed-side {

    border: .5px solid #dee2e6;

    visibility:visible;

    text-align: center;

    vertical-align: middle;

    background: #75c3dc;

    color: #fff;

}



.banner-text-container {

    font-family: 'Noto Sans JP', sans-serif;

}



.banner-description {

    margin: 0 !important;

    font-size: 30px !important; 

    /* text-shadow: none !important; */

    color: #0f1170 !important;

}



.banner-title {    

    display: flex; 

    flex-direction: column;

    color: #0f1170 !important;   

    font-size: 38px !important; 

    /* text-shadow: none !important;  */

    font-weight: 600 !important;

}



.banner-description,

.banner-title {

    text-shadow: 0 4px 10px rgba(255,255,255,0.5) !important;

}



.text-align-center {    

    display: flex;

    justify-content: center;

    align-items: center;

}



.banner-main-title {

    margin-top: 0.5rem;

    height: 68px;

    display: flex;

    gap: 8px;

    font-size: 72px;

}

.banner-main-title span {

    font-weight: 500;

    position: relative;

    top: -24px;

}

.banner-main-title span.emphasis-box {

    position: unset;

    padding: 8px 20px;

    font-size: 22px;

    color: #fff;

    background-color: #00b3ca; 

    text-shadow: none !important; 

    font-weight: 400 !important;

}



.alert-info {

    background-color: #edf0f8 !important;

}



.service-content {

    align-items: center;

}

.service-content p {

    text-align: center;

}



.sub-title {

    font-size: 21px !important;

    margin: 12px 0 !important;

    font-weight: 600 !important;

}



.txt-lg {

    font-size: 18px !important;

}

.txt-md {

    font-size: 16px !important;

}



.br_320 {

    display: none;

}



.scroll_text {

    display: none;

}



@media (max-width: 1200px) {

    .banner-description {

        font-size: 28px !important;

    }

    .banner-title {      

        font-size: 38px !important; 

    }

    .banner-main-title {

        font-size: 69px;

        height: 63px;

    }

    .banner-main-title span {

        top: -23px;

    }

    .banner-main-title span.emphasis-box {

        font-size: 21px;

    }



    .btn-redirect {

        font-size: 1.7rem;

        /* margin-top: 5rem; */

        margin-top: 1.5rem;

    }



    .sub-title {

        font-size: 19px !important;

    }

    .help-content li {

        font-size: 17px;

    }

    .txt-lg {

        font-size: 17px !important;

    }

    .service_img-box {

        margin: 0 1rem 0 -1.5rem;

        width: 41.66666667%;

    }



    .scroll_text {

        display: block;

        font-size: 15px;

        color: #333;

        text-align: end;

        padding-top: 0.5rem;

    }

}



@media (max-width: 992px) {

    div#main-visual .container {

        justify-content: center;

    }

    .banner-text-container {

        margin-top: 4rem;

    }



    .btn-redirect {

        font-size: 1.65rem;

    }



    .fixed-side {

        min-width: 200px;

    }



    .service_img-box {

        width: 48%;

    }



    .service-content p {

        text-align: unset;

    }

}



@media (max-width: 768px) {

    .banner-description {

        font-size: 27px !important;

    }

    .banner-title {

        font-size: 37px !important;

    }

    .banner-main-title {

        font-size: 67px;

        height: 62px;

    }

    .banner-main-title span.emphasis-box {

        font-size: 19.5px;

        padding: 8px 10px;

    }



    .btn-redirect {

        font-size: 1.6rem;

    }



    .container {

        max-width: 585px;

    }



    .service_img-box {

        margin: 0;

        width: 100%;

    }



    .main-title h1 {

        font-size: 26px;

        line-height: 26px;

        letter-spacing: -1px;

        grid-template-rows: 13px 0;

    }

}



@media (max-width: 576px) {

    .container {

        max-width: 590px;

    }



    main section {

        padding: 75px 0;

    }



    .banner-description {

        font-size: 25px !important;

    }

    .banner-title {

        font-size: 30px !important;

    }

    .banner-main-title span {

        top: -18px;

    }

    .banner-main-title {

        font-size: 54px;

        height: 49px;

    }

    .banner-main-title span.emphasis-box {

        font-size: 17px;

    }



    .main-title h1 {

        font-size: 24px;

        line-height: 24px;

        letter-spacing: -1px;

        grid-template-rows: 12px 0;

        grid-column-gap: 14px;

    }



    .service_img-box {

        text-align: center;

    }



    .sub-title {

        font-size: 17.5px !important;

    }

    .help-content li {

        font-size: 16px;

    }

    .txt-lg {

        font-size: 16.5px !important;

    }



    .fixed-side {

        min-width: 150px;

    }



    #cta .container {

        max-width: 550px;

    }



    .btn-redirect {

        font-size: 1.5rem;

    }



    .nav-tabs > li > span {

        padding: 16px 24px 12px;

        font-size: 16.5px;

    }

}



@media (max-width: 532px) {

    #link .main-title.link02 h1 {

        line-height: 1.5;

        grid-template-rows: 50px 0;

    }

}



@media (max-width: 450px) {

    .banner-description {

        font-size: 24px !important;

    }

    .banner-title {

        font-size: 29px !important;

    }

    .banner-main-title span {

        top: -18px;

    }

    .banner-main-title {

        font-size: 52px;

        height: 47px;

    }

    .banner-main-title span.emphasis-box {

        font-size: 16px;

    }



    .main-title h1 {

        grid-template-columns: unset;

        font-size: 25.5px;

        line-height: 1.5;

    }

    .main-title h1:after,.main-title h1:before {

        display: none;

    }



    #cta .container {

        max-width: 400px;

    }



    .btn-redirect {

        font-size: 1.4rem;

    }



    .nav-tabs > li > span {

        padding: 16px 20px 12px;

    }

}



@media (max-width: 428px) {

    .banner-description {

        font-size: 23px !important;

    }

    .banner-title {

        font-size: 28px !important;

    }

    .banner-main-title {

        font-size: 50px;

        height: 45px;

    }

    .banner-main-title span.emphasis-box {

        font-size: 15.5px;

    }



    .main-title h1 {

        font-size: 24px;

    }



    .table-scroll th, .table-scroll td {

        padding: 0.8em;

    }



    .fixed-side {

        min-width: 114px;

    }



    .txt-md {

        font-size: 15px !important;

    }



    .btn-redirect {

        font-size: 1.3rem;

    }



    .nav-tabs > li > span {

        padding: 16px 15px 12px;

        font-size: 16px;

    }

}



@media (max-width: 414px) {

    .main-title h1 {

        font-size: 23px;

    }

}



@media (max-width: 393px) {

    .banner-title {

        letter-spacing: -2px;

    }



    .main-title h1 {

        font-size: 27px;

    }



    #catch .main-title.catch01 h1 {

        grid-template-rows: 50px 0;

    } 



    #cta .container {

        max-width: 372px;

    }

}



@media (max-width: 390px) {

    .nav-tabs > li > span {

        padding: 16px 13px 12px;

    }

}



@media (max-width: 375px) {

    .banner-description {

        font-size: 22px !important;

    }

    .banner-title {

        letter-spacing: -1px;

        font-size: 26px !important;

    }

    .banner-main-title {

        font-size: 46px;

        height: 44px;

    }

    .banner-main-title span {

        top: -14px;

    }

    .banner-main-title span.emphasis-box {

        font-size: 14.5px !important;

    }



    #cta .container {

        max-width: 353px;

    }

}



@media (max-width: 360px) {

    .banner-description {

        font-size: 20px !important;

    }

    .banner-title {

        font-size: 25px !important;

    }

    .banner-main-title {

        font-size: 44px !important;

    }



    .main-title h1 {

        font-size: 26px;

    }



    #cta .container {

        max-width: 338px;

    }



    .btn-redirect {

        font-size: 1.25rem;

    }



    .nav-tabs > li > span {

        font-size: 15px;

        padding: 16px 11px 12px;

    }

}



@media (max-width: 320px) {

    .banner-description {

        font-size: 19px !important;

    }

    .banner-title {

        font-size: 22px !important;

    }

    .banner-main-title {

        font-size: 41px !important;

        height: 38px;

    }

    .banner-main-title span.emphasis-box {

        text-align: center;

        line-height: 1.2;

        font-size: 13px !important;

    }



    .br_320 {

        display: block;

    }



    .main-title h1 {

        font-size: 25px;

    }



    .sub-title {

        font-size: 17px !important;

    }



    #cta .container {

        max-width: 300px;

    }



    table.txt-md {

        font-size: 13px !important;

    }



    .btn-redirect {

        font-size: 1.1rem;

    }



    .nav-tabs > li > span {

        padding: 16px 7px 12px;

    }



    .scroll_text {

        font-size: 13px;

    }

}