:root {
  --main: #FF7A00;
  --main-lighter: hsl(29, 100%, 50%, 0.152);
  --main-clear: hsla(210, 100%, 38%, 0.152);
  --b-gray: #777;
  --navy: #0D1B2A;
  --text: #0D1B2A;
  --line: #d1d4d79c;
  --border: rgba(0, 0, 0, 0.1);
  --gray: #999999;
  --b-left: #a4b0bb91;
  --red: #ed4937;
  --orange: #ff8e00;
  --yellow: #ffd71e;
  --brown: #793600;
  --green: #81bc63;
  --koigreen: #36a300;
  --focus: hsla(208, 100%, 38%, 0.071);
  --blue: #2594a1;
  --font-size: 14px;
  --primary: #0D1B2A;
  --card: #fff;
  --card-foreground: #0a0a0a;
  --muted: #F8F9FB;
  --muted-second: hsla(27, 100%, 60%, 0.031);
  --hover: #f8f9fc;
  --muted-foreground: #717c82;
  --input-background: #f9fafb;
  --input-background2: #dde4ea;
  --radius: 0.625rem;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --color-brand-gold: #D4AF37;
  --color-item-border: rgba(13, 27, 42, 0.08);
  --color-text-secondary: #8a9bb0;
}

/* line #d1d4d7;  */


.bold {
  font-weight: 600;
}

.little {
  font-size: small;
}

.red {
  color: var(--red);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

html {
  font-size: var(--font-size);
}



/* 全体の背景と文字色の初期設定　上下メニューも含んだ全体*/
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #ffffff;
  margin: 0 auto;
  color: var(--primary);
  line-height: 1.5;
  width: 100%;
}



ul li {
  list-style: none;
}

a {
  text-decoration: none;
}


/*  メイン内 */

main {
  min-height: 90vh;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 0 200px 0;
}

.main-message {
  min-height: 90vh;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 0 0 0;
}

.container {
  max-width: 480px;
  padding: 15px 10px 40px;
  margin: 0 auto;
}

.introduction-card-header,
.card-ads {
  width: 100%;

}

.introduction-card-header img,
.card-ads img {
  width: 100%;
  height: auto;
  display: block;
  padding-bottom: 12px;


}

.card-title {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--primary);
  margin: 0;
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--line);
  line-height: 1.5;
  letter-spacing: .04em;
}


.card-content {
  padding: 16px;
}

.card-description {
  text-align: center;
  display: block;
  margin: 0 auto;
  padding: 18px;

}

.review-card-content,
.mypage-card-content,
.reveiwPost-card-content,
.pointCharge-card-content,
.offerDetail-card-content,
.offerList-card-content,
.notificationList-card-content,
.term-card-content,
.performance-card-content,
.planorder-card-content,
.planshop-card-content,
.planDetail-card-content,
.notificationDetail-card-content,
.columnDetail-card-content {
  padding: 16px 0 0 0;
}

/*************************************************************  head  ******************************************************************************************/
/*************************************************************  head  ******************************************************************************************/


/* ヘッダー */
header:not(.article-header) {
  background: linear-gradient(135deg, var(--card) 0%, var(--input-background) 100%);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}


.header-inner {
  padding: 10px;
}


.header-inner .logo img {
  display: block;
  width: 150px;
}


/* Header styles */
.header {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  padding: 3px;
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
  height: 48px;
}

.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px 10px;
}


.header-button i,
.close-button i {
  font-size: 18px;
  color: var(--navy);

}

.logo-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*  文字ロゴの場合
.logo {
padding: 6px 20px;
font-weight: var(--font-weight-medium);
color: var(--main);
font-size: var(--font-size);
}
 */

.logo-container img {
  display: flex;
  width: 100px;
  margin: 0 auto;
}


/*************************************************************  rules terms  ******************************************************************************************/
/*************************************************************  rules terms  ******************************************************************************************/
/*************************************************************  rules terms  ******************************************************************************************/


.rules {
  padding-bottom: 1em;
}

.rule-file {
  line-height: 1.6;
  padding: 0 .5em 2em;
}

.term-card-content .white-space {
  white-space: pre-line;

}

dl.rule-file dt {
  font-weight: 700;
  padding: 1.5em 0 .5em;
}

dl.rule-file dd {
  font-weight: 300;
}

.list-number {
  list-style-position: none;
  padding: 0 0 0 1.5em;
}

.list-number li {
  padding-top: .3em;
}

.list-number li:last-child {
  padding-bottom: .3em;
}

table.law-table {
  width: 100%;
  border: .5px solid var(--line);
  border-collapse: collapse;
  margin: 0 0 2em;
}

table.law-table th {
  width: 30%;
  text-align: left;
  padding: 1em;
  border: 1px solid var(--line);
  border-collapse: collapse;
}

table.law-table td {
  width: 70%;
  text-align: left;
  padding: 1em;
  border: 1px solid var(--line);
  border-collapse: collapse;
}

.qrcode {
  height: 80vh;
  padding: 30px;
  color: var(--bk);
  text-align: center;

}

.qrcode img {
  max-width: 200px;
}

.qrcode .qr-info {
  font-size: 20px;
  padding: 16px 0 24px;
  font-weight: 700;
}

.qrcode .qr-text {
  margin: 0 auto;
  max-width: 360px;
  line-height: 1.6;
}

.br {
  display: block;
}

.strong {
  font-weight: bold;
}


/*************************************************************  menu  ******************************************************************************************/
/*************************************************************  menu  ******************************************************************************************/
/*************************************************************  menu  ******************************************************************************************/

/* 選択中のメニュー */
.menu-item:hover {
  background-color: #e9ebef;
}

.menu-item .active {
  background-color: var(--primary);
  color: #ffffff;
}

.bottom-navigation .menu-item .active .menu-label {
  color: #fff;
}

.bottom-navigation .menu-item .active img {
  filter: brightness(0) invert(1);
  /* アイコンを白っぽく */
}

/* Bottom Navigation */
.bottom-navigation {
  position: fixed;
  min-width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid var(--border);
  z-index: 1000000;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px;
  height: 120px;
  max-width: 448px;
  margin: 0 auto;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  color: #717182;
  transition: all 0.2s ease;
}


/*  絵文字の時
.menu-icon {
font-size: 20px;
margin-bottom: 4px;
line-height: 1;
}
 */

.menu-icon img {
  width: 20px;
  height: 20px;
}

.menu-label {
  font-size: 12px;
  line-height: 1;
  text-align: center;
}



footer {
  width: 100%;
  margin: 0 auto;
  padding: 5px;
  color: #fff;
  background-color: var(--main);

}

.onlyforplandetail {
  padding: 8px 8px 185px 8px;
}

footer .copyright {
  font-size: 10px;
  text-align: center;
}

footer .rules {
  padding: 1em 0 180px;
}

footer li {
  padding: .3em 0;
}

footer li a {
  color: #fff;
  text-align: left;
}


nav.footer-menu {
  z-index: 10000;
  position: sticky;
  position: -webkit-sticky;
  top: 100;
  bottom: -1px;
  min-width: 100%;
}

.footer-menu ul {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  padding: 0 .5em 0 .5em;
  border-top: .5px solid var(--border);
  background-color: #ffffff;
}

.footer-menu ul li {
  width: 25%;
  padding: 0 0 .5em;

}

.footer-menu ul li a {
  display: block;
  width: 100%;
}


.footer-menu ul li img {
  padding: .25em;
  max-width: 40px;

}

.footer-menu ul li p {
  color: var(--mjdrgr);
  font-size: .85em;
  font-weight: 600;

}

