/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700,900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800&display=swap&subset=latin-ext');

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap');

@font-face {
    font-family: 'Tw Cen MT Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Tw Cen MT Bold'), url('../fonts/TCB_____.woff') format('woff');
}

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


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 14px; background: #fff; color: #000; }
.sub-container { width: 100%; padding: 0 30px; }


    .sp-only-navi{ display: none !important;}
    .sp-sns{  display: none;}
    
  @media(min-width:768px) {
    .sub-menu { background:#FFF;}


    @keyframes slideIn {
        0% {
        transform: translateY(1rem);
        opacity: 0;
        }
        100% {
        transform:translateY(0rem);
        opacity: 1;
        }
        0% {
        transform: translateY(1rem);
        opacity: 0;
        }
    }
    
    @-webkit-keyframes slideIn {
        0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
        }
        100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
        }
        0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
        }
    }
}
  @media(max-width:767px) {
    @-webkit-keyframes slideIn {
        0% {
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        }
        50% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        }
        100% {
        opacity: 1;
        padding: 10px;
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        }
    }
    
    @keyframes slideIn {
        0% {
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        }
        50% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        }
        100% {
        opacity: 1;
        padding: 10px;
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        }
    }

  
}

    
@media(min-width:768px) {
.sub-menu.float-right.campany-menu {width: 536px;}
.sub-menu.shop-menu {width: 783px;}



.campany-menu .dropdown-item{/* min-width:50% !important; */}
.top-menu-hmg .nav-item.active,
.top-menu-hmg .nav-item:hover {background: url(../images/line-highlight.jpg) no-repeat bottom left #fff;background-size: 100% 6px;}

nav.navbar.navbar-expand-md.flex-wrap.bg-white {
    padding: 10px 0 0 0;
    z-index: 99;
}


}




/* text title */
.top-title-default strong { background: #fff; display: block; }
.title-default { display: block; padding: 28px 0; font-size: 16px; color: #2dbfe0; font-weight: 500; text-align: center; }
.title-default h2 span{ display: block; font-family: 'Work Sans', sans-serif; font-size: 36px; font-weight: 800; color: #000; }




/* background */
.bg-highlight { 
    background: -webkit-gradient(linear, right top, left top, color-stop(0, #deea5d), color-stop(95, #4bcded));
    background: -moz-linear-gradient(Right, #deea5d 0%, #4bcded 95%);
    background: -ms-linear-gradient(Right, #deea5d 0%, #4bcded 95%);
    background: -o-linear-gradient(Right, #deea5d 0%, #4bcded 95%);
    background: linear-gradient(to left, #deea5d 0%, #4bcded 95%); }
.bg-blue { background: #d9f6fe;  }
.bg-darkblue { background: #86d9f7; }
.bg-lightgreen { background: #dcf7e6; }
.bg-lightyellow { background: #fffdd0; }


/* button */
.btn-highlight { transition: all 0.5s; background-size: 200% auto; background-image: linear-gradient(to right, #4ccdec 0%, #d8e963 51%, #4ccdec 100%); }
.btn-highlight:hover { background-position: right center; }

.btn-highlight-orange { transition: all 0.5s; background-size: 200% auto; background-image: linear-gradient(to right, #ff9640 0%, #fcd553 51%, #ff9640 100%); }
.btn-highlight-orange:hover { background-position: right center; }

.btn-highlight-blue { transition: all 0.5s; background-size: 200% auto; background-image: linear-gradient(to right, #019bea 0%, #1ab1ee 51%, #34c7f2 100%); }
.btn-highlight-blue:hover { background-position: right center; }


/* page number */
.pagination{ width: 100%; text-align: right; margin: 18px auto; display: block;}
.page-number { display: inline-block; }
.page-number a { background: #8cd6e2; display: inline-block; width: 24px; height: 24px; font-size: 13px; border-radius: 50%; border: 2px solid #8cd6e2; text-align: center; cursor: pointer;}
.page-number a.active { color: #fff; background: #000; border: 2px solid #000;}
.page-number a:hover:not(.active) { border:2px solid #8cd6e2; background: #fff; color: #8cd6e2; }
.page-number a.arrow{ border: 2px solid #8cd6e2; background: #fff; color: #8cd6e2; }
.pagination.page-bottom { margin-bottom: 100px; }
.btn-nb{ width:auto !important; background:#FFF !important; border:none !important ; color:#686868; position:relative; top:2px; margin:0 5px !important;}
/* back to top */
.back-to-top { position: relative; }
.back-to-top a { display: block; text-align: center; padding: 9px; }

/* floating */
.floating {position: absolute;top: 62.5%;right: 0;z-index: 111;}
.social { background: #fff; box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.32); }
.social .btn-floating {display: block;/* margin: 5px 0; */padding: 5px 0;}
.btn-floating {display: block;/* margin: 7px 0; */padding: 0px 0;}
.btn-floating:hover { opacity: 0.8; }
/* .icon-share { display: none; padding: 14px 0; font-size: 22px; width: 60px; height: 60px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; text-align: center; position: absolute; left: -60px; } */
.icon-share {display: none;padding: 18px 0;font-size: 22px;width: 60px;height: 70px;border-top-left-radius: 50%;border-bottom-left-radius: 50%;text-align: center;color: #FFF;}

/* breadcrumb */
.breadcrumb { display: block; width: 100%; background: #fff; color: #686868; padding: 12px 0 0; font-size: 10px; }
.breadcrumb .line-breadcrumb { display: block; height: 5px; width: 100%; margin-top: 8px; }
.breadcrumb a { display: inline-block; color: #686868; font-size: 10px; }
.breadcrumb a::after { content: '➝'; margin: 0 8px; display: inline-block; color: #686868; font-size: 12px; }
.breadcrumb a:hover { color: #000; }
.breadcrumb a.home img { opacity: 0.5; margin-top: -4px; }
.breadcrumb a.home:hover img { opacity: 1; }

/* contact */
.title-contact { display: inline-block; position: relative; padding: 12px 24px; font-size: 19px; font-weight: 500; }
.title-contact::before { content:url(../images/l-left.png); position: absolute; left: 0; top: 12px; }
.title-contact::after { content:url(../images/l-right.png); position: absolute; right: 0; top: 12px; }
.btn-email { display: inline-block; width: 100%; padding: 22px 12%; text-align: center; border-bottom: 4px solid #b1c9cf; }
.btn-tel { display: inline-block; width: 100%; padding: 0 20% 12px; text-align: center; }
.time { display: inline-block; padding: 2px 22px;  background: #fff; margin-top: 4px; }
.time span { display: inline-block; }
.btn-app {display: inline-block;width: 100%;padding: 22px 8%;text-align: center;border-bottom: 4px solid #b1c9cf;}


@media(max-width:1380px) {
    .floating { top: 33%; }
}
@media(max-width:1200px) {
    .floating { top: 33%; }
    .logo-footer a img{ width: 100% !important;}
    .footer-link {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 0 20px 5px;
        /* margin: 0 0 0 5px; */
    }    
    .footer-link dl {
        margin: 0px 9px 0 0;
        min-width: 116px;
    }
    
    .footer-link dl:nth-of-type(3),.footer-link dl:last-child{
       width: 349px;
    }
    .footer-link dl:nth-of-type(3) dd,.footer-link dl:last-child dd {
        display: inline-block;

    }
    

}


@media(max-width:994px) {
    .top-menu-hmg.justify-content-center { justify-content: space-between!important; }
    .top-menu-hmg .nav-item {/* padding: 18px 12px; */}
}

@media(max-width:991px) {
    .navbar-brand { width: 100%; }
    .sub-menu .dropdown-item {min-width: 100%;}

    .footer-menu-hmg .nav-item { width: 33.33%; margin: 4px 0; }
    .footer-menu-hmg .nav-item:first-child { border-left: 0; }
}
@media(max-width:890px) {

    /* .social {display: inline-block;box-shadow: none;}
    .btn-floating {display: inline-block;margin: 0;padding: 0;}
    .btn-floating img { height: 60px; }
    .icon-share  { display: inline-block; vertical-align: top; }
    .share-link {
    background:#FFF;
    padding:5px 0;
    width: fit-content;
    display: none;
    float: right;
    vertical-align: top;
    } */
    .btn-tel {padding: 12px 20% 12px;}



}
@media(max-width: 767px) {
    /* floating */
    .floating { /*top: auto; bottom: 215px; z-index: 200; position: fixed; */display:none;}
    .sp-only-navi{ display: flex !important;}
    .sp-sns{display: block;text-align: center;padding: 11px 0;background: rgba(255, 255, 255, 0.7);margin: 0 0 5px;}
    .sp-sns a{margin: 0px 10px;}
    .sp-sns i{font-size: 34px;}

    .logo-footer a img{ width: 120px !important;}

    h1{ display: none;
    }
    .sub-container { padding: 0 12px; }

    .top-menu-hmg {/* background: rgba(255, 255, 255, 0.5); *//* padding: 9px 0; */padding: 10px 0 0px 0;/* margin: 0 0 0; */}
    .top-menu-hmg .nav-item {padding: 6px 0px;text-align: right;border-bottom: 1px dotted #ffffff;width: 100%;background: rgba(255, 255, 255, 0.7);}
    .top-menu-hmg .nav-link {color: #000;text-align: center;font-size: 15px;}
    .top-menu-hmg .nav-item.active { background: none; }
    .top-menu-hmg .nav-item.active .nav-link { color: #4bcded; }

    .top-email {/* width: 120px; */}

    .sub-menu {width: 98%;justify-content: space-between;border: 0;padding: 0;margin: auto;}
    .sub-menu .dropdown-item{padding: 7px 7px;/* height: 45px; *//* line-height: 45px; *//* font-size: 15px; */background: rgba(255, 255, 255, 0.7);margin: 0 0 5px;}
    .dropdown-menu {/* padding: 10px; */margin:0;}
    .dropdown-menu .container{ padding:0;}
    .close-sub-menu { display: none; }
    .sub-menu .dropdown-item .border-dot {padding: 0px 0;border-bottom: none;text-align: center;/* display: block !important; */}
    .sub-menu-sp {/* padding: 0!important; */}
    .sub-menu .dropdown-item .sub-menu-img {
        width: 19%;
        width: 60px;
        /* display: none; */
        display: inline-block;
    }
    .top-title-default { padding-top: 1rem; }
    .top-title-default strong { background: rgba(255, 255, 255, 0.5); }

    /* text title */
    .top-title-default strong {}
    .title-default { padding: 10px 0; font-size: 14px; }
    .title-default h2 span{ display: block;  font-size: 32px; height:1.2em;}
        
    



    .top-tel{font-size: 17px;padding: 3px;margin-right: 5px;width: 47%;}
    .top-email {margin-right: 8px;padding: 0 5px;width: 37%;}
    .logo-footer { text-align: center; }
    .footer-menu-hmg { padding-bottom: 4px; justify-content: space-between; }
    .footer-menu-hmg .nav-item { border-right: 0; width: auto; }
    .footer-menu-hmg .nav-item:first-child { border-left: 0; }
    
    .d-flex.justify-content-end.top-contact {
        justify-content: center !important;
    }    
    .logo-footer a {margin: 0px 0 0;}
    .footer-link { padding: 0;}
    .footer-link dl {display: none;}
    .footer-link dl:last-child{ display: flex; flex-wrap: wrap;  justify-content: center; margin: 0;width: 100%;}
    .footer-link dl:last-child dd {
        display: inline-block;
        min-width:32%;

    }
    .footer-link dl:last-child dd:nth-of-type(4),.footer-link dl:last-child dd:nth-of-type(5),.footer-link dl:last-child dd:nth-of-type(6),.footer-link dl:last-child dd:nth-of-type(7){
      min-width: auto;
  }

    


}
@media(max-width:428px) {
  .footer-link dl:last-child dd:nth-of-type(3){
  min-width: 100%;
  text-align:center;
  }

}


@media(max-width:496px) {
    .sub-menu .dropdown-item .sub-menu-text {font-size: 15px;display: inline-block; text-align: left;}
    .navbar-brand{font-size: 20px;top: 6px !important;font-size: 4vw;}
    .navbar-brand img{width: 18%;margin: 0px 3px 0 0;}


}

@media(max-width:460px) {

    .btn-email {width: 90%;padding: 16px 17%;}
    .btn-app {width: 90%;padding: 16px 12%;}
    .btn-tel {
        padding: 0px 15% 12px;
    }
    .btn-tel { width: 90%; }
    
    .floating { bottom: 258px; }
    .footer-menu-hmg { display: block!important; text-align: center; }
    .footer-menu-hmg .nav-item { display: inline-block; margin: 4px 1%; }

    .btn-floating img {height: 50px;}
    .icon-share {font-size: 22px;padding: 18px 0;width: 46px;height: 62px;left: -40px;color: #FFF;}
    .icon-share i{position:relative;top: -3px;}
    .share-link {/* height: 50px; *//* padding: 5px 0; */background: #FFF;box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.32);}
}

@media(max-width:360px) {
    .top-email {width: 114px;border-radius: 2px;/* width: 37%; */}
}

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

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



.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 35px;
  height: 35px;
  margin: 0px 3px 0 2px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: -webkit-gradient(linear, right top, left top, color-stop(0, #deea5d), color-stop(95, #4bcded));
  background: -moz-linear-gradient(Right, #deea5d 0%, #4bcded 95%);
  background: -ms-linear-gradient(Right, #deea5d 0%, #4bcded 95%);
  background: -o-linear-gradient(Right, #deea5d 0%, #4bcded 95%);
  background: linear-gradient(to left, #deea5d 0%, #4bcded 95%);
}
.menu-trigger span:nth-of-type(1) {
  top: 3px;
}
.menu-trigger span:nth-of-type(2) {
  top: 15px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 4px;
}
.menu-trigger.active span {width: 38px;}
 .menu-trigger.active span:nth-of-type(1) {top: -5px;}
 .menu-trigger.active span:nth-of-type(3) {bottom: -4px;}

.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
  }
  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
  }