@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ================================================
   ヒーローエリア：テキスト・ロゴ重ねカスタマイズ
   ================================================ */

/* ヒーローエリア全体を position の基点に */
#hero {
  position: relative;
  overflow: hidden;
}

/* オーバーレイ全体ラッパー */
.hero-overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* スマホ：センター */
  box-sizing: border-box;
  padding: 20px;
  z-index: 10;
  pointer-events: none;
}

/* テキスト＋ロゴのブロック */
.hero-text-block {
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.7);
}

/* キャッチコピー */
.hero-catchcopy {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.8;
  margin: 0 0 20px 0;
  letter-spacing: 0.05em;
}

/* ロゴ画像 */
.hero-logo-img {
  display: block;
  margin: 0 auto 12px;
  max-width: 260px;
  height: auto;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.5));
}

/* 社名（日本語） */
.hero-company-ja {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 4px 0;
  letter-spacing: 0.1em;
}

/* 社名（英語） */
.hero-company-en {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  margin: 0;
  opacity: 0.9;
}

/* ================================================
   PC表示（768px以上）：右寄せ
   ================================================ */
@media (min-width: 768px) {
  .hero-overlay-content {
    justify-content: flex-end;
    padding-right: 6%;
  }

  .hero-text-block {
    text-align: left;
    max-width: 420px;
  }

  .hero-logo-img {
    margin: 0 0 12px 0; /* 左揃えに */
  }

  .hero-catchcopy {
    font-size: 1.25rem;
  }

  .hero-company-ja {
    font-size: 2rem;
  }

  .hero-company-en {
    font-size: 0.9rem;
  }
}

/* ================================================
   スマホ表示（767px以下）：センター
   ================================================ */
@media (max-width: 767px) {
  .hero-catchcopy {
    font-size: 0.95rem;
  }

  .hero-logo-img {
    max-width: 200px;
  }

  .hero-company-ja {
    font-size: 1.3rem;
  }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}