/* =========================================================
   BASE
========================================================= */

main {
	padding:15px;
	margin:0 auto;
	}

.member-page,
.member-page *,
.member-page *::before,
.member-page *::after {
  box-sizing: border-box;
}

.member-page {
  --brown: #402210;
  --brown-light: #725845;
  --cream: #efe5d4;
  --cream-light: #f8f5ef;
  --gold: #c79d5d;
  --border: #dfd4c5;

  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px 100px;

  color: var(--brown);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .04em;
}

.member-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.member-page a {
  color: var(--brown);
  text-decoration: none;
  transition: opacity .25s ease;
}

.member-page a:hover {
  opacity: .65;
}



/* =========================================================
   HEADER
========================================================= */

#header {
  text-align: center;
}

/* JSでは #header に fixed が付く */
#header.fixed {
  box-shadow: 0 8px 25px rgba(64, 34, 16, .08);
}


/* =========================================================
   COMMON
========================================================= */

.member-en {
  display: block;
  margin-bottom: 8px;

  color: var(--gold);

  font-family: "Lora", serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: .8rem;
  font-style: italic;

  letter-spacing: .17em;
}

.section-heading {
  margin-bottom: 35px;
  text-align: center;
}

.section-heading h2 {
  margin: 0;

  color: var(--brown);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.5;
}

.section-lead {
  width: min(750px, 100%);
  margin: 0 auto 45px;

  color: var(--brown-light);

  font-size: 1rem;
  line-height: 2;

  text-align: center;
}

.sub-heading {
  margin: 0 0 30px;

  color: var(--brown);

  font-size: 1.3rem;
  font-weight: 700;

  text-align: center;
}


/* =========================================================
   INTRO
========================================================= */

.member-intro {
  padding: 65px 0 80px;
  text-align: center;
}

.member-intro-inner {
  width: min(820px, 100%);
  margin: 0 auto;
}

.member-intro h1 {
  margin: 0 0 30px;

  color: var(--brown);

  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.5;
}

.member-intro p {
  margin: 0 auto 8px;

  color: var(--brown-light);

  font-size: 1rem;
  line-height: 2;
}


/* =========================================================
   POINT SECTION
========================================================= */

.member-point-section {
  width: 100%;
  margin-bottom: 90px;
}


/* =========================================================
   FULL WIDTH VISUAL
========================================================= */

.member-visual {
  position: relative;

  width: 100vw;

  margin-left: calc(50% - 50vw);

  padding: 70px 30px;

  background: var(--cream);

  text-align: center;
}

.member-visual-inner {
  width: min(900px, 100%);
  margin: 0 auto;
}

