@charset "utf-8";

/* default PC */
/* animation */
.animation {
  opacity:0;
  position:relative;
  top:40px;
  transition:.4s;
}

.animation.active {
  opacity:1;
  top:0;
  transition:.4s;
}

/* main-view */
.main-view {
  aspect-ratio:16 / 9;
  height:100%;
}

.main-view video {
  height:100%;
  object-fit:cover;
  width:100%;
}

.main-view video.pc-none {
  display:none;
}

/* .main-view {
  background: url(../image/contents/home/main_view_bg.jpg) no-repeat center top / cover;
  display: flex;
  justify-content: center;
  height: 85svh;
  min-height: 500px;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.view-inner {
  align-items: flex-end;
  bottom: 120px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1750px;
  position: relative;
  width: 90%;
  margin: 0 auto;
} */

/* contents */
#contents .inner {
  max-width:1750px;
}

#contents .link-btn {
  font-size:20px;
  padding:25px 15px;
  width:450px;
}

#contents .link-btn::after {
  right:20px;
}

#contents .company-area {
  padding:100px 0;
  position:relative;
}

#contents .company-area::before,
#contents .env-area::before {
  background-color:#F1F0F4;
  bottom:0;
  content:"";
  display:block;
  height:60%;
  left:0;
  position:absolute;
  width:100%;
  z-index:-1;
}

#contents .env-area::before {
  height:35%;
}

#contents .company-area .look-color {
  color:#3A2885;
}

#contents .company-area .photo-box {
  align-items:center;
  display:grid;
  gap:80px;
  grid-template-columns:calc(100% - 700px) 620px;
  margin-bottom:80px;
}

#contents .company-area .photo-box .txt-box .sub-txt {
  align-items:center;
  display:flex;
  font-size:20px;
  letter-spacing:.1em;
  line-height:4.5em;
  margin-bottom:0;
  position:relative;
}

#contents .company-area .photo-box .txt-box .sub-txt::after {
  color:#F9F8FC;
  content:"COMPANY";
  display:block;
  font-family:"Roboto", sans-serif;
  font-size:121px;
  left:-5px;
  letter-spacing:.05em;
  position:absolute;
  top:0;
  z-index:-1;
}

#contents .company-area .photo-box .txt-box .txt {
  letter-spacing:.1em;
  line-height:2em;
}

#contents .company-area .photo-box .txt-box .sub-txt::before {
  background-color:#333;
  content:"";
  display:inline-block;
  height:1px;
  margin-right:10px;
  width:21px;
}

#contents .company-area .photo-box .txt-box .main-txt {
  font-size:45px;
  font-weight:bold;
  letter-spacing:.1em;
  line-height:1.6em;
  margin-bottom:30px;
}

#contents .company-area .photo-box .txt-box .main-txt .big {
  font-size:122%;
  letter-spacing:.1em;
}

#contents .company-area .photo-box .txt-box .main-txt .big:has(.look-color) {
  letter-spacing:.05em;
}

#contents .company-area .arrow-bnr .bnr-ttl .bg-ttl {
  background-color:#FFEA00;
  display:block;
  letter-spacing:.05em;
  line-height:1.6em;
  max-width:fit-content;
  padding:0 8px;
}

#contents .company-area .arrow-bnr .bnr-ttl .bg-ttl .big {
  font-size:145%;
}

#contents .company-area .arrow-bnr {
  margin-bottom:50px;
}

#contents .env-area {
  padding:90px 0 115px;
  position:relative;
}

#contents .bnr-box,
#contents .blog-area,
#contents .news-area,
#contents .bnr-area-02 {
  padding:90px 0;
}

#contents .bnr-box .inner {
  max-width:1600px;
}

#contents .bnr-box .link-bnr .bnr-ttl {
  bottom:0;
  color:#FFEA00;
  font-size:22px;
  height:fit-content;
  letter-spacing:.1em;
  margin:auto;
  position:absolute;
  right:60px;
  text-align:right;
  top:10px;
  z-index:1;
}

