@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* ------------------------------ */
/* リセットCSS */
/* ------------------------------ */
html {
  color: #000;
  background: #fff;
  scroll-behavior: auto;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}


.Page {
    padding-top: 80px!important;
}

/* === HEROセクション全体のスタイル === */
.hero-section-hero-hayabarai {
  position: relative; /* 背景の四角などを絶対配置するための基準に */
  overflow: hidden; /* はみ出した要素を非表示に */
  background-color: #fff; /* 背景色を白に設定 */
  padding: 80px 20px; /* 上下に余白を追加（左右は20px） */
  height: 600px; /* セクション全体の高さを固定 */
  max-width: 1200px; /* セクションの最大幅を制限 */
  margin: 0 auto; /* セクションを中央に配置 */
}

/* === HERO内の2カラムコンテナ === */
.hero-container-hero-hayabarai {
  max-width: 1000px; /* コンテンツの最大幅を設定 */
  height: 500px; /* コンテンツの高さを固定 */
  margin: 0 auto; /* 中央寄せ */
  display: flex; /* 横並びにするためのフレックスボックス */
  justify-content: space-between; /* 左右に要素を配置 */
  align-items: center; /* 縦方向の中央揃え */
  position: relative; /* 背景要素との重なり調整用 */
  z-index: 2; /* 背景より前面に表示 */
}

/* === 左カラム（テキスト） === */
.hero-left-hero-hayabarai {
  flex: 1; /* 残りのスペースをすべて使用 */
  z-index: 2; /* 背景より前面に表示 */
}
@media (max-width: 768px) {
  .hero-left-hero-hayabarai {
   text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-left-hero-hayabarai {
    text-align: center;
  }
}

/* === 右カラム（画像） === */
.hero-right-hero-hayabarai {
  flex: 0 0 400px; /* 幅を400pxに固定 */
  z-index: 2; /* 背景より前面に表示 */
}

/* === 右カラム内の画像スタイル === */
.hero-right-hero-hayabarai img {
  width: 400px; /* 幅を固定 */
  height: auto; /* 高さは自動で比率を保つ */
}

/* === メッセージ1（小さめの説明文） === */
.hero-msg1-hero-hayabarai {
  color: #333; /* 濃いグレーの文字色 */
  margin-bottom: 1em; /* 下に余白 */
  position: relative; /* 傍点風の装飾のために必要 */
  font-size: 1rem;
  line-height: 1.6;
}

/* === メッセージ1の強調部分（傍点風アンダーライン） === */
.hero-emphasis-hero-hayabarai ruby rt {
  font-size: 0.6em;
  letter-spacing: 0.3em;
  color: #999;
  display: block;
  text-align: center;
  margin-top: -0.4em;
}

/* PC用アンダーライン */
.hero-emphasis-hero-hayabarai {
  position: relative;
  display: inline-block;
}

.hero-emphasis-hero-hayabarai::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 100%;
  height: 0.75em;
  background: repeating-linear-gradient(
    45deg,
    #dddddd,
    #dddddd 4px,
    #ffffff 4px,
    #ffffff 8px
  );
  z-index: -1;
}

/* スマホ用アンダーライン */
.hero-emphasis-hero-hayabarai-sp {
  display: inline-block;
  background: repeating-linear-gradient(
    45deg,
    #dddddd,
    #dddddd 4px,
    #ffffff 4px,
    #ffffff 8px
  );
  background-size: auto 0.5em;
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 0.2em;
}

/* デフォルト：PC用表示、スマホ用非表示 */
.hero-desktop {
  display: inline;
}
.hero-mobile {
  display: none!important;
}


/* スマホ表示時：PC用非表示、スマホ用表示 */
@media (max-width: 981px) {
  .hero-desktop {
    display: none !important;
  }
  .hero-mobile {
    display: inline !important;
  }
}

/* === メッセージ2（大きめのキャッチコピー） === */
.hero-msg2-hero-hayabarai {
  font-weight: bold; /* 太字 */
  margin-bottom: 1em; /* 下に余白 */
  color: #222; /* 濃いグレーの文字色 */
  font-size: 2.2rem;
  line-height: 1.4;
  margin-bottom: 1em;
}

/* === メッセージ2の中の黄色強調部分 === */
.highlight-hero-hayabarai {
  color: #FCCF00; /* ヤマトの黄色 */
}

