/* ============================================================
   FRACORA 会員制度ガイド
   横幅 720px 固定（デザイン原本 SP 750px を 0.96 倍で等倍スケール）
   --u … デザイン原本（750px幅）の 1px を表す単位。
          最大 0.96px（= 720px 表示）、画面幅が 720px 未満のときは
          画面幅に追従して全体が縮小する。
   ※ HTML 内の .pc-only 要素は 720px 幅では使用しないため常時非表示。
   ============================================================ */

#fracora-membership *,
#fracora-membership *::before,
#fracora-membership *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#fracora-membership {
    --navy: #263976;
    --red: #d84e5e;
    --gold: #bf8a22;
    --gray: #9d9d9d;
    --bg: #f4f4f4;
    --u: min(0.13333vw, 0.96px);

    max-width: 720px;
    margin: 0 auto;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #000;
    background: #fff;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    font-feature-settings: "halt" 1;
}

#fracora-membership img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
}

#fracora-membership ul {
    list-style: none;
}

#fracora-membership button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

#fracora-membership .inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 calc(40 * var(--u));
}

#fracora-membership .pc-only,
#fracora-membership .br-pc {
    display: none;
}

#fracora-membership .sp-only {
    display: block;
}

#fracora-membership .br-sp,
#fracora-membership .sp-inline {
    display: inline;
}

#fracora-membership .red {
    color: var(--red);
}

/* --- 見出し ------------------------------------------------ */
#fracora-membership .h2 {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 calc(20 * var(--u)) calc(13 * var(--u));
    font-size: calc(32.5 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: var(--navy);
    text-align: center;
}

#fracora-membership .h2 span {
    font-size: calc(20 * var(--u));
    font-feature-settings: normal;
}

#fracora-membership .h2-line {
    max-width: 720px;
    height: calc(4 * var(--u));
    margin: 0 auto;
    background: var(--navy);
}

#fracora-membership .h3 {
    font-size: calc(28 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: var(--navy);
    text-align: center;
}

#fracora-membership .h4 {
    font-size: calc(24 * var(--u));
    font-weight: 700;
    line-height: 1.6;
    color: var(--navy);
}

#fracora-membership .txt {
    font-size: calc(24.5 * var(--u));
    line-height: 1.7143;
}

#fracora-membership .note {
    font-size: calc(24 * var(--u));
    line-height: 1.55;
}

/* --- 01 ヒーロー -------------------------------------------- */
#fracora-membership .sec-hero {
    padding-top: calc(9 * var(--u));
}

#fracora-membership .sec-hero .inner {
    padding: 0;
}

#fracora-membership .hero {
    width: calc(714 * var(--u));
    margin: 0 auto;
    padding: calc(86 * var(--u)) 0 calc(54 * var(--u));
    background: url({{ file_root_path }}/membership/img/sp_title_bg.png) no-repeat center center;
    background-size: cover;
    text-align: center;
    color: var(--navy);
}

#fracora-membership .hero-sub {
    font-size: calc(33 * var(--u));
    font-weight: 700;
    line-height: 1.2;
}

#fracora-membership .hero-title {
    margin-top: calc(24 * var(--u));
    font-size: calc(47 * var(--u));
    font-weight: 700;
    line-height: 1.2;
}

/* --- 02 会員ランクとサービス内容 ---------------------------- */
#fracora-membership .sec-rank .inner {
    padding: 0;
}

#fracora-membership .lead-intro,
#fracora-membership .note-rank,
#fracora-membership .sec-rank .h4,
#fracora-membership .txt-ruikei {
    margin-left: calc(40 * var(--u));
    margin-right: calc(40 * var(--u));
}

#fracora-membership .lead-intro {
    margin-top: calc(67 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: 1.5625;
    text-align: left;
}

#fracora-membership .rank-img {
    margin-top: calc(49 * var(--u));
}

#fracora-membership .note-rank {
    margin-top: calc(27 * var(--u));
    line-height: 1.625;
}