.important-notes {
  padding: 16px;
  border-radius: var(--radius);
}

/* 
background: var(--muted);
border-left: 4px solid var(--b-left);  */

.important-title {
  color: var(--muted-foreground);
  font-weight: var(--font-weight-medium);
  margin-bottom: 8px;
}

.important-list {
  list-style: none;
  font-size: 12px;
  color: var(--muted-foreground);
  display: grid;
  gap: 4px;
  line-height: 1.5;
}

.important-list-check {
  display: flex;
  gap: 6px;
}

.important-list-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--main);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}

.important-list-check label {
  cursor: pointer;
  line-height: 1.7;
}

/* チェックボックス（14px）＋gap（6px）分だけ字下げ */
.important-list li:not(.important-list-check) {
  padding-left: 20px;
}


/*************************************************************  pagination  ******************************************************************************************/
/*************************************************************  pagination  ******************************************************************************************/
/*************************************************************  pagination  ******************************************************************************************/



    /* pagination */
    /* pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.pagination li {
  margin: 0;
}

.pagination li a,
.pagination li .dots {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: all .15s;
}

.pagination li a:hover {
  border-color: var(--main);
  background: var(--main-light);
  color: var(--main);
}

.pagination li.current a {
  background: var(--main);
  border-color: var(--main);
  color: #fff;
  font-weight: 500;
}

.pagination .prev a,
.pagination .next a {
  padding: 0 14px;
}

.pagination .next {
  margin-left: 4px;
}

.pagination .dots {
  border: none;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
}




/*************************************************************  review  ******************************************************************************************/
/*************************************************************  review  ******************************************************************************************/
/*************************************************************  review  ******************************************************************************************/


/* レビュー全体のボックス */
.review-container {
  background-color: var(--card);
  border-top: 2px solid #ddd;
  padding: 15px 10px;
  margin: auto;
}

.review-card-content .container:first-of-type {
  margin-top: 10px;

}

.review-card-content .container:last-of-type {
  border-bottom: 2px solid var(--line);
}


.review-card-content .user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.review-card-content .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-card-content .user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-card-content .user-details {
  display: flex;
  flex-direction: column;
}

.review-card-content .user-info2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.review-card-content .stars {
  color: var(--yellow);
  font-size: 20px;
  line-height: 1;
}

.review-card-content .user-info {
  font-size: 14px;
  color: var(--muted-foreground);
}

.review-card-content .user-name {
  font-weight: bold;
}

.review-card-content .user-plan {
  color: var(--navy);
}

.review-card-content .date {
  font-size: 12px;
  color: var(--muted-foreground);
  text-align: right;
}

/* レビュー本文 */
.review-box p {
  line-height: 1.7;
  font-size: 13px;
  white-space: pre-line;
}

/* 画像 */
.img-box {
  padding: 12px 0;
}

.img-box img {
  width: 100%;
  object-fit: cover;
}

/* 返信部分 */
.reply-box {
  margin-top: 15px;
  font-size: 12px;
  background: var(--muted);
  border-left: 4px solid var(--b-left);
  padding: 16px;
  line-height: 1.6;
  border-radius: var(--radius);
}

.reply-box p:nth-of-type(1) {
  font-weight: bold;
  color: var(--primary);
  padding: 0 0 5px 0;
}

/* いいね・バッドボタン */
.like-buttons {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0 5px;
  align-items: center;
}

.like-buttons-button {
  display: inline-flex;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
  gap: 5px;
}

.like-buttons span {
  align-items: center;
}


/*************************************************************  review post ******************************************************************************************/



/* プラン名日付星 */
.reveiwPost-card-content .reveiwPost-plan,
.reveiwPost-card-content .date,
.reveiwPost-card-content .rating,
.reveiwPost-card-content .comment,
.offerDetail-card-content .offerDetail-plan,
.offerDetail-card-content .date,
.offerDetail-card-content .comment {
  display: flex;
  flex-direction: column;
  padding: 0 0 5px 0;
}

.reveiwPost-card-content .reveiwPost-plan-label,
.reveiwPost-card-content .date-label,
.reveiwPost-card-content .rating-label,
.reveiwPost-card-content .comment-label,
.offerDetail-card-content .offerDetail-plan-label,
.offerDetail-card-content .date-label,
.offerDetail-card-content .comment-label {
  font-size: 12px !important;
  font-weight: bold;
  color: var(--muted-foreground);
  padding: 0 0 3px;
}



.reveiwPost-card-content .reveiwPost-plan-name,
.reveiwPost-card-content .date-value,
.reveiwPost-card-content .comment-textarea,
.reveiwPost-card-content .image label,
.offerDetail-card-content .offerDetail-plan-name,
.offerDetail-card-content .date-value,
.offerDetail-card-content .comment-textarea {
  border-radius: 8px;
}


.reveiwPost-card-content .reveiwPost-plan-name,
.reveiwPost-card-content .date-value,
.offerDetail-card-content .offerDetail-plan-name,
.offerDetail-card-content .date-value {
  margin: 0;
  padding: 12px 16px;
  background-color: var(--muted);
  color: var(--primary);
  font-weight: 500;
}


.reveiwPost-card-content .star-rating {
  display: flex;
  padding-bottom: 5px;
}

.reveiwPost-card-content .star-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
  transition: all 0.2s ease;
}

.reveiwPost-card-content .star-button:hover {
  transform: scale(1.1);
  background-color: #fef3c7;
}

.reveiwPost-card-content .star-icon {
  font-size: 28px;
  transition: color 0.2s ease;
}

.reveiwPost-card-content .star-filled {
  color: #f59e0b;
}

.reveiwPost-card-content .star-empty {
  color: var(--b-left);
}

.reveiwPost-card-content .star-empty:hover {
  color: #fbbf24;
}

.reveiwPost-card-content .comment-textarea,
.offerDetail-card-content .comment-textarea {
  padding: 12px 16px;
  border: 1px solid var(--input-background2);
  resize: vertical;
  white-space: pre-line;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s ease;
  min-height: 100px;
}

.reveiwPost-card-content .comment-textarea:focus,
.offerDetail-card-content .comment-textarea:focus {
  outline: none;
  border-color: var(--main);
  box-shadow: 0 0 0 3px var(--focus);
}

.reveiwPost-card-content .comment-textarea::placeholder,
.offerDetail-card-content .comment-textarea::placeholder {
  color: var(--muted-foreground);
}

/* 画像 */
.reveiwPost-card-content .image label {
  text-align: center;
  display: block;
  width: 100%;
  border: 1px solid var(--input-background2);
}

.reviewscpic {
  padding: 24px 0;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  width: 35px;

}

.reviewpic-delete {
  margin: 8px 0;
  text-align: right;
}


.reviewpic-delete button {
  border: 1px solid var(--input-background2);
  background-color: var(--input-background);
  color: var(--muted-foreground);
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;


}

.reviewpic-delete button i {
  padding-right: 5px;

}

.reviewpic-delete button:focus {
  background-color: var(--muted);
}

.offerDetail-card-content:not(:last-of-type) {
  padding-bottom: 20px;
  border-bottom: 1px dotted var(--line);
}


/*************************************************************  offerList  ******************************************************************************************/
/*************************************************************  offerList  ******************************************************************************************/
/*************************************************************  offerList  ******************************************************************************************/

.card-header img {
  width: 100%;
  margin-bottom: .5em 0 1em;
}

.forx .forximg img {
  margin: 0 auto;
}


.forx p {
  margin: 0 auto;
}


