@charset "utf-8";

@font-face {
 font-family: 'notosansjp';
 font-weight: 100;
 src: url(../font/NotoSansJP-Thin.ttf) format('truetype');
}

@font-face {
 font-family: 'notosansjp';
 font-weight: 300;
 src: url(../font/NotoSansJP-Light.ttf) format('truetype');
}

@font-face {
 font-family: 'notosansjp';
 font-weight: 400;
 src: url(../font/NotoSansJP-Regular.ttf) format('truetype');
}

@font-face {
 font-family: 'notosansjp';
 font-weight: 500;
 src: url(../font/NotoSansJP-Medium.ttf) format('truetype');
}

@font-face {
 font-family: 'notosansjp';
 font-weight: 700;
 src: url(../font/NotoSansJP-Bold.ttf) format('truetype');
}

@font-face {
 font-family: 'notosansjp';
 font-weight: 900;
 src: url(../font/NotoSansJP-Black.ttf) format('truetype');
}



@font-face {
 font-family: 'notoserifjp';
 font-weight: 400;
 src: url(../font/NotoSerifJP-Regular.otf) format('opentype');
}

@font-face {
 font-family: 'notoserifjp';
 font-weight: 500;
 src: url(../font/NotoSerifJP-Medium.otf) format('opentype');
}

@font-face {
 font-family: 'notoserifjp';
 font-weight: 600;
 src: url(../font/NotoSerifJP-SemiBold.otf) format('opentype');
}




:root {
 --clr-bg: #fcf4ea;

 --primary-color: #4b1b07;
 --bt-btclr: #4b1b07;

 --active-color: #e60011;

 --font-family: 'notosansjp', Arial, メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Helvetica, Verdana, sans-serif;
 --font-family--serif: 'notoserifjp', 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;

 --headline-font-color: #4b1b07;
 --headline-font-size: 20px;
 --primary-font-color: #2d2d2d;
 --primary-font-size: 13px;
 --text-link-color: #231815;


 --headerHeight: 70px;
 --main-mt: 25px;
 --main-mb: 25px;
 --main-pt: 28px;
 --main-pb: 28px;
 --main-padding-side: 17px;
}



* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: var(--font-family);
 font-weight: 400;
}

html {
 height: 100%;
}

html {
 scroll-behavior: smooth;
 scroll-padding: 15px;
}

body {
 margin: 0;
 background-color: var(--clr-bg);
 width: 100%;
 position: relative;
}

a {
 cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 color: var(--headline-font-color);
 font-family: var(--font-family);
}

p {
 color: var(--primary-font-color);
 font-family: var(--font-family);
 font-size: var(--primary-font-size);
 line-height: 1.8;
 letter-spacing: 0;
}

img {
 max-width: 100%;
}

/* 共通 */
.ttl-wrap {
 padding: 12px calc(60 / 750 * 100vw);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: var(--active-color);
 font-weight: 300;
 color: #fff;
 letter-spacing: 0.1rem;
 font-feature-settings: "palt";
}

.bt {
 border-radius: 8px;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 12px calc(60 / 750 * 100vw);
 color: #fff;
 font-size: 13px;
 background-color: var(--bt-btclr);
 margin-bottom: 9px;
 /* letter-spacing: 0.1rem; */
 font-feature-settings: "palt";
}

.main-mb {
 margin-bottom: var(--main-mb);
}

.main-mt {
 margin-top: var(--main-mt);
}

#contentsWrapper {
 width: 100%;
 /* max-width: 800px; */
 margin-inline: auto;
}

#nav-wrapper {
 background: url(../img/bg_body.png) 0 0;
 background-size: cover;
 overflow: hidden;
}

#main-header h1 {
 margin-top: var(--main-pt);
 width: 100%;
 margin-inline: auto;
 padding: 8px;
 background-color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
}

#main-header h1 img {
 width: calc(460 / 750 * 100%);
}

p.main-header {
 width: 100%;
 padding-top: var(--main-pt);
 font-size: var(--headline-font-size);
 font-family: var(--font-family--serif);
 color: var(--headline-font-color);
 font-weight: 500;
 line-height: 1.8;
 text-align: center;
 margin-bottom: 25px;
}

