@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:100,300,400,500,700,800,900&display=swap&subset=japanese');

@font-face {
    font-family: 'SandroAl';
    src: url('../fonts/SandroAl.eot');
    src: url('../fonts/SandroAl.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SandroAl.woff2') format('woff2'),
        url('../fonts/SandroAl.woff') format('woff'),
        url('../fonts/SandroAl.ttf') format('truetype'),
        url('../fonts/SandroAl.svg#SandroAl') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LightNovelPOP';
    src: url('../fonts/07LightNovelPOP.eot');
    src: url('../fonts/07LightNovelPOP.eot?#iefix') format('embedded-opentype'),
        url('../fonts/07LightNovelPOP.woff2') format('woff2'),
        url('../fonts/07LightNovelPOP.woff') format('woff'),
        url('../fonts/07LightNovelPOP.ttf') format('truetype'),
        url('../fonts/07LightNovelPOP.svg#07LightNovelPOP') format('svg');
    font-weight: 300;
    font-style: normal;
}


html {
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: serif;
    font-style: normal;
}



::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
a,
a:visited {
    text-decoration: none; 
    color: #000;
}
*{ box-sizing: border-box;}

button:focus,
select:focus { outline: none; }

a:active, a:hover { text-decoration: none; color: #000; }
ul { margin: auto; }

a { transition: all 0.3s;}
a:hover { text-decoration: none; }

.btn-link:focus,
.btn-link.focus { text-decoration: none; }


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body { font-family: 'M PLUS 1p', sans-serif; font-size: 15px; font-style: normal; font-weight: normal; line-height: 1.5; background: #fff; max-width: 1300px; margin: 0 auto; position: relative; padding: 100px 10px 79px;}
body::before { content: ''; background: url(../images/bg-dot-blue.jpg); width: 10px; height: 100%; position: absolute; top: 0; left: 0; z-index: 1050;}
body::after { content: ''; background: url(../images/bg-dot-blue.jpg); width: 10px; height: 100%; position: absolute; top: 0; right: 0; z-index: 1050;}

.font-SandroAl { font-family: 'SandroAl', sans-serif;}
.font-LightNovelPOP { font-family: 'LightNovelPOP', sans-serif;}

.z-index2 { z-index: 2;}
.z-index12 { z-index: 12;}

.font-13 { font-size: 13px;}
.font-16 { font-size: 16px;}
.font-20 { font-size: 20px;}
.font-22 { font-size: 22px;}
.font-24 { font-size: 24px;}

.font-weight-medium { font-weight: 500;}

.font-white { color: #fff!important;}
.font-defult { color: #5BBBC3;}

.bg-darkgray { background: #4f4f4f;}
.bg-lightgray { background: #f0f0f0;}

.img-fluid-full { width: 100%;}

.w-65 { width: 65%;}

.left-0 { left: 0;}
.right-0 { right: 0;}
.top-0 { top: 0;}
.bottom-0 { bottom: 0;}

/* layout page */
.hero { display: flex; flex-wrap: wrap; justify-content: flex-end; position: relative;}
.hero .hero-container { max-width: 1000px; width: 100%; margin: 0;}


/* header */
.hero-top-logo img { width: 250px;}
.hero-top-menu { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
.hero-top-menu .nav-item { text-align: center; white-space: nowrap; position: relative;}
.hero-top-menu .nav-item::after { content: ''; background: url(../images/bg-dot-blue2.jpg); width: 0; height: 6px; display: block; position: absolute; bottom: 0; left: 0; transition: all 0.5s;}
.hero-top-menu .nav-item:hover::after { width: 100%;}
.hero-top-menu .nav-item.active::after { width: 100%;}
.hero-top-menu .nav-item .nav-link { font-family: 'LightNovelPOP', sans-serif; font-size: 15px; color: #000!important;}
.hero-top-menu .font-en { display: block; font-family: 'SandroAl', sans-serif; font-size: 34px; color: #5bbbc3;}
.hero-menu-bar { font-size: 24px;}


/* floating */
.floating { width: 250px; position: absolute; top: 108px; left: 10px; text-align: right; z-index: 22;}
.content-floating {border: 3px solid #5bbbc3; border-left: 0; background: #fff; padding: 1rem; display: block; position: relative;}
.content-floating ul { max-height: 580px; overflow-y: auto;}
.floating .title-floating { background: #5BBBC3; border-top-left-radius: 6px; border-top-right-radius: 6px; padding: 0.5rem 1rem; color: #fff; font-weight: 500; display: inline-block; margin-right: 8px;}


/* btn color floating */
.floating .btn-floating-lightblue { background: #5bbbc3; border-top: 3px solid #bde4e7; position: relative; z-index: 1;}
.floating .btn-floating-lightblue::after { content: ''; background: #0088a1; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.floating .btn-floating-lightblue:hover::after { height: 100%;}
.floating .btn-floating-blue { background: #0091d4; position: relative; z-index: 1;}
.floating .btn-floating-blue::after { content: ''; background: #0057cd; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.floating .btn-floating-blue:hover::after { height: 100%;}
.floating .btn-floating-pink { background: #f792c9; position: relative; z-index: 1;}
.floating .btn-floating-pink::after { content: ''; background: #f55a91; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.floating .btn-floating-pink:hover::after { height: 100%;}
.floating .btn-floating-green { background: #a3d839; position: relative; z-index: 1;}
.floating .btn-floating-green::after { content: ''; background: #1db000; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.floating .btn-floating-green:hover::after { height: 100%;}
.floating .btn-floating-red { background: #fc8d74; position: relative; z-index: 1;}
.floating .btn-floating-red::after { content: ''; background: #ff2e2e; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.floating .btn-floating-red:hover::after { height: 100%;}
.floating .btn-floating-orange { position: relative; z-index: 1;
    background: rgba(251,218,2,1);
    background: -moz-linear-gradient(left, rgba(251,218,2,1) 0%, rgba(253,191,4,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(251,218,2,1)), color-stop(100%, rgba(253,191,4,1)));
    background: -webkit-linear-gradient(left, rgba(251,218,2,1) 0%, rgba(253,191,4,1) 100%);
    background: -o-linear-gradient(left, rgba(251,218,2,1) 0%, rgba(253,191,4,1) 100%);
    background: -ms-linear-gradient(left, rgba(251,218,2,1) 0%, rgba(253,191,4,1) 100%);
    background: linear-gradient(to right, rgba(251,218,2,1) 0%, rgba(253,191,4,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbda02', endColorstr='#fdbf04', GradientType=1 );}
.floating .btn-floating-orange::after { content: ''; background: #fd7f04; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.floating .btn-floating-orange:hover::after { height: 100%;}


/* footer */
.footer { background: -webkit-gradient(linear, left top, right top, color-stop(50, #f0f0f0), color-stop(50, #5bbbc3));
  background: -moz-linear-gradient(Left, #f0f0f0 50%, #5bbbc3 50%);
  background: -ms-linear-gradient(Left, #f0f0f0 50%, #5bbbc3 50%);
  background: -o-linear-gradient(Left, #f0f0f0 50%, #5bbbc3 50%);
  background: linear-gradient(to right, #f0f0f0 50%, #5bbbc3 50%);}
.footer-contact { font-weight: 600; padding: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #f0f0f0;}
.footer-contact p { margin-bottom: 4px;}
.footer-contact .btn-to-page { max-width: 280px; display: block; padding: 1rem; text-align: center; color: #fff; font-size: 16px; font-weight: 700; background: #5bbbc3; position: relative; z-index: 1;}
.footer-contact .btn-to-page::after { content: ''; background: #0088a1; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.footer-contact .btn-to-page:hover::after { height: 100%;}

.copyright { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #5bbbc3; color: #fff; font-size: 13px; text-align: center; padding: 3rem; position: relative;}
.copyright::before { content: ''; background: url(../images/bg-dot-blue.jpg); width: 5px; height: 100%; display: block; position: absolute; top: 0; left: 0;}



.contact-fixed { background: #444444; color: #fff; padding: 1rem 1rem; text-align: center; display: block; font-size: 18px; max-width: 1300px; width: 100%; position: relative;}
.contact-fixed .btn-email {font-family: 'M PLUS 1p', sans-serif;display: inline-block;/* padding: 0.8rem 3.5rem; */width: 300px;height: 60px;line-height: 60px;background: #ffb503;font-size: 20px;font-weight: 500;color: #fff;position: relative;z-index: 1;margin-right: 12px;}
.contact-fixed .btn-email i{font-size: 30px;position: relative;top: 3px;}
.contact-fixed .btn-email::after { content: ''; background: #ff7a03; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.contact-fixed .btn-email:hover::after { height: 100%;}

.contact-fixed .btn-tel {font-family: 'M PLUS 1p', sans-serif;display: inline-block;/* padding: 0.8rem 3.5rem; */background: #ff8b03;font-size: 24px;font-weight: 700;color: #fff;position: relative;z-index: 1;width: 300px;height: 60px;line-height: 60px;vertical-align: top;}
.contact-fixed .btn-tel i{font-size: 30px;}
.contact-fixed .btn-tel::after { content: ''; background: #e80000; width: 100%; height: 3px; display: block; position: absolute; z-index: -1; bottom: 0; left: 0; transition: all 0.5s;}
.contact-fixed .btn-tel:hover::after { height: 100%;}





a.anchor{
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media(max-width:1199px) {
    /* layout page */
    .hero { justify-content: center; width: 100%;}
    .hero .hero-container { margin: 0 auto;}

    .floating { position: fixed; bottom: 79px; right: 10px; top: auto; left: auto; z-index: 2000;}
    .content-floating { border: 3px solid #5bbbc3; display: none; z-index: 100;}
    .floating .title-floating {border: 1px solid #88cdd2;border-bottom: 0;position: relative;z-index: 100;cursor: pointer;/* top: -38px; */}

    .overlay-floating { display: none; background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99; transition: all 0.3s;}
    .overlay-floating.show { display: block;}
} 

@media(max-width:991px) {
    body { padding-top: 60px;}

    /* header */
    .hero-top-menu .nav-item::after { display: none;}

    /* footer */
    .contact-fixed .btn-email {/* padding: 0.8rem 1.5rem; */}
    .contact-fixed .btn-tel {/* padding: 0.8rem 1.5rem; */}
}

@media(max-width:805px) {
    body { padding-bottom: 106px;}
    .floating { bottom: 106px;}

    /* footer */
    .contact-fixed .btn-email {/* padding: 0.8rem 3rem; */}
    .contact-fixed .btn-tel {/* padding: 0.8rem 3rem; */}
}

@media(max-width:768px) {
    /* header */
    .hero-top-logo img { width: 200px;}

    /* footer */
    .footer-contact { padding: 2rem 1rem;}
    .footer-contact .btn-to-page { font-size: 15px;}
    .copyright { padding: 2rem 1rem; font-size: 10px;}
    .copyright img { max-width: 190px;}
    
}

@media(max-width: 649px) {       
    .copyright { padding: 1rem 1rem 3rem;}
    .copyright::before { display: none;}

    /* floating */
    .content-floating ul { max-height: 430px;}

    /* footer */
    .contact-fixed .btn-email {/* padding: 0.8rem 1.5rem; */width: 48%;height: 50px;line-height: 50px;font-size: 16px;margin-right: 0;}
    .contact-fixed .btn-tel {/* padding: 0.8rem 1.5rem; */width: 49%;height: 50px;line-height: 50px;font-size: 17px;}
    .contact-fixed .btn-email i{font-size: 25px;position: relative;top: 3px;}
    .contact-fixed .btn-tel i{font-size: 26px;position: relative;top: 2px;}

    .d-inline-block {display: block !important;}
}

@media(max-width:424px) {

body::before { width: 5px;}
body::after { width: 5px;}

    body { padding: 100px 5px 81px}    
    .floating {bottom: 105px;}

    .contact-fixed .btn-email {/* padding: 0.8rem 1.5rem; */width: 48%;height: 50px;line-height: 50px;font-size: 14px;margin-right: 0;}
    .contact-fixed .btn-tel {/* padding: 0.8rem 1.5rem; */width: 49%;height: 50px;line-height: 50px;font-size: 15px;}
    .contact-fixed .btn-email i{font-size: 18px;position: relative;top: 3px;}
    .contact-fixed .btn-tel i{font-size: 22px;position: relative;top: 2px;}

    .d-inline-block {display: block !important;}
    .contact-fixed {font-size: 14px;padding: 1rem 10px;letter-spacing: -1px;}
    .floating .title-floating {/* top: -24px; */}


    .font-13 { font-size: 13px;}
    .font-16 { font-size: 16px;}
    .font-20 { font-size: 20px;}
    .font-22 { font-size: 22px;}
    .font-24 {font-size: 19px;}    




}

@media screen and (min-width:806px) and (max-width:1048px) {
    .floating .title-floating {/* top:-30px; */}
}









@media only screen and (min-width: 35em) {
    
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}


@media (max-width:2559px) {
    .wrapper{ max-width: 980px; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: none !important; 
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
    :hover{
         text-decoration: none;
    }
}