/* === メッセージ3（ロゴ風の白抜き文字） === */
.hero-msg3-hero-hayabarai {
  position: relative;
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 0.25em 1em;
  font-weight: 700;
  letter-spacing: 0.15em;
  border-radius: 1px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  font-size: 1.5rem;
  line-height: 1.4;
}

/* 光のエフェクト */
.hero-msg3-hero-hayabarai::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 1;
}

/* 初回アニメーション */
.hero-msg3-hero-hayabarai::before {
  animation: shine 1.2s ease-out 0.5s 1 forwards;
}

/* ホバー時にも再生 */
.hero-msg3-hero-hayabarai:hover::before {
  animation: shine 1.2s ease-out 0s 1 forwards;
}

/* アニメーション定義 */
@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

/* クロ早ロゴ */
.hero-logo {
  display: inline-block;
}

.logo-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 360px;
}

@media (max-width: 768px) {
  .logo-wrapper {
    max-width: 80%;
  }
}

@media (max-width: 480px) {
  .logo-wrapper {
    max-width: 90%;
  }
}

.logo-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.logo-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  transform: skewX(-20deg);
  left: -100%;
  width: 100%;
  pointer-events: none;
}

.logo-wrapper:hover::before {
  animation: shine 1.2s ease-out 0s 1 forwards;
}

@keyframes shine {
  to {
    left: 100%;
  }
}

/* クロ早ロゴ 終わり*/

/* バッジエリア */
.hero-badge-hero-hayabarai {
  display: block;
  margin-top: 1em;
  max-width: 360px;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .hero-badge-hero-hayabarai {
    max-width: 100%;
    margin-top: 0.8em;
    
  }
}

@media (max-width: 480px) {
  .hero-badge-hero-hayabarai {
    max-width: 100%;
    margin-top: 0.6em;
  }
}

/* === レスポンシブ文字サイズ === */
/* === タブレット（842px以下） === */
@media (max-width: 842px) {
  .hero-msg1-hero-hayabarai {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.9em;
  }
  .hero-msg2-hero-hayabarai {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 0.9em;
  }
  .hero-msg3-hero-hayabarai {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-top: 0.4em;
  }
}

/* === スマホ（480px以下） === */
@media (max-width: 480px) {
  .hero-msg1-hero-hayabarai {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.8em;
  }
  .hero-msg2-hero-hayabarai {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 0.8em;
  }
  .hero-msg3-hero-hayabarai {
    font-size: 1rem;
    line-height: 1.2;
    margin-top: 0.3em;
  }
}



/* === 背景の回転する四角形の共通スタイル === */
.hero-background-squares-hero-hayabarai .square {
  position: absolute; /* 自由配置 */
  height: auto;
  aspect-ratio: 1 / 1; /* 正方形を維持 */
  animation: rotateSquare 20s linear infinite; /* ゆっくり回転 */
  opacity: 0.9; /* 少し透過 */
  z-index: 1; /* コンテンツの下に表示 */
}

/* === 黄色の四角形 === */
.square.yellow {
  background-color: #FCCF00;
}

/* === グレーの四角形 === */
.square.gray {
  background-color: #f0f0f0;
}

/* === 黒枠だけの四角形 === */
.square.border {
  border: 2px solid #000;
  background: transparent;
}

/* === 四角形の回転アニメーション定義 === */
/* 通常の回転速度 */
@keyframes rotateSquare {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hero-background-squares-hero-hayabarai .square {
  animation: rotateSquare 20s linear infinite;
  transition: animation-duration 0.3s ease;
}

/* ホバー時に回転速度を速める */
.hero-background-squares-hero-hayabarai .square:hover {
  animation-duration: 5s!important; /* 速く回転 */
}


/* === レスポンシブ対応：スマホでは縦並びに＆画像非表示 === */
/* @media (max-width: 768px) {　*/
@media (max-width: 768px) {
  .hero-container-hero-hayabarai {
    flex-direction: column; /* 縦並びに変更 */
    align-items: flex-start; /* 左寄せに */
  }

  .hero-right-hero-hayabarai {
    display: none; /* スマホでは画像を非表示に */
  }
}

@media (max-width: 579px) {
  .square.right-half {
    display: none;
  }
}

@media (max-width: 579px) {
  .linebreak-hero-hayabarai::before {
    content: "\A"; /* 改行を挿入 */
    white-space: pre;
    display: block;
  }
}