@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap&subset=japanese');

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



::-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: 'Noto Sans JP', sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.5; background: #fff; color: #000;}

/* ------ LAYOUT ------ */
.apple-container { display: block; width: 100%;padding-left: 170px; }


/* ------ HEADER ------ */
.apple-header-menu .nav-item { width: 150px; padding-top: 1rem; background: url(../images/dot-menu.png) no-repeat top center; background-size: auto; position: relative;}
.apple-header-menu .nav-item.active::before { display: none;}
.apple-header-menu .nav-item::before { content: ''; background: #fff; position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: block; transition: all 0.8s ease-in-out;}
.apple-header-menu .nav-item:hover::before { width: 0; }
.apple-header-menu .nav-item .nav-link { position: relative; z-index: 1;}


.logo { position: absolute; top: 0; left: -185px; width: 300px; height: 600px; background: #f92231; transform: skew(-20deg); -webkit-transform: skew(-20deg); z-index: 2; text-align: right; }
.img-logo { transform: skew(20deg); margin-top: 3rem; margin-right: 3rem;}



/* ------ FOOTER ------ */
/* CONTACT */
.bg-contact { background: #f7f3f3; padding: 4rem 0 0; border-top: 4px solid #f92231;}

.back-to-top{ display: block; text-align: center; background: #929292;}
.back-to-top a { display: block; color: #fff; font-size: 30px; position: relative; top: 0; padding: 0.5rem; transition: all 0.3s; }
.back-to-top a:hover { top: -4px;}
.menu-footer li { text-align: left; position: relative; padding: 0.5rem 0.5rem 0.5rem 1rem; font-size: 13px;}
.menu-footer li::before { content: '⎯'; color: #f92231; position: absolute; left: 0; top: 0.5rem;}


/* ------ FLOATING ------ */
.floating { width: 170px; height: auto; position: absolute; top: 84px; left: 0; text-align: right; z-index: 22; display: none;}
.content-floating { display: block; position: relative; }
.content-floating ul { max-height: 480px; }
.menu-page .nav-item { background: #fff; border-bottom: 2px solid #f92231;  border-right: 2px solid #f92231; padding: 1.5rem 0.5rem; text-align: center; position: relative;}
.menu-page .nav-item::before { content: url(../images/dot-menu-floating.png); position: relative; z-index: 2;}
.menu-page .nav-item::after { background: #fff; transition: all 0.5s;}
.menu-page .nav-item:hover::after,
.menu-page .nav-item.active::after { content: ''; background: #f92231; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.menu-page .nav-item .nav-link { position: relative; z-index: 2; margin-top: -1rem;}
.menu-page .nav-item.active .nav-link,
.menu-page .nav-item:hover .nav-link { color: #fff;}
.menu-page .nav-item.active .nav-link::after { content: '▶'; color: #f92231; position: absolute; right: -20px; top: 20%; z-index: 22;}


/* ------ PAGINATION ------ */
.pagination{ width: 100%; text-align: center; margin: 12px auto; display: block;}
.page-number { display: inline-block; }
.page-number a {color: #fff;text-align: center;padding: 0.5rem 1rem;text-decoration: none;font-weight: normal;cursor: pointer;}
.page-number a.active {color: #FFF;font-weight: bold;}
.page-number a:hover:not(.active) { color: #000;}
.page-number a.arrow{ color: #f92231;}

/* ------ SUB TITLE ------ */
.bg-sub-title {  background: -webkit-gradient(linear, left top, right top, color-stop(50, #ffffff), color-stop(50, #f7f3f3));
    background: -moz-linear-gradient(Left, #ffffff 50%, #f7f3f3 50%);
    background: -ms-linear-gradient(Left, #ffffff 50%, #f7f3f3 50%);
    background: -o-linear-gradient(Left, #ffffff 50%, #f7f3f3 50%);
    background: linear-gradient(to right, #ffffff 50%, #f7f3f3 50%);}
.sub-title { background: #f7f3f3; /*overflow: hidden;*/}
.sub-title::before { content: ''; display: block; width: 66px; height: 100%; background: #fff; position: absolute; top: 0; left: -33px; transform: skew(-20deg);}



/* ------ FONT STYLE ------ */
/* font */
.font-en { font-family: parisplus-std, sans-serif;}
.font-brother {font-family: brother-1816, sans-serif;}
/* font size */
.font-10 { font-size: 10px;}
.font-13 { font-size: 13px;}
.font-14 { font-size: 14px;}
.font-15 { font-size: 15px;}
.font-16 { font-size: 16px;}
.font-18 { font-size: 18px;}
.font-20 { font-size: 20px;}
.font-22 { font-size: 22px;}
.font-24 { font-size: 24px;}
.font-28 { font-size: 28px;}
.font-30 { font-size: 30px;}
.font-32 { font-size: 32px;}
.font-34 { font-size: 34px;}
.font-36 { font-size: 36px;}
.font-38 { font-size: 38px;}
/* font weight */
.font-regular { font-weight: 400;}
.font-bold { font-weight: 700;}


/* ------ COLOR STYLE ------ */
.color-red { color: #f92231;}
.color-white { color: #ffffff !important;}


/* ------ BACKGROUND STYLE ------ */
.bg-red { background: #f92231;}
.bg-gray { background: #929292;}
.bg-blue { background: #0027b6;}
.bg-white-transparent { background: rgba(255, 255, 255, 0.9) !important;}
.bg-gradient { background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffee00), color-stop(100, #f92331));
  background: -moz-linear-gradient(Left, #ffee00 0%, #f92331 100%);
  background: -ms-linear-gradient(Left, #ffee00 0%, #f92331 100%);
  background: -o-linear-gradient(Left, #ffee00 0%, #f92331 100%);
  background: linear-gradient(to right, #ffee00 0%, #f92331 100%);}

/* ------ BORDER STYLE ------ */
/* border-bottom */
.border-bottom-red { border-bottom: 2px solid #f92231;}
.border-top-red { border-top: 2px solid #f92231;}
.border-bottom-white { border-bottom: 2px solid #ffffff;}
/* border-left */
.border-left-red { border-left: 2px solid #f92231;}
/* border-right */
.border-right-red { border-right: 2px solid #f92231;}


/* ------ BUTTON STYLE ------ */
/* btn 1 */
.btn-red-gradient { border: 0; border-radius: 5px; color: #fff!important; padding: 0.5rem; display: inline-block; text-align: center; transition: all 0.5s; background-size: 200% auto; background-image: linear-gradient(to right, #ffee00 0%, #f92231 51%, #ffee00 100%); }
.btn-red-gradient:hover { background-position: right center; }

/* btn 2 */
.btn-border-red { border: 3px solid #f92231; border-radius: 7px; color: #f92231!important; overflow: hidden; background: #fff; padding: 1rem; z-index: 0; width: 100%; max-width: 300px; cursor: pointer; outline: none; position: relative; display: inline-block; text-align: center;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
    transition: all 0.3s; }
@media(min-width:1024px) {
.btn-border-red:hover, .btn-border-red:active { color: #fff!important; }
.btn-border-red::after { content: ''; position: absolute; z-index: -1; width: 100%; height: 0; top: 50%; left: 50%; background: #f92231; opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s; 
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-47deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-47deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-47deg);
	transform: translateX(-50%) translateY(-50%) rotate(-47deg); }
.btn-border-red:hover::after { height: 400%; opacity: 1; }
}

/* btn 3 */
.btn-text-black { color: #000000;}
.btn-text-black:hover { color: #f92231;}

/* btn 4 */
.btn-blue { max-width: 440px; width: 100%; display: block; background: #0027b6; border: 2px solid #0027b6; padding: 1rem; color: #fff; text-align: center; border-radius: 5px; margin: 0 auto; position: relative; z-index: 0; overflow: hidden;
    -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
    transition: all 0.3s;}
@media(min-width:1024px) {
.btn-blue:hover, .btn-blue:active { color: #0027b6!important; }
.btn-blue::after { content: ''; position: absolute; z-index: -1; width: 100%; height: 0; top: 50%; left: 50%; background: #fff; opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s; 
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-35deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-35deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-35deg);
	transform: translateX(-50%) translateY(-50%) rotate(-35deg); }
.btn-blue:hover::after { height: 400%; opacity: 1; }
}


/* ------ POSITION STYLE ------ */
.right-1 { right: 1rem;}
.top-1 { top: 1rem;}


/* ------ SPACING STYLE ------ */
.space-1 { letter-spacing: 1px;}


/* ------ LINE STYLE ------ */
.line-vertical { display: block; width: 1px; height: 100px; background: #000; margin: 0 auto;}

.sub-title .line-vertical { display: block; width: 1px; height: 100px; background: #000; margin: 0 auto; left:50%; top: -2rem;}

/* ------ Z-INDEX STYLE ------ */
.z-2 { z-index: 2;}
.z-5 { z-index: 5;}


/* ------ WIDTH STYLE ------ */
.w-55{ width: 55%;}
.max-w640 { max-width: 640px;}
.max-w100 { max-width: 100%;}


/* ------ LINE-HEIGHT STYLE ------ */
.line-height1-8 { line-height: 1.8;}


/* ------ CURSOR STYLE ------ */
.cursor-pointer { cursor: pointer;}




/* ==========================================================================
   Media Queries
   ========================================================================== */
@media(max-width:1024px) {
    /* ------ FLOATING ------ */
    .floating { width: 130px;}

    /* ------ LAYOUT ------ */
    .apple-container { padding-left: 130px;}
    
    /* ------ FOOTER ------ */
    .copyright { width: 100%!important; max-width: 100%!important; flex: 100%!important;}
}

@media(max-width:991px) {
    /* ------ HEADER ------ */
    .apple-header-menu .navbar-nav{padding:0 0 0 100px;}
    .apple-header-menu .navbar-nav li {  width: 120px; margin: 4px auto; text-align: center;}
    .logo { width: 210px;}
    .logo .img-logo { width: 80px; margin-top: 1.5rem; margin-right: 1.5rem;}

    /* ------ FLOATING ------ */
    .floating { display: none!important;}

    /* ------ LAYOUT ------ */
    .apple-container { padding-left: 0;}
}
/* @media(min-width:768px) and (max-width: 1495px){
    .bg-contact .font-20 {
        font-size: 1.5vw;
    }
} */
@media(max-width:767px) {
    /* ------ HEADER ------ */
    .apple-header-menu .navbar-nav{padding:0 0 0 0px;}
    .apple-header-menu .navbar-nav li {  width: 100%; margin: 4px auto; text-align: center;}
	.logo {height: 183px;left: -149px;transform: skew(-33deg);-webkit-transform: skew(-33deg);}
	.img-logo {transform: skew(33deg);margin-top: 3rem;margin-right: 3rem;}
	.logo .img-logo {width: 65px;margin-top: 0.5rem;margin-right: 1.7rem;}    

    /* ------ FOOTER ------ */
    .bg-contact .font-36 { font-size: 26px;}

    .woman_img{ display: none;}

    .line-vertical { height: 55px !important;}

}

@media(max-width:575px) {
    /* ------ FOOTER ------ */
    .menu-footer li { display: inline-block; padding: 0.5rem 1.5rem 0.5rem 1rem;}
    .bg-contact .font-20 { font-size: 15px;}
    .bg-contact .font-14 { font-size: 12px;}
}





@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;
    }
}