.member-visual-image {
  width: min(680px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.member-card {
  width: min(980px, 100%);
  margin: 45px auto 0;
  padding: 60px 65px;

  background: #fff;

  border: 1px solid var(--border);

  box-shadow:
    0 8px 30px rgba(64, 34, 16, .06);

  text-align: center;
}


/* =========================================================
   STEP
========================================================= */

.info-block {
  margin: 0 auto 45px;
  padding: 40px;

  background: var(--cream-light);

  text-align: left;
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step-item {
  display: grid;

  grid-template-columns: 60px 1fr;

  gap: 20px;
  align-items: start;

  padding: 20px;

  background: #fff;

  border: 1px solid var(--border);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  background: var(--brown);

  border-radius: 50%;

  color: #fff;

  font-family: "Lora", serif;
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;

  font-size: 1.0rem;

  letter-spacing: .08em;
}

.step-item h4 {
  margin: 0 0 5px;

  font-size: 1.05rem;
  font-weight: 700;
}

.step-item p {
  margin: 0;

  color: var(--brown-light);

  font-size: .9rem;
  line-height: 1.8;
}


/* =========================================================
   PERIOD
========================================================= */

.period-box {
  margin: 0 auto 45px;
  padding: 35px 30px;

  border-top: 1px solid var(--brown);
  border-bottom: 1px solid var(--brown);

  text-align: center;
}

.period-box h3 {
  margin: 0 0 10px;

  font-size: 1.1rem;
  font-weight: 700;
}

.period-date {
  margin: 0;

  color: var(--brown);

  font-family: "Lora", serif;
  font-variant-numeric: lining-nums tabular-nums;

  font-size: 1.8rem;
  font-weight: 700;

  letter-spacing: .08em;
}

.period-date span {
  margin: 0 12px;
  color: var(--gold);
}

.period-note {
  margin: 12px 0 0;

  color: var(--brown-light);

  font-size: .8rem;
}


/* =========================================================
   TARGET
========================================================= */

.target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  align-items: stretch;
}

.target-box {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 30px 20px;
  text-align: left;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* テキストを背景記号より前へ */
.target-box > * {
  position: relative;
  z-index: 1;
}

/* ○ × 共通 */
.target-box::after {
  position: absolute;
  right: -10px;
  top: -75px;
  z-index: 0;

  font-family: Arial, sans-serif;
  font-size: 300px;
  font-weight: 300;
  line-height: 1;

  opacity: .08;

  pointer-events: none;
}

/* 対象：○ */
.target-box-ok::after {
  content: "○";
  color: var(--gold);
}

/* 対象外：× */
.target-box-ng::after {
  content: "×";
  color: var(--brown-light);
}

.target-box-ok,
.target-box-ng {
  background: #f8f5ef;
  border: 1px solid var(--border);
}

.target-box .member-en {
  min-height: 1.5em;
}

.target-box h3 {
  margin: 0 0 20px;
  min-height: 1.8em;

  font-size: 1rem;
  font-weight: 700;
}

.target-box ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.target-box li {
  position: relative;

  margin-bottom: 10px;
  padding-left: 15px;

  font-size: .9rem;
  line-height: 1.7;
}

.target-box-ok li::before {
  content: "✓";
  color: var(--gold);
}

.target-box-ng li::before {
  content: "−";
  color: #999;
}


/* =========================================================
   ATTENTION
========================================================= */

.attention-box {
  display: grid;

  grid-template-columns: 55px 1fr;

  gap: 20px;
  align-items: center;

  margin-bottom: 60px;
  padding: 28px 30px;

  background: #f7eee9;

  border-left: 4px solid var(--gold);

  text-align: left;
}

.attention-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border: 1px solid var(--gold);
  border-radius: 50%;

  color: var(--gold);

  font-family: "Lora", serif;
  font-variant-numeric: lining-nums tabular-nums;

  font-size: 1.2rem;
  font-weight: 700;
}

.attention-box h3 {
  margin: 0 0 5px;

  font-size: 1rem;
  font-weight: 700;
}

.attention-box p {
  margin: 0;

  color: var(--brown-light);

  font-size: .88rem;
  line-height: 1.8;
}


/* =========================================================
   4 MEMBER STAGES
========================================================= */

.stage-section {
  margin-top: 60px;
}

.stage-heading {
  width: min(720px, 100%);
  margin: 0 auto 30px;

  text-align: center;
}

.stage-heading h3 {
  margin: 0 0 10px;

  font-size: 1.35rem;
  font-weight: 700;
}

.stage-heading p {
  margin: 0;

  color: var(--brown-light);

  font-size: .9rem;
  line-height: 1.8;
}

.stage-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;
}

.stage-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid var(--border);

  text-align: left;
}

.stage-card img {
  width: 100%;
}

.stage-card-body {
  padding: 20px 22px 24px;
}

.stage-card-body h4 {
  margin: 0 0 8px;

  color: var(--gold);

  font-family: "Lora", serif;
  font-variant-numeric: lining-nums tabular-nums;

  font-size: .95rem;

  letter-spacing: .12em;
}

.stage-card-body p {
  margin: 0;

  color: var(--brown-light);

  font-size: .85rem;
  line-height: 1.8;
}

.rank-chart {
  margin-top: 40px;
}

.rank-chart img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.rank-type img {
  width: 85%;
  display: block;
  margin: 0 auto;
}


/* =========================================================
   BENEFITS
========================================================= */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 35px;
  align-items: stretch;
  width: 100%;
}

