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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* --- Berriify Hero Section CSS --- */
.hero-title-link a {
    text-decoration: none;
    color: white;
}

/* 1. ヘッダー全体の背景（ベリー色のグラデーション） */
#header {
  /* 画像のような左上から右下へのグラデーション */
  background: linear-gradient(135deg, #ce2f6c 0%, #881543 100%) !important;
  color: #fff;
  border: none; /* Cocoonのデフォルト線を消す */
  padding-top: 40px; /* 上下の余白 */
  padding-bottom: 40px;
}

/* 2. コンテンツ幅の調整 (#header-in) */
#header-in {
  /* 必要に応じて幅を調整 */
  margin: 0 auto;
  padding: 0 20px;
	height: 330px;
}

/* --- コンテンツのレイアウト --- */
.hero-container {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 上下中央揃え */
  gap: 40px; /* 左と右の間隔 */
  position: relative;
}

/* スマホ対応：縦並びにする */
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column;
    text-align: left; /* スマホでも左寄せのままにするか、centerにするか */
  }
}

/* --- 左側：テキストデザイン --- */
.hero-text {
  flex: 1; /* テキストエリアを広くとる */
  max-width: 700px;
}

.hero-label {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.15em; /* 文字間隔を広げる */
  margin-bottom: 10px;
  opacity: 0.9;
  text-transform: uppercase;
}

.hero-title {
  font-family: 'Noto Sans JP', sans-serif; /* お好みで */
  font-size: 3rem; /* 文字サイズ大 */
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff; /* Cocoon設定の上書き */
}

.hero-desc {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.9;
  margin-bottom: 30px;
}

/* --- タグのデザイン --- */
.hero-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-tags span {
  background: rgba(255, 255, 255, 0.2); /* 半透明の白 */
  padding: 6px 16px;
  border-radius: 50px; /* 丸み */
  font-size: 0.85rem;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- 右側：ガラスの箱 --- */
.hero-visual {
  flex: 0 0 300px; /* 幅を固定 */
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* ガラスモーフィズムの板 */
.glass-box {
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.05); /* かなり薄い白 */
  backdrop-filter: blur(10px); /* すりガラス効果 */
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* 薄い枠線 */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  transform: rotate(-10deg); /* ちょっと傾ける */
}

/* スマホのときは右側の図形を消すか小さくする */
@media (max-width: 768px) {
  .hero-visual {
    display: none; /* 狭いので一旦消す */
  }
  .hero-title {
    font-size: 2rem;
  }
}


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

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

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