@charset "UTF-8";
/* CSS Document */
.pfm-tab-container {
  width: 100%;
  box-sizing: border-box;
}
.pfm-tab-input { display: none; }
.pfm-tab-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 1010px;
  margin: 0 auto 80px auto;
  padding: 0 10px;
  box-sizing: border-box;
}
.pfm-tab-label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 54px; padding: 10px 12px; background-color: #000000; color: #777777;
  font-size: 20px; font-weight: bold; border-radius: 12px; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); user-select: none;
  box-sizing: border-box; word-break: break-all; overflow-wrap: anywhere; line-height: 1.3;
	font-family: 'Myfont';
}
#pfm-tab-artist01:checked ~ .pfm-tab-buttons .pfm-tab-label:nth-child(1),
#pfm-tab-artist02:checked ~ .pfm-tab-buttons .pfm-tab-label:nth-child(2),
#pfm-tab-artist03:checked ~ .pfm-tab-buttons .pfm-tab-label:nth-child(3),
#pfm-tab-artist04:checked ~ .pfm-tab-buttons .pfm-tab-label:nth-child(4) {
  background-color: #e60012; color: #ffffff;
}
.pfm-tab-content { display: none; opacity: 0; transform: translateY(15px); }
#pfm-tab-artist01:checked ~ .pfm-content-artist01,
#pfm-tab-artist02:checked ~ .pfm-content-artist02,
#pfm-tab-artist03:checked ~ .pfm-content-artist03,
#pfm-tab-artist04:checked ~ .pfm-content-artist04 {
  display: block; animation: pfmFadeUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pfmFadeUp {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   🟥 【センター基準・左右リピート】カードグリッド背景
========================================== */
.pfm-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 330px));
  justify-content: center; 
  gap: 10px;
  
  width: 100%;
  max-width: none; 
  margin: 0;
  box-sizing: border-box;
  background-color: #c6121a;

  /* 波のくぼみの位置（実寸高さ）に合わせて、カードが被らない安全余白を確保 */
  padding: 170px 20px 160px 20px; 
  position: relative;
  overflow: hidden; 

  /* 5層の複数背景重ね合わせ */
  background-image: 
    url('img/wave-top.png'),      /* 1. 最前面：上辺の白い波（PNG） */
    url('img/wave-bottom.png'),   /* 2. 下辺の白い波（PNG） */
    url('img/wave-kune.png'),      /* 3. 青とピンクのクネクネ模様 */
    radial-gradient(rgba(255, 255, 255, 0.05) 30%, transparent 30%), /* 4. 白ドット1 */
    radial-gradient(rgba(255, 255, 255, 0.05) 30%, transparent 30%); /* 5. 白ドット2 */

  /* 🌟 【重要修正①：位置の設定】
     上下の波（1番目・2番目）の基準点を `center`（中央）に設定。
     これで画面が左右にどれだけ広がっても、波の真ん中（センター）が画面中央にカチッとロックされます。 */
  background-position: 
    top center,                       /* 1. 💡 上の波：上部中央を軸にする */
    bottom center,                    /* 2. 💡 下の波：下部中央を軸にする（縦の伸びに連動） */
    center center,                    /* 3. クネクネ */
    0 0,                              /* 4. 白ドット1 */
    7.5px 7.5px;                      /* 5. 白ドット2 */

  /* 🌟 【重要修正②：リピートの設定】
     `repeat-x`（横方向リピート）の指示と上の `center` 指定が合わさることで、
     真ん中を起点にして左右の両側へ向かってエンドレスに波がリピート展開していきます。 */
  background-repeat: 
    repeat-x,                         /* 1. 上の波：中央から左右へループ */
    repeat-x,                         /* 2. 下の波：中央から左右へループ */
    repeat-y,                        /* 3. クネクネ */
    repeat,                           /* 4. 白ドット1 */
    repeat;                           /* 5. 白ドット2 */

  /* サイズは `auto`（固定実寸サイズ）なので、拡大されずくぼみの比率が100%死守されます。 */
  background-size: 
    auto,                             /* 1. 上の波：大きさを変えない（実寸） */
    auto,                             /* 2. 下の波：大きさを変えない（実寸） */
    contain,                          /* 3. クネクネ */
    15px 15px,                        /* 4. 白ドット1 */
    15px 15px;                        /* 5. 白ドット2 */
    
  transition: all 0.4s ease;
}
.ptm_subtitle{
  width: max-content;
	text-align: center;
  pointer-events: none;
	z-index: 5;
	font-size: 28px;
	color:#c6121a;
	font-family: 'Myfont';
	margin:0 auto;
}