.member-page .benefit-grid .benefit-item {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  margin: 0;

  padding: 10px 28px 22px;
  background: var(--cream-light);

  text-align: left;

  display: flex;
  flex-direction: column;
}

.benefit-item {
  height: 100%;
  padding: 10px 28px 22px;
  background: var(--cream-light);
  text-align: left;

  display: flex;
  flex-direction: column;
}

.benefit-item h3 {
  margin: 0 0 10px;
  min-height: 3em;
  font-size: .95rem;
  font-weight: 700;
}

.benefit-number {
  display: block;

  margin-bottom: 10px;

  color: var(--gold);

  font-family: "Lora", serif;
  font-variant-numeric: lining-nums tabular-nums;

  font-size: 1.85rem;

  letter-spacing: .12em;
}

.benefit-item p {
  margin: 0;

  color: var(--brown-light);

  font-size: .84rem;
  line-height: 1.8;
}

.note-list {
  margin: 35px auto 0;

  color: var(--brown-light);

  font-size: .82rem;
  line-height: 1.9;

  text-align: left;
}

.note-list p {
  position: relative;

  margin: 0 0 8px;
  padding-left: 1.2em;
}

.note-list p::before {
  content: "※";

  position: absolute;
  left: 0;
}

 span.note-ex {
    background: #f8f5ef;
    display: block;
    padding: 10px;
    border-radius: 10px;
  }

/* =========================================================
   MAIL MAGAZINE NOTICE
========================================================= */

.mailmag-notice {
  position: relative;

  width: min(845px, 100%);
  margin: 40px auto 0;
  padding: 35px 40px 30px;

  background: #f8f5ef;
  border: 1px solid var(--gold);
  border-top: 4px solid var(--gold);

  text-align: center;
}

.mailmag-label {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--gold);

  font-family: "Lora", serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: .75rem;
  font-weight: 700;

  letter-spacing: .16em;
}

.mailmag-notice h2 {
  font-size: 0.95rem;
  margin-top: -5px;
}

.mailmag-notice h3 {
  margin: 0 0 18px;

  color: var(--brown);

  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.6;
}

.mailmag-notice p {
  margin: 0 0 10px;

  color: var(--brown-light);

  font-size: .88rem;
  line-height: 1.9;
}

.mailmag-important {
  margin: 18px 0 !important;
  padding: 15px 20px;

  background: #fff;

  color: var(--brown) !important;
}

.mailmag-important strong {
  color: var(--brown);
  font-size: 1.05rem;
}

.mailmag-note {
  margin-bottom: 0 !important;

  font-size: .8rem !important;
}


/* スマホ */
@media screen and (max-width: 768px) {

  .mailmag-notice {
    margin-top: 30px;
    padding: 28px 18px 24px;
  }

  .mailmag-notice h3 {
    font-size: 1.2rem;
  }

  .mailmag-notice p {
    font-size: .8rem;
  }

  .mailmag-important {
    padding: 13px 10px;
  }

  .mailmag-important strong {
    font-size: .9rem;
  }

}


/* =========================================================
   NEW MEMBER
========================================================= */

.new-member-section {
  padding: 20px 0 80px;
}

.new-member-card {
  width: min(940px, 100%);
  margin: 0 auto;
  padding: 65px 60px;

  background:
    linear-gradient(
      135deg,
      #f4eadc 0%,
      #faf7f1 50%,
      #f0e4d5 100%
    );

  text-align: center;
}

.new-member-heading {
  margin-bottom: 35px;
}

.new-member-heading h2 {
  margin: 0 0 15px;

  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
}

.new-member-heading p {
  margin: 0;

  color: var(--brown-light);

  font-size: .95rem;
}

.new-member-benefits {
  width: min(700px, 100%);
  margin: 0 auto;

  background: #fff;

  border: 1px solid #d9c39f;
}

.new-member-benefit {
  padding: 38px 40px;
}

.new-member-benefit + .new-member-benefit {
  border-top: 1px solid #e5d8c5;
}

.timing-label {
  display: inline-block;

  margin-bottom: 12px;
  padding: 10px 20px;

  background: var(--brown);

  color: #fff;

  font-size: .85rem;
  font-weight: 700;

  border-radius: 40px;

  letter-spacing: .08em;
}