.forx .forximg .linedot {
  margin: 1em auto;
}
    .offerList-card-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }


    .plan-card {
      background: var(--card);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 6px rgba(13,27,42,0.06);
      border-left: 5px solid var(--main);
    }

    .plan-card a {
      display: block;
    }

    .plan-header {
      padding: 16px 18px 12px;
      background: white;
    }

    .plan-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .plan-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .plan-icon.published {
      background: var(--main-lighter);
      color: var(--main);
    }

    .plan-icon.unpublished {
      background: var(--input-background2);
      color: var(--navy);
    }

    .plan-icon i {
      font-size: 24px;
    }

    .plan-title-content {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .plan-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      margin: 0;
      line-height: 1.4;
    }

    .badge {
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .badge.published {
      background: var(--main);
      color: white;
    }

    .badge.unpublished {
      background: #6B7280;
      color: white;
    }

    .plan-content {
      padding: 0 18px 16px;
    }

    .plan-info-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
          margin-left: 14px;
    }

    .plan-date {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text);
      font-weight: 400;
    }

    .plan-date i {
      font-size: 14px;
      color: var(--text-sub);
    }

    .inquiry-button {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 400;
      color: var(--text);
      cursor: pointer;
      transition: all 0.15s;
    }

    .inquiry-button:hover {
      border-color: var(--main);
      color: var(--main);
    }

    .inquiry-button i {
      font-size: 13px;
    }

    .publish-times {
      background: var(--muted);
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .publish-time-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .publish-time-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 400;
      color: var(--b-gray);
    }

    .publish-time-label::before {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .publish-time-label.publish-start::before {
      background: var(--koigreen);
    }

    .publish-time-label.publish-end::before {
      background: var(--red);
    }

    .publish-time-value {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
    }
/*************************************************************  planOrder  ******************************************************************************************/
/*************************************************************  planOrder  ******************************************************************************************/
/*************************************************************  planOrder  ******************************************************************************************/

.planorder-card-content>div {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}

.event-header {
  background: linear-gradient(to right, var(--main), var(--orange));
  padding: 24px;
  color: white;
}

.event-header h2 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-medium);
  margin-bottom: 8px;
}

.event-header p {
  opacity: 0.9;
}

.planorder-content {
  padding: 10px;
}

.planorder-grid {
  display: grid;
  gap: 16px;
}

