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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.logo-header {
	padding: 40px 0;	
}

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

.logo-header img {
  /* 提案した4色の「ほとんど白」のグラデーション */
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.8), rgba(245, 245, 245, 0.6), rgba(240, 248, 255, 0.7), rgba(255, 255, 255, 0.5));
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

.footer-bottom-logo img {
	height: 104px;
}

/* H2 */
.entry-content h2{
	font-size: 1.4em; /*文字サイズ*/
	background-color: #e2f5ff; /*背景色*/
	padding-top:20px; /*文字と上部の間隔*/
	padding-left:10px;/*文字と左線の間隔*/
	padding-bottom:20px;/*文字と下部の間隔*/
	border-left: solid 10px #00a0e9; /*左側に実線・色*/
}


/* H3 */
.entry-content h3{
color: #000; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
background-color: #f7f9fc;/* 背景色 */
padding: 10px;
border-left: solid 10px #00a0e9; /* 左側に実線・色*/
}


/* H4 */
.entry-content h4{
	color: #000; /* 文字色 */
	font-size: 1.0em; /* 文字サイズ */
	padding: 10px;
	border-top: solid 3px #00a0e9;/* 上側に実線・色 */
	border-bottom: solid 3px #00a0e9;/* 下側に実線・色*/
}


/* H5 */
.entry-content h5{
	color: #000; /* 文字色 */
	font-size: 1.0em; /* 文字サイズ */
	padding: 10px;
	border-bottom: dotted 3px #00a0e9;/* 下側に点線・色*/
}


/* H6 */
.entry-content h6{
	color: #000; /* 文字色 */
	font-size: 1.0em; /* 文字サイズ */
	padding: 5px;
	border-left: solid 7px #00a0e9; /* 左側に実線・色*/
}

.quote-block-1 {
	background-color: #f9f9f9;
	border-left: 3px solid #4a4a4a;
	padding: 25px 30px;
	margin: 20px 0;
	font-family: 'Helvetica Neue', Arial, sans-serif;
}
.quote-block-1 .en-quote {
	font-size: 1.3em;
	font-weight: 300;
	color: #333;
	line-height: 1.4;
	margin-bottom: 15px;
}
.quote-block-1 .ja-quote {
	font-size: 0.95em;
	color: #666;
	line-height: 1.6;
}

.banner-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px; /* この値で余白の大きさを調整できます */
	padding: 0px 8px;
}

/* アニメーションを適用するバナーの基本設定 */
.banner-container > a {
	/* アニメーションを滑らかにするための設定 */
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	border-radius: 4px; /* 見た目を良くするため少し角を丸めます（任意）*/
}

/* カーソルが乗った時のアニメーション */
.banner-container > a:hover {
	/* 少し拡大し、Y軸に-5px移動（少し上に浮く）*/
	transform: scale(1.02) translateY(-4px);
	/* 影を付けて立体感を出す */
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* "Coming Soon"用のラッパー */
.coming-soon-wrapper {
	position: relative;
}

/* "Coming Soon"用のリンク（変更点）*/
.coming-soon-link {
	position: relative; /* オーバーレイ(::before)の基準にするため追加 */
	display: block; /* 適切な表示のために追加 */
	cursor: default;
	pointer-events: none;
}

/* オーバーレイ用の疑似要素（新規追加） */
.coming-soon-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6); /* 黒のオーバーレイ。0.6が透明度 */
	z-index: 1; /* テキストより下に表示 */
}

/* "Coming Soon"用の画像スタイル（変更点）*/
.coming-soon-link img {
	display: block; /* 隙間防止 */
}

/* "Coming Soon"用のテキストスタイル */
.coming-soon-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-weight: bold;
	font-size: 1.7em;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 白い文字なので影は黒に修正 */
	white-space: nowrap;
	z-index: 2; /* オーバーレイより上に表示 */
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  /* カルーセルのコンテナ設定 */
  .banner-container {
	  display: flex;
	  justify-content: flex-start; /* アイテムを左端から配置するように変更 */
	  /* 1. 横方向にはみ出た要素をスクロール（スワイプ）可能にする */
	  overflow-x: auto;
	  /* 2. アイテムがはみ出ても折り返さず、一行に並べる */
	  flex-wrap: nowrap;
	  /* 3. スクロール時にアイテムにスナップさせる */
	  scroll-snap-type: x mandatory;

	  /* 見た目の調整 */
	  gap: 16px; /* アイテム間の隙間 */
	  padding: 0 24px; /* カルーセル全体の左右に余白を持たせる */
  }

  /* スクロールバーを非表示にする（任意ですが推奨）*/
  .banner-container::-webkit-scrollbar {
	  display: none;
  }

  /* カルーセルの各アイテム（バナー）の設定 */
  .banner-container > * {
	  /* 4. 各アイテムの幅を指定（画面幅の90%）*/
	  flex: 0 0 90%;
	  /* 5. アイテムの中央でスナップさせる */
	  scroll-snap-align: center;
  }
	
  .coming-soon-wrapper img {
	  width: 100%; /* 親要素の幅いっぱいに広がる */
	  height: auto; /* 画像の縦横比を維持する */
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  .logo-header img {
	  width: 240px;
  }
	
  .coming-soon-text {
	  font-size: 1.3em;
  }
}