@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 全体レイアウト */
.cnct-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 60px;
  height: 100vh;
  overflow: hidden;
}

.cnct-content {
  flex: 1;
  max-width: 45%;
  text-align: left;
  z-index: 2;
  margin-left: 12%; /* 文字をさらに中央寄りに */
}

.cnct-content h1 {
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 40px;
  margin-top: -10px; /* 文字を上に移動 */
}

.cnct-content p {
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 160px;
  margin-top: -10px; /* 文字を上に移動 */
}

.cnct-image {
  flex: 1;
  max-width: 28%; /* 画像サイズを調整 */
  height: auto;
  margin-right: 5%; /* 画像をさらに中央寄りに */
  z-index: 2;
}

.cnct-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ボタン全体の配置 */
.front-button-container {
  text-align: center;
  margin: 20px 0;
}

/* 新しいボタンクラス */
.front-button-alt {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  text-decoration: none;
  display: block;
  max-width: 500px;
  background: #0073e6; /* 初期状態: 青色 */
  margin: auto;
  padding: 20px 60px;
  font-family: "Noto Sans Japanese", sans-serif;
  font-weight: bold; /* 太文字 */
  text-align: center;
  line-height: 1.8;
  text-decoration: none;
  outline: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  color: #fff; /* デフォルト文字色: 白 */
}

.front-button-alt:hover {
  background: #3cb371; /* マウスオーバー時: 緑色 */
  color: #fff; /* 文字色を白で維持 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .cnct-section {
    flex-direction: column;
    text-align: center;
    height: auto;
    padding: 20px;
  }

  .cnct-content {
    max-width: 100%;
    margin-left: 0;
  }

  .cnct-image {
    display: none; /* スマホ時には非表示 */
  }
}

@media screen and (max-width: 768px) {
  .cnct-section::before {
    content: url('https://e-cnct.co.jp/demo/001/wp-content/uploads/2025/01/1.png');
    display: block;
    margin: 0 auto 20px;
    max-width: 70%;
  }
}







/* 見出しスタイル */
.front-h2 {
  font-size: 2rem;
  color: #2a9d8f; /* 青寄りの緑色 */
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

/* ボタンスタイル */
.front-button {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  text-decoration: none;
  display: block;
  max-width: 250px;
  background: #3cb371; /* 緑と青の中間色 */
  margin: auto;
  padding: 10px 30px;
  font-family: "Noto Sans Japanese", sans-serif;
  font-weight: bold; /* 太文字 */
  text-align: center;
  line-height: 1.8;
  text-decoration: none;
  outline: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  color: #fff; /* デフォルト時の文字色を白 */
}

.front-button:hover {
  background: #0073e6; /* マウスオーバー時の背景色: 明るめの青 */
  color: #fff; /* 文字色を白で維持 */
}

.front-button span {
  position: relative;
  z-index: 3;
}

.front-button.bgleft:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2); /* マウスオーバー時に軽い影をつける */
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1);
  transform: scale(0, 1);
  transform-origin: right top;
}

.front-button.bgleft:hover:before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* ボタン全体の配置 */
.front-button-container {
  text-align: center;
  margin: 20px 0;
}



.nav_container {
    display: flex; /* フレックスボックスで横並びに */
    align-items: center; /* 縦の中央揃え */
    gap: 1rem; /* 要素間の間隔 */
}

a.login_btn_01 {
    display: inline-block; /* 横並びに対応 */
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    font-size: 14px; /* 文字サイズを調整 */
    padding: 0.5rem 1rem; /* 余白を縮小 */
    font-weight: bold;
    border: 1px solid #27acd9; /* 枠線を細く */
    background: #3cb371; /* 背景色 */
    color: #fff; /* テキスト色 */
    transition: 0.3s; /* トランジションを短縮 */
    border-radius: 0.2rem; /* 少し角を丸く */
}

a.login_btn_01:hover {
    color: #27acd9; /* ホバー時の文字色を反転 */
    background: #fff; /* ホバー時の背景色を反転 */
}

a.nav_image_link {
    display: inline-block; /* 横並びに対応 */
    text-decoration: none; /* リンクの下線を消す */
    padding: 0; /* 余白をなくす */
    margin: 0; /* 他の要素とのスペースを調整 */
}

