@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap');


/* Reset */
html { font-size: 62.5%;} /* 10px = 1.0rem */

body {
  font-family: 'Noto Sans JP','メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: #222;
  background: #dcdcdc;
}
@media (max-width:575px){
  body {
    font-size: 1.3rem;
  }
}

header .inner,
footer .inner {
  background: #000;
  padding: 10px;
}

header p,
header p a,
header p a:hover,
footer p,
footer p a,
footer p a:hover {
  color: #fff;
}

.logo {
  width: 120px;
  height: auto;
}

@media (max-width:575px){
  .logo {
    width: 100px;
    height: auto;
  }
}

.dropdown-menu {
  transform: translate3d(-120px, 225px, 0px);
  padding: 0;
}

.dropdown-item {
  padding: 0.75em 1.0em;
  display: block;
  font-size: 1.2rem;
}

.dropdown-item + .dropdown-item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.inner {
  max-width: 1024px;
  margin: 0 auto;
}

section {
  background: #fff;
  padding: 30px;
}

@media (max-width:575px){
  section {
    padding: 15px;
  }
}

.description {
  padding: 30px 60px;
}
@media (max-width:575px){
  .description {
    padding: 15px 30px;
  }
}

.lead {
  margin-bottom: 15px;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: #f44848;
}
@media (max-width:767px){
.lead {
  font-size: 2.0rem;
  }
}
@media (max-width:575px){
.lead {
  font-size: 1.4rem;
  }
}

.description p {
  font-size: 1.5rem;
  line-height: 1.8;
  text-align: center;
}

@media (max-width:991px){
  .description p {
    font-size: 1.5rem;
  }
}
  
@media (max-width:767px){
  .description p {
    font-size: 1.3rem;
    
  }
}

@media (max-width:575px){
  .description p {
    font-size: 1.2rem;
    text-align: left;
  }
}


.news {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
}

@media (max-width:767px){
  .news {
    display: block;
  }
}

@media (max-width:575px){
  .news {
    padding: 0 30px;
  }
}

.news h4 {
  margin-right: 1.5em;
  margin-bottom: 0;
  font-size: 1.8rem;
  word-break: keep-all;
}

@media (max-width:767px){
  .news h4 {
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 1.8rem;
    text-align: center;
  }
}

@media (max-width:767px){
  .news h4 {
    font-size: 1.5rem;
  }
}

.news-wrap {
  width: 100%;
  padding: 10px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.news ul {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
}

.news ul li {
  display: inline;
  margin: 0 7em 0 0;
}
.news ul li span {
  font-weight: 700;
  margin-right: 1em;
}

@-webkit-keyframes scroll {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}


hr {
  margin: 0 auto;
  width: 75%;
  border-top: 1px solid #6b6b6b;
}

@keyframes slider {
  from { background-position: 0 0; }
  to { background-position: -3199px 0; }
}
.mainVisu {
  width: 100%;
  height: 0;
  padding-top: 44.62%;
  position: relative;
  background: url(../img/product.jpg) center;
  background-size: auto 100%;
  animation: slider 112s linear infinite;
  
}
.mainVisu::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(244, 72, 72, 0.67);
  z-index: 2;
}

.mainVisu .inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
}

h1 {
  margin-bottom: 1.5em;
}

@media (max-width:575px){
  h1 {
    margin-bottom: 0.5em;
  }
  .link-btn img {
    height: 30px;
    width: auto;
  }
}


.link-gNavi-group > div:nth-of-type(-n+6){
  margin-bottom: 30px;
}

@media (max-width:575px){
  .link-gNavi-group > div:not(:last-child) {
    margin-bottom: 15px;
  }
}

.link-gNavi {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 1.0em;
  font-size: 2.0rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid #f44848;
  border-radius: 8px;
  box-shadow: 0 2px 0 #f44848;
  transition: 0.2s;
}

@media (max-width:991px){
  .link-gNavi {
    font-size: 1.8rem;
  }
}

@media (max-width:767px){
  .link-gNavi {
    font-size: 1.6rem;
  }
}

@media (max-width:575px){
  .link-gNavi {
    font-size: 1.3rem;
  }
}

.link-gNavi:link,
.link-gNavi:visited {
  color: #f44848;
  text-decoration: none;
}

@media (min-width:576px){
  .link-gNavi:hover {
    text-decoration: none;
    box-shadow: none;
    background: rgba(244, 72, 72, 0.15);
    color: #444;
  }
}
@media (max-width:575px){
  .link-gNavi {
    justify-content: center;
    text-align: center;
    min-height: 5em;
  }
  .link-gNavi:active {
    text-decoration: none;
    box-shadow: none;
    background: rgba(244, 72, 72, 0.15);
    color: #444;
  }
}






.link-menu-group > div:nth-of-type(-n+4){
  margin-bottom: 15px;
}

@media (max-width:575px){
  .link-menu-group > div:not(:last-child) {
    margin-bottom: 15px;
  }
}

.link-menu {
  display: block;
  text-indent: -9999px;
  height: 0;
  padding-bottom: 17.6%;
  transition: 0.3s;
}

.menu_001 {
  background: url(../img/menu_001.png) no-repeat left top;
  background-size: contain;
}
@media (min-width:576px){
  .menu_001:hover {
    background: url(../img/menu_001_h.png) no-repeat left top;
    background-size: contain;
  }
}
@media (max-width:575px){
  .menu_001:active {
    background: url(../img/menu_001_h.png) no-repeat left top;
    background-size: contain;
  }
}

.menu_002 {
  background: url(../img/menu_002.png) no-repeat left top;
  background-size: contain;
}
@media (min-width:576px){
  .menu_002:hover {
    background: url(../img/menu_002_h.png) no-repeat left top;
    background-size: contain;
  }
}
@media (max-width:575px){
  .menu_002:active {
    background: url(../img/menu_002_h.png) no-repeat left top;
    background-size: contain;
  }
}

.menu_003 {
  background: url(../img/menu_003.png) no-repeat left top;
  background-size: contain;
}
@media (min-width:576px){
  .menu_003:hover {
    background: url(../img/menu_003_h.png) no-repeat left top;
    background-size: contain;
  }
}
@media (max-width:575px){
  .menu_003:active {
    background: url(../img/menu_003_h.png) no-repeat left top;
    background-size: contain;
  }
}

.menu_004 {
  background: url(../img/menu_004.png) no-repeat left top;
  background-size: contain;
}
@media (min-width:576px){
  .menu_004:hover {
    background: url(../img/menu_004_h.png) no-repeat left top;
    background-size: contain;
  }
}
@media (max-width:575px){
  .menu_004:active {
    background: url(../img/menu_004_h.png) no-repeat left top;
    background-size: contain;
  }
}

.menu_005 {
  background: url(../img/menu_005.png) no-repeat left top;
  background-size: contain;
}
@media (min-width:576px){
  .menu_005:hover {
    background: url(../img/menu_005_h.png) no-repeat left top;
    background-size: contain;
  }
}
@media (max-width:575px){
  .menu_005:active {
    background: url(../img/menu_005_h.png) no-repeat left top;
    background-size: contain;
  }
}

.menu_006 {
  background: url(../img/menu_006.png) no-repeat left top;
  background-size: contain;
}
@media (min-width:576px){
  .menu_006:hover {
    background: url(../img/menu_006_h.png) no-repeat left top;
    background-size: contain;
  }
}
@media (max-width:575px){
  .menu_006:active {
    background: url(../img/menu_006_h.png) no-repeat left top;
    background-size: contain;
  }
}




address {
  text-align: center;
  color: #fff;
}