/*
  リセット & 基本設定
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  font-family: 'LINE Seed JP', sans-serif;
  /* 横方向のはみ出しを無視してスクロールバーを出さない */
  overflow-x: hidden;
}
html {
  scroll-behavior: smooth; /* スムーススクロール */
}
.no-scroll {
  overflow: hidden;
  height: 100%; /* Ensures the body doesn't expand */
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  transition: opacity 1s;
  background-color: #f9f9f9;
}
body:not(.hero-ready) header {
  opacity: 0;
  pointer-events: none;
}

/*
  ヘッダー設定 & ナビゲーション
*/
header {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 300;
  display: flex;
  align-items: center;
}
@media all and (max-width: 767px) {
  header {
    top: 20px;
  }
}
@media all and (max-height: 480px) {
  header {
    top: 20px;
  }
}
header .logo {
  width: 200px;
  height: 50px;
  background-image: url(../images/logo_アジロテック.svg);
  background-size: 200px 50px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 1s;
}
.menu-on header .logo {
  background-image: url(../images/logo_アジロテック.svg) !important;
  opacity: 1 !important;
}
body[scroll-section="white"] header .logo {
  background-image: url(../images/logo_アジロテック.svg);
  opacity: 1;
}
body[scroll-section="gray"] header .logo {
  background-image: url(../images/logo_アジロテック_777.svg);
  opacity: 1;
}
body[scroll-section="between"]:not(.menu-on) header .logo {
  opacity: 0;
  pointer-events: none;
}
header .logo:focus-visible {
  outline: none;
}
header .header-container {
  width: 100%;
  padding: 0 40px;
  display: flex;
  justify-content: space-between; /* 左寄せロゴ、右寄せメニュー */
  align-items: center;
}
.menu {
  position: fixed;
  bottom: 50px;
  right: 0;
  width: 80px;
  height: 50px;
  z-index: 300;
  align-items: center;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: #ffffff99;
  background-image: url(../images/メニュー.svg), url(../images/hamburger.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: left 15px bottom 6px, left 21px top 4px;
  background-size: 44px 11px, 30px 30px;
}
.menu.on {
  background-image: url(../images/close.svg);
  background-repeat: no-repeat;
  background-position: left 21px center;
  background-size: 30px 30px;
}
body:not(.hero-ready) .menu {
  display: none;
}
.disabled {
  pointer-events: none;
}
@media all and (max-width: 767px) {
  nav {
    display: none;
  }
}
@media all and (min-width: 768px) {
  .menu {
    display: none;
  }
}
.nav-list {
  display: flex;
  list-style: none;
}
.nav-list li {
  margin-left: 30px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 80px 24px;
  color: #fff;
  font-weight: bold;
  transition: color 1s;
}
body[scroll-section="white"] .nav-list li {
  color: #fff;
}
body[scroll-section="gray"] .nav-list li {
  color: #777;
}
body[scroll-section="between"] .nav-list li {
  color: transparent;
}
.nav-list li:hover {
  filter: drop-shadow(0 0 3px #7788aa);
  /*color: #eee;*/
}
.nav-list a {
  text-decoration: none;
}



/*
  共通セクション設定
*/
@media all and (min-width: 768px) {
  .lte767 {
    display: none;
  }
}
/* 初期状態：透明で少し下に下げておく */
.fade-in-target {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s; /* 変化をなめらかに */
}
/* 画面内に入った時に付与するクラス */
.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.externalLink {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  background-image: url(../images/box-arrow-up-right.svg);
  background-repeat: no-repeat;
  background-size: 14px;
  vertical-align: middle;
}
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}



/*
  スマホ画面用のメニュー（ナビゲーション）
*/
#menu {
  position: fixed;
  left: 0;
  top: 110vh;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  /* topの変化を0.5秒でスムーズにアニメーションさせる */
  transition: top 0.5s ease-out; 
}
#menu > div.contents {
  margin: 15px;
  padding: 70px 0 20vh 0;
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
  border-radius: 30px;
  background: linear-gradient(to bottom, #0acaff, #a9eeff);
  box-shadow: 0 0 5px #999;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vh;
}
#menu > div.contents:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(to bottom, #0acaff, #a9eeff);
  /* メニュー全体を少しザラつかせると紙のような質感に */
  filter: url(#noiseFilter) opacity(0.15);
  pointer-events: none;
}
.menu-on #menu {
  top: 0;
}
#menu > div.contents .row {
  width: 100%;
  height: 68px;
  position: relative;
}
#menu > div.contents .row .title {
  font-size: clamp(32px, 5vh, 40px);
  font-weight: bold;
  color: #fff;
  text-align: center;
}
#menu > div.contents .row .description {
  text-align: center;
  font-size: 0.9em;
  color: #666;
}
#menu > div.bg {
  position: absolute;
  left: 15px;
  top: 15px;
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
  border-radius: 30px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 201;
  pointer-events: none;
}
#contact > div.bg {
  position: absolute;
  left: 15px;
  top: 15px;
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
  border-radius: 30px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 201;
  pointer-events: none;
}
#menu > div.bg.wave {
  background-image: url(../images/menuBg.svg);
}
#menu > div.bg.jump {
  background-image: url(../images/aji-jump.png);
}
#menu > div.bg.splash {
  background-image: url(../images/aji-splash.png);
}



