/* フォームフィールド全般のスタイル */
.pms-form {
    margin-top: 30px;
}

.pms-form-fields-wrapper .pms-field {
    margin-bottom: 0px;
}
.pms-field h4{
	font-size: 1.2em;
    color: #666;
}

.pms-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.pms-field input[type="text"],
.pms-field input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.pms-field select{
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.pms-form input[type=submit]{
    display: inline-block;
    background-color: var(--main_color);
    color: #ffff;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 20px;
	font-weight: bold;
    border: none;
	cursor: pointer;
}
.pms-form input[type=submit]:hover{
    background-color: var(--main_color_dark);	
    color: #6f6f6f;
}

/* 姓と名を横並びにするために親要素をflexに設定 */
/* フォーム全体のflex方向を縦並びに強制 */
.pms-account-section-wrapper {
    display: flex;
    flex-direction: column; /* 全体は縦並び */
    gap: 20px;  /* フィールド間のスペース */
}

/* 姓と名を囲むラッパーを作成して横並びに */
.pms-name-fields-wrapper {
    display: flex;
    flex-direction: row; /* 姓と名を横並びに */
    gap: 20px;  /* 姓と名の間にスペースを追加 */
}

/* 姓と名のフィールドの幅を調整 */
.pms-last-name-field,
.pms-first-name-field {
    width: 50%;
    order: unset;  /* JavaScriptの表示順を適用 */
}

/* レスポンシブ対応: 画面幅が600px以下の場合は縦並びに戻す */
@media (max-width: 600px) {
    .pms-name-fields-wrapper {
        flex-direction: column;  /* 画面が小さい場合は縦並びに戻す */
    }
    .pms-last-name-field,
    .pms-first-name-field {
        width: 100%;
    }
}


/* 他のフィールドは全幅表示 */
.pms-user-login-field,
.pms-user-email-field,
.pms-pass1-field,
.pms-pass2-field {
    width: 100%;
}


/* レスポンシブ対応: 画面幅が600px以下の場合は縦並びに戻す */
@media (max-width: 600px) {
    .pms-last-name-field,
    .pms-first-name-field {
        width: 100%;
    }
}


/* 支払いプラン全体のスタイル */
.pms-field.pms-field-subscriptions  {
    margin-top: 0px;
}

.pms-subscription-plan {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pms-subscription-plan:hover {
    background-color: #fffbeb;
    border-color: #ffd700;
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.pms-subscription-plan input[type="radio"] {
    margin-right: 10px;
}

.pms-subscription-plan-name {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
}

.pms-subscription-plan-price {
    font-size: 1.1em;
    color: #666;
    margin-left: 10px;
}

#pms-credit-card-information{
	margin-top: 50px;
}
.pms-form-submit{
	margin-top: 50px;
}

/* JavaScriptで付与された 'selected-plan' クラスにスタイルを適用 */
.pms-subscription-plan.selected-plan {
    background-color: #fffbeb;
    border-color: #ffd700;
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
p.plan-selection-description{
	margin: 50px 0 15px;
	font-weight: bold;
}


/**** メンバー募集ページ ****/
.member-plans {
  text-align: center;
  padding: 10px 20px;
}

.member-plans .plan-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.member-plans .plan {
  width: 90%;
  max-width: 500px;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.member-plans .plan:hover {
  transform: translateY(-10px);
}

.member-plans .plan h3 {
  font-size: 2em;
  margin-bottom: 10px;
}

.member-plans .plan .plan-subtitle {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 20px;
}

.member-plans .plan .price {
  font-size: 1.8em;
  font-weight: bold;
  color: #262626;
  margin-bottom: 20px;
  text-shadow: #ffff00 1px 0 3px;
}

.member-plans .benefits {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.member-plans .benefits li {
  display: flex;
  align-items: center;
  font-size: 1.1em;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.member-plans .benefits li:last-child {
  border-bottom: none;
}

.member-plans .benefits i {
  font-size: 1.5em;
  margin-right: 15px;
  color: #ccc;
}

.member-plans .btn {
  display: inline-block;
  padding: 15px 40px;
  font-size: 1.1em;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
/* アニメーション効果（光の流れ） */
.member-plans .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.4s ease;
}

.member-plans .btn:hover::before {
  left: 100%;
}

/* ホバーで拡大・影を付ける */
.member-plans .btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	text-decoration: none;
    color: #ffff;
}

/* ボタンカラーのグラデーション */
.btn-subsc {
  background: linear-gradient(135deg, #ffd700, #ff9b00);
}

.btn-donation {
  background: linear-gradient(135deg, #007bff, #0056b3);
}

.btn-free {
  background: linear-gradient(135deg, #28a745, #1e7e34);
}

.faq_list{
    margin: 60px auto 35px;
}
.faq_list .title.active{
	color: #919101;
}
.faq_list .title:hover {
	color: #919101;
}

/* スマホ用 480px以下 */
@media screen and (max-width: 480px) {
  .member-plans {
    padding: 10px 15px; /* 余白を少し小さく */
  }

  .member-plans .plan-container {
    gap: 20px; /* プラン間の余白を縮小 */
  }

  .member-plans .plan {
    width: 100%;
    padding: 15px; /* コンテンツの余白を縮小 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 影を少し弱める */
  }

  .member-plans .plan h3 {
    font-size: 1.5em; /* 見出しのサイズを調整 */
    margin-bottom: 8px;
  }

  .member-plans .plan .plan-subtitle {
    font-size: 1em; /* サブタイトルを少し小さく */
    margin-bottom: 15px;
  }

  .member-plans .plan .price {
    font-size: 1.5em; /* 価格表示のサイズを調整 */
    margin-bottom: 15px;
  }

  .member-plans .benefits li {
    font-size: 1em; /* ベネフィットの文字サイズを調整 */
    padding: 10px 0;
  }

  .member-plans .benefits i {
    font-size: 1.2em; /* アイコンのサイズを調整 */
    margin-right: 10px;
  }

  .member-plans .btn {
    padding: 12px 30px; /* ボタンのサイズを調整 */
    font-size: 1em;
  }

  /* FAQリストの調整 */
  .faq_list {
    margin: 40px auto 20px;
  }

  .faq_list .title {
    font-size: 1em; /* FAQタイトルのサイズを調整 */
    padding: 10px;
  }
}

/* タブレット用 959px以下の調整を強化 */
@media screen and (max-width: 959px) {
  .member-plans .plan {
    padding: 20px;
  }

  .member-plans .plan h3 {
    font-size: 1.8em;
  }

  .member-plans .plan .price {
    font-size: 1.6em;
  }
}}