#fracora-membership .sec-rank .h4 {
    margin-top: calc(51 * var(--u));
}

#fracora-membership .txt-ruikei {
    margin-top: calc(2 * var(--u));
    margin-left: calc(38 * var(--u));
    margin-right: calc(38 * var(--u));
}

/* --- 03 サービス内容（タブ） -------------------------------- */
#fracora-membership .sec-service {
    margin-top: calc(120 * var(--u));
}

#fracora-membership .tabs {
    display: flex;
    justify-content: center;
    margin-top: calc(31 * var(--u));
}

#fracora-membership .tab {
    width: calc(181 * var(--u));
    flex: 0 0 auto;
    display: block;
}

#fracora-membership .tab span {
    display: block;
}

#fracora-membership .tab .pc-only {
    display: none;
}

#fracora-membership .tab .sp-only {
    display: block;
}

#fracora-membership .tab .i-on {
    display: none;
    width: 97.8%;
    margin: 0 auto;
}

#fracora-membership .tab.is-active .i-off {
    display: none;
}

#fracora-membership .tab.is-active .i-on {
    display: block;
}

#fracora-membership .svc-panel {
    margin-top: calc(2 * var(--u));
    height: calc(722 * var(--u));
    background: var(--bg);
}

#fracora-membership .tab-bar {
    max-width: 720px;
    height: calc(16 * var(--u));
    margin: 0 auto;
}

#fracora-membership .svc-panel[data-rank="1"] .tab-bar { background: #c49368; }
#fracora-membership .svc-panel[data-rank="2"] .tab-bar { background: #b0b0b0; }
#fracora-membership .svc-panel[data-rank="3"] .tab-bar { background: #e2ca9c; }
#fracora-membership .svc-panel[data-rank="4"] .tab-bar { background: #bcc6d5; }

#fracora-membership .svc-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: calc(715.5 * var(--u));
    margin: calc(32 * var(--u)) auto 0;
    row-gap: calc(4 * var(--u));
}

#fracora-membership .svc {
    width: 33.3333%;
    flex: 0 0 auto;
}

#fracora-membership .svc button {
    display: block;
    width: 104%;
    margin-left: -2%;
    transition: opacity .25s ease;
}

#fracora-membership .svc button:hover {
    opacity: .8;
}

#fracora-membership .svc-list[data-rank="1"] .svc[data-min="2"],
#fracora-membership .svc-list[data-rank="1"] .svc[data-min="3"],
#fracora-membership .svc-list[data-rank="1"] .svc[data-min="4"],
#fracora-membership .svc-list[data-rank="2"] .svc[data-min="3"],
#fracora-membership .svc-list[data-rank="2"] .svc[data-min="4"],
#fracora-membership .svc-list[data-rank="3"] .svc[data-min="4"] {
    display: none;
}

#fracora-membership .svc-list[data-rank="3"] {
    justify-content: flex-start;
}

/* --- 04 会員ランクの判定について ---------------------------- */
#fracora-membership .sec-judge {
    margin-top: calc(154 * var(--u));
}

#fracora-membership .sec-judge .inner {
    padding: 0 calc(39 * var(--u));
}

#fracora-membership .judge-lead {
    margin-top: calc(26 * var(--u));
    font-size: calc(30 * var(--u));
    line-height: 1.47;
    text-align: left;
}

#fracora-membership .label {
    display: inline-block;
    border: 1px solid;
    padding: calc(7 * var(--u)) calc(10 * var(--u));
    font-size: calc(31 * var(--u));
    font-weight: 700;
    line-height: 1.05;
}

#fracora-membership .label-up {
    margin-top: calc(50 * var(--u));
    border-color: var(--gold);
    color: var(--gold);
}

#fracora-membership .label-down {
    margin-top: calc(61 * var(--u));
    border-color: var(--gray);
    color: var(--gray);
}