.planorder-info {
  display: grid;
  gap: 16px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.info-label {
  color: var(--b-gray);
  font-weight: var(--font-weight-medium);
}

.info-value {
  color: var(--primary);
  font-weight: var(--font-weight-medium);
}

.benefits-section {
  background: linear-gradient(to right, var(--green), var(--blue));
  border-radius: var(--radius);
  padding: 16px;
  color: white;
  position: relative;
  overflow: hidden;
}

.benefits-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -90%;
  width: 100%;
  height: 100%;
  background: linear-gradient(75deg, transparent, rgba(255, 255, 255, 0.317), transparent);
  animation: shine 2.5s ease-in-out infinite;
  animation-delay: .5s;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.benefits-title img,
.points-title img {
  width: 20px;
  height: 20px;
  align-items: center;
}


.benefits-title {
  font-weight: var(--font-weight-medium);
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.benefits-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.benefits-present {
  font-weight: 700;
}

.points-section {
  background: var(--input-background);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--line);
}

.points-title {
  color: var(--primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}

.points-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.points-balance span:first-child {
  color: var(--muted-foreground);
}

.points-balance span:last-child {
  color: var(--primary);
  font-weight: var(--font-weight-medium);
}

.points-select-container {
  display: grid;
  gap: 8px;
}

.points-select-container .select-label {
  font-size: 12px;
  color: var(--muted-foreground);
  font-weight: var(--font-weight-normal);
}

.points-select-container .point-select {
  width: 100%;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: var(--font-size);
  color: var(--primary);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23777' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

.points-select-container .point-select:hover {
  border-color: var(--main);
}

.points-select-container .point-select:focus {
  outline: none;
  border-color: var(--main);
  box-shadow: 0 0 0 2px var(--focus);
}


.ticket-details {
  background: var(--main-clear);
  border-radius: var(--radius);
  padding: 16px;
}

.ticket-title {
  color: var(--main);
  font-weight: var(--font-weight-medium);
  margin-bottom: 16px;
}

.ticket-rows {
  display: grid;
  gap: 12px;
}

.ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-row.discount {
  font-size: 12px;
}

.ticket-row.discount .label {
  color: var(--green);
}

.ticket-row.discount .value {
  color: var(--green);
  font-weight: var(--font-weight-medium);
}

.ticket-row.total {
  border-top: 1px solid var(--main);
  padding-top: 12px;
}

.ticket-row.total .label {
  color: var(--main);
  font-weight: var(--font-weight-medium);
  font-size: 1.125rem;
}

.ticket-row.total .value {
  color: var(--main);
  font-weight: var(--font-weight-medium);
  font-size: 1.25rem;
}

/*************************************************************  free planlist  ******************************************************************************************/
/*************************************************************  free planlist  ******************************************************************************************/
/*************************************************************  free planlist  ******************************************************************************************/
.planfree-list-grid .planshop-image {
  height: 100%;

}

/*************************************************************  planlist  ******************************************************************************************/
/*************************************************************  planlist  ******************************************************************************************/
/*************************************************************  planlist  ******************************************************************************************/


/* ── Card list ── */
.planshop-card-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Card grid ── */
.product-card {
  position: relative;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(13, 27, 42, .09);
  display: grid;
  grid-template-columns: 1fr 190px;
  grid-template-rows: auto auto auto auto auto;
}

/* ── Ribbon (row 1, full width) ── */
.ribbon {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}

/* 無料 → ネイビー */
.ribbon.freetag {
  background: linear-gradient(90deg, #0D1B2A, #1a3554);
  color: #fff;
}

/* SALE → オレンジ */
.ribbon.salesale {
  background: linear-gradient(90deg, #ff5a1a, #FF7A00, #ff9a3c);
  color: #fff;
}

/* RECOMMENDED → オレンジ（金色帯廃止） */
.ribbon.recommended {
  background: linear-gradient(90deg, #ff5a1a, #FF7A00, #ff9a3c);
  color: #fff;
}

/* ── product-content (col 1, row 2) ── */
.product-content {
  grid-column: 1;
  grid-row: 2;
  padding: 12px 8px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.region-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  line-height: 1.7;
}

/* 無料タグ → ネイビー */
.region-tag.muryo {
  background: rgba(13, 27, 42, .12);
  color: #0D1B2A;
}

/* 中央タグ → グリーン */
.region-tag.chuoo {
  background: rgba(22, 110, 50, .12);
  color: #166432;
}

/* 地方タグ → ブラウン */
.region-tag.tihoo {
  background: rgba(120, 60, 15, .12);
  color: #7c3c0f;
}

/* 特選・安定タグ → ゴールド */
.region-tag.tokusen {
  background: rgba(212, 175, 55, .18);
  color: #8a6f00;
}

.region-tag.antei {
  background: rgba(212, 175, 55, .18);
  color: #8a6f00;
}

.product-title-new {
  font-size: 15px;
  font-weight: 800;
  color: #0D1B2A;
  line-height: 1.3;
}

.product-description {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

/* ── product-image-section (col 2, row 2) ── */
.product-image-section {
  grid-column: 2;
  grid-row: 2;
  padding: 10px 12px 8px 4px;
  display: flex;
  align-items: flex-start;
}

.product-image-wrapper {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #e5e7eb;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── plan-product-info (row 3, full width) ── */
.plan-product-info {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  background: #f8f9fc;
  border-top: 1px solid #eef0f5;
  border-bottom: 1px solid #eef0f5;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 11px;
  color: #64748b;
}

.info-item:first-child {
  border-right: 1px solid #eef0f5;
}

/* ── plan-price-container (row 4, full width) ── */
.plan-price-container {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  align-items: stretch;
  padding: 10px 12px 4px 14px;
  gap: 8px;
}

.price-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
  line-height: 1.6;
}

.plan-discount-price {
  display: none;
}

.plan-original-price {
  font-size: 24px;
  font-weight: 900;
  color: #FF7A00;
  letter-spacing: -.02em;
}

.vfree .plan-original-price {
  font-size: 26px;
}

.stats-box {
  flex: 1;
  background: var(--hover);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.stats-label {
  font-size: 9px;
  color: #9ca3af;
  line-height: 1.4;
}

/* 推奨投資額 → ゴールド */
.stats-value {
  font-size: 13px;
  font-weight: 800;
  color: #D4AF37;
  line-height: 1.2;
}

.stats-amount {
  font-size: 9px;
  color: #64748b;
  line-height: 1.3;
}

/* ── card-buttons (row 5, full width) ── */
.card-buttons {
  grid-column: 1 / -1;
  grid-row: 5;
  display: grid;
  gap: 8px;
  padding: 8px 12px 12px;
}

.purchase-button {
  flex: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 10px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #ff5a1a, #FF7A00, #ff9a3c);
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 122, 0, .35);
  width: 100%;
}

.detail-button {
  flex: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  border: 1px solid var(--navy);
  color: var(--navy);
  background: var(--card);
  width: 100%;
}

/* ── Soldout overlay ── */
.soldout {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

.soldout-text {
  font-size: 14px;
  font-weight: 700;
  color: #0D1B2A;
  text-align: center;
  line-height: 1.8;
  background: var(--card);
  padding: 12px 20px;
  border-radius: 10px;
  border: 2px solid #eef0f5;
  box-shadow: 0 4px 14px rgba(13, 27, 42, .10);
}


/*************************************************************  plan Detail  ******************************************************************************************/
.planDetail-card-content img {
  width: 100%;
  height: 100%;
}

.chuo {
  color: var(--koigreen);
}

.tihou {
  color: var(--brown);
}


/* product-info */
.planDetail-card-content .product-info {
  padding: 20px 18px 24px;
}

.planDetail-card-content .product-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.4;
  margin: 0 0 14px;
}

.planDetail-card-content .region {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 2px;
  vertical-align: middle;
}

.planDetail-card-content .region.chuo {
  background: var(--koigreen);
  color: #fff;
  border: 1px solid var(--color-item-border);
}

.planDetail-card-content .region.tihou {
  background: var(--brown);
  color: #fff;
  border: 1px solid var(--color-item-border);
}

/* price-section */
.planDetail-card-content .price-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.planDetail-card-content .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--red);
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

.planDetail-card-content .current-price {
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.8px;
  line-height: 1;
}

.planDetail-card-content .original-price {
  font-size: 14px;
  color: var(--muted-foreground);
  font-weight: 500;
  text-decoration: line-through;
}

/* service-cards */
.planDetail-card-content .service-cards {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-item-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.planDetail-card-content .benefit-card,
.planDetail-card-content .service-card {
  border-left: 5px solid #ff9a3c;
  border-bottom: 1px solid var(--color-item-border);
}

.planDetail-card-content .benefit-card:last-child,
.planDetail-card-content .service-card:last-child {
  border-bottom: none;
}

.planDetail-card-content .benefit-card .card-content,
.planDetail-card-content .service-card .card-content {
  padding: 12px 16px;
}

.planDetail-card-content .service-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.planDetail-card-content .benefit-card .service-content span {
  font-size: 13px;
}

.planDetail-card-content .benefit-card .service-amount span {
  color: var(--main);
  font-weight: 600;
}

.planDetail-card-content .service-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.planDetail-card-content .service-title {
  font-size: 13px;
  color: var(--muted-foreground);
  font-weight: 400;
  margin: 0;
}

.planDetail-card-content .service-amount {
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
  margin: 0;
}

/* description */
.planDetail-card-content .planDetail-desc-label {
  display: block;
  font-size: 12px;
  color: var(--muted-foreground);
  font-weight: 400;
  margin-bottom: 8px;
}

.planDetail-card-content .planDetail-discription-content {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.8;
  margin-bottom: 28px;
  padding: 14px 16px;
  background: var(--muted);
  border-radius: 10px;
  border: 1px solid var(--color-item-border);
  white-space: pre-line;
}

/* purchase-bar */
.planDetail-card-content .purchase-bar, .planjump-bar {
  padding:  16px 16px 0 16px;

}

.planDetail-card-content .purchase-btn, .planjump-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 14px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #ff5a1a, #FF7A00);
  border: 2px solid transparent;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: .2s;

}

.planDetail-card-content .purchase-btn:hover,
 .planjump-btn:hover{
  background: #fff;
  color: var(--main);
  border-color: var(--main);
}

/*************************************************************  notification Detail  ******************************************************************************************/
/*************************************************************  notification Detail  ******************************************************************************************/







    /* hero banner */
    .notif-hero {
      position: relative;
      width: 100%;
      height: 120px;
      background: linear-gradient(135deg, #FF7A00 0%, #FF5500 60%, #cc3300 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 20px;
      overflow: hidden;
    }

    .notif-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 8px,
        rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 16px
      );
      pointer-events: none;
    }

    .notif-hero-icon {
      font-size: 32px;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
      position: relative;
    }

    .notif-hero-title {
      font-size: 18px;
      font-weight: 600;
      color: white;
      line-height: 1.3;
      text-shadow: 0 1px 3px rgba(0,0,0,0.2);
      position: relative;
    }

    /* notif-date */
    .notif-date {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      padding: 10px 20px 0;
      font-size: 12px;
      color: var(--muted-foreground);
    }

    .notif-date i {
      font-size: 13px;
      color: var(--main);
      flex-shrink: 0;
    }

    /* notificationDetail-card-content */
    .notificationDetail-card-content {
      padding: 16px 20px 22px;
    }

    /* article-content */
    .article-content {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 20px;
    }

    .article-content > p {
      font-size: 13px;
      color: var(--primary);
      line-height: 1.7;
      margin: 0;
            white-space: pre-line;
    }


    /* planjump-bar */
    .planjump-bar { margin-bottom: 0; }

    .planjump-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 14px 20px;
      background: linear-gradient(135deg, #ff5a1a, #FF7A00);
      color: white;
      font-size: 15px;
      font-weight: 500;
      border-radius: 12px;
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: background 0.15s;
    }

    .planjump-btn i { font-size: 16px; }

    /* notif-footer */
    .notif-footer {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px 6px;
    }

    .notif-footer-line {
      flex: 1;
      height: 2px;
      background: var(--line);
    }

    .notif-footer-text {
      font-size: 12px;
      color: var(--muted-foreground);
      white-space: nowrap;
    }



/* 記事ヘッダー */
.article-header {
  margin-bottom: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);

}

.article-title {
  font-size: 16px;
  font-weight: 600;
  padding: 0 6px 9px 6px;
  letter-spacing: 0.01em;
  color: var(--foreground);
}

.article-date {
  color: var(--muted-foreground);
  /* muted-foreground色 */
  font-size: 14px;
  display: block;
  text-align: right;

}

/* 記事コンテンツ */
.article-content {
  margin-bottom: 32px;
  max-width: none;
}




/*************************************************************  notificationList  ******************************************************************************************/

.notificationList-card-content {
  background-color: #ffffff;
  min-height: 100vh;
  font-family: 'Noto Sans JP', sans-serif;
}

.notification-list {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-item {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(13, 27, 42, 0.09);
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.15s ease;
}

.notification-item:hover {
  box-shadow: 0 4px 20px rgba(13, 27, 42, 0.15);
}

.notification-item a {
  display: block;
  text-decoration: none;
  padding: 14px 16px 14px 0;
}

/* 未読の左ライン */
.lining {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #E86F00 0%, #FF7A00 50%, #FF9D1E 100%);
  border-radius: 10px 0 0 10px;
}

.notification-item.unread .lining {
  display: block;
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
}

.notification-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.unread .notification-icon {
  background: linear-gradient(135deg, #E86F00 0%, #FF7A00 50%, #FF9D1E 100%);
}

.read .notification-icon {
  background: linear-gradient(135deg, #147B85 0%, #1d8992 45%, #25A8B3 100%);
}



.notification-icon i {
  color: #fff;

}


.notification-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 未読ドット */
.unread-mark {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E86F00 0%, #FF7A00 50%, #FF9D1E 100%);
  margin: 0;
}

.notification-item.read .unread-mark {
  background: transparent;
}

.notification-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.notification-item.read .notification-title {
  color: var(--color-text-secondary);
  font-weight: 400;
}

.notification-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.notification-date {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  margin: 0;
}

.notification-badge-new {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--main);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.notification-arrow {
  color: #8a9bb0;
  flex-shrink: 0;
}


/*************************************************************  pointCharge  ******************************************************************************************/
/*************************************************************  pointCharge  ******************************************************************************************/
/*************************************************************  pointCharge  ******************************************************************************************/

/* 現在のポイント表示 */
.point-card-header,
.package-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px 20px 15px;
  border: 1px solid var(--line);
  border-radius: 5px;
  transition: background-color 0.2s ease;
  color: var(--card);
}

.countdown-banner {
  background: var(--red);
  color: white;
  text-align: center;
  padding: 12px 20px;
  margin-bottom: 12px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 600;
}

.countdown-banner strong {
  font-size: 20px;
  margin: 0 5px;
}


.point-card-header {
  background: linear-gradient(to right, var(--main), var(--red));
  margin-bottom: 12px;
}

.point-card-band {
  display: grid;
  gap: 16px;
}

/* パッケージアイテム */
.package-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package-item:hover {
  background-color: var(--muted-second);
  border-color: var(--main);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}


.points-number {
  padding: 0 10px;
  font-size: 30px;
  font-weight: 500;
  color: var(--card);
}

.points-value {
  font-size: 14px;
  color: var(--muted-foreground);
}

/* パッケージ情報 */
.package-info {
  flex: 1;
}

.package-header {
  display: inline-block;
  align-items: center;
  gap: 6px;
}

.package-points {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
}

.package-price {
  font-size: 12px;
  text-decoration: line-through;
  color: var(--muted-foreground);
  vertical-align: text-bottom;

}

.package-discount-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
}

.package-discount-price::before {
  content: "⇒";
  padding-right: 2px;
  vertical-align: top;

}



.package-item button {
  border: none;


}



/* 購入ボタン */
.buy-button {
  background-color: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 16px;
  transition: background-color 0.2s ease;

}

.buy-button:hover {
  background-color: var(--primary);
}

.buy-button:active {
  background-color: var(--card-foreground);
}

.package-item .select {
  background-color: var(--main)
}

/* 選択状態がある時：選択中以外は透明 */
.has-selection .buy-button:not(.select) {
  background-color: var(--muted) !important;
}



/* 　初回以降  */
.second {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.second .package-item {
  cursor: pointer;
  position: relative;
  transition: all 0.4s ease;
  flex-wrap: wrap;
  gap: 16px;
}

.second package-points {
  flex-shrink: 0;
}

.second .package-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.second .price-section {
  text-align: right;
  line-height: 1.5;
}

.second .package-price {
  display: block;
}

.second .package-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
}

.second .package-bills {
  color: var(--primary);
  font-weight: 600;
  font-size: 18px;
  display: block;
}

.second .package-discount-bills {
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
}




.payment {
  display: grid;
  gap: 12px;
}

.payment p {
  text-align: center;
  display: block;
  width: 100%;
}

.payment i {
  padding: 0 5px 0 0;
}

.payment button {
  background-color: var(--card);
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
}



.payment img {
  margin: 0 auto;
  width: 20%;
  padding-top: 8px;
  display: block;
}

.point-card-history {
  width: 100%;
  margin: 0 auto 16px;
  text-align: center;
  border: none;

}

.point-card-history a {
  background-color: var(--card);
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  transition: background-color 0.2s;
  display: block;
  cursor: pointer;
}

/*************************************************************  point history  ******************************************************************************************/

.history-list {
  list-style: none;
  padding: 0 0 16px;
  margin: 0;
  display: grid;
  gap: 12px;
}

.history-item {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.history-item:hover {
  background-color: var(--hover);
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.history-item-title {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--primary);
  margin: 0;
}

.history-item-points {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.history-item-points.positive {
  color: var(--main);
}

.history-item-points.negative {
  color: var(--blue);
}

.history-item-description {
  font-size: 14px;
  color: var(--muted-foreground);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.history-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-item-date {
  font-size: 12px;
  color: var(--gray);
  margin: 0;
}

.positive-board {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #E86F00 0%, #FF7A00 50%, #FF9D1E 100%);

}

.negative-board {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #147B85 0%, #1d8992 45%, #25A8B3 100%);

}

/*************************************************************  performance List  ******************************************************************************************/
/*************************************************************  performance List  ******************************************************************************************/
/*************************************************************  performance List  ******************************************************************************************/



/* performance cards */
.performance-card-content {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
}

.performance-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.performance-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 4px var(--muted);
  border: 1px solid var(--line);

}

.performance-content {
  display: flex;
  align-items: stretch;
}

.performance-details {
  flex: 1;
  padding: 13px 16px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  border-left: 4px solid var(--main);
}

.performance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.performance-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-date {
  font-size: 11px;
  color: var(--muted-foreground);
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

.performance-place {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted-foreground);
  font-weight: 400;
  margin: 0;
}

.performance-place svg {
  width: 12px;
  height: 12px;
  color: var(--main);
  opacity: 0.7;
  flex-shrink: 0;
}

.performance-case {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted-foreground);
  font-weight: 400;
  margin: 0;
}

.performance-case svg {
  width: 11px;
  height: 11px;
  color: var(--main);
  flex-shrink: 0;
}

.performance-pricing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}

.performance-price {
  font-size: 22px;
  font-weight: 500;
  color: var(--main);
  letter-spacing: -0.5px;
  line-height: 1;
  padding-left: 10px;
  border-left: 2px solid var(--main);
}

.performance-hit-price {
  font-size: 12px;
  font-weight: 500;
  color: var(--main);
  line-height: 1.2;
}







/*************************************************************  chat support  ******************************************************************************************/
/*************************************************************  chat support  ******************************************************************************************/
/*************************************************************  chat support  ******************************************************************************************/


/* Chat List Styles */
.chat-list {
  flex: 1;
  overflow-y: auto;
}

.chat-item {
  padding: 16px 5px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.2s;
}

.chat-item:hover {
  background-color: var(--hover);
}

.chat-item-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-container {
  position: relative;
  flex-shrink: 0;
}

.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.chat-info {
  flex: 1;
  min-width: 0;
}

.chat-header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.chat-name {
  font-weight: var(--font-weight-medium);
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
  line-height: 1.5;
}

.chat-time {
  font-size: 12px;
  color: var(--gray);
  flex-shrink: 0;
  margin-left: 8px;
}

.chat-message-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-message {
  font-size: 12px;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-weight: var(--font-weight-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.unread-badge {
  margin-left: 8px;
  min-width: 1.25rem;
  height: 1.25rem;
  background-color: var(--main);
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: var(--font-weight-medium);
}

/* Icon styles */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/*************************************************************  supportChat  ******************************************************************************************/


.inchat-card-content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.inchat-card-content .chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background-color: var(--card);
  display: flex;
  align-items: center;
  gap: 12px;
}

.inchat-card-content .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--green);
}

.inchat-card-content .header-title {
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--primary);
}

.inchat-card-content .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background-color: var(--input-background);
}

.inchat-card-content .message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.inchat-card-content .message.user {
  justify-content: flex-end;
}

.inchat-card-content .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inchat-card-content .avatar.support {
  margin-right: 10px;
}

.inchat-card-content .message-bubble {
  padding: 12px 16px;
  border-radius: var(--radius);
  max-width: 70%;
  position: relative;
}

.inchat-card-content .message-bubble.support {
  background-color: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.inchat-card-content .message-bubble.user {
  background-color: var(--main);
  color: white;
}

.inchat-card-content .message-text {
  margin: 0;
  line-height: 1.5;
}

.inchat-card-content .message-time {
  text-align: right;
  font-size: 12px;
  margin-top: 4px;
}

.inchat-card-content .message-bubble.support .message-text {
  color: var(--card-foreground);
}


.inchat-card-content .chat-input-area {
  padding: 10px;
  border-top: 1px solid var(--border);
  background-color: var(--card);
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 142px;
  z-index: 10000;
}

.inchat-card-content .input-container {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.inchat-card-content .attach-button {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--input-background);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.inchat-card-content .attach-button i {
  font-size: 20px;
  color: var(--gray);
}

.inchat-card-content .attach-button:hover {
  background-color: var(--hover);
  border-color: var(--main);
}

.inchat-card-content .text-input-wrapper {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--input-background);
  min-height: 40px;
  max-height: 120px;
  position: relative;
  transition: all 0.2s ease;
}

.inchat-card-content .text-input-wrapper.focused {
  border-color: var(--main);
  background-color: var(--focus);
}

.inchat-card-content .text-input {
  width: 100%;
  min-height: 40px;
  max-height: 120px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--primary);
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
}

.inchat-card-content .text-input::placeholder {
  color: var(--gray);
}

.inchat-card-content .send-button {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: none;
  background-color: var(--main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.inchat-card-content .send-button i {
  font-size: 20px;
  color: #fff;
}

.inchat-card-content .send-button:hover {
  background-color: #a67800;
  transform: scale(1.05);
}

.inchat-card-content .send-button:active {
  transform: scale(1);
}

/*************************************************************  mypage  ******************************************************************************************/
/*************************************************************  mypage  ******************************************************************************************/
/*************************************************************  mypage  ******************************************************************************************/

.mypage-card-content .form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mypage-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mypage-form-group .label {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--primary);
  margin: 0;
}

.mypage-form-group .input {
  width: 100%;
  padding: 8px 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--input-background);
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.mypage-form-group .input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--border);
}

.mypage-form-group .select {
  position: relative;
  width: 100%;
}

.mypage-form-group .select-trigger {
  width: 100%;
  padding: 8px 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--input-background);
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.mypage-form-group .select-trigger:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--border);
}