#nav-card-wrapper {
 width: calc(100% - 72px);
 margin-inline: auto;
 padding-top: var(--main-pt);
 padding-bottom: 70px;
 display: flex;
 flex-direction: column;
 align-items: center;
}

p.tx-select-card {
 font-family: var(--font-family--serif);
 font-weight: 600;
 font-size: 16px;
 color: var(--headline-font-color);
 text-shadow: 1px 1px 0 #fff,
  -1px 1px 0 #fff,
  1px -1px 0 #fff,
  -1px -1px 0 #fff;
 margin-top: var(--main-mt);
 margin-bottom: var(--main-mb);
 line-height: 1.4;
 text-align: center;
}

#nav-card-wrapper ul {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
}

#nav-card-wrapper ul li {
 width: 100%;
}

#nav-card-wrapper ul li a {
 width: 100%;
 padding: 12px;
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: #fff;
 border-radius: 10px;
 margin-bottom: 14px;
}



#nav-card-wrapper ul li p {
 color: #121212;
 font-size: 13px;
 font-weight: 300;
 margin-bottom: 0.5em;
}

#nav-card-wrapper ul li img {
 width: calc(170 / 750 * 100vw);
 filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
 transform: translateZ(0);
}

main {
 padding: 0 var(--main-padding-side);
 padding-top: var(--main-pt);
}

.select-card-wrap {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: calc(55 / 750 * 100vw);
 background-color: #fff;
 margin-bottom: 14px;
}

.select-card-wrap p.ttl {
 font-size: var(--headline-font-size);
 font-family: var(--font-family--serif);
 color: var(--headline-font-color);
 font-weight: 500;
 line-height: 1.8;
 text-align: center;
 margin-bottom: 25px;
 letter-spacing: -1px;
}

.select-card-wrap img.card {
 width: calc(420 / 750 * 100vw);
 margin-bottom: 25px;
 filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
 transform: translateZ(0);
}

#card-takashimaya .bt {
 background-color: #cd1a3e;
}

#card-saison .bt {
 background-color: #1b558e;
}

/* 002 registration */
main .inner-wrap {
 padding: var(--main-pt) calc(20 / 750 * 100vw);
 background-color: #fff;
}

#registration h2 {
 font-size: 16px;
 padding: 12px calc(30 / 750 * 100vw);
 margin-bottom: 0;
 letter-spacing: normal;
}

h3 {
 font-size: 15px;
 font-weight: 400;
 color: #fff;
 background-color: #aa8e87;
 padding: 8px calc(30 / 750 * 100vw);
 display: flex;
 justify-content: center;
 align-items: center;
 letter-spacing: 0.1rem;
 border-radius: 30px;
 margin-bottom: var(--main-mb);
}

main p {
 font-size: var(--primary-font-size);
 padding: 0 calc(10 / 750 * 100vw);
}


p.title {
 font-size: 14px;
 font-weight: 400;
 text-align: center;
 padding-bottom: 0.2em;
 margin-bottom: 1em;
 border-bottom: 1px solid var(--primary-color);
}

.terms,
.step,
.ex {
 width: 100%;
 margin-top: var(--main-pt);
 padding: 8px calc(30 / 750 * 100vw);
 background-color: #f4f4f4;
}

.step {
 padding: 0;
 background-color: #fff;
 margin-top: var(--main-pt);
}

.ex-wrap {
 padding: 0;
 background-color: #fff;
 margin-top: var(--main-pt);
}

.terms-wrap {
 height: 8rem;
 overflow-y: scroll;
}

.terms-wrap p {
 padding: 0;
}

.bt-form {
 width: 100%;
 margin-top: var(--main-pt);
 font-size: 16px;
 text-align: center;
}

.bt-back {
 width: 50%;
 margin-inline: auto;
 margin-top: var(--main-pt);
 font-size: 16px;
 background-color: #b7b7b7;
 border-radius: 8px;
}

