@charset "UTF-8";
*,
::before,
::after {
  box-sizing: border-box; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

html {
  line-sizing: normal; }

body {
  margin: 0; }

pre {
  white-space: pre-wrap; }

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible; }

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%; }

img, svg, video, canvas {
  height: auto; }

audio {
  width: 100%; }

img {
  border-style: none;
  vertical-align: top;
  pointer-events: none; }

svg {
  overflow: hidden; }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: normal; }

ul,
ul li {
  list-style: none; }

ol {
  margin: 0 0 10px 0.8em;
  padding: 0 0 0 0.8em; }

ol li {
  list-style-position: outside; }

table {
  font-size: inherit;
  border-collapse: collapse; }

textarea {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch; }

form,
input,
select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

input,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none; }

/*
* 1. Add the correct box sizing in IE 10
* 2. Remove the padding in IE 10
*/
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0; }

/*------ 画像のパスを設定 ------*/
/*------ サポートブラウザの定義 ------*/
:root {
  --font-family:"Helvetica Neue", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
  --base-color:#fff;
  --key-color:#0238AE;
  --accent-color:#54A9D0;
  --font-color:#151515;
  --link-color:#000;
  --border-color:#c0c0c0;
  --focus-color:#333; }

/*------ 画像のパスを設定 ------*/
/*------ サポートブラウザの定義 ------*/
:root {
  --font-family:"Helvetica Neue", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
  --base-color:#fff;
  --key-color:#0238AE;
  --accent-color:#54A9D0;
  --font-color:#151515;
  --link-color:#000;
  --border-color:#c0c0c0;
  --focus-color:#333; }

.clear {
  clear: both; }

.block {
  display: block; }

.bold {
  font-weight: bold; }

.mb5 {
  margin-bottom: 5px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.mb60 {
  margin-bottom: 60px !important; }

.pd5 {
  padding: 5px; }

.pdtb5 {
  padding-top: 5px;
  padding-bottom: 5px; }

.pd10 {
  padding: 10px; }

.pd15 {
  padding: 15px; }

.red,
.error {
  color: red; }

.green {
  color: #339900; }

.white {
  color: white !important; }

.fontXXS {
  font-size: 77%; }

.fontXS {
  font-size: 85%; }

.fontS {
  font-size: 93%; }

.fontM {
  font-size: 108%; }

.fontL {
  font-size: 116%; }

.fontXL {
  font-size: 123.1%; }

.fontXXL {
  font-size: 131%; }

.fontXXXL {
  font-size: 146.5%; }

.gray {
  color: #999 !important; }

.center {
  text-align: center; }

.right {
  text-align: right; }

.hidden {
  overflow: hidden; }

html {
  font-size: 62.5%; }

body {
  position: relative;
  margin: 0;
  padding: 0;
  color: var(--font-color);
  font-size: 1.6em;
  font-family: var(--font-family);
  background: var(--base-color);
  line-height: 1.6;
  letter-spacing: 0.5px;
  -webkit-text-size-adjust: none;
  -webkit-backface-visibility: hidden; }

a {
  color: var(--link-color);
  text-decoration: none;
  -webkit-touch-callout: none; }

a:hover,
a:active {
  text-decoration: none; }

#page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

main {
  flex: 1; }

input,
textarea,
select {
  display: block;
  width: 100%;
  background: none;
  border: none;
  box-sizing: border-box; }

.form-group {
  margin-bottom: 24px; }
  .form-group dl {
    margin-bottom: 30px; }
  .form-group dt {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 1.4rem; }
  .form-group dd {
    position: relative; }
    .form-group dd:not(:last-child) {
      margin-bottom: 24px; }

.text-field {
  position: relative;
  max-width: 100%; }
  .text-field input {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    border: 1px var(--border-color) solid;
    font-size: 1.6rem; }
    .text-field input:read-only {
      color: #666;
      background: #e9e9e9; }
      .text-field input:read-only:focus {
        border: 1px var(--border-color) solid;
        box-shadow: none; }
    .text-field input:focus {
      border: 1px #3366ff solid;
      box-shadow: 0 0 0px 1px #3366ff; }

.select-box {
  position: relative; }
  .select-box:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    translate: 0 -50%;
    rotate: 135deg;
    width: 8px;
    height: 8px;
    border-top: 2px #333 solid;
    border-right: 2px #333 solid; }
  .select-box select {
    width: 100%;
    padding: 15px 38px 15px 15px;
    max-width: 100%;
    border-radius: 6px;
    border: 1px var(--border-color) solid;
    font-size: 1.6rem;
    background: #fff;
    cursor: pointer; }

.text-field + .plt-error,
.select-box + .plt-error {
  margin-top: 5px; }

.check-box label, .radio-btn label {
  display: flex;
  align-items: center;
  cursor: pointer; }
.check-box input, .radio-btn input {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background: #fff;
  border-radius: 4px;
  border: 1px var(--border-color) solid; }
  .check-box input:checked, .radio-btn input:checked {
    border: 1px #3366ff solid;
    background: #3366ff url(../../images/icon_check.svg) no-repeat center center;
    background-size: 14px 14px; }

.radio-btn input {
  border-radius: 9999px; }
  .radio-btn input:checked {
    background: #fff url(../../images/icon_radiobox.svg) no-repeat center center;
    background-size: 18px 18px; }

.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  translate: 0 -50%;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer; }

.plt-error {
  color: red;
  font-size: 1.3rem; }
  .plt-error + .plt-error {
    margin-top: 5px; }

.note {
  margin-top: 5px;
  font-weight: normal;
  font-size: 1.2rem; }

.btn-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between; }
  .btn-group .plt-btn, .btn-group .plt-btn-modify {
    width: calc(50% - 5px);
    margin: 0; }

.plt-btn, .plt-btn-modify {
  width: 100%;
  margin: 0 auto;
  background: #3366ff;
  border-radius: 8px;
  transition: 300ms;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); }
  @media (width >= 640px) {
    .plt-btn, .plt-btn-modify {
      width: 290px; } }
  .plt-btn:hover, .plt-btn-modify:hover {
    filter: contrast(2); }
  .plt-btn a, .plt-btn-modify a,
  .plt-btn input,
  .plt-btn-modify input {
    display: block;
    padding: 15px;
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
    text-align: center;
    line-height: normal; }

.plt-btn-modify {
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); }
  .plt-btn-modify input {
    color: var(--font-color); }

body {
  font-family: var(--font-family) !important; }

.platform {
  background: #eee; }
  .platform main {
    padding: 48px 0; }
    @media (width <= 640px) {
      .platform main {
        padding: 24px 0; } }

.plt-header {
  padding: 16px;
  background: #fff; }
  .plt-header h1 {
    text-align: center;
    font-weight: bold;
    font-size: 2.4rem; }
    .plt-header h1 a {
      display: block;
      width: 76px;
      height: 24px;
      background: url(../../images/fanmo.png) no-repeat top left; }

.plt-footer {
  padding: 16px; }
  .plt-footer small {
    display: block;
    font-size: 1.1rem;
    text-align: center; }

.plt-inner {
  width: 100%;
  max-width: 600px;
  margin: 0 auto; }
  @media (width <= 640px) {
    .plt-inner {
      padding: 0 min(3.75vw, 24px); } }

.plt-page-title {
  margin-bottom: 24px;
  font-weight: bold;
  font-size: 1.8rem; }
  @media (width >= 640px) {
    .plt-page-title {
      text-align: center; } }
  .plt-page-title span {
    display: block;
    font-size: 1.4rem;
    font-weight: normal; }

.arrow, .arrow-red {
  position: relative;
  padding-right: 16px; }
  .arrow:after, .arrow-red:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    width: 8px;
    height: 8px;
    border-right: 2px #222 solid;
    border-bottom: 2px #222 solid;
    rotate: -45deg; }
  .arrow.back, .back.arrow-red {
    padding: 0 0 0 16px; }
    .arrow.back:after, .back.arrow-red:after {
      left: 0;
      rotate: 135deg; }

.arrow-red:after {
  border-color: red; }

/* ==============================

regist/verify-email

============================== */
.page-verify-email main {
  display: flex;
  align-items: center; }

.guide-msg {
  margin-bottom: 24px;
  word-break: auto-phrase; }
  @media (width >= 640px) {
    .guide-msg {
      text-align: center; } }
  .guide-msg dl {
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px var(--border-color) solid; }
  .guide-msg dt {
    margin-bottom: 16px;
    font-weight: bold; }
  @media (width <= 600px) {
    .guide-msg dd br {
      display: none; } }
  .guide-msg dd a {
    color: #3366ff; }

.icon-prefix {
  display: flex;
  justify-content: center; }
  @media (width <= 640px) {
    .icon-prefix .guide-msg {
      flex: 1; } }

.icon-badge {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url(../../images/icon_badge.svg) no-repeat;
  background-size: contain; }

/* ==============================

regist/input

============================== */
.plt-birth-date {
  display: flex;
  justify-content: space-between; }
  .plt-birth-date > div {
    width: 38%; }
    .plt-birth-date > div:not(:first-child) {
      width: 28%; }

.zip-code {
  width: 120px; }
  .zip-code input {
    text-align: center; }

#manual-address {
  position: absolute;
  top: 50%;
  right: 10px;
  translate: 0 -50%;
  padding: 8px 16px;
  border: none;
  background: #151515;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  border-radius: 5px; }

.meter {
  width: 100%;
  height: 4px;
  margin-top: 8px;
  background: #eee;
  border-radius: 2px; }

#bar {
  width: 0;
  height: 100%;
  background: #e53935;
  transition: 600ms ease;
  border-radius: 3px; }

#password-msg {
  margin-top: 8px;
  font-size: 1.3rem; }

.payment-wrapper {
  background: #fff;
  border-radius: 8px;
  border: 1px var(--border-color) solid;
  overflow: hidden; }
  .payment-wrapper + .plt-error {
    margin-top: 5px; }

.payment-head {
  padding: min(2.5vw, 16px);
  background: #222;
  color: #fff; }

.payment-method li {
  padding: min(2.5vw, 16px); }
  .payment-method li:not(:last-child) {
    border-bottom: 1px var(--border-color) solid; }
  .payment-method li:nth-child(2), .payment-method li:nth-child(4) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; }
    @media (width <= 640px) {
      .payment-method li:nth-child(2) .note, .payment-method li:nth-child(4) .note {
        margin-top: 10px; } }
  .payment-method li.price {
    background: #f0f0f0; }
    .payment-method li.price span:first-of-type {
      font-weight: bold; }

/* ==============================

regist/comfirm

============================== */
.page-confirm .form-group {
  padding: min(3.75vw, 24px);
  background: #fff;
  border: 1px var(--border-color) solid;
  border-radius: 8px; }
.page-confirm dl {
  margin-bottom: 0; }
.page-confirm dd {
  padding-bottom: 24px; }
  .page-confirm dd:last-of-type {
    padding-bottom: 0; }
  .page-confirm dd:not(:last-of-type) {
    border-bottom: 1px var(--border-color) solid; }
.page-confirm .btn-group .plt-btn, .page-confirm .btn-group .plt-btn-modify {
  width: calc(65% - 5px); }
.page-confirm .btn-group .plt-btn-modify {
  width: calc(35% - 5px); }

/* ==============================

regist/verify-sms

============================== */
.page-verify-sms .form-group {
  display: flex;
  justify-content: center; }
  .page-verify-sms .form-group .text-field {
    max-width: calc(30px + 1em); }
    .page-verify-sms .form-group .text-field:not(:last-child) {
      margin-right: 8px; }
    .page-verify-sms .form-group .text-field input {
      padding: 15px 10px;
      text-align: center;
      font-weight: bold;
      font-size: 1.8rem; }

/* ==============================

mypage

============================== */
.m-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
  padding: min(5vw, 30px);
  aspect-ratio: 360 / 227;
  border-radius: min(4vw, 24px);
  color: #444;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 1; }

.m-site {
  font-weight: bold;
  font-size: clamp(1.2rem, 1.43vi + 0.74rem, 1.6rem); }

.m-name,
.m-date {
  width: 100%; }

.m-name > div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
  .m-name > div:first-child {
    font-size: clamp(1.8rem, 3.57vi + 0.66rem, 2.8rem); }
  .m-name > div:last-child {
    font-size: 1.3rem; }

.m-date {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; }
  .m-date li {
    line-height: 1.4;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: clamp(1.2rem, 1.43vi + 0.74rem, 1.6rem);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
    .m-date li span {
      display: block;
      font-size: 1rem !important;
      font-weight: normal; }

.m-line {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: min(4vw, 24px); }
  .m-line:before {
    content: '';
    position: absolute;
    top: min(1.67vw, 10px);
    left: min(1.67vw, 10px);
    width: calc(100% - calc(min(1.67vw,10px) * 2));
    height: calc(100% - calc(min(1.67vw,10px) * 2));
    border-radius: min(4vw, 24px);
    border: 3px #eee double; }

.m-cover {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: -1; }

/*---------- シルバー ----------*/
.data-table {
  margin-bottom: 24px;
  border: 1px var(--border-color) solid;
  background: #fff;
  border-radius: 12px; }
  .data-table + .plt-btn, .data-table + .plt-btn-modify {
    margin-bottom: 24px; }
  .data-table .data-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: min(2.5vw, 16px);
    min-height: calc(2em + calc(min(2.5vw, 16px) * 2)); }
    .data-table .data-item:not(:last-child) {
      border-bottom: 1px var(--border-color) solid; }
  .data-table .data-header {
    font-size: 1.4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
    @media (width <= 640px) {
      .data-table .data-header {
        width: 100%;
        font-weight: bold; } }
    .data-table .data-header span {
      display: block;
      font-weight: normal;
      font-size: 1.3rem; }
  @media (width >= 641px) {
    .data-table .data-content {
      margin-left: auto;
      text-align: right; } }
  .data-table .data-content + .change {
    margin-left: 15px; }
  .data-table .change {
    font-size: 1.2rem;
    letter-spacing: normal; }
    @media (width <= 640px) {
      .data-table .change {
        position: absolute;
        top: 50%;
        right: 15px;
        translate: 0 -50%; } }

/*---------- 配信設定 ----------*/
.status-active {
  color: #009900; }

.time-exclude {
  display: flex;
  align-items: center; }
  .time-exclude > div:not(:first-child) {
    margin-left: 8px; }

/*---------- 購入履歴 ----------*/
.purchase-list {
  margin-bottom: 8px;
  padding-bottom: 8px;
  font-size: 1.4rem;
  border-bottom: 1px var(--border-color) solid; }

.purchase-item dt {
  font-weight: bold; }
.purchase-item:not(:last-child) {
  margin-bottom: 8px; }

/*# sourceMappingURL=platform.css.map */