.new-member-benefit h3 {
  margin: 0 0 20px;

  font-size: 1.5rem;
  font-weight: 700;
}

.entry-point {
  display: flex;
  align-items: baseline;
  justify-content: center;

  gap: 12px;

  margin-bottom: 15px;
}

.entry-point strong {
  color: var(--gold);

  font-family: "Lora", serif;
  font-variant-numeric: lining-nums tabular-nums;

  font-size: clamp(3.2rem, 7vw, 4.6rem);

  line-height: 1;
}

.entry-point span {
  color: var(--gold);

  font-family: "Lora", serif;
  font-variant-numeric: lining-nums tabular-nums;

  font-size: 1rem;

  letter-spacing: .15em;
}

.new-member-benefit p {
  margin: 0 auto 12px;

  color: var(--brown-light);

  font-size: .9rem;
  line-height: 1.9;
}

.new-member-benefit p:last-child {
  margin-bottom: 0;
}

.important-message {
  margin-bottom: 18px !important;
  padding: 15px 20px;

  background: var(--cream-light);

  color: var(--brown) !important;

  font-weight: 700;
}

.t-js {
  text-align: justify;
}

/* =========================================================
   FAQ
========================================================= */

.faq-section {
  width: min(940px, 100%);
  margin: 0 auto 80px;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  position: relative;

  display: grid;

  grid-template-columns: 35px 1fr;

  gap: 10px;
  align-items: center;

  padding: 22px 50px 22px 10px;

  cursor: pointer;

  color: var(--brown);

  font-size: .95rem;
  font-weight: 700;

  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";

  position: absolute;

  right: 15px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--gold);

  font-size: 1.5rem;

  transition: transform .25s ease;
}

.faq-item[open] summary::after {
  transform:
    translateY(-50%)
    rotate(45deg);
}

.faq-item summary span {
  color: var(--gold);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.1rem;
}

.faq-answer {
  padding: 0 50px 25px 45px;

  color: var(--brown-light);

  font-size: .9rem;
  line-height: 1.9;

  text-align: left;
}

.faq-answer p {
  margin: 0;
}

