@charset "UTF-8";
/*------------------------------------
- COLOR custom
------------------------------------*/
/*------------------------------------
- custom all
------------------------------------*/
body {
  font-family: "Roobert", "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
  overflow-x: hidden;
}

p, li {
  line-height: 1.75rem;
}

.wd-max-1100 {
  max-width: 1100px;
  margin: auto;
}

.wd-max-740 {
  max-width: 740px;
  margin: auto;
}

.wd-max-350 {
  max-width: 350px;
  margin: auto;
}

.wd-max-200 {
  max-width: 200px;
  margin: auto;
}

.wd-max-100 {
  max-width: 100px;
  margin: auto;
}

.hg-max-150 {
  max-height: 150px;
  margin: auto;
}

.hg-max-350 {
  max-height: 350px;
  margin: auto;
}

.hg-max-560 {
  max-height: 560px;
  margin: auto;
}

.text-white {
  color: #fff;
}

.text-blck {
  color: #303030;
}

.text-main {
  color: #FFF000;
}

.text-dgry {
  color: #707070;
}

.text-red {
  color: #ff3700;
}

a {
  color: unset;
  text-decoration: none;
  transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}

a:hover {
  color: inherit !important;
  opacity: 0.75 !important;
  transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}

.borderbtn, .borderbtn * {
  background-color: #fff;
  color: #303030;
  border: #FFF000 solid 10px;
  border-radius: 5px;
  transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}

.borderbtn:hover {
  background-color: #fff !important;
  color: #303030 !important;
  border: solid 10px #707070 !important;
  opacity: 1 !important;
  box-sizing: border-box;
  -webkit-transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}

.borderbtn:hover * {
  background-color: #fff !important;
  color: #FFF000 !important;
  opacity: 1 !important;
  fill: #FFF000;
  box-sizing: border-box;
  -webkit-transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}

.serf {
  font-family: serif;
}

.font-mini {
  font-size: 11px;
}

.textsize-80 {
  font-size: 0.8em;
}

.text-overflow-nowrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-vertical {
  writing-mode: vertical-lr;
  font-size: 4rem;
  z-index: 2;
}

.bg-main {
  background-color: #FFF000;
}

.bg-gray {
  background-color: #F2F2F2;
}

.bg-blck {
  background-color: #303030;
}

.border-main {
  border-color: #FFF000 !important;
}

.vertical-align-top {
  vertical-align: top;
}

.vertical-align-bottom {
  vertical-align: bottom;
}

b, strong {
  font-family: "ヒラギノ角ゴシック", sans-serif;
}

.badge {
  color: #303030;
  background-color: #FFF000;
}

.font-Roobert {
  font-family: "Roobert";
}

/*------------------------------------
- custom contents
------------------------------------*/
section h1 {
  font-family: "Roobert";
  font-size: 3.5rem;
}
section h1::first-letter {
  border-top: solid 5px #FFF000;
  padding-top: 5px;
}

nav {
  z-index: 999;
}
nav a.nav-item {
  position: relative;
}
nav a.nav-item .nav-link {
  color: #303030 !important;
}
nav a.nav-item .nav-link:hover {
  color: #303030 !important;
  opacity: 0.5;
}
nav a.nav-item::after {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 5px;
  background: #FFF000;
  top: 5px;
  transform: scale(0, 1);
  transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s; /*変形の時間*/
}
nav a.nav-item:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
  transform-origin: left top; /*左から右に向かう*/
}
nav .navbar-brand {
  letter-spacing: 6px;
}
nav .navbar-brand:hover {
  color: #303030 !important;
  opacity: 0.5;
}
nav .navbar-toggler {
  border: solid 5px #FFF000;
  color: #F2F2F2;
}
nav .navbar-toggler .navbar-toggler-icon {
  /*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");*/
}

.border-bottom {
  border-bottom-color: #F2F2F2 !important;
}

.rounded-20px {
  border-radius: 20px;
}

.rounded-top-left-30px {
  border-top-left-radius: 30px;
}

#firstview {
  /*height: calc(100vh + 50px);*/
  height: calc(100vh - 110px);
  overflow: hidden;
}
#firstview video {
  width: calc(100% + 600px);
  height: 100%;
  padding-bottom: 50px;
  -o-object-fit: cover;
  object-fit: cover;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
#firstview video source {
  -o-object-fit: center;
     object-fit: center;
}
#firstview.d-sm-none {
  height: calc(100vh - 270px);
}
#firstview .videosp {
  width: calc(100% + 100px);
}
#firstview .videosp source {
  -o-object-fit: top;
     object-fit: top;
}
#firstview p {
  padding-bottom: calc(50px + 2rem);
}

