@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');

@charset "UTF-8";

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

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

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}
/* =====================================
   タイ語フラッシュカード
===================================== */

.thai-flashcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.thai-flashcard {
  height: 260px;
  cursor: pointer;
  perspective: 1000px;
}

.thai-flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.thai-flashcard.is-flipped .thai-flashcard-inner {
  transform: rotateY(180deg);
}

.thai-flashcard-front,
.thai-flashcard-back {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  border: 1px solid #dfe9e3;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(31, 78, 61, 0.1);
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.thai-flashcard-front {
  color: #173f32;
  background: linear-gradient(145deg, #f4fbf7, #e5f3ea);
}

.thai-flashcard-back {
  color: #24342e;
  background: #ffffff;
  transform: rotateY(180deg);
}

.thai-flashcard-word {
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
}

.thai-flashcard-hint {
  color: #668078;
  font-size: 13px;
}

.thai-flashcard-pronunciation {
  margin-bottom: 10px;
  color: #39705c;
  font-size: 18px;
  font-weight: 600;
}

.thai-flashcard-meaning {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
}

.thai-flashcard-example {
  color: #5d6b66;
  font-size: 15px;
  line-height: 1.7;
}

/* タブレット・スマートフォン */
@media screen and (max-width: 834px) {
  .thai-flashcards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

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

/* フラッシュカードをページ背景になじませる */
.thai-flashcard-front {
  background: #D1C5B3;
  border-color: #e6dfd1;
}

.thai-flashcard-back {
  background: #ffffff;
  border-color: #e6dfd1;
}

.thai-flashcard-front,
.thai-flashcard-back {
  box-shadow: 0 8px 24px rgba(75, 65, 45, 0.08);
}

/* フラッシュカードの表裏が同時表示される問題を修正 */
.thai-flashcard {
  position: relative;
  overflow: visible;
}

.thai-flashcard-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
}

.thai-flashcard-front,
.thai-flashcard-back {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.thai-flashcard-front {
  transform: rotateY(0deg) !important;
}

.thai-flashcard-back {
  transform: rotateY(180deg) !important;
}

.thai-flashcard.is-flipped .thai-flashcard-inner {
  transform: rotateY(180deg) !important;
}

/* 「クリックして意味を見る」を白色に */
.thai-flashcard-front .thai-flashcard-hint {
  color: #ffffff;
}

/* 日本語 */
.thai-flashcard-example {
  font-family: "Noto Sans JP", sans-serif;
}

/* タイ語 */
.thai-flashcard-word {
  font-family: "Sarabun", sans-serif;
}

/* 発音アルファベット・発音記号 */
.thai-flashcard-pronunciation {
  font-family: "Noto Sans", sans-serif;
}

/* 記事本文中のタイ語 */
.thai-text {
  color: #23483b;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.8;
}

/* 本文中のタイ語をフラッシュカードと同じフォントにする */
.article .thai-text {
  font-family: "Sarabun", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.8;
}

/* フラッシュカード内のタイ語 */
.thai-flashcard-word {
  font-family: "Sarabun", sans-serif;
}