.faq-answer a {
  color: var(--gold);

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =========================================================
   MESSAGE
========================================================= */

.message-section {
  width: min(820px, 100%);
  margin: 0 auto 80px;

  text-align: center;
}

.message-text p {
  margin: 0 auto 20px;

  color: var(--brown-light);

  font-size: .95rem;
  line-height: 2;
}


/* =========================================================
   REGISTER
========================================================= */

.member-register {
  width: min(500px, 100%);
  margin: 0 auto;

  text-align: center;
}

.member-register a {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 20px;

  padding: 18px 30px;

  background: var(--brown);

  color: #fff;

  font-size: 1rem;
  font-weight: 700;

  letter-spacing: .08em;

  transition:
    background-color .25s ease,
    transform .25s ease;
}

.member-register a strong {
  font-size: 1.3rem;
}

.member-register a:hover {
  background: var(--brown-light);

  color: #fff;

  opacity: 1;

  transform: translateY(-2px);
}


/* =========================================================
   PC
========================================================= */

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

  .sp-only {
    display: none;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 1024px) {

  .member-page {
    padding-right: 25px;
    padding-left: 25px;
  }

  .member-card {
    padding-right: 45px;
    padding-left: 45px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {

  .member-page {
    padding:
      0
      15px
      60px;

    font-size: 14px;
  }


  /* INTRO */

  .member-intro {
    padding: 40px 0 50px;
  }

  .member-intro h1 {
    margin-bottom: 20px;
    font-size: 1.6rem;
  }

  .member-intro p {
    font-size: .88rem;
    line-height: 1.9;
    text-align: left;
  }


  /* VISUAL */

  .member-visual {
    padding: 45px 15px 50px;
  }

  .member-visual-image {
    width: 100%;
  }


  /* CARD */

  .member-card {
    width: 100%;
    margin-top: 25px;

    padding:
      35px
      18px
      40px;

    box-shadow:
      0 4px 18px rgba(64, 34, 16, .05);
  }


  /* HEADING */

  .member-en {
    font-size: .7rem;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .section-heading h2 {
    font-size: 1.45rem;
  }

  .section-lead {
    font-size: .88rem;
    line-height: 1.9;
    text-align: left;
  }


  /* STEP */

  .info-block {
    padding: 20px 15px;
  }

  .sub-heading {
    margin-bottom: 20px;
    font-size: 1.1rem;
  }

  .step-list {
    gap: 12px;
  }

  .step-item {
    grid-template-columns: 42px 1fr;

    gap: 12px;

    padding: 15px;
  }

  .step-number {
    width: 36px;
    height: 36px;

    font-size: .7rem;
  }

  .step-item h4 {
    font-size: .9rem;
  }

  .step-item p {
    font-size: .8rem;
  }


  /* PERIOD */

  .period-box {
    padding: 25px 10px;
  }

  .period-date {
    font-size: 1.15rem;
  }

  .period-date span {
    margin: 0 5px;
  }

  .period-note {
    font-size: .72rem;
  }


  /* TARGET */

  .target-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .target-box {
    padding: 20px 15px;
    width: 100%;
  }

  .target-box h3 {
    font-size: .9rem;
  }

  .target-box li {
    font-size: .8rem;
  }


  /* ATTENTION */

  .attention-box {
    grid-template-columns: 38px 1fr;

    gap: 12px;

    padding: 20px 15px;
  }

  .attention-icon {
    width: 34px;
    height: 34px;

    font-size: 1rem;
  }

  .attention-box h3 {
    font-size: .88rem;
  }

  .attention-box p {
    font-size: .78rem;
  }


  /* STAGES */

  .stage-grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .stage-heading h3 {
    font-size: 1.15rem;
  }

  .stage-heading p,
  .stage-card-body p {
    font-size: .8rem;
  }

  .stage-card-body {
    padding: 18px;
  }


  /* BENEFITS */

  .benefit-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .benefit-item {
    padding: 22px;
  }

  .benefit-item h3 {
    font-size: .9rem;
  }

  .benefit-item p {
    font-size: .8rem;
  }

  .note-list {
    width: 100%;
    font-size: .76rem;
  }


  /* NEW MEMBER */

  .new-member-section {
    padding: 20px 0 55px;
  }

  .new-member-card {
    padding: 40px 20px;
  }

  .new-member-heading h2 {
    font-size: 1.45rem;
  }

  .new-member-heading p {
    font-size: .83rem;
  }

  .new-member-benefit {
    padding: 28px 18px;
  }

  .new-member-benefit h3 {
    font-size: 1rem;
  }

  .new-member-benefit p {
    font-size: .8rem;
  }

  .entry-point strong {
    font-size: 3.4rem;
  }

  .entry-point span {
    font-size: .8rem;
  }

  .important-message {
    padding: 13px 12px;
  }


  /* FAQ */

  .faq-section {
    margin-bottom: 55px;
  }

  .faq-item summary {
    grid-template-columns: 28px 1fr;

    gap: 5px;

    padding:
      18px
      35px
      18px
      5px;

    font-size: .82rem;
  }

  .faq-item summary span {
    font-size: .95rem;
  }

  .faq-item summary::after {
    right: 5px;

    font-size: 1.2rem;
  }

  .faq-answer {
    padding:
      0
      20px
      20px
      33px;

    font-size: .78rem;
  }


  /* MESSAGE */

  .message-section {
    margin-bottom: 50px;
  }

  .message-text p {
    font-size: .8rem;
    line-height: 1.9;
    text-align: justify;
  }


  /* REGISTER */

  .member-register a {
    padding: 16px 20px;

    font-size: .88rem;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width: 480px) {

  main {
	padding:5px;
	margin:0 auto;
	}

  .member-page {
    padding-right: 12px;
    padding-left: 12px;
  }

  .member-card {
    padding-right: 15px;
    padding-left: 15px;
  }

  .period-date {
    font-size: 1rem;
  }

}