#products {
  background: linear-gradient(180deg, #fff 74%, #F2F2F2 74%, #F2F2F2 90%);
}
#products img.w-100 {
  background-image: url("../img/bg-circle.svg");
}
#products .circle {
  width: 100%;
  bottom: 0;
  padding: 10px;
  display: block;
  position: absolute;
  z-index: -1;
  border-radius: 100%;
}
@media screen and (max-width: 575px) {
  #products {
    background: none;
  }
  #products .p-5 {
    background: linear-gradient(180deg, #fff 44%, #F2F2F2 44%, #F2F2F2 90%);
  }
}

#store {
  border-top: #F2F2F2 solid 90px;
  border-bottom: #F2F2F2 solid 90px;
}

#partners .bg-img {
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  margin-top: 88px;
  background-color: #fff;
}
#partners .bg-img img {
  opacity: 0.5;
}

#company-tow .table-2 tr {
  border-top: none;
  border-bottom: none;
}
#company-tow .table-2 th {
  vertical-align: top;
  padding-right: 0 !important;
}
#company-tow .table-2 th::before {
  content: "・";
  /*content: "\02022";*/
  padding-left: 2rem;
}
#company-tow .table-2 th.nonedot::before {
  content: unset;
  /*content: "\02022";*/
  padding-left: 2rem;
}
#company-tow .table-2 td {
  line-height: 1.75rem;
  padding-top: 0;
  padding-bottom: 0;
}
#company-tow h2 {
  font-size: 1.5rem;
  font-weight: normal;
}
#company-tow .leftborder {
  border-left: solid 2px #fff000;
  padding-left: 2rem;
}
#company-tow tr {
  border-top: solid #F2F2F2;
  border-bottom: solid #F2F2F2;
}
#company-tow tr td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
#company-tow tr th {
  text-wrap: nowrap;
  padding-right: 2rem;
}
@media screen and (max-width: 575px) {
  #company-tow tr th {
    padding-right: 1rem;
  }
}
#company-tow .leftborder:has(p.m-0) {
  padding-left: 3rem;
}
@media screen and (max-width: 575px) {
  #company-tow .leftborder,
  #company-tow .leftborder:has(p.m-0) {
    padding-left: 1rem;
  }
}
#company-tow p.m-0 {
  text-indent: -2rem;
}
#company-tow p.m-0::before {
  content: "・";
  /*content: "\02022";*/
  padding-left: 1rem;
}

footer {
  background-color: #303030;
}
footer * {
  color: #fff;
}

/*SP custom*/
@media screen and (max-width: 575px) {
  section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/*page custom*/
#page {
  margin-top: 88px;
}

@media screen and (max-width: 575px) {
  .show {
    margin-top: 2rem;
  }
}
/*slick custom*/
@keyframes slideShow {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slideShow2 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
.slide-wrap {
  display: grid;
  overflow: hidden;
}
.slide-wrap .slider-list {
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  padding: 0;
  align-items: center;
  animation: slideShow 15s infinite linear;
  list-style: none;
}

.slide-wrap.slide2 {
  display: grid;
  overflow: hidden;
}
.slide-wrap.slide2 .slider-list {
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  padding: 0;
  align-items: center;
  animation: slideShow2 15s infinite linear;
  list-style: none;
}

/*slick company slide custom*/
.slider-wrapper {
  /*width: 600px;*/
}

/*.slider {*/
/*  width: 600px;*/
/*  height: 400px;*/
/*  border: 1px solid #000;*/
/*}*/
.slide {
  width: 100%;
}

#slick-1 .slick-dots li {
  width: 40px;
  height: 5px;
  background: #ccc;
}

#slick-1 .slick-dots li button {
  width: 40px;
  height: 5px;
}

#slick-1 .slick-dots li.slick-active,
#slick-1 .slick-dots li:hover {
  background: #777;
}

#slick-1 .slick-dots li button,
#slick-1 .slick-dots li button:before {
  color: transparent;
  opacity: 0;
}

/* progress bar */
.slider-progress {
  width: 100%;
  height: 10px;
  background: #F2F2F2;
}

.slider-progress .progress {
  width: 0%;
  height: 10px;
  background: #FFF000;
}

.slick-dots {
  display: none !important;
}

.slick-dotted.slick-slider {
  margin: 0;
}

@media screen and (max-width: 575px) {
  #store .slick-slide {
    height: 40px;
  }
}
/*effect*/
.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s, transform 1s;
}

.fade.active {
  opacity: 1;
  transform: translateY(0px);
}

/* アニメーション設定 */
.scr-target {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.scr-target.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 1.5s;
}

/* 画面全体の設定 */
#loader_wrap {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  background: #fff;
}

/* ローディングアニメーションの設定 */
.start {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000;
}

.start p {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
  width: 280px;
}/*# sourceMappingURL=style.css.map */