a.nav_image_link img.nav_image {
    display: block; /* 画像をブロック要素にすることで隙間をなくす */
    width: 50px; /* 画像の幅を指定（調整可能） */
    height: auto; /* アスペクト比を維持 */
    border-radius: 0.2rem; /* 必要に応じて角を丸める */
    transition: 0.3s; /* ホバー時のアニメーション */
}

a.nav_image_link:hover img.nav_image {
    opacity: 0.8; /* ホバー時に少し暗くする */
}

.slider img {
    width:100%;/*画像の横幅100%*/
    height:auto;
}
.slider .slick-slide {
    margin:0 5px;/*画像左右の余白*/
}






.box2 {
  width: 100%;
}

.box2 div {
  height: 80px;
  width: 80px;
  position: absolute;
  animation: animate linear infinite;
  animation-fill-mode: backwards; /* 遅延時に初期状態を保持 */
  background: rgba(192, 231, 251, 0.1);
  border: solid 3px rgba(192, 231, 251, 0.3);
  z-index: 999999;

  /* ランダムなアニメーション遅延と時間を設定 */
  animation-delay: calc(1s * var(--delay)); /* 遅延時間をランダムに設定 */
  animation-duration: calc(3s + 3s * var(--duration)); /* 持続時間をランダムに設定 */
}

/* アニメーションの動き */
@keyframes animate {
  0% {
    transform: scale(0) translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.3) translateY(-90px) rotate(360deg);
    opacity: 0;
  }
}

/* 各四角形の位置・ランダムな遅延時間設定 */
.box2 div:nth-child(1) {
  top: 20%;
  left: 20%;
  --delay: 0.5; /* 0.5秒遅延 */
  --duration: 0.5;
}
.box2 div:nth-child(2) {
  top: 26%;
  left: 89%;
  --delay: 1.0; /* 1.0秒遅延 */
  --duration: 0.7;
}
.box2 div:nth-child(3) {
  top: 80%;
  left: 90%;
  --delay: 1.5; /* 1.5秒遅延 */
  --duration: 0.4;
}
.box2 div:nth-child(4) {
  top: 95%;
  left: 75%;
  --delay: 2.0; /* 2.0秒遅延 */
  --duration: 0.9;
}
.box2 div:nth-child(5) {
  top: 10%;
  left: 10%;
  --delay: 2.5; /* 2.5秒遅延 */
  --duration: 0.3;
}
.box2 div:nth-child(6) {
  top: 70%;
  left: 60%;
  --delay: 3.0; /* 3.0秒遅延 */
  --duration: 0.8;
}
.box2 div:nth-child(7) {
  top: 50%;
  left: 33%;
  --delay: 3.5; /* 3.5秒遅延 */
  --duration: 0.6;
}
.box2 div:nth-child(8) {
  top: 5%;
  left: 60%;
  --delay: 4.0; /* 4.0秒遅延 */
  --duration: 0.7;
}
.box2 div:nth-child(9) {
  top: 85%;
  left: 50%;
  --delay: 4.5; /* 4.5秒遅延 */
  --duration: 0.5;
}
.box2 div:nth-child(10) {
  top: 45%;
  left: 7%;
  --delay: 5.0; /* 5.0秒遅延 */
  --duration: 0.4;
}



















/* 全体の配置 */
.kanta-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin-left: auto;
  padding: 10px 0;
}

/* 電話案内ブロック */
.phone-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5em;
  gap: 0.3em;
  white-space: nowrap; /* レスポンシブでも改行を防止 */
}

.contact-box02 {
  font-size: 25px; /* サイズを1.4倍程度に拡大 */
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5em; /* アイコンとテキストの余白 */
}

.contact-box03 {
  font-size: 12px; /* 現在より小さめ */
}

/* 資料請求・問い合わせブロック */
.contact-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 2px solid #ffffff; /* 電話案内ブロックと同じ外枠 */
  border-radius: 8px;
  padding: 15px 20px; /* サイズを調整 */
  transition: all 0.3s ease-in-out;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  font-size: 16px; /* フォントサイズを適切に調整 */
}

.contact-banner a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.contact-banner i {
  font-size: 1.5em; /* アイコンサイズを調整 */
}

/* マウスオーバー効果 */
.contact-banner:hover {
  background-color: #ffffff;
  color: #276747;
  border-color: #276747;
}

.contact-banner:hover i {
  color: #276747;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .kanta-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
  }

  .contact-banner {
    width: 100%;
    text-align: center;
  }
}