/*
  Landing Area (Hero)
*/
section.hero {
  position: relative;
  margin: 20px;
  border-radius: 45px;
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  overflow: hidden;
}
@media all and (max-width: 767px) {
  section.hero {
    margin: 15px;
    border-radius: 30px;
    width: calc(100vw - 30px);
    height: calc(100vh - 30px);
  }
}
section.hero > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
section.hero .topfloat {
  color: #fff;
  letter-spacing: -0.6px;
  font-weight: bold;
  position: absolute;
  top: 80px;
  left: 20px;
  width: 100%;
  height: 40px;
  padding-top: 10px;
  z-index: 2;
  white-space: nowrap;
  animation: hide-top-float linear both;
  animation-timeline: scroll(root);
}
@keyframes hide-top-float {
  0% { opacity: 1; }
  1% { opacity: 0; }
}
body:not(.hero-ready) section.hero .topfloat,
body:not(.hero-ready) section.hero .details {
  display: none;
}
.details {
  position: absolute;
  top: unset !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 50px !important;
  text-align: center !important;
  font-size: 0.9em;
  color: #fff;
  background-image: url(../images/caret-down-fill.svg) !important;
  background-repeat: no-repeat !important;
  background-size: 36px 36px !important;
  background-position: center bottom !important;
  opacity: 0.9;
}
.placeholderLogo {
  pointer-events: none;
}
@media all and (max-width: 767px) {
  section.hero .topfloat {
    left: 25px;
  }
}
@media all and (min-width: 768px) {
  .details {
    display: none;
  }
}

.lazy-bg {
  /* 背景の設定 */
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  
  /* 切り替わりをスムーズにする */
  transition: background-image 1s ease-in-out, opacity 1s;
  opacity: 0.5; /* ロード中は薄くしておく */
}
/* 全て揃った時の演出 */
.hero-ready .lazy-bg {
  filter: none;
  opacity: 1;
}
body:not(.hero-ready) #hero:after {
  content: "アジロテック";
  position: absolute;
  left: calc(100% / 2 - 100px);
  top: calc(100% / 2 - 100px);
  width: 200px;
  height: 200px;
  background-image: url(../images/logo_white.svg);
  background-repeat: no-repeat;
  background-size: 130px 130px;
  background-position: center top;
  font-size: 1em;
  color: white;
  text-align: center;
  padding-top: 130px;
}
body:not(.hero-ready) #hero:before {
  content: "読み込み中";
  position: absolute;
  left: calc(100% / 2 - 50px);
  top: 60px;
  width: 100px;
  height: 25px;
  background-image: url(../images/spinnerWhite.svg);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center top;
  font-size: 0.9em;
  color: white;
  text-align: center;
  padding-top: 35px;
  z-index: 1;
}