.mypage-form-group .select-trigger::after {
  content: "▼";
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.mypage-form-group .select-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.mypage-form-group .select-content.open {
  display: block;
}

.mypage-form-group .select-item {
  padding: 8px 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mypage-form-group .select-item:hover {
  background-color: var(--muted);
}

.mypage-form-group .select-item.selected {
  background-color: var(--primary);
  color: var(--muted);
}

.mypage-form-group .birth-date {
  display: flex;
  gap: 8px;
}

.mypage-form-group .birth-date>.select {
  flex: 1;
}

.mypage-form-group .radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mypage-form-group .radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mypage-form-group .radio-input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.mypage-form-group .radio-label {
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  color: var(--primary);
  cursor: pointer;
}

.button {
  width: 100%;
  padding: 8px 16px;
  background-color: var(--main);
  color: var(--muted);
  border: none;
  border-radius: calc(var(--radius) - 2px);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 8px;
}

.button a {
  color: var(--muted);
  width: 100%;
}

.button:hover {
  background-color: var(--main-clear);
  color: var(--main);
}

.button:hover a {
  color: var(--main);
}

.button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--main);
}

.placeholder {
  color: var(--muted-foreground);
}






/*************************************************************  hajimeni  ******************************************************************************************/
/*************************************************************  hajimeni  ******************************************************************************************/
/*************************************************************  hajimeni  ******************************************************************************************/


