@charset "UTF-8";
/* Scss Document */
/* Scss Document */
html {
  margin: 0;
  padding: 0;
  background: #fff;
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

header, footer, .sidebar, .top-business, .footer-contact, .footer-comon, .textwidget {
  display: none !important;
}

@keyframes text_show {
  0% {
    transform: scale(1.8) rotate(-5deg);
    opacity: 0;
  }
  25% {
    transform: scale(1.4) rotate(-10deg);
    opacity: 1;
  }
  50% {
    transform: scale(1) rotate(-15deg);
    opacity: 1;
  }
  90% {
    transform: scale(1) rotate(-15deg);
    opacity: 1;
  }
  95% {
    transform: scale(1.06) rotate(-15deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-15deg);
    opacity: 1;
  }
}
@keyframes broke {
  0% {
    transform: scale(1.8);
    opacity: 0;
  }
  25% {
    transform: scale(1.4);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  90% {
    transform: scale(1);
    opacity: 1;
  }
  95% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes hide {
  0% {
    display: block;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    display: none;
    opacity: 0;
    transform: scale(2.5);
  }
}
@keyframes logohide {
  0% {
    display: block;
  }
  100% {
    display: none;
  }
}
main {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.logo {
  display: block;
  position: absolute;
  padding: 30px;
  z-index: 50;
  animation: logohide 0.05s linear 1 10s forwards;
}

@media screen and (min-width: 768px) {
  .logo img {
    width: 74px;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .logo {
    top: 0;
    left: 0;
  }
  .logo img {
    width: 60px;
    height: auto;
  }
}

.logo2 {
  position: absolute;
  left: 0;
  top: 0;
  padding: 30px;
  z-index: 50;
}

@media screen and (min-width: 768px) {
  .logo2 img {
    width: 74px;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .logo2 img {
    width: 60px;
    height: auto;
  }
}

.first {
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  width: 100vw;
  height: 100vh;
  background: url("https://boienci.jp/wp-content/uploads/2025/05/main_bg1-scaled.jpg") center center/cover no-repeat;
  overflow: hidden;
  animation: hide 0.15s linear 1 3.1s forwards;
  z-index: 15;
  transform: scale(1);
  pointer-events: none;
}
.first .word {
  font-family: genkaimincho, sans-serif;
  font-style: normal;
  font-weight: 800;
  color: #fff;
  text-align: center;
  transform: scale(1.8) 　rotate(-5deg);
  transform-origin: 50% 50%;
  margin: auto;
  opacity: 0;
}
.first .text2,
.first .text3,
.first .text4,
.first .text5,
.first .text6,
.first .text7,
.first .text8,
.first .text9 {
  position: relative;
  display: inline-block;
}
.first .word1 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 10vw;
  animation: text_show 0.3s linear 1 0.5s forwards;
}
@media screen and (max-width: 767px) {
  .first .word1 {
    font-size: 12vw;
  }
}
.first .word1 br {
  display: none;
}
.first .word1::before {
  content: "";
  position: absolute;
  left: 0;
  top: -20px;
  width: 30vw;
  height: 2px;
  background: #fff;
}
.first .word1::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  width: 30vw;
  height: 2px;
  background: #fff;
}
.first .word2 {
  position: absolute;
  top: 8vh;
  left: -1vw;
  font-size: 4.5vw;
  animation: text_show 0.3s linear 1 0.7s forwards;
}
.first .word2 .text7 {
  top: 2vh;
  left: 7vw;
}
@media screen and (max-width: 767px) {
  .first .word2 {
    font-size: 10vw;
  }
}
.first .word3 {
  position: absolute;
  top: 13vh;
  right: 0;
  font-size: 4vw;
  color: rgba(255, 255, 255, 0.75);
  animation: text_show 0.3s linear 1 1.36s forwards;
}
.first .word3 .text4 {
  top: -3vh;
}
@media screen and (max-width: 767px) {
  .first .word3 {
    top: 28vh;
    right: 0;
    font-size: 8vw;
  }
}
.first .word4 {
  position: absolute;
  right: 0vw;
  top: 60vh;
  font-size: 4vw;
  animation: text_show 0.3s linear 1 0.78s forwards;
}
@media screen and (max-width: 767px) {
  .first .word4 {
    font-size: 6vw;
  }
}
.first .word5 {
  position: absolute;
  left: 3.5vw;
  right: auto;
  top: 74vh;
  font-size: 3.5vw;
  animation: text_show 0.3s linear 1 1.16s forwards;
}
@media screen and (max-width: 767px) {
  .first .word5 {
    font-size: 8.5vw;
  }
}
.first .word6 {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 4vw;
  color: rgba(255, 255, 255, 0.75);
  animation: text_show 0.3s linear 1 1.1s forwards;
}
.first .word6 .text7 {
  top: -6vh;
}
@media screen and (max-width: 767px) {
  .first .word6 {
    bottom: 2vh;
    right: 0;
    font-size: 8vw;
  }
}
.first .word7 {
  position: absolute;
  left: 10vw;
  top: 78vh;
  font-size: 6vw;
  color: rgba(255, 255, 255, 0.5);
  animation: text_show 0.3s linear 1 1.32s forwards;
}
.first .word7 .br5 {
  display: none;
}
.first .word7 .br7 {
  display: none;
}
.first .word7 .text9 {
  top: -4vh;
}
@media screen and (max-width: 767px) {
  .first .word7 {
    top: 84vh;
    left: 4vw;
    font-size: 9vw;
  }
}
.first .word8 {
  position: absolute;
  top: 19vh;
  left: 3vw;
  font-size: 5vw;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
  animation: text_show 0.3s linear 1 0.96s forwards;
}
.first .word8 .text2 {
  top: 7vh;
}
.first .word8 .text7 {
  top: 10vh;
}
.first .word8 .text9 {
  top: 10vh;
}
@media screen and (max-width: 767px) {
  .first .word8 {
    top: 18vh;
    left: 3vw;
    font-size: 7vw;
  }
}
.first .word9 {
  position: absolute;
  right: 0vw;
  top: 0;
  font-size: 4vw;
  color: rgba(255, 255, 255, 0.5);
  animation: text_show 0.3s linear 1 1.21s forwards;
}
.first .word9 .br5 {
  display: none;
}
@media screen and (max-width: 767px) {
  .first .word9 {
    top: 2vh;
    right: auto;
    left: 35vw;
    font-size: 6vw;
  }
}
.first .broke {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  text-align: center;
  overflow: hidden;
  mix-blend-mode: difference;
  background: url("https://boienci.jp/wp-content/uploads/2025/05/broke-scaled.jpg") center center/cover no-repeat;
  transform: scale(1.8);
  transform-origin: 50% 50%;
  opacity: 0;
  animation: broke 0.04s linear 1 2.85s forwards;
}
.first .large {
  display: inline-block;
  transform: scale(1.3);
}

.second {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("https://boienci.jp/wp-content/uploads/2025/05/main_bg1-scaled.jpg") center center/cover no-repeat;
  z-index: 10;
  color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  animation: hide 0.15s linear 1 7s forwards;
}
@media screen and (max-width: 767px) {
  .second {
    padding: 100px 5vw 0;
  }
}
.second p {
  line-height: 160%;
}
@media screen and (min-width: 768px) {
  .second {
    padding: 50px;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .second .read {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 767px) {
  .second .read {
    text-align: center;
  }
}
.second h2 {
  margin-top: 40px;
  line-height: 140%;
  font-weight: 500;
}
.second h2 .serif {
  font-weight: 800;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
}
@media screen and (min-width: 768px) {
  .second h2 {
    font-size: 4.8rem;
  }
  .second h2 .serif {
    font-size: 6.4rem;
  }
}
@media screen and (max-width: 767px) {
  .second h2 {
    margin-top: 30px;
    font-size: 2.2rem;
    text-align: center;
  }
  .second h2 .serif {
    font-size: 3.2rem;
  }
}
.second .sub_text {
  margin: 60px auto 0;
  max-width: 600px;
  background: url("https://boienci.jp/wp-content/uploads/2025/05/bar_left.png") left center/auto 100% no-repeat, url("https://boienci.jp/wp-content/uploads/2025/05/bar_right.png") right center/auto 100% no-repeat;
}
@media screen and (max-width: 767px) {
  .second .sub_text {
    margin: 30px auto 0;
    padding: 0 5vw;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 768px) {
  .second .sub_text p {
    font-size: 1.6rem;
    line-height: 220%;
  }
}
@media screen and (min-width: 768px) {
  .second .end_sub {
    margin: 60px auto 0;
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .second .end_sub {
    margin: 30px auto 0;
  }
}
.second .end_text {
  margin: 20px auto 0;
  font-weight: bold;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
}
@media screen and (min-width: 768px) {
  .second .end_text {
    font-size: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .second .end_text {
    margin: 30px auto 0;
    font-size: 3rem;
    text-align: center;
  }
}
.second .next_area {
  margin-top: 20px;
  text-align: center;
}
.second .next_area .next {
  position: relative;
  display: inline-block;
  font-size: 1.6rem;
  cursor: pointer;
}
.second .next_area .next::before, .second .next_area .next::after {
  content: "";
}
.second .next_area .next::before {
  display: inline-block;
  position: absolute;
  right: -2px;
  bottom: 12px;
  width: 15px;
  height: 2px;
  background: #fff;
  border-radius: 5px;
  transform: rotate(45deg);
}
.second .next_area .next::after {
  display: inline-block;
  position: relative;
  margin-left: 20px;
  width: 50px;
  height: 2px;
  background: #fff;
  border-radius: 5px;
}

.third {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .third {
    overflow-x: hidden;
  }
}
@media screen and (max-width: 767px) {
  .third {
    overflow-x: hidden;
    padding-bottom: 30px;
  }
}
.third .company {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 0;
  padding: 10vh 0 0;
  z-index: 4;
}
@media screen and (min-width: 768px) {
  .third .company img {
    width: 139px;
  }
}
@media screen and (max-width: 767px) {
  .third .company {
    width: 100%;
    margin: 0 5vw 0;
    padding: 5vh 0 0;
  }
  .third .company img {
    width: 30vw;
  }
}
.third h2 {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 40px auto 0;
  color: #004691;
  font-size: 7rem;
  font-weight: 600;
  text-indent: -0.5em;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .third h2 {
    margin: 30px auto 0;
    font-size: 3.5rem;
  }
}
.third p {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 30px auto 0;
  font-size: 2rem;
  line-height: 180%;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .third p {
    font-size: 1.5rem;
  }
}
.third a {
  color: #1679BA;
}
.third ul.foot_nav {
  width: 90%;
  max-width: 1000px;
  z-index: 6;
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 64%);
}
@media screen and (min-width: 768px) {
  .third ul.foot_nav {
    width: 100%;
    padding: 20px;
    margin: 80px 0 0;
    bottom: 0;
    display: -webkit-box;
    display: flex;
    box-sizing: border-box;
  }
}
@media screen and (min-width: 768px) and (min-height: 885px) {
  .third ul.foot_nav {
    position: absolute;
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .third ul.foot_nav {
    margin: 40px 5vw 0;
    padding: 0;
  }
}
.third ul.foot_nav li {
  margin: 0 30px 0 0;
  font-size: 1.4rem;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .third ul.foot_nav li {
    margin: 15px 0 0;
  }
}
.third ul.foot_nav a {
  color: #333;
}
.third .bubble {
  position: absolute;
  border-radius: 100%;
  bottom: 1px;
}

.head_nav {
  width: 100%;
  margin: 0 auto;
  padding: 20px 30px 30px 150px;
  display: -webkit-box;
  display: flex;
  gap: 0 30px;
  list-style: none;
}

@include mq(sp) {
  padding: 30px 0;
}

.head_nav li a {
  display: inline-block;
  color: #333;
	font-size: 14px;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
    overflow-wrap: break-word;
	font-weight: bold;
  text-decoration: none;
}
.head_nav li a:hover {
  color: #1679BA;
  text-decoration: none;
}
.head_nav li a.current {
  color: #004691;
  font-weight: bold;
}
.head_nav li.contact {
  margin-left: auto;
}
.head_nav li.contact a {
  position: relative;
  transition: all 0.5s ease;
	    padding: 10px 50px;
    color: #333;
    text-decoration: none;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 4px 3px 10px -6px rgba(0, 0, 0, 0.6);
	font-weight: normal;
}

.head_nav li.contact a::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 13px;
    color: #555;
    font-size: 12px;
}