* {margin: 0; padding: 0;}

body{margin: 0; padding: 0; background: url("img/Bg.png"); scroll-behavior: smooth; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
a {text-decoration: none;}
img{width: 100%;}
ul,li{list-style:none; padding:0; margin:0;}
button{background: none; border: 0;} 

body{background: #000; color: #fff; font-weight: 500; font-family: "Noto Sans JP", "YuGothic","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.Header{display: flex; align-items: center; justify-content: space-between; background: #10101A; color: #fff; height: 64px;max-width: 500px; margin: 0 auto; position: relative; z-index: 10; padding: 0 16px;}
.Hamburger{display: flex; flex-direction: column; justify-content: center; cursor: pointer; margin-right: 25px; width: 36px; height: 36px; z-index: 20;}
.Bar{width: 28px; height: 2.5px; background: #fff; margin: 4px 0; border-radius: 2px; display: block;}
.HeaderCenter{display: flex; align-items: center; flex: 1; justify-content: center; gap: 12px;}
.LogoIcon img{display: block;}
.BrandName{font-family: 'Times New Roman', serif; font-size: 1.3rem; letter-spacing: 0.06em; font-weight: bold;}
.HeaderRight{display: flex; align-items: center; gap: 12px;}
.IconBtn{display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0;}
.IconBtn img{display: block;}
.GlobalMenu{position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; transform: translateX(-100%); transition: .3s; pointer-events: none;}
.GlobalMenuInput:checked~.GlobalMenu{transform: translateX(0); pointer-events: all;}
.GlobalMenuContent{background: #fff; width: 85vw; max-width: 340px; height: 100vh; padding: 32px 18px 0 18px; box-sizing: border-box; position: relative;}
.CloseBtn{background: none; border: none; font-size: 2.2rem; color: #b79b5c; position: absolute; top: 18px; right: 18px; cursor: pointer; z-index: 200;}
.MenuBtnGroup{margin-top: 64px; display: flex; flex-direction: column; gap: 18px;}
.Btn{display: block; width: 100%; padding: 17px 0; border-radius: 8px; font-size: 1.12rem; font-weight: 600; border: none; text-align: center; text-decoration: none; letter-spacing: 0.04em; transition: background 0.2s;}
.GoldBtn{background: #b79b5c; color: #fff;}
.GoldBtn:hover{background: #d3b05f;}
.BlackBtn{background: #000; color: #fff;}
.BlackBtn:hover{background: #222;}

main{max-width: 500px; margin: 0 auto; padding-top: 60px;}
.Top.Main{position: relative; height: calc(100vh - 64px); min-height: 620px; background: url("../img/bg.png") no-repeat; background-position: bottom; background-size: contain; box-sizing: border-box;
}
.BtnSet{display: flex; flex-direction: column; gap: 20px; margin-bottom: 60px}
.Btn{display: block; width: 100%; max-width: 80%; width: 370px; margin: 0 auto; padding: 12px 0; border-radius: 15px; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; text-decoration: none; border: none; transition: 0.18s; box-sizing: border-box;}
.GoldBtn{background: #ccb073; color: #fff;}
.OutlinedBtn{background: none; color: #fff; max-width: 80%;
    width: 370px; border: 2px solid #fff;}
.WhiteBtn{background: #fff; color: #111; border: none;}
.BlackBtn{background: #111; color: #fff; border: 2px solid #fff;}
.GoldBtn:hover{background: #e6c77f;}
.OutlinedBtn:hover{background: #fff; color: #111;}
.WhiteBtn:hover{background: #ececec;}
.BlackBtn:hover{background: #333;}


/* 会員登録 */
.Main{padding-top:45px; min-height:calc(100vh - 64px); display:flex; justify-content:center; align-items:flex-start;}
.RegisterSection{width:100%; max-width:410px; margin:0 auto; background:none;}
.RegisterTitle{font-size:20px; font-weight:700; color:#fff; text-align:left; margin-bottom:18px; letter-spacing:2px;}
.RegisterHr{border:0; border-top:2px solid #c5a96b; width:100%; margin-bottom:28px;}
.RegisterForm{display:flex; flex-direction:column; gap:28px;}
.FormGroup{display:flex; flex-direction:column; gap:9px;}
.FormLabel{font-size:15px; color:#fff; font-weight:700; letter-spacing:1.2px; margin-bottom:2px;}
.FormSelectWrap{position:relative; display:flex; align-items:center}
.FormSelect{width:100%; padding:13px 44px 13px 16px; font-size:16px; border-radius:12px; border:1.5px solid #fff; background:#060613; color:#fff; appearance:none;}
.BadgeGroup{position:absolute; right:10px; top:50%; transform:translateY(-50%); display:flex; gap:5px;}
.BadgeS,.BadgeK{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:14px; font-weight:700; color:#fff;}
.BadgeS{background:#ffda61;}
.BadgeK{background:#ff4fd1;}
.FormInput{width:auto; padding:14px 18px; font-size:16px; border-radius:12px; border:1.5px solid #fff; background:#060613; color:#fff;}
.FormBtnWrap{margin-top:16px;}
.BtnWhiteLarge{display:block; width:100%; padding:16px 0; font-size:18px; font-weight:700; color:#222; background:#fff; border-radius:40px; border:none; letter-spacing:6px; transition:.18s;}
.BtnWhiteLarge:active{opacity:.8;}

/* ポイント画面 */
.PointSection{width:100%; max-width:410px; margin:0 auto}
.PointTitle{font-size:20px; font-weight:700; color:#fff; margin-bottom:14px; letter-spacing:2px}
.PointHr{border:0; border-top:2px solid #c5a96b; width:100%; margin-bottom:28px}
.CurrentPointBox{background:#c5a96b; margin:0 auto 50px; padding:24px 0; text-align:center}
.CurrentPointText{font-size:17px; color:#fff; letter-spacing:1.5px}
.CurrentPointNum{font-size:28px; font-weight:700; letter-spacing:2px; margin-left:8px}
.PointHistoryTitle{font-size:17px; font-weight:700; color:#fff; margin-bottom:14px; margin-top:26px; letter-spacing:1.2px}
.PointHistoryList{margin:0; padding:0; list-style:none}
.PointHistoryItem{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid #393945; font-size:16px; color:#fff; letter-spacing:1px}
.PointHistoryDate{font-size:15px}
.PointHistoryPt{font-size:16px; font-weight:700}

/* マイページ */
.MypageSection{width:100%; max-width:410px; margin:0 auto;}
.MypageTitle{font-size:20px; font-weight:700; color:#fff; margin-bottom:14px; letter-spacing:2px;}
.MypageHr{border:0; border-top:2px solid #c5a96b; width:100%; margin-bottom:28px;}
.MypageBlock{padding:18px 0;}
.MypageRow{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.MypageMain{display:flex; flex-direction:column; gap:3px;}
.MypageLabel{font-size:18px; font-weight:900; color:#fff; letter-spacing:1.2px; margin-bottom:2px;}
.MypageValue{font-size:16px; color:#fff;}
.MypageEdit{font-size:17px; color:#fff; text-decoration:none; display:flex; align-items:center; gap:8px; font-weight:700;}
.MypageEdit .EditIcon{width:18px; height:18px; display:inline-block; vertical-align:middle;}
.MypageEdit:hover{color:#c5a96b;}
.MypageSplit{border:0; border-top:1.5px solid #393945; width:100%; margin:18px 0 16px 0;}
.ModalOverlay{position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.85); display:flex; justify-content:center; align-items:center; z-index:99;}
.ModalBox{width:90vw; max-width:340px; background:#fff; border-radius:18px; box-shadow:0 6px 32px rgba(0,0,0,.17); position:relative; padding:34px 22px 26px 22px;}
.ModalClose{position:absolute; top:14px; right:16px; background:none; border:none; font-size:0; cursor:pointer;}
.CloseIcon{font-size:32px; color:#222;}
.ModalContent{text-align:center;}
.ModalTitle{font-size:20px; font-weight:700; margin-bottom:26px; color:#111; letter-spacing:2px;}
.ModalFormGroup{margin-bottom:28px; padding:0 8px;}
.ModalSelect{width:100%; padding:13px 44px 13px 16px; font-size:16px; border-radius:12px; border:2px solid #222; background:#fff; color:#111; appearance:none; box-sizing:border-box;}
.ModalInput{width:100%; min-width: 0; padding:13px 16px; font-size:16px; border-radius:12px; border:2px solid #222; background:#fff; color:#111; box-sizing:border-box;}
.ModalBtnRow{display:flex; justify-content:center; gap:18px;}
.ModalBtn{width:42%; padding:13px 0; font-size:17px; font-weight:700; border-radius:17px; border:none; letter-spacing:2px; cursor:pointer;}
.ModalBtnGray{background:#bbb; color:#fff;}
.ModalBtnGold{background:#c5a96b; color:#fff;}
.ModalBtn:active{opacity:.8;}
.LogoutBtn{margin-top: 40px;}