.car1 {
  display: inline-block;
  white-space: nowrap;
  /* 2つのアニメーションを指定: 最初の一回用 + ループ用 */
  /* 最初(start)は2秒、その後(loop)は4秒かけて無限に繰り返す */
  animation: 
    start-to-right 24s linear forwards, 
    loop-right-to-left 24s linear infinite 24s; 
}
.car2 {
  display: inline-block;
  white-space: nowrap;
  /* 2つのアニメーションを指定: 最初の一回用 + ループ用 */
  /* 最初(start)は2秒、その後(loop)は4秒かけて無限に繰り返す */
  animation: 
    start-to-right2 24s linear forwards, 
    loop-right-to-left2 24s linear infinite 24s; 
}

/* 1. 初期位置から右端へ消える（最初の一回だけ） */
@keyframes start-to-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(100vw); }
}
/* 2. 左端（画面外）から現れて右端へ消える（無限ループ） */
@keyframes loop-right-to-left {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100vw); }
}
/* 1. 初期位置から右端へ消える（最初の一回だけ） */
@keyframes start-to-right2 {
  0% { transform: translateX(-40vw); }
  100% { transform: translateX(60vw); }
}
/* 2. 左端（画面外）から現れて右端へ消える（無限ループ） */
@keyframes loop-right-to-left2 {
  0% { transform: translateX(-140vw); }
  100% { transform: translateX(60vw); }
}

.car3, .car4 {
  display: inline-block;
  white-space: nowrap;
}
.car3 {
  /* 最初(start)は左へ、その後(loop)は右から現れて左へ */
  animation: 
    start-to-left3 22s linear forwards, 
    loop-left-to-right3 22s linear infinite 22s; 
}
.car4 {
  /* 最初(start)は左へ、その後(loop)は右から現れて左へ */
  animation: 
    start-to-left4 22s linear forwards, 
    loop-left-to-right4 22s linear infinite 22s;
}
/* 1. 初期位置から左端（画面外）へ消える */
@keyframes start-to-left3 {
  0% { transform: translateX(-35vw); }
  100% { transform: translateX(-135vw); }
}
/* 2. 右端（画面外）から現れて左端へ消える（無限ループ） */
@keyframes loop-left-to-right3 {
  0% { transform: translateX(65vw); }
  100% { transform: translateX(-135vw); }
}
/* 1. 初期位置から左端（画面外）へ消える */
@keyframes start-to-left4 {
  0% { transform: translateX(40vw); }
  100% { transform: translateX(-60vw); }
}
/* 2. 右端（画面外）から現れて左端へ消える（無限ループ） */
@keyframes loop-left-to-right4 {
  0% { transform: translateX(140vw); }
  100% { transform: translateX(-60%); }
}