.step ul {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.step ul li {
 width: 100%;
 font-size: var(--primary-font-size);
 line-height: 1.7;
 text-align: center;
 background-color: #f0f9ff;
 padding: 0.5em;
 position: relative;
}

.step ul li:not(:last-child) {
 margin-bottom: 20px;
}

.step ul li:not(:last-child)::after {
 position: absolute;
 bottom: -16px;
 left: 50%;
 transform: translateX(-50%);
 content: '';
 width: 25px;
 height: 10px;
 background: url(../img/arrow-process.svg)0 0 no-repeat;
 background-size: contain;
}

/* memberform 会員情報のご登録 */
#memberform h4 {
 font-size: 15px;
 padding: 12px calc(30 / 750 * 100vw);
 color: #fff;
 text-align: center;
 margin-bottom: 0;
 letter-spacing: normal;
 background-color: #2e5089;
}

a.round-btn {
 width: min(calc(560 / 750 * 100vw), 400px);
 margin-inline: auto;
 display: block;
 background-color: var(--active-color);
 color: #fff;
 text-align: center;
 padding: 12px calc(30 / 750 * 100vw);
 border-radius: 20px;
 font-size: 16px;
 filter: drop-shadow(0 5px 0 rgba(109, 0, 6, 0.5));
 transform: translateZ(0);
}

#member-thanks nav {
 overflow: hidden;
 padding-bottom: var(--main-pb);
}



#temporarycard {
 background: url(../img/bg_body.png) 0 0;
}

#temporarycard #nav-wrapper,
#temporarycard main {
 background-color: var(--clr-bg);
}

#temporarycard p.ttl {
 font-size: 16px;
 font-weight: 300;
 font-feature-settings: "initial";
}

#temporarycard #nav-wrapper {
 background-image: none;
}

#temporarycard .select-card-wrap {
 background-color: transparent;
 margin-bottom: 0;
 padding: 0 calc(55 / 750 * 100vw);
}

.select-card-wrap img.card2 {
 width: calc(560 / 750 * 100vw);
 margin-bottom: 25px;
 filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
 transform: translateZ(0);
}

.barcode-wrap {
 width: calc(420 / 750 * 100vw);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #fff;
 margin-bottom: 25px;
}

.select-card-wrap img.barcode {
 padding: 5px 10px;
}

.dateofexpiry-wrap p {
 padding: 7px calc(50 / 750 * 100vw);
 width: 100%;
 background-color: #fff;
 font-size: 17px;
 border: 1px solid gray;
}

p.rdate {
 padding: 4px calc(50 / 750 * 60vw);
 font-size: 14px;
 margin-bottom: 10px;
}

#temporarycard nav {
 overflow: hidden;
}

#temporarycard nav p {
 text-align: center;
 margin-bottom: var(--main-mb);
 margin-top: var(--main-mt);
}

#temporarycard nav p a {
 text-decoration: underline;
 color: var(--text-link-color);
}

/* ご利用規約判定 */
#nextRegister {
 opacity: 0.2;
 pointer-events: none;
}

.OK #nextRegister {
 opacity: 1;
 pointer-events: all;
}

/* 登録手続き（mail送信） */



.OK #sendMailBtn {
 opacity: 1;
 pointer-events: all;
}

#member-check .formWrap02 {
 margin-top: 0.5rem;
}

#member-check .wsWrap dl dd {
 padding: 0.5em 1rem;

}


.information {
 scroll-behavior: smooth;
 scroll-padding: 15px;
}

/* TOPへ戻るボタン */
p#back-top a {
 position: fixed;
 width: 50px;
 height: 50px;
 font-size: 28px;
 line-height: 1;
 z-index: 100;
 right: 30px;
 bottom: 30px;
 display: grid;
 place-items: center;
 transition: 0.5s;
 color: #fff;
 border-radius: 50%;
 background-color: var(--active-color);
}

.pno{
 font-size: 16px;
}

/* カード選択画面 ゴールドカード*/

p.goldt {
 margin-bottom: -4px !important;
}

p.goldts {
 font-size: 11px !important;
}