* {
   box-sizing: border-box;
}
.navbar-collapse {
   background-color: white;
}
.zen-maru-gothic-light {
   font-family: "Zen Maru Gothic", serif;
   font-weight: 300;
   font-style: normal;
}

.zen-maru-gothic-regular {
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
}

.zen-maru-gothic-medium {
   font-family: "Zen Maru Gothic", serif;
   font-weight: 500;
   font-style: normal;
}

.zen-maru-gothic-bold {
   font-family: "Zen Maru Gothic", serif;
   font-weight: 700;
   font-style: normal;
}

.zen-maru-gothic-black {
   font-family: "Zen Maru Gothic", serif;
   font-weight: 900;
   font-style: normal;
}

html,
body {
   margin: 0;
   padding: 0;
   font-family: "Noto Serif JP", serif;
   color: #1a3d70;
   overflow-x: hidden;
   overflow-y: auto; /* 縦方向にスクロール */
}

.navbar {
   height: 80px; /* ナビバーの高さを指定 */
}
.navbar-brand img {
   object-fit: cover;
   height: 4rem; /* ロゴの高さを調整 */
}

.navbar-nav .nav-link {
   line-height: 2.5rem; /* ナビゲーションリンクの行の高さを調整 */
}
.vh-50 {
   height: 50vh;
}
.vh-75 {
   height: 75vh;
}
.btn-origin-blue {
   border: 0.3rem solid #1a3d70;
}
.btn-origin-blue:hover {
   border: 0.3rem solid #738699;
   color: #1a3d70;
}
.btn-origin-blue-submit {
   background-color: #1a3d70;
   color: white;
}
.btn-origin-blue-submit:hover {
   border: 2px solid #1a3d70;
   background-color: #bfc6ce;
   color: #1a3d70;
}
.btn-origin-blue-submit:focus,
.btn-origin-blue-submit:focus-visible {
   background-color: #1a3d70; /* デフォルトの色に戻す */
   color: white;
   outline: none; /* 不要ならアウトラインを消す */
}
.btn-origin-blue-submit:active {
   background-color: #1a3d70; /* 押したときに元の色に戻す */
   color: white;
}
.no-wrap-article > span {
   white-space: nowrap;
}
.no-wrap-article > strong > span {
   white-space: nowrap;
}
.no-wrap-article > div > span {
   white-space: nowrap;
}

.sen-kstyle {
   font-family: "Sen", serif;
   font-optical-sizing: auto;
   font-weight: 800;
   font-style: normal;
}
.w-35 {
   width: 35%;
}
.w-95 {
   width: 95%;
}
.fade-in {
   opacity: 0;
   transform: translateY(50px);
   transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.show {
   opacity: 1;
   transform: translateY(0);
}
.w-underLG-50 {
   width: 75%;
}
.overflow-hidden {
   overflow: hidden;
}
/* homeのレイアウト */
#home0 {
   position: absolute;
   top: 70%;
   left: 25%;
   transform: translate(-50%, -50%);
   width: 45%;
   font-size: 20rem;
   color: #1a3d70;
   text-shadow: -2px -2px 0 #bfc6ce, 2px -2px 0 #bfc6ce, -2px 2px 0 #bfc6ce, 2px 2px 0 #bfc6ce;
}

#home1 {
   position: relative;
   width: 100vw;
   height: 70vh;
   overflow: hidden;
}
/* 背景画像（透明度 0.3） */
#home1::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url("/images/logo.jpg") center/cover no-repeat;
   opacity: 0.3;
   z-index: -2; /* 背景を最背面に */
}
/* 斜線（透明度 1） */
#home1::after {
   content: "";
   position: absolute;
   width: 200%;
   height: 20rem; /* 線の太さ */
   background: #738699; /* 線の色 */
   top: 0%;
   right: 0;
   transform-origin: top right;
   transform: rotate(-30deg);
   opacity: 1; /* 透明度1（完全に見える） */
   z-index: -1; /* 背景画像の上、テキストの下 */
}
.content {
   position: relative;
   z-index: 1; /* 斜線の上に配置 */
   color: black;
   text-align: center;
}