/* アジのアニメーション */
.aji {
  opacity: 0;
  animation: aji-animation 10s infinite;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 飛び出し画像 */
.jump {
  animation-name: jump-fade;
}
/* 着水（尾鰭）画像 */
.splash {
  animation-name: splash-fade;
}
@keyframes jump-fade {
  0%   { opacity: 0; }
  1%   { opacity: 0.8; } /* 開始直後に表示 */
  7%  { opacity: 0.8; } /* 1秒間保持 (10秒の10%) */
  8%  { opacity: 0; } /* 消える */
  100% { opacity: 0; }
}
@keyframes splash-fade {
  0%   { opacity: 0; }
  7.5%  { opacity: 0; } /* 1秒経過まで隠す */
  8.5%  { opacity: 0.8; } /* 表示開始 */
  14%  { opacity: 0.8; } /* 0.5秒弱保持 (10秒の約5%) */
  15%  { opacity: 0; } /* 消える */
  100% { opacity: 0; }
}



/*
  会社紹介
*/
#about.section {
  padding-top: 100px;
  padding-bottom: 60px;
}
#about.section .container {
  flex: auto;
  position: relative;
  padding: 30px 20px 0 20px;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
}
#about.section .container > div.background {
  width: 100%;
  height: 240px;
  border-radius: 30px;
  box-shadow: 0 0 3px #e0e0e0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 0 300px 0 30px;
  color: #000;
  background-image: url(../images/map.png);
  background-repeat: no-repeat;
  background-size: 240px 240px;
  background-position: right 30px center;
}
#about.section .container .concept {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
#about.section .container .concept > div {
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 0 3px #e0e0e0;
  background-color: #fff;
}
@media all and (max-width: 767px) {
  #about.section .container > div.background {
    padding: 20px 20px 240px 20px;
    height: unset;
    background-position: center bottom;
  }
  #about.section .container .concept {
    flex-direction: column;
    align-items: center;
  }
  #about.section .container .concept > div {
    padding: 20px;
  }
}
#about.section .container > div .title {
  padding-right: 5px;
  font-weight: bold;
  font-size: 1.1em;
}
.section h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}
.sectionTitle {
  width: 100%;
  font-size: 32pt;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
#about .sectionTitle, #apps .sectionTitle {
  color: #333;
  padding-top: 10px;
}
.sectionDescription {
  margin: 0 auto;
  padding: 10px 20px 0 20px;
  width: 100%;
  max-width: 900px;
  font-size: 12pt;
  color: #f3f3f3;
  text-align: center;
}
#apps .sectionDescription {
  color: #555;
}
.gray-bg {
  background-color: #fafafa;
}
#divSpinner {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #00000011;
  background-image: url(../images/spinnerGray.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  z-index: 500;
}
#divSpinner:not(.on) {
  display: none;
}



/*
  サービス
*/
#service.section .frame {
  width: calc(100% - 40px);
  margin: 20px;
  /*background: linear-gradient(to bottom, #00aaf1, #2fc2f2);*/
  background: linear-gradient(to bottom, #00aaf1, #0acaff);
  /*background: linear-gradient(to bottom, #0acaff, #a9eeff);*/
  border-radius: 40px;
}
#service.section .sectionTitle {
  padding-top: 85px;
}
#service.section .container {
  position: relative;
  padding: 20px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  background: none !important;
}
#service.section .container > div {
  max-width: 900px;
  padding: 30px 30px 30px 120px;
  border-radius: 30px;
  box-shadow: 0 0 3px #e0e0e0;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: left 20px center;
  background-size: 80px;
}
#service.section .container > div.apps {
  background-image: url(../images/serviceApps.png);
}
#service.section .container > div.web {
  background-image: url(../images/serviceWeb.png);
}
#service.section .container > div.cloud {
  background-image: url(../images/serviceCloud.png);
}
#service.section .container > div.ai {
  background-image: url(../images/serviceAi.png);
}
#service.section .container > div.other {
  background-image: url(../images/serviceOther.png);
}
#service.section .container > div .title {
  padding-right: 5px;
  font-weight: bold;
  font-size: 1.1em;
  color: #000;
}
@media all and (max-width: 767px) {
  #service.section .container > div {
    padding: 120px 15px 15px 15px;
    background-position: center top 20px;
  }
}



/*
  アプリ
*/
#apps.section {
  padding-top: 100px;
}
#apps.section .container {
  flex: auto;
  position: relative;
  padding: 30px 20px 20px 20px;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
}
#apps.section .container > div {
  width: 100%;
  height: 360px;
  border-radius: 30px;
  box-shadow: 0 0 3px #e0e0e0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #000;

}
#apps.section .container > div:first-child {
  padding: 0 360px 0 40px;
  background-image: url(../images/DaysToApp.png);
  background-repeat: no-repeat;
  background-size: 270px 502px;
  background-position: right 50px top 5px;
}
#apps.section .container > div:last-child {
  padding: 0 40px 0 360px;
  background-image: url(../images/UnitTimeLog.png);
  background-repeat: no-repeat;
  background-size: 270px 502px;
  background-position: left 50px top 5px;
}
#apps.section .container > div .title {
  padding-right: 5px;
  font-weight: bold;
  font-size: 1.1em;
}
@media all and (max-width: 767px) {
  #apps.section .container > div {
    width: 100%;
    height: unset;
    padding: 30px 30px 400px 30px !important;
  }
  #apps.section .container > div:first-child,
  #apps.section .container > div:last-child {
    /*background-size: 270px 502px;*/
    background-position: center bottom -100px;
  }
}



