@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
*/


/*ブロックがフェードインする*/

/**すぐにでる**/
.fade-in-instant {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/**スクロールしたら出る**/
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/*背景がグラデーション*/
body {
  background-color: #b2f0e9; /* フォールバック */
  background: linear-gradient(-45deg,
    #b2f0e9, #2ec4b6, #80e0d5, #b2f0e9
  );
  background-size: 400% 400%;
  animation: gradientFlow 10s ease infinite;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*スクロール背景*/
.scroll-horizontal {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.scroll-horizontal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: url('https://agency.enagepura.jp/wp-content/uploads/2025/05/home_back_04.png');
  background-repeat: repeat;
  background-size: auto 1030px;
  animation: scrollX 20s linear infinite;
  z-index: 0;
}

@keyframes scrollX {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1000px 0;
  }
}

/*マウスホバー演出*/
/** ふわっと色が変わる **/
a {
  display: inline-block; /* transformを適用するために必要 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

a:hover {
  transform: scale(1.1); /* 拡大率：1.1倍 */
  opacity: 0.9; /* ふわっと感を出すために少し透明に */
}

a:hover {
  color: #e6385f; /* ホバー時の色 */
}


/* リンクに下線を引くホバーアクション */
#content p a:-webkit-any-link{
  position: relative;
  text-decoration: none;
}

#content p a:-webkit-any-link::after{
  position: absolute;
  bottom: -2px;
  left: 0;
  content: "";
  width: 100%;
  height: 1.5px; /*線の太さ*/
  background: #fdfdfd; /*線の色*/
  transition: transform .3s; /*速度*/
  transform-origin: right top; 
  transform: scale(0,1); 
}
#content p a:hover:after {
  transform-origin: left;
  transform: scale(1,1); 
}

/* 問い合わせフォームの行間 */
.form-group {
  margin-bottom: 24px; /* 行間の調整。必要に応じて増減可 */
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px; /* ラベルと入力欄の間隔 */
}

/* 問い合わせフォームの送信ボタンカスタム */
.wpcf7-submit {
  background-color: #0073aa;
  color: #fff;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold; /* ← ここで太字にする */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.wpcf7-submit:hover {
  background-color: #e6385f;
  animation: shake 0.4s;
}