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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*基本設定　フォント、行間、センタリング、余白　*/
body {
  font-family: "Noto Sans", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	line-height: 1.8;
	margin: auto;
	padding: 1em;
}

/* 見出し設定 */
/** H2見出し - 中程度 **/
.article h2 {
	font-size: 1.6rem;
	font-weight: 600;
	color: #c62828;
	margin: 1.8rem 0 0.8rem;
	padding: 1.8rem 1.2rem;
	background: linear-gradient(135deg, rgba(198, 40, 40, 0.08) 0%, rgba(244, 67, 54, 0.04) 100%);
	border-left: 4px solid #e53935;
	border-radius: 0 6px 6px 0;
}

/** H3見出し - やや薄い **/
.article h3 {
	font-size: 1.3rem;
	font-weight: 500;
	color: #d32f2f;
	margin: 1.5rem 0 0.6rem;
	padding: 1.0rem 1rem;
	background: linear-gradient(135deg, rgba(211, 47, 47, 0.06) 0%, rgba(255, 107, 107, 0.03) 100%);
	border-left: 3px solid #ef5350;
	border-radius: 0 4px 4px 0;
}

/* 日本語と英語の切り替え用 */
/** 切り替えボタンのデザイン **/
.lang-switch {
  margin-bottom: 1em;
}

.lang-switch button {
  padding: 6px 12px;
  margin-right: 6px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.lang-switch button.active {
  background-color: #0073aa;
  color: #fff;
}

/** 日本語と英語の切り替え用 - 台本 **/
.jp {
  font-family: "Yu Gothic", sans-serif;
  color: black;
	background-color: #f5f6f7;  /* 明るいグレー */
  padding: 0.5em;
  display: none;
	margin-bottom: 0.5em;
}

.en {
  font-family: Arial, sans-serif;
  color: #555;
  font-style: italic;
	background-color: #e0f7fa;  /* 明るいブルー */
  padding: 0.5em;
  display: none;
  margin-bottom: 1em;
}

.jp, .en {
  display: none;
  margin-bottom: 1em;
	width: 100%;
  box-sizing: border-box;
	border-radius: 6px;
  border: 1px solid #ccc;
}

.pair {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1em;
  background-color: #ffffff;
}

.jp, .en {
  margin-bottom: 0.5em;
  display: none;
}

.jp.active,
.en.active {
  display: block;
}

/* テーブル */
/** 表全体の外枠 **/
table {
	border: 2px solid #666; 
	border-collapse: collapse;
	width: 100%;
	margin-top: 1em;
}

/** セル **/
th, td {
	border: 1px solid #999;
	padding: 8px;
	text-align: left;
}

th {
	background-color: #0073aa;
}

/* 文化ポイント */
.point-content {
	background-color: #f8fff8;
}


/* クイズ */
.quiz-container {
	background-color: #eaf4fc;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
}

/** 問題セクション **/
.question {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #333;
}

.choices {
	list-style: none;
	padding: 0;
}

.choices li {
  margin: 10px 0;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
  border-left: 4px solid #007bff;
}

/** 回答セクション **/
details {
	margin-top: 15px;
	border: 2px solid #28a745;
	border-radius: 5px;
	padding: 10px;
	background-color: #f8fff9;
}

summary {
  font-weight: bold;
  cursor: pointer;
  color: #28a745;
}

summary:hover {
	color: #1e7e34;
}

.answer-content {
  margin-top: 10px;
  padding: 10px;
  background-color: #d4edda;
  border-radius: 5px;
}

/* Youtube表示設定 */
/** 中心に配置する **/
.video-container {
	margin: 0 auto;
}

/** youtubeショートの縦長表示 https://wordpress.news-vouge.com/wordpressyoutube3/ **/
.youtube-shorts iframe {
  position: relative;
  aspect-ratio: 9 /16; /* ビデオの横/縦比 */
}

.youtube-shorts .video {
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  padding-bottom: 0;
  width: 400px;   /* ビデオ横幅 */
}

/* 本文下タグボタンの色 */
.tag-link {
  background-color: #2792c3;
  color: #ffffff;
}

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

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

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