/*
  お問合せフォーム
*/
#contact.section .container {
  flex: auto;
  position: relative;
  margin: 20px;
  padding-top: 100px;
  border-radius: 45px;
  width: calc(100vw - 40px);
  /*background: linear-gradient(to bottom, #00aaf1, #2fc2f2);*/
  background: linear-gradient(to bottom, #00aaf1, #0acaff);
}
.contact-form {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 150px 20px;
}
.form-group {
  margin-bottom: 30px;
  display: flex;
  align-items: flex-start;
}
.form-group.d {
  display: none;
}
.form-group label {
  flex: 0 0 200px;
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #fff;
  line-height: 43px;
}
@media all and (max-width: 767px) {
  .form-group {
    display: block;
  }
  .form-group label {
    line-height: unset;
  }
}
.required {
  color: red;
  font-size: 0.8em;
}
.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box; /* paddingを含めた幅計算 */
  font-size: 18px;
}
.form-group textarea {
  height: 160px;
}
::placeholder {
  opacity: 0.5;
}
.submit-btn {
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  max-width: 360px;
  font-size: 16px;
  background-color: #fff;
  border: solid thin #999;
  color: #333;
}
.submit-btn:hover {
  background-color: #f3f3f3;
}
.copyright {
  position: relative;
  font-size: 0.9rem;
  margin-top: 50px;
  padding-bottom: 10px;
  color: #fff;
  text-align: center;
  z-index: 2;
}
.contactBottom {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
}
#chkPrivacyPolicy {
  margin-right: 5px;
  transform: scale(1.5);
}
.submit-btn:not(.active) {
  opacity: 0.65;
  pointer-events: none;
}
@media all and (max-width: 767px) {
  .copyright {
    margin-top: 0px;
  }
  .contactBottom {
    flex-direction: column;
  }
}
#contact {
  position: relative;
}
#contact > div.bg {
  position: absolute;
  left: 20px;
  top: unset;
  bottom: 20px;
  width: calc(100vw - 40px);
  border-radius: 40px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 1;
  pointer-events: none;
}
#contact > div.bg.wave {
  background-image: url(../images/menuBg.svg);
}
#contact > div.bg.jump {
  background-image: url(../images/aji-jump.png);
}
#contact > div.bg.splash {
  background-image: url(../images/aji-splash.png);
}



/*
  Privacy Policy
*/
#privacypolicy {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  background-color: #00000000;
  /* topの変化を0.5秒でスムーズにアニメーションさせる */
  transition: background-color 0.5s ease-out;

  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#privacypolicy > div {
  margin-top: 110vh;
  padding: 30px;
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
  max-width: 750px;
  border-radius: 30px;
  box-shadow: 0 0 5px #666;
  background-color: #fff;
  transition: margin 0.5s ease-out;
  overflow: auto;
}
#privacypolicy.on {
  background-color: #00000099;
}
#privacypolicy:not(.on) {
  pointer-events: none;  
}
#privacypolicy.on > div {
  margin-top: 15px;
}
#privacypolicy h1 {
  text-align: center;
  font-size: 24px;
  padding-bottom: 30px;
}
#privacypolicy h2 {
  font-size: 20px;
  padding-top: 30px;
}
#privacypolicy .date {
  margin-top:50px;
  font-size: 0.9rem;
}
.buttonWrapper {
  margin-top: 30px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#privacypolicy button {
  padding: 10px 30px;
  border: solid thin #ccc;
  border-radius: 6px;
  background-color: white;
  box-shadow: 0 0 3px #eee;
  font-size: 1em;
}
#privacypolicy button:active {
  background-color: #f3f3f3;
}
.wrpPrivacyPolicy {
  color: #fff;
}
#btnPrivacyPolicy {
  cursor: pointer;
  text-decoration: underline;
}
@media all and (min-width: 768px) {
  #privacypolicy p {
    padding-left: 25px;
    padding-right: 25px;
  }
}