/* =========================================
 * メインコンテンツ
 * ========================================= */
.introduction-main-section {
  padding: 32px 20px;
}

.intro-section {
  margin-bottom: 64px;
}

/* セクション見出し */
.intro-section-header {
  text-align: center;
  margin-bottom: 32px;
}

.intro-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #8a9987;
  display: block;
  font-family: Arial, sans-serif;
}


.intro-section-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.intro-section-line {
  width: 24px;
  height: 1px;
  background-color: #8a9987;
  margin: 16px auto 0;
}


/* 本文テキスト */
.intro-text-body {
  font-size: 14px;
  line-height: 2.2;
  color: #4a5548;
  margin: 24px 0;
  white-space: pre-line;
}

/* =========================================
 * 吹き出し（チャット）コンポーネント
 * ========================================= */
.intro-chat-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 1em;
}

.intro-chat-wrapper.right {
  flex-direction: row-reverse;
}

.intro-chat-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 4px;
}

.intro-chat-bubble {
  background-color: #f0f3eb;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e1e5dd;
  font-size: 14px;
  line-height: 1.8;
  color: #2f3e2e;
  position: relative;
}

.intro-chat-bubble-x {
  background-color: #f3f2eb;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e5e4dd;
  font-size: 14px;
  line-height: 1.8;
  color: #3e3b2e;
  position: relative;
}

