@charset "UTF-8";

/*****************************
  top
*****************************/
.topsec{
  padding: 10rem 0;
}
.whitebox{
  background: rgba(255,255,255,.8);
  padding: 4rem ;
  position: relative;
}
.whitebox::before{
  content: "";
  aspect-ratio: 1/1;
  background: linear-gradient(#090204,#004A6D);
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  width: 4rem;
  z-index: -1;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec {
    padding: 6rem 0;
  }
  .whitebox{
    background: rgba(255,255,255,.9);
  }
  .whitebox::before{
    bottom: -1.5rem;
    left: -1.5rem;
    width: 3rem;
  }
}

/*****************************
topsec-fv
*****************************/
.topsec-fv{
  padding: 0;
}
.topsec-fv .swiper::before{
  content: "";
  background: rgba(0,0,0,.1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}
.topsec-fv .swiper-img{
  height: 100vh;
}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
  animation: zoomUp1 12s linear 0s normal both;
}
.swiper-slide-active .swiper-img.obL1,
.swiper-slide-duplicate-active .swiper-img.obL1,
.swiper-slide-prev .swiper-img.obL1,
.swiper-slide-active .swiper-img.obR1,
.swiper-slide-duplicate-active .swiper-img.obR1,
.swiper-slide-prev .swiper-img.obR1 {
  animation: zoomUp2 12s linear 0s normal both;
}
.swiper-slide-active .swiper-img.obL2,
.swiper-slide-duplicate-active .swiper-img.obL2,
.swiper-slide-prev .swiper-img.obL2,
.swiper-slide-active .swiper-img.obR2,
.swiper-slide-duplicate-active .swiper-img.obR2,
.swiper-slide-prev .swiper-img.obR2 {
  animation: zoomUp3 12s linear 0s normal both;
}
.swiper-slide-active .swiper-img.obL3,
.swiper-slide-duplicate-active .swiper-img.obL3,
.swiper-slide-prev .swiper-img.obL3,
.swiper-slide-active .swiper-img.obR3,
.swiper-slide-duplicate-active .swiper-img.obR3,
.swiper-slide-prev .swiper-img.obR3 {
  animation: zoomUp4 12s linear 0s normal both;
}

.topsec-fv .swiper-img.ob{
  background: #fff;
  position: absolute;
  top: 0;
  width: 100%;
}
.topsec-fv .swiper-img.obL,
.topsec-fv .swiper-img.obL .obbg{
  left: 0;
}
.topsec-fv .swiper-img.obR,
.topsec-fv .swiper-img.obR .obbg{
  right: 0;
}
.topsec-fv .swiper-img.obL1,
.topsec-fv .swiper-img.obL1 .obbg{
  clip-path: polygon(0 0, 0 100%, 20% 100%);
}
.topsec-fv .swiper-img.obL2,
.topsec-fv .swiper-img.obL2 .obbg{
  clip-path: polygon(0 0, 0 100%, 15% 0);
}
.topsec-fv .swiper-img.obL3,
.topsec-fv .swiper-img.obL3 .obbg{
  clip-path: polygon(0 0, 0 100%, 10% 100%);
}
.topsec-fv .swiper-img.obR1,
.topsec-fv .swiper-img.obR1 .obbg{
  clip-path: polygon(100% 0, 85% 100%, 100% 100%);
}
.topsec-fv .swiper-img.obR2,
.topsec-fv .swiper-img.obR2 .obbg{
  clip-path: polygon(100% 0, 80% 0, 100% 100%);
}
.topsec-fv .swiper-img.obR3,
.topsec-fv .swiper-img.obR3 .obbg{
  clip-path: polygon(100% 0, 90% 100%, 100% 100%);
}

.topsec-fv .swiper-img.ob .obbg{
  position: absolute;
  height: calc(100% - 1rem);
  width: calc(100% - 1rem);
}
.topsec-fv .swiper-img.obL1 .obbg,
.topsec-fv .swiper-img.obL3 .obbg,
.topsec-fv .swiper-img.obR1 .obbg,
.topsec-fv .swiper-img.obR3 .obbg{
  bottom: 0;
}
.topsec-fv .swiper-img.obL2 .obbg,
.topsec-fv .swiper-img.obR2 .obbg{
  top: 0;
}

.topsec-fv .catch{
  position: absolute;
  right: 0;
  bottom: 5rem;
  text-align: right;
  z-index: 2;
}
.topsec-fv .catch img{
  filter: brightness(0) invert(1) drop-shadow(2px 3px #000);
  margin-right: 5vw;
  width: 27vw;
}
.topsec-fv .catch .ttl{
  color: #fff;
  font-size: 5vw;
  font-weight: bold;
  line-height: 1.4;
  text-shadow: 2px 3px #000;
}
@media only screen and (max-width: 1180px) {
  .topsec-fv .catch img {
    margin-right: 6rem;
    width: 350px;
  }
  .topsec-fv .catch .ttl {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  /* .topsec-fv .swiper-img{
    height: 80vh;
  } */
  .topsec-fv .catch img {
    width: 290px;
  }
  .topsec-fv .catch .ttl {
    font-size: 5rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-fv .swiper-img{
    height: 400px;
  }
  .topsec-fv .catch img {
    margin-right: 3rem;
    width: 160px;
  }
  .topsec-fv .catch .ttl {
    font-size: 2.8rem;
  }

  .topsec-fv .swiper-img.ob .obbg{
    height: calc(100% - .5rem);
    width: calc(100% - .5rem);
  }
  .topsec-fv .swiper-img.obL1,
  .topsec-fv .swiper-img.obL1 .obbg{
    clip-path: polygon(0 0, 0 25%, 100% 0);
  }
  .topsec-fv .swiper-img.obL2,
  .topsec-fv .swiper-img.obL2 .obbg{
    clip-path: polygon(0 0, 100% 15%, 100% 0);
  }
  .topsec-fv .swiper-img.obL3,
  .topsec-fv .swiper-img.obL3 .obbg{
    clip-path: polygon(0 0, 0 10%, 100% 0);
  }
  .topsec-fv .swiper-img.obR1,
  .topsec-fv .swiper-img.obR1 .obbg{
    clip-path: polygon(100% 80%, 0 100%, 100% 100%);
  }
  .topsec-fv .swiper-img.obR2,
  .topsec-fv .swiper-img.obR2 .obbg{
    clip-path: polygon(0 85%, 0 100%, 100% 100%);
  }
  .topsec-fv .swiper-img.obR3,
  .topsec-fv .swiper-img.obR3 .obbg{
    clip-path: polygon(100% 90%, 0 100%, 100% 100%);
  }

  .topsec-fv .swiper-img.obL,
  .topsec-fv .swiper-img.obL .obbg{
    top: 0;
    bottom: auto;
  }
  .topsec-fv .swiper-img.obR,
  .topsec-fv .swiper-img.obR .obbg{
    top: auto;
    bottom: 0;
  }

  .topsec-fv .swiper-img.obL2 .obbg{
    right: 0;
    left: auto;
  }
  .topsec-fv .swiper-img.obR2 .obbg{
    right: auto;
    left: 0;
  }
}

/*****************************
topsec-greeting 
*****************************/
.topsec-greeting .bgtxt::before {
  animation: 15s linear 0s infinite normal none running textloop;
  content: "GREETING GREETING GREETING GREETING GREETING GREETING";
  font-size: 8vw;
  font-weight: bold;
  opacity: .2;
  position: absolute;
  top: 0;
  white-space: nowrap;
  width: 100%;
}
.topsec-greeting .ob{
  position: absolute;
  height: 100%;
  width: 50%;
}
.topsec-greeting .ob1,
.topsec-greeting .ob4{
  clip-path: polygon(30% 0, 0 45%, 100% 55%);
}
.topsec-greeting .ob2,
.topsec-greeting .ob3{
  clip-path: polygon(100% 0, 0 70%, 60% 100%);
}
.topsec-greeting .ob1{
  top: -9rem;
  right: -2rem;
}
.topsec-greeting .ob2{
  top: 5rem;
  right: 2rem;
}
.topsec-greeting .ob3{
  top: 3rem;
  right: 3rem;
}
.topsec-greeting .ob4{
  top: -10rem;
  right: -4rem;
}
.topsec-greeting .ob .bg{
  height: 100%;
  width: 100%;
}
.topsec-greeting .ob1 .bg{
  background: linear-gradient(#090204,#004A6D);
}
.topsec-greeting .ob2 .bg{
  background: #C1A367;
}
.topsec-greeting .ob3 .bg{
  background-image: url(../images/top/greeting_ob2.webp) ;
  background-repeat: no-repeat;
  background-position-x: -9rem;
  background-position-y: -1rem;
  background-size: auto;
}
.topsec-greeting .ob4 .bg{
  background-image: url(../images/top/greeting_ob1.webp) ;
  background-repeat: no-repeat;
  background-position-y: -8rem;
  background-position-x: -18rem;
  background-size: cover;
}
.topsec-greeting .whitebox{
  max-width: 820px;
  margin-top: 8rem;
}
.topsec-greeting .morebtn1{
  margin-top: 2rem;
  text-align: right;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-greeting .bgtxt::before{
    font-size: 14vw;
  }
  .topsec-greeting .ob {
    height: 80%;
    width: 60%;
  }
  .topsec-greeting .whitebox{
    padding: 2rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-greeting .ob {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 95%;
  }
  .topsec-greeting .ob1{
    right: -7rem;
  }
  .topsec-greeting .ob2{
    right: -3rem;
  }
  .topsec-greeting .ob3{
    right: -2rem;
  }
  .topsec-greeting .ob4 {
    right: -9rem;
  }
  .topsec-greeting .bgtxt::before {
    font-size: 10rem;
    line-height: 1.4;
  }
  .topsec-greeting .whitebox {
    padding: 1.5rem;
  }
}

/*****************************
topsec-reason
*****************************/
.topsec-reason .ob{
  aspect-ratio: 201 / 766;
  background: url(../images/top/reason_ob.svg) no-repeat top / contain;
  position: absolute;
  top: calc(-80% - 10rem);
  left: -4rem;
  height: 80%;
  transition: 1s;
  z-index: -1;
}
.topsec-reason .ob.animated{
  top: -10rem;
}
.topsec-reason .fbox{
  width: 52%;
}
.topsec-reason .fbgbox{
  aspect-ratio: 1/2;
  background: url(../images/top/reason2.webp) no-repeat center / cover;
  background-position-x: 25%;
  box-shadow: 10px 10px #ccc;
  width: 38%;
}
.topsec-reason .ttlbox1{
  text-shadow: 1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff, -1px -1px 0px #fff, -1px -1px 0px #fff, 2px 2px 1px #fff, 0px 2px 1px #fff, 2px 0px 1px #fff, 0px 0px 1px #fff, 2px 0px 1px #fff, -1px 2px 1px #fff, -1px -1px 1px #fff, -1px -1px 1px #fff;
}
.topsec-reason .whitebox{
  margin: 1rem 0 5rem 2rem;
  padding:  2rem ;
}
.topsec-reason .fbox .morebtn1{
  margin-top: 2rem;
  text-align: right;
}
.topsec-reason .fbox .imgbox{
  box-shadow: -10px 10px #ccc;
}
@media only screen and (max-width: 1180px) {
  .topsec-reason .fbgbox{
    width: 40%;
  }
}
@media only screen and (max-width: 1024px) {
  .topsec-reason .fbgbox{
    width: 42%;
  }
}
@media only screen and (max-width: 820px) {
  .topsec-reason .fbox{
    width: 100%;
  }
  .topsec-reason .fbox .imgbox {
    box-shadow: -5px 5px #ccc;
    width: 50%;
  }
  .topsec-reason .whitebox{
    max-width: 600px;
  }
  .topsec-reason .fbgbox {
    box-shadow: 5px 5px #ccc;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
    z-index: -1;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-reason .whitebox {
    margin: 1rem 0 3rem 1rem;
    padding: 1.5rem;
  }
  .topsec-reason .fbox .imgbox {
    width: 80%;
  }
  .topsec-reason .fbgbox {
    margin-top: -100%;
    margin-left: auto;
    position: relative;
    width: 67%;
  }
  .topsec-reason .ob {
    top: calc(-350px - 6rem);
    height: 350px;
    left: 1rem;
  }
  .topsec-reason .ob.animated {
    top: -6rem;
  }
}

/*****************************
topsec-business
*****************************/
.topsec-business{
  padding-bottom: 0;
}
.topsec-business::before{
  content: "";
  aspect-ratio: 3 / 2;
  background: url(../images/common/bg_square.svg) no-repeat right / contain;
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  z-index: -1;
}
.topsec-business .ttlbox1{
  text-align: center;
}
.topsec-business .whitebox{
  margin: 0 auto 6rem;
  max-width: 550px;
  text-align: center;
}
.topsec-business .panel{
  background: url(../images/top/panel1.webp) no-repeat center/ cover;
  height: 500px;
  width: 25%;
}
.topsec-business .panel2{
  background: url(../images/top/panel2.webp) no-repeat center/ cover;
}
.topsec-business .panel3{
  background: url(../images/top/panel3.webp) no-repeat center/ cover;
}
.topsec-business .panel4{
  background: url(../images/top/panel4.webp) no-repeat center/ cover;
}

.topsec-business .panel a{
  background: rgba(0, 0, 0, .4);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: 100%;
  padding: 1rem;
  z-index: 1;
}
.topsec-business .panel a .en{
  font-size: 2.6vw;
  line-height: 1.2;
}
.topsec-business .panel a .ttl{
  font-size: 1.2vw;
}
.topsec-business .panel a:hover{
  background: linear-gradient(rgba(9, 2, 4, .8), rgba(0, 74, 109 , .8));
  opacity: 1;
  z-index: 5;
}

.topsec-business .panelbg{
  background: url(../images/top/panel_bg1.webp) no-repeat center/ cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 500px;
  width: 100%;
  opacity: 0;
  transition: .5s;
  transform: scale(1.2);
}
.topsec-business .panelbg2{
  background: url(../images/top/panel_bg2.webp) no-repeat center/ cover;
}
.topsec-business .panelbg3{
  background: url(../images/top/panel_bg3.webp) no-repeat center/ cover;
}
.topsec-business .panelbg4{
  background: url(../images/top/panel_bg4.webp) no-repeat center/ cover;
}

.topsec-business .panel a:hover ~ .panelbg{
  opacity: 1;
  z-index: 2;
  transform: scale(1);
}
@media only screen and (max-width: 1180px) {
  .topsec-business .panel,
  .topsec-business .panelbg{
    height: 400px;
  }
  .topsec-business .panel a .en{
    font-size: 3vw;
  }
  .topsec-business .panel a .ttl{
    font-size: 1.6vw;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-business::before{
    width: 100%;
  }
  .topsec-business .panel{
    height: 200px;
    width: 50%;
  }
  .topsec-business .panel a .en{
    font-size: 4vw;
  }
  .topsec-business .panel a .ttl {
    font-size: 2.2vw;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-business{
    padding-bottom: 3rem;
  }
  .topsec-business::before{
    background-size: cover;
    opacity: .5;
    height: 100%;
    width: 100%;
  }
  .topsec-business .whitebox {
    margin: 0 auto 2rem;
    max-width: 90%;
    padding: 1.5rem;
    text-align: left;
    width: 360px;
  }
  .topsec-business .panelgr{
    gap: 1rem;
  }
  .topsec-business .panel {
    height: 120px;
    width: 90%;
  }
  .topsec-business .panelbg{
    display: none;
  }
}

/*****************************
topsec-news
*****************************/
.topsec-news .topnews{
  margin: 0 auto;
  max-width: 800px;
}
.topsec-news .ttlbox1{
  writing-mode: vertical-rl;
}
.topsec-news .ttlbox1 .ttl{
  letter-spacing: 8px;
}
.topsec-news .fbox{
  width: calc(95% - 10rem);
}
.topsec-news .morebtn1{
  margin-top: 2rem;
  text-align: right;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-news .ttlbox1{
    writing-mode: horizontal-tb;
  }
  .topsec-news .ttlbox1 .ttl{
    letter-spacing: 4px;
  }
  .topsec-news .fbox{
    width: 100%;
  }
}