#contents .bnr-box .link-bnr .bnr-ttl .en-txt {
  color:#FFF;
  display:block;
  font-size:58px;
  letter-spacing:.05em;
  line-height:1em;
  margin-bottom:10px;
  text-shadow:0 0 28px #5652A5;
}

#contents .bnr-box .link-bnr::after {
  background-color:#5652A5;
  clip-path:polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  content:"";
  display:block;
  height:100%;
  position:absolute;
  right:0;
  top:0;
  width:33%;
}

#contents .blog-area,
#contents .news-area {
  background-color:#F1F0F4;
}

#contents .blog-list .blog-group .blog-link .photo {
  height:253px;
}

#contents .blog-list {
  margin-bottom:30px;
}

#contents .insta-area {
  padding:80px 0;
}

#contents .insta-area .link-btn {
  margin-top:30px;
}

#contents .news-area .item-box {
  align-items:center;
  display:grid;
  gap:30px;
  grid-template-columns:28% calc(72% - 30px);
}

#contents .news-area .item-box .link-btn {
  width:320px;
}

#contents .news-area .sp-btn {
  display:none;
}

#contents .bnr-area-02 .link-bnr {
  border:3px solid #5652A5;
  border-bottom:none;
  color:#FFF;
}

#contents .bnr-area-02 .bg-pattern::before {
  left:18px;
}

#contents .bnr-area-02 .link-bnr .bnr-ttl {
  background-color:#5652A5;
  font-size:22px;
  font-weight:500;
  letter-spacing:.1em;
  margin-bottom:0;
  padding:20px 10px;
  text-align:center;
}

#contents .bnr-area-02 .txt-4box {
  margin-right:50px;
  width:calc(100% / 4 - 38px);
}

#contents .bnr-area-02 .txt-4box.end {
  margin-right:0;
}

@media screen and (min-width: 1025px) {
  .mobile-view .main-view {
    margin-top:98px;
  }
}

@media screen and (min-width: 960px) {
  .mobile-view .main-view {
    margin-top:88px;
  }
}

@media screen and (max-width: 1600px) {
  #contents .blog-list .blog-group .blog-link .photo {
    height:calc(100vw / 6.5);
  }

  #contents .company-area .arrow-bnr .bnr-ttl .bg-ttl .big {
    font-size:135%;
  }
}

@media screen and (max-width: 1500px) {
  #contents .bnr-area-02 .bg-pattern::before {
    left:12px;
  }

  #contents .bnr-area-02 .txt-4box {
    margin-right:30px;
    width:calc(100% / 4 - 23px);
  }

  #contents .bnr-box .link-bnr .bnr-ttl {
    font-size:20px;
  }

  #contents .bnr-box .link-bnr .bnr-ttl .en-txt {
    font-size:51px;
    margin-bottom:5px;
  }

  #contents .link-btn {
    font-size:18px;
    padding:20px;
    width:400px;
  }

  #contents .company-area .photo-box {
    gap:60px;
    grid-template-columns:calc(100% - 600px) 540px;
  }

  #contents .company-area .photo-box .txt-box .main-txt {
    font-size:40px;
  }

  #contents .company-area .photo-box .txt-box .sub-txt::after {
    font-size:105px;
  }
}

@media screen and (max-width: 1400px) {
  #contents .bnr-area-02 .link-bnr .bnr-ttl {
    font-size:20px;
  }

  #contents .news-area .sp-btn {
    display:block;
    margin-top:50px;
  }

  #contents .news-area .item-box {
    gap:0;
    grid-template-columns:100%;
  }

  #contents .news-area .item-box .pc-btn {
    display:none;
  }

  #contents .company-area .arrow-bnr .bnr-ttl .bg-ttl {
    padding:0 5px;
  }

  #contents .company-area .photo-box {
    gap:50px;
    grid-template-columns:calc(100% - 490px) 440px;
  }

  #contents .company-area .photo-box .txt-box .main-txt {
    font-size:33px;
    margin-bottom:20px;
  }

  #contents .company-area .photo-box .txt-box .sub-txt::after {
    font-size:85px;
  }

  .main-view .main-txt {
    width:50%;
  }

  /* .main-view {
    height: calc(100vw / 2);
  } */
}