.intro-chat-bubble.white {
  background-color: #ffffff;
  color: #4a5548;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* =========================================
 * 現状チェック
 * ========================================= */
.intro-status-check-box {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid #e1e5dd;
}

.intro-status-title {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.intro-status-text {
  font-size: 14px;
  line-height: 2;
  color: #4a5548;
  text-align: left;
  margin-bottom: 24px;
  white-space: pre-line;
}

.intro-arrow-down {
  color: #8a9987;
  font-size: 20px;
  animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* =========================================
 * チェックポイントのカード（スマホ向け立体デザイン）
 * ========================================= */
.intro-checkpoints-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 24px;
}

.intro-check-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  border: 1px solid #e1e5dd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* 上部に飛び出すバッジ */
.intro-check-badge-wrapper {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  padding: 4px;
  border-radius: 50%;
  border: 1px solid #e1e5dd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.introduction-point .intro-chat-wrapper {
  display: block;

}

.introduction-point .intro-section-label {
  color: #878e99;
}

.introduction-point .intro-section-line {
  background-color: #878e99;
}

/* 本文テキスト */
.introduction-point .intro-text-body {
  color: #484b55;
}

.introduction-point .intro-chat-bubble {
  background-color: #ebf0f3;
  border: 1px solid #dde1e5;
  color: #484b55;
}

.introduction-point .intro-status-check-box {
  border: 1px solid #dde1e5;
}

.introduction-point .intro-status-text {
  color: #484b55;
}

.introduction-point .intro-arrow-down {
  color: #878899;
}

.introduction-point .intro-check-card {
  border: 1px solid #dde1e5;
}

.introduction-point .intro-check-badge-wrapper {
  border: 1px solid #dde1e5;
}

.introduction-point .intro-check-badge {
  background-color: #5a6d8c;
}

.introduction-point .intro-check-desc {
  color: #484b55;

}


/* カード内のミニ吹き出しアドバイス */
.introduction-point .intro-check-advice {
  background-color: #ebf3f3;
}

.introduction-point .intro-check-advice.white-bg {
  border: 1px solid #dde1e5;
}

.introduction-point .intro-advice-text {
  color: #484b55;
}

.introduction-point .intro-advice-text strong {
  color: #3d74c1;
}

.yellow {
  background-color: #ebf0f3;
  border: 1px solid #dde1e5;
  color: #484b55;
}



.intro-check-badge {
  width: 40px;
  height: 40px;
  background-color: #6b8c5a;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  font-family: Arial, sans-serif;
}

.intro-check-content {
  margin-top: 24px;
}

.intro-check-title {
  font-size: 17px;
  font-weight: bold;
  text-align: center;
}

.intro-check-desc {
  font-size: 14px;
  line-height: 2;
  color: #4a5548;
  margin-bottom: 16px;
  white-space: pre-line;

}

/* カード内のミニ吹き出しアドバイス */
.intro-check-advice {
  background-color: #f0f3eb;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(225, 229, 221, 0.5);
}

.intro-check-advice.white-bg {
  background-color: #ffffff;
  border: 1px solid #e1e5dd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.intro-advice-icon {
  font-size: 20px;
}

.intro-advice-text {
  font-size: 14px;
  letter-spacing: .5px;
  line-height: 1.8;
  color: #4a5548;
  font-family: "Helvetica Neue", Arial, sans-serif;
  /* アドバイス部分は読みやすくゴシック系 */
  padding-top: 2px;
}

/* =========================================
 * まとめセクション
 * ========================================= */
.intro-summary-box {
  padding: 32px;
  border-radius: 16px;
  text-align: center;

}

.green {
  background-color: #e9eee5;
  border: 1px solid #dce3d6;
  color: #4a5548;
}

.navy {
  line-height: 2.2;
  color: white;
  background: linear-gradient(135deg, #1A2C42 0%, #2A4365 100%);
}

.black {
  line-height: 2.2;
  /*  background: linear-gradient(135deg, #b54b2825 0%, rgba(201, 130, 63, 0.121) 100%); */
  background-color: rgba(185, 119, 14, 0.1);

}

.intro-summary-icon {
  font-size: 28px;
  color: #6b8c5a;
  margin-bottom: 16px;
}

.intro-summary-title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.intro-summary-text {
  font-size: 14px;
  line-height: 2.2;
  white-space: pre-line;
  letter-spacing: 0.03em;
}

.intro-action-button {
  display: inline-block;
  margin: 28px auto 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-align: center;
  text-decoration: none;
  padding: 12px 24px;
  background-color: var(--main);
  width: 70%;

}


/*************************************************************  newjam  ******************************************************************************************/
/*************************************************************  newjam  ******************************************************************************************/
/*************************************************************  newjam  ******************************************************************************************/


/* ウェルカムメッセージ (リード文) */
.welcome-box {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 10px;
  margin: 56px 0 76px;
}

.welcome-badge {
  display: inline-block;
  background-color: #1A2C42;
  color: #D4AF37;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 10px rgba(26, 44, 66, 0.15);
}

.welcome-title {
  font-size: 22px;
  font-weight: bold;
  color: #1A2C42;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
}

.welcome-desc {
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: bold;
}

.desc-bl {
  color: #34495E;

}

.desc-bk {
  color: #141313;
}

.section {
  margin-bottom: 72px;
  /* 標準版のセクション余白 */
}

/* セクション見出し */
self-section-header {
  text-align: center;
  margin-bottom: 32px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #1A2C42;
}

.section-line {
  width: 30px;
  height: 2px;
  background-color: #1A2C42;
  margin: 16px auto;
}

.section-line.accent {
  background-color: #B9770E;
  /* 注意が必要なセクション */
}

/* =========================================
 * サイト名
 * ========================================= */


.site-name-en {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #1A2C42;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.site-name-kana {
  font-size: 11px;
  color: #7F8C8D;
  letter-spacing: 0.05em;
}

.site-name-divider {
  width: 30px;
  height: 1px;
  background-color: rgba(26, 44, 66, 0.1);
  margin: 16px auto;
}

.site-name-ja {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.08em;
}

/* 注意書き（読み飛ばしOK/NG） */
.notice-ok {
  font-size: 13px;
  color: #7F8C8D;
  font-weight: bold;
  margin-top: 8px;
  letter-spacing: 0.05em;
}

.notice-ng {
  font-size: 14px;
  color: #B9770E;
  /* 目立つ色 */
  font-weight: bold;
  margin: 14px auto 14px;
  letter-spacing: 0.05em;
  background-color: rgba(185, 119, 14, 0.1);
  display: block;
  padding: 4px 12px;
  border-radius: 20px;
  text-align: center;
}

/* =========================================
 * 自己紹介章ブロック (Chapter list)
 * ========================================= */
.chapter-list {
  display: flex;
  flex-direction: column;
  margin: 40px 0;
  /* スキマ欲しければgap  */
}

.chapter-block {
  text-align: center;
  background-color: #FCFAF6;
  padding: 40px 20px;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 15px rgba(26, 44, 66, 0.03);
}

.border-bg {
  border-left: 4px solid #D4AF37;
}

.border-bl {
  border-left: 4px solid #1A2C42;
}

.border-bk {
  border-left: 4px solid #141313;
}

.chapter-number {
  font-size: 11px;
  color: #2A4365;
  font-family: Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: bold;
}

.chapter-title {
  font-size: 16px;
  color: #1A2C42;
  margin-bottom: 12px;
  font-weight: bold;
}

.text-body {
  font-size: 14px;
  text-align: left;
  line-height: 2.2;
  white-space: pre-line;
  letter-spacing: 0.03em;
}

/* =========================================
 * 〇〇を知るには（立体カードデザイン）
 * ========================================= */
.checkpoints-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 32px;
}

.check-card {
  background-color: #FCFAF6;
  border-radius: 16px;
  padding: 24px 20px;
  position: relative;
  border: 1px solid rgba(26, 44, 66, 0.08);
  box-shadow: 0 8px 25px rgba(26, 44, 66, 0.05);
}

/* 上部に飛び出すディープブルーのバッジ */
.check-badge-wrapper {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #F5F2E9;
  padding: 6px;
  border-radius: 50%;
}

.check-badge {
  width: 44px;
  height: 44px;
  background-color: #1A2C42;
  /* ディープブルー */
  color: #D4AF37;
  /* ゴールド文字 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 4px 10px rgba(26, 44, 66, 0.2);
}

.check-content {
  margin-top: 20px;
}

.check-title {
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
  color: #1A2C42;
}

.check-desc {
  font-size: 14px;
  line-height: 1.9;
  color: #34495E;
  margin-bottom: 20px;
}

/* カード内のミニ吹き出しアドバイス */
.check-advice {
  background-color: rgba(26, 44, 66, 0.03);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-left: 3px solid #D4AF37;
}

.advice-icon {
  font-size: 18px;
}

.advice-text {
  font-size: 13px;
  line-height: 1.6;
  color: #1A2C42;
  font-family: "Helvetica Neue", Arial, sans-serif;
  padding-top: 1px;
  font-weight: bold;
}


/* =========================================
 * 特別なメッセージ（数字なし長文特化デザイン）
 * ========================================= */
.message-frame {
  position: relative;
  background-color: #FCFAF6;
  padding: 40px 24px;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(26, 44, 66, 0.05);
  margin-top: 40px;
  z-index: 1;
}

/* 四隅の飾り（カギ括弧のようなアクセント） */
.message-frame-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #D4AF37;
  z-index: 2;
}

.message-frame-corner.top-left {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
}

.message-frame-corner.bottom-right {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
}

.message-quote-icon {
  text-align: center;
  font-size: 56px;
  font-family: "Georgia", "Yu Mincho", serif;
  line-height: 1;
}

.message-title {
  font-size: 18px;
  font-weight: bold;
  color: #1A2C42;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: 0.1em;
}

.message-body {
  font-size: 14px;
  line-height: 2.2;
  /* 長文でも読みやすく */
  letter-spacing: 0.03em;
}

.message-body p {
  margin-bottom: 24px;
  /* 段落ごとの余白をしっかり取る */
}

.message-body p:last-child {
  margin-bottom: 0;
}




.x-step-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

}

.x-step-list>img:not(.linedot) {
  width: min(80%, 640px);
  height: auto;
  display: block;
  margin: 0 auto;

}

.x-step-list .linedot {
  width: 150px;
  height: auto;
  display: block;
  margin: 2px auto 8px;

}

.x-step-list img:last-child {
  width: 100%;

}

/* **************************************************************************************************************************************
*******************************************    ************************************************** */

/* **************************************************************************************************************************************
*******************************************  planorder   ************************************************** */




.planorder-card-content .page-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Plan hero */
.planorder-card-content .plan-hero {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
}

.planorder-card-content .plan-hero-top {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.planorder-card-content .plan-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--main-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.planorder-card-content .plan-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.planorder-card-content .plan-badge {
  display: inline-flex;
  padding: 3px 9px;
  background: var(--main-clear);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 400;
  color: var(--main-dark);
}

.planorder-card-content .divider {
  height: 1px;
  background: var(--line);
  margin: 0 20px;
}

.planorder-card-content .info-list {
  padding: 6px 20px 8px;
}

.planorder-card-content .info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}

.planorder-card-content .info-row:last-child {
  border-bottom: none;
}

.planorder-card-content .info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

.planorder-card-content .info-label svg {
  width: 14px;
  height: 14px;
  color: var(--main);
  opacity: 0.85;
  flex-shrink: 0;
}

.planorder-card-content .info-value {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  text-align: right;
  line-height: 1.45;
}

/* Benefit */
.planorder-card-content .benefit-card {
  background: var(--input-background);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.planorder-card-content .benefit-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.planorder-card-content .benefit-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.planorder-card-content .benefit-icon svg {
  width: 17px;
  height: 17px;
  color: var(--main);
}

.planorder-card-content .benefit-label {
  font-size: 12px;
  color: var(--brown);
  font-weight: 400;
}

.planorder-card-content .benefit-sub {
  font-size: 11px;
  color: var(--main-dark);
  opacity: 0.7;
  margin-top: 1px;
}

.planorder-card-content .benefit-amount {
  font-size: 20px;
  font-weight: 500;
  color: var(--main);
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.planorder-card-content .benefit-amount span {
  font-size: 12px;
  font-weight: 400;
}

/* Section card */
.planorder-card-content .section-card {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
}

.planorder-card-content .section-head {
  padding: 15px 20px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.planorder-card-content .section-head svg {
  width: 15px;
  height: 15px;
  color: var(--main);
  flex-shrink: 0;
}

.planorder-card-content .section-head-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.planorder-card-content .section-body {
  padding: 16px 20px;
}

/* Points */
.planorder-card-content .balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--input-background);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

.planorder-card-content .balance-label {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 400;
}

.planorder-card-content .balance-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.3px;
}

.planorder-card-content .select-label {
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 400;
  display: block;
  margin-bottom: 7px;
}

.planorder-card-content .point-select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238896AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.planorder-card-content .point-select:focus {
  border-color: var(--main);
}

/* Price */
.planorder-card-content .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  gap: 12px;
}

.planorder-card-content .price-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.planorder-card-content .price-label {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 400;
}

.planorder-card-content .price-value {
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
}

.planorder-card-content .price-value.accent {
  color: var(--main);
  font-weight: 500;
}

.planorder-card-content .price-value.discount {
  color: var(--blue);
}

.planorder-card-content .price-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.planorder-card-content .price-total-label {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.planorder-card-content .price-total-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--main);
  letter-spacing: -0.8px;
}

