@charset "UTF-8";
body { background-color: #f5f5f5; }

a { color: #e95504; }

a:hover { color: #ff962a; }

.btn--main { background: #e95504; color: #fff; }

.btn--main:hover { background: #ff962a; }

.btn--sub { background: transparent; color: #e95504; }

.btn--sub:hover { color: #fff; background: #ff962a; }

.detail__btn a::before { border-color: #000000; }

.btn--chevron { color: #e95504; }

.btn--chevron::after { border-color: #e95504; }

.btn--chevron:hover { color: #ff962a; }

.btn--chevron:hover::after { border-color: #ff962a; }

.btn--chevron-left { color: #e95504; }

.btn--chevron-left::after { border-color: #e95504; }

.btn--chevron-left:hover { color: #ff962a; }

.btn--chevron-left:hover::after { border-color: #ff962a; }

header { padding: 2em 5% 0; }

header h1 { width: 20vw; margin: 20px auto; position: relative; max-width: 200px; }

.section--login { padding-top: 0; }

.wrap { background: #f5f5f5; }

.block--attention { font-size: 14px; border: 1px solid; padding: 20px; border-radius: 6px; }

.page--mypage h1.logo { width: 150px; }

.page--mypage .detail__btn { margin-top: 50px; }

.block--card { width: 367px; height: 231px; background: #e95504; border-radius: 8px; box-shadow: 0 20px 30px -24px rgba(0, 0, 0, 0.5); margin: 0px auto 40px; position: relative; overflow: hidden; text-align: right; }

.block--card + .txt--sub { width: 367px; line-height: 1.5; margin: 0 auto 50px; }

.block--card .logo { width: 50%; margin: 10px auto; position: absolute; left: 25%; top: 6%; text-align: center; }

.block--card .status { width: 100%; position: absolute; left: 0; bottom: 29px; }

.block--card .inner { display: -webkit-box; display: -webkit-flex; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; -webkit-justify-content: flex-end; justify-content: flex-end; -ms-flex-align: flex-end; -webkit-box-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; text-align: right; width: 100%; height: 100%; font-size: 11px; padding-right: 20px; padding-bottom: 20px; }

.block--card .inner * { text-shadow: -1px -1px white, 1px 1px rgba(0, 0, 0, 0.2); }

.block--card .inner .member-id { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.08em; font-size: 18px; line-height: 1; margin-bottom: 7px; color: #6b6e71; width: 100%; position: absolute; bottom: 3px; text-align: center; }

.block--card .inner .nickname { margin-bottom: 5px; width: auto; display: inline-block; position: absolute; left: 17px; bottom: -20px; }

.block--card .inner .regist-date { width: 100%; text-align: right; padding-right: 5%; position: absolute; }

@media screen and (min-width: 1px) and (max-width: 768px) { .block--card { width: 100%; height: 56.7vw; margin-top: -10px; }
  .block--card .inner .member-id { bottom: -2vw; }
  .block--card + .txt--sub { width: 100%; margin: 0 auto 40px; }
  .block--attention { font-size: 13px; padding: 15px; border-radius: 4px; } }

@media screen and (min-width: 570px) and (max-width: 960px) { .block--card .inner .member-id { bottom: -3px; }
  .block--card { width: 367px; height: 209px; }
  .block--card + .txt--sub { width: 367px; margin: 0 auto 40px; }
  .page--mypage h1.logo { width: 110px; margin-bottom: 5px; } }

.list--menu .list--notes { padding-top: .5em; margin-bottom: 0; }

.list--menu .list--notes li { border: none; margin-bottom: .5em; }

.list--menu .list--notes li a { display: inline-block; text-decoration: underline; font-size: 11px; padding: 0; text-indent: 0; }

.list--menu .list--notes li a::after { display: none; }

/* 非会員 */
#mypage--app section .area--user-status.status--free { background: #999; }

/* 有料会員 */
#mypage--app section .area--user-status.status--member { background: #1f100a; }

@media screen and (min-width: 1px) and (max-width: 768px) { header h1 { width: 50vw; margin: 6px auto 20px auto; } }