@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
*/
/* ここから記述 */
/* ------------------------------------- */

/* トップページヘッダレイアウトの補正 */
/* PC以上でヘッダーと追従ヘッダーを全幅にする */
@media screen and (min-width: 960px) {
  .l-header__inner.l-container,
  .l-fixHeader__inner.l-container {
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* contactform7のサイズ調整　*/
/* ▼ 共通入力欄のスタイル（会社名、メールアドレス、電話番号など） */
.cf7-input {
  width: 100%;              /* 幅を最大に */
  max-width: 500px;         /* 最大幅を制限して見やすく */
  padding: 10px;            /* 内側の余白 */
  font-size: 16px;          /* 文字サイズ */
}

/* ▼ テキストエリア（お問い合わせ内容）のスタイル */
.cf7-textarea {
  width: 100%;
  height: 150px;            /* 高さを大きめに */
  padding: 10px;
  font-size: 16px;
}

/* ▼ 姓・名を横並びにするためのラッパー */
.cf7-name-row {
  display: flex;            /* 横並びにする */
  gap: 10px;                /* 間隔をあける */
  max-width: 500px;
}

/* ▼ 横並び内の各テキストボックスのスタイル */
.cf7-name-row input {
  flex: 1;                  /* 均等に広がる */
}


/* animation */
/* 上にポップ */
.pop-anim {
  transition: transform 0.3s ease;
}
.pop-anim:hover {
  transform: translateY(-8px);
}


/* ゆらゆら */
.swing-anim:hover {
  animation: swing 0.6s ease;
}
@keyframes swing {
  20% { transform: rotate(5deg); }
  40% { transform: rotate(-5deg); }
  60% { transform: rotate(3deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}


/* ダンブル（バウンドする感じ） */
.bounce-anim:hover {
  animation: bounce 0.6s ease;
}
@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-10px); }
  50%  { transform: translateY(0); }
  70%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}



/* ------------------------------------- */

/* CSSアニメーション　anim-box.kiran　→ anim-box kiran　 */
.anim-box.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.anim-box.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.anim-box.kiran:hover::before {
  animation: kiran 0.5s linear;
}
 
@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}