#discount-row {
  display: none;
}

/* Payment */
.planorder-card-content .payment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}

.planorder-card-content .payment-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.planorder-card-content .payment-btn:hover {
  border-color: var(--main);
  box-shadow: 0 0 0 3px var(--main-clear);
}

.planorder-card-content .payment-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--main-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.planorder-card-content .payment-btn-icon svg {
  width: 17px;
  height: 17px;
  color: var(--main);
}

.planorder-card-content .payment-btn-body {
  flex: 1;
  min-width: 0;
}

.planorder-card-content .payment-btn-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 4px;
}

.planorder-card-content .payment-btn-cards {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.planorder-card-content .card-badge {
  display: inline-flex;
  padding: 1px 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0.3px;
}

.planorder-card-content .chevron {
  color: var(--line);
  flex-shrink: 0;
}

/* Notes */
.planorder-card-content .notes-card {
  background: var(--input-background);
  border-radius: 16px;
  padding: 16px 20px;
}

.planorder-card-content .notes-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  margin-bottom: 10px;
}

.planorder-card-content .notes-title svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.planorder-card-content .notes-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.planorder-card-content .notes-list li {
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.7;
  font-weight: 400;
  padding-left: 10px;
  position: relative;
}

.planorder-card-content .notes-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--text-light);
}










/*************************************************************  pc only  ******************************************************************************************/
/*************************************************************  pc only  ******************************************************************************************/
/*************************************************************  pc only  ******************************************************************************************/
/*************************************************************  pc only  ******************************************************************************************/
/*************************************************************  pc only  ******************************************************************************************/

@media screen and (max-width: 425px) {
  .min-br {
    display: inline-block;
  }
}

@media screen and (min-width: 900px) {

  .header {
    padding: 3px 10px;
  }
  .point-card-band {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .planorder-card-content>div {
    border: 1px solid var(--line);
  }
  .planorder-content {
    padding: 16px;
  }
  .freeplan .planshop-image {
    height: 100%;
  }
  .freeplan .planshop-card {
    flex: 1 1 100% !important;
  }
  .planshop-card {
    flex: 1 1 calc(33% - 16px);
  }
  .planshop-list-grid {
    gap: 10px;
  }
  .freeplan planfree-list-grid {
    display: block;
    gap: 0;
  }
  #sidebar img {
    width: 200px;
  }

}


.linktree p {
  font-size: 1rem;
  padding: 12px 6px;
  line-height: 1.7;
  letter-spacing: normal;
  white-space: pre-line;
}

.linktree img {
  width: 100%;
  margin-top: .5em;
}