.pfm_jantitle{
	position: absolute;
  top: 80px;       /* 💡 波のくぼみの高さ（センター軸）に合わせて、文字の上下位置をここでミリ微調整してください */
  left: 50%;
  transform: translateX(-50%); /* 💡 文字を「完全な左右中央（ど真ん中）」に配置 */
  width: max-content;
	text-align: center;
  pointer-events: none;
	color:white;
	font-size:22px;
		font-family: 'Myfont';
}

.pfm_jantitle::after {
  content: "";
  position: absolute;
  /* 配置位置の調整（右端から0、中央寄せ） */
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  
  /* キャラクター画像の指定 */
  background-image: url('img/ar_c_favo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* 画像の表示サイズ（表示したい大きさに変更してください） */
  width: 60px;
  height: 60px;
}

.pfm_jantitle span{font-size: 15px;}

/* 各カードの基本設定 */
.pfm-card-item {
  position: static;
  width: 100%;
  box-sizing: border-box;
  z-index: 5;
}

.pfm-card-toggle-input { display: none; }

.pfm-card-inner {
  display: flex; flex-direction: column; height: 100%;
  background: #000000;
	border-radius: 15px;
  overflow: hidden; color: #ffffff; font-family: sans-serif;
}

.pfm-image-wrapper {
  position: relative; width: 100%; padding-top: 75%; background: #111;
}
.pfm-image-wrapper img {
  position: absolute; 
	top: 50%; 
	left: 50%; 
	width: auto; 
	height: 100%; 
	object-fit: cover;
	transform: translate(-50%,-50%)
}

.pfm-card-content {
  position: relative; display: flex; flex-direction: column; flex-grow: 1; padding: 20px 15px;
}


/* タイトルとプラスボタンを横並びにするエリア */
.pfm-title-area {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 0 0 15px 0; width: 100%;
}

/* ➕ 通常時：赤い背景丸に白いプラス線 */
.pfm-toggle-btn {
  width: 20px; height: 20px; background-color: #e60012; border-radius: 50%; cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 2px;
  transition: background-color 0.25s ease;
}
.pfm-toggle-btn::before, .pfm-toggle-btn::after {
  content: ""; position: absolute; background-color: #ffffff; transition: all 0.25s ease;
}
.pfm-toggle-btn::before { width: 10px; height: 2px; }
.pfm-toggle-btn::after { width: 2px; height: 10px; }

/* 国旗 */
.pfm-country-label {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: bold; letter-spacing: 1px; margin-bottom: 12px;
}
.pfm-country-label_2 {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: bold; letter-spacing: 1px; margin-bottom: 12px;
}
.pfm-country-label::before {
  content: ""; display: inline-block; width: 16px; height: 11px; margin-right: 6px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.pfm-country-label_2::before {
  content: ""; display: inline-block; width: 36px; height: 11px; margin-right: 6px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/*国旗国別*/
.pfm-flag-ja::before { background-image: url('img/country_jan.jpg'); }
.pfm-flag-usa::before { background-image: url('img/country_usa.jpg'); }
.pfm-flag-chn::before { background-image: url('img/country_chn.jpg'); }
.pfm-flag-prt::before { background-image: url('img/country_prt.jpg'); }/*--ポルトガル--*/
.pfm-flag-ita::before { background-image: url('img/country_ita.jpg'); }/*--イタリア--*/
.pfm-flag-arg::before { background-image: url('img/country_arg.jpg'); }/*-アルゼンチン---*/
.pfm-flag-aus::before { background-image: url('img/country_aus.jpg'); }/*--オーストラリア--*/
.pfm-flag-che::before { background-image: url('img/country_che.jpg'); }/*--スイス--*/
.pfm-flag-cze::before { background-image: url('img/country_cze.jpg'); }/*--チェコ--*/
.pfm-flag-esp::before { background-image: url('img/country_esp.jpg'); }/*--スペイン--*/
.pfm-flag-fra::before { background-image: url('img/country_fra.jpg'); }/*--フランス--*/
.pfm-flag-gbr::before { background-image: url('img/country_gbr.jpg'); }/*--イギリス--*/
.pfm-flag-lva::before { background-image: url('img/country_lva.jpg'); }/*--ラトビア--*/
.pfm-flag-mar::before { background-image: url('img/country_mar.jpg'); }/*--モロッコ--*/
.pfm-flag-twn::before { background-image: url('img/country_twn.jpg'); }/*--台湾--*/
.pfm-flag-ukr::before { background-image: url('img/country_ukr.jpg'); }/*--ウクライナ--*/
.pfm-flag-deu::before { background-image: url('img/country_deu.jpg'); }/*--ドイツ--*/
.pfm-flag-bra::before { background-image: url('img/country_bra.jpg'); }/*--ブラジル--*/
.pfm-flag-kor::before { background-image: url('img/country_kor.jpg'); }/*--韓国--*/
.pfm-flag-fin::before { background-image: url('img/country_fin.jpg'); }/*--フィンランド--*/
.pfm-flag-fin_che::before { background-image: url('img/country_fin_che.jpg'); }/*--フィンランド+スイス--*/
.pfm-flag-usa_esp::before { background-image: url('img/country_usa_esp.jpg'); }/*--アメリカ+スペイン--*/
.pfm-flag-gbr_aus::before { background-image: url('img/country_gbr_aus.jpg'); }/*--イギリス+オーストラリア--*/
.pfm-flag-chn_jpn::before { background-image: url('img/country_chn_jpn.jpg'); }/*--中国+日本--*/

/* 省略自動化 */
.pfm-english-title {
  font-size: 13px; font-weight: bold; color: #cccccc; margin: 0 0 4px 0; line-height: 1.3;
  white-space: normal; word-break: break-all; overflow-wrap: anywhere;
}
.pfm-japanese-title {
  font-size: 18px; font-weight: bold; color: #ffffff; margin: 0; line-height: 1.4;
  white-space: normal; word-break: break-all; overflow-wrap: anywhere; flex-grow: 1;
}

.pfm-english-title:empty, .pfm-japanese-title:empty { display: none !important; margin: 0 !important; }

/* 説明文 */
.pfm-description-text {
  font-size: 11px; color: #aaaaaa; line-height: 1.6; margin: 0 0 20px 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /*flex-grow: 1;*/ line-clamp: 2;
}

/* フッター */
.pfm-card-footer {
  position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 10px; min-height: 55px; 
}
.pfm-category-icon {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; position: relative; z-index: 2; 
}
.pfm-category-icon img { width: 50px; height: 50px; object-fit: contain; }
.pfm-category-icon span { font-size: 9px; color: #ffffff; }

.pfm-card-number {
  position: absolute; right: -5px; bottom: -15px; font-size: 85px; font-weight: 900; line-height: 1; color: dimgray; letter-spacing: -4px; flex-shrink: 0; z-index: 1; pointer-events: none; 
	font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* 🔓 開閉アクション と 色反転の処理 */
.pfm-card-toggle-input:checked + .pfm-card-inner .pfm-toggle-btn { background-color: #ffffff; }
.pfm-card-toggle-input:checked + .pfm-card-inner .pfm-toggle-btn::before { background-color: #000000; }
.pfm-card-toggle-input:checked + .pfm-card-inner .pfm-toggle-btn::after { opacity: 0; height: 0; }
.pfm-card-toggle-input:checked + .pfm-card-inner .pfm-description-text {
  display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset;
}

/* ==========================================
   📱 レスポンシブ設定（スマホ2カラム絶対死守）
========================================== */
@media (max-width: 768px) {
  .pfm-tab-label { font-size: 16px; padding: 8px 6px; min-height: 48px; }
  .pfm-tab-buttons { gap: 8px; }

  .pfm-card-grid {
    grid-template-columns: repeat(1, 1fr);
    justify-items: center; 
    justify-content: center; 
    padding: 180px 10px 130px 10px !important;
  }

  .pfm-card-item {
    margin: 0;
	  padding:15px;
  }

  /* スマホ用のサイズ微調整 */
  .pfm-card-content { padding: 12px 10px; }
  .pfm-title-area { margin-bottom: 8px; }
  .pfm-japanese-title { font-size: 20px; }
  .pfm-english-title { font-size: 13px; }
  .pfm-description-text { font-size: 14px; margin-bottom: 12px; }
  .pfm-card-number { font-size: 72px; right: 3px; bottom: -5px; }
  .pfm-card-grid {background-image: 
    url('img/wave-top_sp.png'),      /* 1. 最前面：上辺の白い波（PNG） */
    url('img/wave-bottom_sp.png'),   /* 2. 下辺の白い波（PNG） */
    url('img/wave-kune.png'),      /* 3. 青とピンクのクネクネ模様 */
    radial-gradient(rgba(255, 255, 255, 0.05) 30%, transparent 30%), /* 4. 白ドット1 */
	  radial-gradient(rgba(255, 255, 255, 0.05) 30%, transparent 30%);}


	.ptm_subtitle{
  width: max-content;
	text-align: center;
  pointer-events: none;
		font-size: 25px;
		margin:0 auto;
}
/* 大画面で3列未満のときに幅が崩れるのを防ぐ安全弁 */
@media (max-width: 1040px) and (min-width: 769px) {
  .pfm-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 330px));
  }
}

}