@charset "UTF-8";
/*-----------------  TOPページ共通 -----------------*/
.hero-area {
  animation: main01 2s 2s ease forwards;
  background: #000;
  overflow: hidden;
}
@keyframes main01 {
  0% {
    background: #000;
  }
  100% {
    background: #fff;
  }
}

header {
  z-index: 999;
  position: fixed;
  transform: translate(0, -100%);
  width: 100%;
  will-change: transform;
  transition: all 0.4s;
}
header.color {
  transform: translate(0, 0) !important;
}

.animate-header {
  animation: headerAnim 0.6s 3s ease forwards;
}

@keyframes headerAnim {
  0% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
/*-----------------  hero -----------------*/
div.hero-area {
  position: relative;
  height: 100vh;
}
@keyframes hero-op {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
div.hero-area div.hero-slide {
  height: 100vh;
}
div.hero-area div.hero-slide img {
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}
div.hero-area div.hero-area-inner {
  -webkit-mask-image: url(../myimg/top/hero-mask_pc.png);
          mask-image: url(../myimg/top/hero-mask_pc.png);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: cover;
          mask-size: cover;
  background: #000;
  animation: main01 2s 2s ease forwards;
}
div.hero-area div.swiper-slide {
  height: 100vh;
  width: 100%;
  position: relative;
}
div.hero-area video {
  width: 100%;
}

div.white-bg {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 0;
}
div.white-bg::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  animation: hero-bg 4s 2s ease forwards;
  z-index: -1;
}
@keyframes hero-bg {
  0% {
    background: #000;
  }
  100% {
    background: #fff;
  }
}
div.white-bg div.centerHoleMask00 {
  -webkit-mask-size: 100% 100%, 800% 800%;
          mask-size: 100% 100%, 800% 800%;
}

div.centerHoleMask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask03_sp.png");
          mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask03_sp.png");
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 100% 100%, 0 0;
          mask-size: 100% 100%, 0 0;
  -webkit-mask-position: 0 0, 68% 78%;
          mask-position: 0 0, 68% 78%;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media screen and (min-width: 768px) {
  div.centerHoleMask {
    -webkit-mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask03.png");
            mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask03.png");
    -webkit-mask-position: 0 0, 81% 75%;
            mask-position: 0 0, 81% 75%;
  }
}
div.centerHoleMask.centerHoleMask00 {
  background-image: url(../myimg/top/hero-slide03_sp.png);
  -webkit-mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask02_sp.png") !important;
          mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask02_sp.png") !important;
  -webkit-mask-position: 0 0, 50% 50%;
          mask-position: 0 0, 50% 50%;
}
@media screen and (min-width: 768px) {
  div.centerHoleMask.centerHoleMask00 {
    background-image: url(../myimg/top/hero-slide03.png);
    -webkit-mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask02.png") !important;
            mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask02.png") !important;
    -webkit-mask-position: 0 0, 50% 50%;
            mask-position: 0 0, 50% 50%;
  }
}
div.centerHoleMask.centerHoleMask02 {
  background-image: url(../myimg/top/hero-slide01_sp.png);
  -webkit-mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask04_sp.png") !important;
          mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask04_sp.png") !important;
  -webkit-mask-position: 0 0, 35% 25%;
          mask-position: 0 0, 35% 25%;
}
@media screen and (min-width: 768px) {
  div.centerHoleMask.centerHoleMask02 {
    background-image: url(../myimg/top/hero-slide01.png);
    -webkit-mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask04.png") !important;
            mask-image: linear-gradient(#000, #000), url("../myimg/top/fade-mask04.png") !important;
    -webkit-mask-position: 0 0, 15% 30%;
            mask-position: 0 0, 15% 30%;
  }
}
div.centerHoleMask.centerHoleMask03 {
  background-image: url(../myimg/top/hero-slide02_sp.png);
}
@media screen and (min-width: 768px) {
  div.centerHoleMask.centerHoleMask03 {
    background-image: url(../myimg/top/hero-slide02.png);
  }
}

div.swiper-slide.swiper-slide-active div.centerHoleMask {
  animation: hero-slide-sp 2s cubic-bezier(0.77, 0, 0.3, 1) 1s both;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  div.swiper-slide.swiper-slide-active div.centerHoleMask {
    animation: hero-slide 2s cubic-bezier(0.77, 0, 0.3, 1) 1s both;
  }
}
@keyframes hero-slide-sp {
  0% {
    -webkit-mask-size: 100% 100%, 0 0;
            mask-size: 100% 100%, 0 0;
  }
  100% {
    -webkit-mask-size: 100% 100%, 4000% 4000%;
            mask-size: 100% 100%, 4000% 4000%;
  }
}
@keyframes hero-slide {
  0% {
    -webkit-mask-size: 100% 100%, 0 0;
            mask-size: 100% 100%, 0 0;
  }
  100% {
    -webkit-mask-size: 100% 100%, 1200% 1200%;
            mask-size: 100% 100%, 1200% 1200%;
  }
}

div.swiper-slide.first-slide div.centerHoleMask {
  -webkit-mask-size: 100% 100%, 4000% 4000% !important;
          mask-size: 100% 100%, 4000% 4000% !important;
}
@media screen and (min-width: 768px) {
  div.swiper-slide.first-slide div.centerHoleMask {
    -webkit-mask-size: 100% 100%, 1200% 1200% !important;
            mask-size: 100% 100%, 1200% 1200% !important;
  }
}

.top-cm-txtbox {
  margin-top: 15%;
}
@media screen and (min-width: 768px) {
  .top-cm-txtbox {
    margin-top: 0;
  }
}
.top-cm-txtbox p {
  margin-bottom: 1em;
}
.top-cm-txtbox a {
  margin-top: 3em;
}

.top-cm-title01 {
  font-weight: 500;
  text-align: center;
  margin-bottom: 10vw;
}
@media screen and (min-width: 768px) {
  .top-cm-title01 {
    margin-bottom: 70px;
  }
}
.top-cm-title01 span {
  display: block;
}
.top-cm-title01 span.txt01 {
  font-family: "DM Serif Display", serif;
  font-size: 10.6vw;
  letter-spacing: 0.1em;
  line-height: 1em;
}
@media screen and (min-width: 768px) {
  .top-cm-title01 span.txt01 {
    font-size: 50px;
  }
}
.top-cm-title01 span.txt02 {
  margin-top: 0.8em;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .top-cm-title01 span.txt02 {
    margin-top: 1em;
    font-size: 20px;
  }
}

/*----------------------------------  wayWAY ----------------------------------*/
section.sec-way {
  padding: 20% 0;
}
@media screen and (min-width: 768px) {
  section.sec-way {
    padding: 200px 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-way div.way-area01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
}
@media screen and (min-width: 768px) {
  section.sec-way div.way-area01 h2.cm-title01 {
    width: 40%;
  }
}
@media screen and (min-width: 768px) {
  section.sec-way div.way-area01 div.top-cm-txtbox {
    width: 60%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-way div.way-area01 div.top-cm-txtbox {
    width: 50%;
  }
}
section.sec-way div.way-area02 {
  position: relative;
  padding: 30% 0 0;
}
@media screen and (min-width: 768px) {
  section.sec-way div.way-area02 {
    padding: 200px 0 0;
  }
}
section.sec-way div.way-area02 h3 {
  text-align: center;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  section.sec-way div.way-area02 h3 {
    font-size: 20px;
  }
}
section.sec-way div.way-area02 h3 span {
  display: inline-block;
  padding: 0 0 0.4em;
  border-bottom: solid 2px #000;
}
section.sec-way div.way-area02 div.way-img01 {
  position: relative;
  margin: 15% auto;
}
@media screen and (min-width: 768px) {
  section.sec-way div.way-area02 div.way-img01 {
    width: 588px;
    margin: 50px auto;
  }
}
section.sec-way div.way-area02 div.way-img01 span {
  display: block;
  width: 209px;
  height: 209px;
  position: absolute;
  top: 9px;
  left: 32.8%;
  animation: move 5s ease-in infinite;
}
section.sec-way div.way-area02 div.way-img01 span:nth-of-type(2) {
  animation: move 3s ease-in infinite;
}
section.sec-way div.way-area02 div.way-img01 span:nth-of-type(2)::after {
  border-bottom: 4px solid #006400;
  opacity: 0.6;
}
section.sec-way div.way-area02 div.way-img01 span:nth-of-type(3) {
  animation: move 6s ease-in infinite;
}
section.sec-way div.way-area02 div.way-img01 span:nth-of-type(3)::after {
  border-bottom: 4px solid #ba331f;
  opacity: 0.6;
}
@keyframes move {
  100% {
    transform: rotate(360deg);
  }
}
section.sec-way div.way-area02 div.way-img01 span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-bottom: 4px solid #0077ae;
}
section.sec-way div.way-area02 p.way-txt01 {
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.02em;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  section.sec-way div.way-area02 p.way-txt01 {
    font-size: 20px;
  }
}
section.sec-way div.way-area02 p.way-txt01 rt {
  text-align: center;
}
section.sec-way div.way-area02 p.cm-txt01 {
  text-align: center;
}

div.top-img-area {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div.top-img-area div.top-img01 {
  width: 57.2%;
}
div.top-img-area div.top-img-wrap {
  width: 42%;
}
div.top-img-area div.top-img-wrap div.top-img02 {
  margin-bottom: 2%;
}

section.sec-business {
  padding: 20% 0;
}
@media screen and (min-width: 768px) {
  section.sec-business {
    padding: 200px 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-business div.business-area01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  section.sec-business div.business-area01 div.top-cm-txtbox {
    width: 45%;
    margin-top: 50px;
  }
}
section.sec-business div.business-area01 div.business-img {
  margin: 15% 0;
}
@media screen and (min-width: 768px) {
  section.sec-business div.business-area01 div.business-img {
    width: 50%;
    margin: 0;
  }
}

section.sec-group {
  border-top: solid 1px #000;
  padding: 20% 0 0;
  /**/
}
@media screen and (min-width: 768px) {
  section.sec-group {
    padding: 200px 0 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-group div.group-box01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  section.sec-group div.group-box01 div.group-img {
    width: 30%;
    margin: 0 0 0 7%;
  }
}
section.sec-group div.group-box01 div.top-cm-txtbox {
  margin: 8% auto;
}
@media screen and (min-width: 768px) {
  section.sec-group div.group-box01 div.top-cm-txtbox {
    width: 50%;
    margin: 0;
  }
}
section.sec-group div.group-box02 {
  border-top: solid 1px #dadada;
  border-bottom: solid 1px #dadada;
  margin: auto;
  padding: 2% 0;
}
@media screen and (min-width: 768px) {
  section.sec-group div.group-box02 {
    width: 100%;
    padding: 30px 0;
    margin: 78px 0 0 0;
  }
}
section.sec-group div.group-box02 ul {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  section.sec-group div.group-box02 ul {
    width: 97%;
    margin: auto;
  }
}
section.sec-group div.group-box02 ul li {
  position: relative;
  width: 50%;
}
@media screen and (min-width: 768px) {
  section.sec-group div.group-box02 ul li {
    width: 25%;
  }
  section.sec-group div.group-box02 ul li:nth-of-type(4n-3) {
    width: 23.2%;
  }
  section.sec-group div.group-box02 ul li:nth-of-type(4n-2) {
    width: 26.6%;
  }
  section.sec-group div.group-box02 ul li:nth-of-type(4n-1) {
    width: 30%;
  }
  section.sec-group div.group-box02 ul li:nth-of-type(4n) {
    width: 20.2%;
  }
}
section.sec-group div.group-box02 ul li a {
  display: block;
}
@media screen and (min-width: 768px) {
  section.sec-group div.group-box02 ul li a img {
    transition: all 0.3s;
  }
  section.sec-group div.group-box02 ul li a:hover img {
    transform: scale(1.1);
  }
}
section.sec-group div.group-box02 ul li span.plus {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1em;
  height: 1em;
  transform: translate(-50%, 50%);
}
section.sec-group div.group-box02 ul li span.plus::after, section.sec-group div.group-box02 ul li span.plus::before {
  content: "";
  display: block;
  background: #dadada;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
section.sec-group div.group-box02 ul li span.plus::after {
  width: 100%;
  height: 1px;
}
section.sec-group div.group-box02 ul li span.plus::before {
  width: 1px;
  height: 100%;
}
section.sec-group div.group-box02 ul li span.plus.plus02 {
  left: auto;
  right: 0;
  transform: translate(50%, 50%);
}
@media screen and (min-width: 768px) {
  section.sec-group div.group-box02 ul li span.plus.smp-block {
    display: none;
  }
}

section.sec-accsess {
  padding: 20% 0 0;
}
@media screen and (min-width: 768px) {
  section.sec-accsess {
    padding: 200px 0 0;
  }
}
section.sec-accsess div.map-wrap {
  margin: auto;
  filter: grayscale(1);
  width: 122%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}
@media screen and (min-width: 768px) {
  section.sec-accsess div.map-wrap {
    width: 80%;
    max-width: 886px;
    left: 0;
    transform: translate(0);
  }
}
section.sec-accsess div.map-wrap iframe {
  width: 100%;
  height: 100vw;
}
@media screen and (min-width: 768px) {
  section.sec-accsess div.map-wrap iframe {
    height: 429px;
  }
}
section.sec-accsess p.cm-txt01 {
  text-align: center;
  margin-top: 40px;
}
section.sec-accsess p.cm-txt01 a {
  display: block;
  color: #000;
}/*# sourceMappingURL=style.css.map */