#fracora-membership .judge-txt {
    margin-top: calc(15 * var(--u));
    font-size: calc(27.5 * var(--u));
    line-height: 1.6;
    color: var(--navy);
}

#fracora-membership .note-judge {
    margin-top: calc(8 * var(--u));
    line-height: 1.54;
}

#fracora-membership .chart-up {
    margin-top: calc(11 * var(--u));
}

#fracora-membership .chart-down {
    margin-top: calc(20 * var(--u));
}

#fracora-membership .chart-down img {
    width: 99.6%;
}

/* --- 05 会員ランクの確認方法 -------------------------------- */
#fracora-membership .sec-check {
    margin-top: calc(158 * var(--u));
}

#fracora-membership .check-lead {
    margin-top: calc(25 * var(--u));
    font-size: calc(29 * var(--u));
    line-height: 1.586;
    text-align: left;
}

#fracora-membership .check-body {
    margin-top: calc(35 * var(--u));
    padding-bottom: calc(86 * var(--u));
    background: var(--bg);
}

#fracora-membership .check-body .h3:first-child {
    padding-top: calc(42 * var(--u));
}

#fracora-membership .mypage-btns {
    display: flex;
    justify-content: center;
    gap: calc(13 * var(--u));
    margin-top: calc(21 * var(--u));
}

#fracora-membership .mypage-btns button {
    display: block;
    width: calc(291 * var(--u));
    flex: 0 0 auto;
}

#fracora-membership .h3-meisai {
    margin-top: calc(100 * var(--u));
}

#fracora-membership .meisai-img {
    width: calc(675 * var(--u));
    margin: calc(11 * var(--u)) auto 0;
}

/* --- ポップアップ ------------------------------------------- */
#fracora-membership .pop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

#fracora-membership .pop.is-open {
    display: block;
}

#fracora-membership .pop-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

#fracora-membership .pop-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(30 * var(--u)) 0;
}

#fracora-membership .pop-panel {
    position: relative;
    width: 100%;
    max-width: calc(688 * var(--u));
    margin: auto;
    background: #fff;
    padding: calc(35 * var(--u)) 0 calc(50 * var(--u));
}

#fracora-membership .pop-close {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(76 * var(--u));
    z-index: 2;
}

#fracora-membership .pop-head {
    display: block;
}

#fracora-membership .pop-icon {
    width: calc(250 * var(--u));
    margin: 0 auto;
}

#fracora-membership .pop-body {
    padding: 0 calc(53 * var(--u));
}

#fracora-membership .pop-h {
    margin: calc(31 * var(--u)) calc(-16 * var(--u)) 0;
    font-size: calc(38 * var(--u));
    font-weight: 700;
    line-height: 1.5;
    color: var(--navy);
    text-align: center;
}

#fracora-membership .pop-txt {
    margin-top: calc(37 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: 1.5625;
}

#fracora-membership .pop-rank-img {
    margin-top: calc(40 * var(--u));
    margin-left: calc(-32 * var(--u));
    margin-right: calc(-32 * var(--u));
}

#fracora-membership .pop-rank-img + .pop-rank-img {
    margin-top: calc(21 * var(--u));
}

#fracora-membership .pop-notes {
    margin-top: calc(40 * var(--u));
    padding: 0 calc(52 * var(--u));
    font-size: calc(23 * var(--u));
    line-height: 1.83;
}

#fracora-membership .pop-body .pop-notes {
    padding-left: 0;
    padding-right: 0;
}

#fracora-membership .pop-mypage-sp {
    padding: calc(43 * var(--u)) 0 calc(45 * var(--u));
}

#fracora-membership .pop-mypage-pc {
    margin-bottom: calc(-29 * var(--u));
}

#fracora-membership .pop-mypage img {
    margin: 0 auto;
}

#fracora-membership .pop-mypage-sp img {
    width: calc(548 * var(--u));
}

#fracora-membership .pop-mypage-pc img {
    width: calc(639 * var(--u));
}