@media screen and (max-width: 1300px) {
  #contents .bnr-area-02 .link-bnr .bnr-ttl {
    font-size:19px;
  }

  #contents .bnr-box .link-bnr .bnr-ttl {
    font-size:18px;
    right:40px;
  }

  #contents .bnr-box .link-bnr .bnr-ttl .en-txt {
    font-size:40px;
  }

  #contents .company-area .arrow-bnr .bnr-ttl .bg-ttl .big {
    font-size:125%;
  }

  #contents .company-area .arrow-bnr .txt-4box {
    margin-right:15px;
    width:calc(100% / 4 - 12px);
  }

  #contents .company-area .arrow-bnr .txt-4box.end {
    margin-right:0;
  }
}

/* view-1140 notePC,Tablet */
@media screen and (max-width: 1140px) {
  #contents .bnr-box,
  #contents .blog-area,
  #contents .news-area,
  #contents .bnr-area-02 {
    padding:80px 0;
  }

  #contents .env-area {
    padding:80px 0 95px;
  }

  #contents .company-area {
    padding:80px 0;
  }

  #contents .bnr-area-02 .txt-4box {
    margin-right:20px;
    width:calc(100% / 4 - 16px);
  }

  #contents .bnr-area-02 .link-bnr .bnr-ttl {
    font-size:16px;
  }

  #contents .blog-list .blog-group {
    width:calc(100% / 4 - 10px);
  }

  #contents .blog-list .blog-group:nth-child(3) {
    margin-right:10px;
  }

  #contents .blog-list .blog-group:nth-child(4n) {
    margin-right:0;
  }

  #contents .bnr-box .link-bnr .bnr-ttl {
    font-size:16px;
    right:30px;
  }

  #contents .bnr-box .link-bnr .bnr-ttl .en-txt {
    font-size:30px;
  }

  #contents .link-btn {
    font-size:16px;
    padding:16px;
    width:320px;
  }

  #contents .company-area .arrow-bnr .txt-4box {
    margin-right:10px;
    width:calc(100% / 4 - 8px);
  }

  #contents .company-area .arrow-bnr .bnr-ttl .bg-ttl .big {
    font-size:120%;
  }

  #contents .company-area .photo-box {
    gap:50px;
    grid-template-columns:calc(100% - 410px) 360px;
    margin-bottom:60px;
  }

  #contents .company-area .photo-box .txt-box .sub-txt::after {
    font-size:67px;
  }

  #contents .company-area .photo-box .txt-box .sub-txt::before {
    width:16px;
  }

  #contents .company-area .photo-box .txt-box .sub-txt {
    font-size:17px;
  }

  #contents .company-area .photo-box .txt-box .main-txt {
    font-size:26px;
  }
}