#home2 {
   /* ::before の基準位置 */
   top: -50%;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
}
#home2::before {
   content: "";
   position: absolute;
   top: -10%;
   left: 0;
   width: 200%;
   height: 200%;
   background: url("/images/gradationPhoto.jpg") center/cover no-repeat;
   opacity: 0.3;
   z-index: 0; /* 背景を最背面に */
}
#home2::after {
   content: "";
   position: absolute;
   top: -10%;
   width: 100%;
   height: 100%;
   background-color: white;
   opacity: 1; /* 透明度1（完全に見える） */
   z-index: -1; /* 背景画像の上、テキストの下 */
}
/* homeのレイアウト */
/* companyのレイアウト */
#company0 {
   position: absolute;
   top: 25%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#company1 {
   position: absolute;
   top: 75%;
   left: 50%;
}

.company2 {
   position: absolute;
   top: 12.5vh;
   left: 50%;
   transform: translate(-50%, -50%);
}
/* 背景画像（透明度 0.3） */
#company3::before {
   content: "";
   position: absolute;
   top: 55%;
   left: 50%;
   width: 70%;
   height: 70%;
   background: url("/images/logo.jpg") center/cover no-repeat;
   opacity: 0.1;
   z-index: -1; /* 背景を最背面に */
   transform: translate(-50%, -50%);
}

/* companyのレイアウト */
/* businessのレイアウト */
#business-h1 {
   position: absolute;
   top: 25%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#business0 {
   position: relative;
   top: 100%;
   left: 50%;
   height: auto;
   transform: translate(-50%, -50%);
}
.business {
   position: relative; /* ::before の基準位置 */
}
.business::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1; /* 背景を最背面に */
}
#business1::before {
   background: url("/images/smoothwave.jpg") center/cover no-repeat;
   opacity: 0.5;
}
#business2::before {
   background: url("/images/logo.jpg") center/cover no-repeat;
   opacity: 0.5;
   z-index: -4;
}
#business2::after {
   content: "";
   position: absolute;
   width: 200%;
   height: 20rem; /* 線の太さ */
   background: #1a3d70; /* 線の色 */
   top: 0%;
   right: 0%;
   transform-origin: top right;
   transform: rotate(-30deg);
   opacity: 1; /* 透明度1（完全に見える） */
   z-index: -3; /* 背景画像の上、テキストの下 */
}
#business3::before {
   background: url("/images/analyze.jpg") center/cover no-repeat;
   opacity: 0.5;
   z-index: -1;
}
#business3::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: white;
   opacity: 1; /* 透明度1（完全に見える） */
   z-index: -2; /* 背景画像の上、テキストの下 */
}
#business4::before {
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   background: url("/images/logo.jpg") center/cover no-repeat;
   opacity: 0.1;
   z-index: -4;
   transform: translate(-50%, -50%);
}
#business4::after {
   content: "";
   position: absolute;
   width: 40rem;
   height: 18rem; /* 線の太さ */
   background: #1a3d70; /* 線の色 */
   top: 50rem;
   left: -25rem;
   border-radius: 50%;
   transform-origin: top left;
   transform: rotate(-40deg);
   opacity: 1; /* 透明度1（完全に見える） */
   z-index: -1; /* 背景画像の上、テキストの下 */
}
#business5::before {
   content: "";
   position: absolute;
   width: 40rem;
   height: 18rem; /* 線の太さ */
   background: #1a3d70; /* 線の色 */
   top: 50rem;
   right: -22rem;
   border-radius: 50%;
   transform-origin: top left;
   transform: rotate(-40deg);
   opacity: 1; /* 透明度1（完全に見える） */
   z-index: 0; /* 背景画像の上、テキストの下 */
}
/* businessのレイアウト */
/* contactのレイアウト */
#contact1 {
   position: absolute;
   top: 35%;
   left: 50%;
   transform: translate(-50%, -50%);
}

@media (min-width: 2000px) {
   .representative-greeting {
      height: auto;
   }
   .representative-greeting-img {
      height: 25vh;
   }
   #business-top-img {
      height: 37.5vh;
   }
}