/* view-959 Mobile,Tablet */
@media screen and (max-width: 959px) {
  #contents .env-area {
    padding:80px 0 65px;
  }

  #contents .company-area {
    padding:50px 0 80px;
  }

  #contents .bnr-area-02 .link-bnr .bnr-ttl {
    padding:15px;
  }

  #contents .bnr-area-02 .flex {
    gap:35px 0;
  }

  #contents .bnr-area-02 .txt-4box {
    width:calc(100% / 2 - 16px);
  }

  #contents .bnr-area-02 .txt-4box:nth-child(2n) {
    margin-right:0;
  }

  #contents .blog-list .blog-group .blog-link .photo {
    height:calc(100vw / 4);
  }

  #contents .blog-list .blog-group,
  #contents .blog-list .blog-group:nth-child(3) {
    margin-right:20px;
    width:calc(100% / 2 - 10px);
  }

  #contents .blog-list .blog-group:nth-child(2n) {
    margin-right:0;
  }

  #contents .bnr-box .flex {
    gap:35px 0;
    margin:0 auto;
    max-width:600px;
  }

  #contents .company-area .arrow-bnr {
    gap:20px 0;
    margin-bottom:35px;
  }

  #contents .company-area .arrow-bnr .txt-4box {
    margin-right:20px;
    width:calc(100% / 2 - 10px);
  }

  #contents .company-area .arrow-bnr .txt-4box:nth-child(2n) {
    margin-right:0;
  }

  #contents .company-area .photo-box {
    gap:30px;
    grid-template-columns:100%;
  }

  #contents .company-area .photo-box .txt-box {
    order:1;
  }

  #contents .company-area .photo-box .photo {
    order:2;
  }

  .main-view {
    margin-top:75px;
  }

  .main-view video.sp-none {
    display:block;
    width:100%;
  }
}

@media screen and (max-width: 640px) {
  .main-view .main-txt {
    max-width:365px;
    width:85%;
  }
}

/* view-559 Mobile */
@media screen and (max-width: 559px) {
  .main-view {
    margin-top:67px;
  }

  .main-view video.sp-none {
    display:none;
  }

  .main-view video.pc-none {
    display:block;
  }

  .main-view {
    aspect-ratio:1 / 1;
  }

  #contents .insta-area {
    padding:60px 0 65px;
  }

  #contents .bnr-box,
  #contents .blog-area,
  #contents .news-area,
  #contents .bnr-area-02 {
    padding:60px 0 65px;
  }

  #contents .env-area {
    padding:60px 0 45px;
  }

  #contents .company-area {
    padding:40px 0 65px;
  }

  #contents .bnr-area-02 .link-bnr .bnr-ttl {
    font-size:14px;
    padding:12px 5px;
  }

  #contents .bnr-area-02 .txt-4box {
    margin-right:16px;
    width:calc(100% / 2 - 8px);
  }

  #contents .ttl-bnr .link-bnr .bnr-ttl .en-txt {
    font-size:22px;
  }

  #contents .ttl-bnr .link-bnr .bnr-ttl {
    padding:15px 10px 13px;
  }

  #contents .bnr-area-02 .bg-pattern::before {
    left:10px;
  }

  #contents .link-btn,
  #contents .news-area .item-box .link-btn {
    font-size:15px;
    padding:13px;
    width:100%;
  }

  #contents .blog-list .blog-group,
  #contents .blog-list .blog-group:nth-child(3) {
    margin-right:12px;
    width:calc(100% / 2 - 6px);
  }

  #contents .bnr-box .link-bnr .bnr-ttl {
    font-size:14px;
  }

  #contents .bnr-box .link-bnr .bnr-ttl .en-txt {
    font-size:26px;
  }

  #contents .ttl-bnr .txt-3box {
    margin-right:0;
    width:100%;
  }

  #contents .company-area .arrow-bnr .txt-4box {
    margin:auto;
    max-width:410px;
    width:100%;
  }

  #contents .company-area .photo-box {
    gap:20px;
  }

  #contents .company-area .photo-box .txt-box .txt {
    letter-spacing:.08em;
    line-height:1.9em;
  }

  #contents .company-area .photo-box .txt-box .sub-txt::after {
    font-size:57px;
  }

  #contents .company-area .photo-box .txt-box .main-txt {
    font-size:22px;
  }

  .view-inner {
    bottom:40px;
  }

  .main-view {
    background-position:75% top;
    height:calc(100vw / .9);
    min-height:unset;
  }

  #contents .company-area .arrow-bnr .txt-4box:nth-child(2n) {
    margin-right:auto;
  }
}