body, html {
  margin: 0;
  padding: 0;
  font-family: 'メイリオ', 'M PLUS Rounded 1c', sans-serif;
  width: 100%;
  height: 100vh
}

body.modal-open {
  padding-right: 15px;
  height: 100vh;
  overflow-y: hidden
}

body.album {
  padding-top: 200px
}

html {
  font-size: 62.5%
}

body {
  font-size: 1.6rem;
  line-height: 1.5
}

h1 {
  font-size: 36px;
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));
  line-height: 1.3
}

h2 {
  font-size: 24px;
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
  line-height: 1.3
}

h2 .sub {
  font-size: 1.2rem;
  font-weight: normal
}

.text_s {
  font-size: 75%
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3.6rem
  }
  h2 {
    font-size: 2.4rem
  }
}

@media screen and (max-width: 640px) {
  body {
    line-height: 2
  }
  h1 {
    font-size: 2.4rem
  }
  h2 {
    font-size: 2rem
  }
}

.clearfix:after {
  content: "";
  display: block;
  clear: both
}

.clearfix:before {
  content: "";
  display: block;
  clear: both
}

.clearfix {
  display: block
}

.label {
  border-radius: 3px;
  padding: 3px 7px
}

.container {
  width: calc(100% - 30px);
  margin: 0 auto;
  overflow: visible !important;
  position: relative
}

.wrapper {
  position: relative
}

.wrapper.center {
  text-align: center
}

.wrapper.center p, .wrapper.center div {
  display: block;
  text-align: center
}

.wrapper.default {
  margin: 2rem auto 1.5rem
}

.wrapper:last-child {
  margin-bottom: 0
}

.wrapper.ultoraWide {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px
}

button,
input[type="submit"] {
  transition: 0.1s;
  border: none;
  font-weight: bold;
  padding: 0.5em 0.9em 0.4em;
  border-radius: 1000px;
  margin-left: 0.5em;
  position: relative;
  top: -0.1em;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  position: relative;
  margin-bottom: 20px
}

button.default,
input[type='submit'].default{
  background-color: #ea561d;
  color: #fff;
  font-size: 1.8rem
}

button.em,
input[type='submit'].em {
  background-color: #00c1e0;
  color: #fff;
  font-size: 1.8rem
}

button.wide,
input[type='submit'].wide {
  width: 80%;
  margin-left: 0px;
  margin-right: 0px
}

button.wide.expand,
input[type='submit'].wide.expand {
  width: auto;
  max-width: 100%
}

button.icon {
  white-space: nowrap;
  padding-left: 2.3em
}

button.icon::before {
  content: '';
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 0.5em;
  left: 10px;
  display: inline-block
}

button.download::before {
  -webkit-mask: url("../svg/icon_download.svg");
  mask: url("../svg/icon_download.svg")
}

button.ultoraWide {
  width: 100%;
  margin-left: 0px;
  margin-right: 0px
}

button.wide_m {
  width: 60%;
  margin-left: 0px;
  margin-right: 0px
}

button:hover {
  top: 1px;
  left: 1px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer
}

button.invert {
  background-color: #fff;
  color: #ea561d;
  border: 1px solid #ea561d
}

button.middle {
  padding: 0.2rem 0.7rem 0.1rem
}

button.more {
  position: relative
}

button.more::after {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  -webkit-mask: url("../svg/icon_arrow_down.svg");
  mask: url("../svg/icon_arrow_down.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  right: 1rem;
  top: 1.3rem
}

button.prev::before {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  -webkit-mask: url("../svg/icon_arrow_left.svg");
  mask: url("../svg/icon_arrow_left.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 1rem;
  top: 1.3rem
}

button.next::before {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  -webkit-mask: url("../svg/icon_arrow_right.svg");
  mask: url("../svg/icon_arrow_right.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  right: 1rem;
  top: 1.3rem
}

button:disabled {
  background-color: #e6e6e6;
  color: gray;
  pointer-events: none
}

button.disabled {
  background-color: #e6e6e6;
  color: gray
}

.desvg.default path {
  fill: #ea561d
}

.desvg.icon {
  height: 1.2em;
  position: relative;
  top: 0.2em;
  margin-right: 0.2em
}

h1, h2, h3, h4 {
  line-height: 1.5
}

h1.center, h2.center, h3.center, h4.center {
  margin: auto auto
}

h2 {
  border-left: solid 10px #ea561d;
  padding: 0.4rem 1rem 0.1rem;
  margin: 3rem -15px 2rem
}

h2 .backBtn {
  display: inline-block;
  width: calc(1em * 1.5 + 0.5rem);
  height: calc(1em * 1.5 + 0.5rem);
  background-color: #ea561d;
  position: absolute;
  top: 0;
  left: -10px;
  cursor: pointer;
  text-align: center
}

h2 .backBtn .icon.arrow_left {
  display: inline-block;
  pointer-events: none;
  -webkit-mask: url("../svg/icon_arrow_left.svg");
  mask: url("../svg/icon_arrow_left.svg");
  height: 2rem;
  width: 2rem;
  background-color: #fff;
  position: absolute;
  left: 0.7rem;
  top: 0.8rem
}

h2.backBtn {
  padding-left: calc(1em * 1.5 + 0.2rem);
  position: relative;
  border-left-color: transparent;
  cursor: pointer
}

h4 {
  margin: 3rem 0 1rem
}

h4.section_title {
  color: #ea561d
}

h4 .btn:first-child {
  margin-left: 6px
}

h5 {
  margin: 3rem 0 1rem
}

a {
  color: #111;
  text-decoration: none
}

a:hover {
  color: #ea561d
}

a.blank {
  color: #0071bc
}

a.em {
  color: #00c1e0
}

.margin0 {
  margin: 0
}

.block {
  padding: 15px 15px 10px;
  margin: 20px auto 10px;
  position: relative
}

.line_light {
  border: 1px solid #999
}

.question i {
  display: none
}

.question::after {
  content: '';
  margin-left: 2px;
  height: 1.1em;
  width: 1.1em;
  display: inline-block;
  -webkit-mask: url("../svg/icon_question.svg");
  mask: url("../svg/icon_question.svg");
  background-color: #ea561d;
  position: relative;
  top: 3px;
  left: 0px
}

p.notice, p.error {
  color: #ea561d;
  text-indent: -1.5em;
  padding-left: 1.5em;
  line-height: 1.4
}

p.notice::before, p.error::before {
  content: '';
  height: 1.5rem;
  width: 1.5rem;
  display: inline-block;
  -webkit-mask: url("../svg/icon_point.svg");
  mask: url("../svg/icon_point.svg");
  background-color: #ea561d;
  position: relative;
  top: 3px;
  left: 0px
}

p.notice.center, p.error.center {
  text-align: center
}

p.notice.center.inline-block, p.error.center.inline-block {
  text-align: left;
  text-align: justify
}

p.notice a, p.error a {
  color: #00c1e0;
  margin-left: 2px;
  margin-right: 2px;
  border-bottom: 1px solid
}

p.notice.indent, p.error.indent {
  width: auto
}

.fade {
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
  opacity: 0
}

.in {
  opacity: 1
}

div.center {
  text-align: center
}

p.error {
  color: #c1272d
}

p.error::before {
  -webkit-mask: url("../svg/icon_aleart.svg");
  mask: url("../svg/icon_alart.svg");
  background-color: #c1272d
}

.margin_tb {
  margin-top: 2rem;
  margin-bottom: 2rem
}

.onTheLine {
  position: absolute;
  top: -0.9em;
  left: 0.5em;
  background: #fff;
  padding: 0px 5px;
  margin: 0
}

.card {
  position: relative;
  transition: 0.3s;
  border-radius: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.8rem
}

.card.imageIn {
  opacity: 0.1;
  transform: translate(0px, 30px)
}

.card.isAnimate {
  opacity: 1;
  transform: translate(0px, 0px)
}

.card * {
  transition: 0.3s
}

.card h3 {
  width: calc(100% - 40px);
  margin: 1.5rem auto 0.5rem;
  color: #ea561d
}

.card .period {
  width: calc(100% - 40px);
  margin: 0 auto;
  font-size: 1.2rem;
  color: #666;
  padding-bottom: 1.8rem
}

.card a .wrapper.image {
  overflow: hidden;
  border-radius: 15px 15px 0 0
}

.card a .wrapper.image .mainImage {
  width: calc(100% + 40px);
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center center;
  margin: -10px -20px 0px;
  transform: rotate(-2deg)
}

.card a:hover .wrapper.image .mainImage {
  width: 100%;
  margin: 0;
  transform: rotate(0deg)
}

#odai a {
  color: #ea561d;
  display: block
}

#odai a.search_link{
  color:#fff;
  display:inline-block;
  min-height: 90px;
  width:100%;
}



.overlay {
  display: block;
  position: fixed;
  position: -webkit-fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000000
}

.overlay_white {
  display: block;
  position: fixed;
  position: -webkit-fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 100000
}

.overlay_transparent {
  display: block;
  position: fixed;
  position: -webkit-fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0
}

p {
  line-height: 1.25;
  margin-top: 0;
  word-wrap: break-word
}

p.left {
  text-align: left
}

p.default {
  text-align: justify;
  text-justify: inter-ideograph
}

p.default a {
  color: #ea561d
}

p.default a.em {
  font-weight: bold
}

p.center {
  text-align: center
}

p a.btn:first-child {
  margin-left: 6px
}

.noBold {
  font-weight: normal
}

.note {
  font-size: 0.8em
}

.note.normal {
  font-weight: normal
}

.note a {
  color: #ea561d
}

.note a.btn {
  color: #fff
}

.indent {
  margin: 0 0 0 7px;
  width: calc(100% - 7px);
  position: relative
}

.pos_ab {
  position: absolute
}

.pos_ab.right {
  right: 0
}

.pos_ab.top {
  top: -5px
}

ul.history {
  line-height: 1.2;
  padding-left: 1.3em;
  margin-bottom: 0
}

ul.history a {
  color: #ea561d
}

ul.history li {
  margin-bottom: 1em
}

ul.history li:last-child {
  margin-bottom: 0
}

ul.noListStyle {
  list-style: none;
  margin: 0;
  padding: 0
}

ul.noListStyle li {
  padding: 0;
  margin: 0
}

ul.line {
  border: none;
  padding: 0
}

ul.line li {
  border-top: solid 1px #666;
  padding: 10px 0;
  list-style: none;
  display: flex
}

ul.line li div:first-child {
  margin-right: auto
}

ul.line li div.btn_area {
  padding-right: 15px
}

ul.line li:last-child {
  border-bottom: solid 1px #666
}

.required::after {
  content: "*";
  color: #c1272d
}

.loggedIn .container {
  /*padding-bottom: 130px*/
  padding-bottom: 200px
}

#thumb_album {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap
}

#thumb_album li {
  width: calc(100% / 3);
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center center;
  position: relative;
  list-style: none
}

#thumb_album li.ping::after {
  content: '';
  background-image: url("../svg/icon_color_pin.svg");
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px
}

#thumb_album li.pages::before {
  content: '';
  background-image: url("../svg/icon_color_photos.svg");
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 30px;
  height: 30px
}

#thumb_album.numbering {
  counter-reset: my-counter
}

#thumb_album.numbering li::after {
  content: counter(my-counter);
  background-image: none;
  counter-increment: my-counter;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  position: absolute;
  font-weight: bold;
  top: 5px;
  left: 5px;
  text-shadow: 0 0 3px #000
}

#thumb_album.numbering li.empty {
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.2;
  border: dashed 1px #ccc;
  width: calc((100% / 3) - 2px)
}

#thumb_album.numbering li.empty::after {
  content: none;
  background-image: none
}

#thumb_album.numbering li.empty::before {
  content: none;
  background-image: none
}

#thumb_album.numbering li.empty:hover {
  background: none;
  border: solid 2px #ea561d;
  color: #ea561d;
  width: calc((100% / 3) - 4px)
}

#thumb_album.numbering li.empty:hover::before {
  background-image: none
}

#thumb_album.numbering li:hover {
  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: multiply
}

#thumb_album.numbering li:hover:before {
  content: '';
  width: 100%;
  height: 100%;
  display: inline-block;
  background: url("../svg/icon_trash.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: lighty
}

#contents_menu {
  background:none;
  display: inline-block;
  margin: 0 auto;
  padding:0;
  position: fixed;
  position: -webkit-fixed;
  left: 0;
  bottom: 70px;
  z-index: 100000;
  transition: 0.5s;
  opacity: 0;
}

#contents_menu .contents_menu_inner{
  width:120px;
  display:block;
  background: #ea561d;
  padding: 8px 10px 0px 35px;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  float: right;
  margin-right:0;
  box-sizing: border-box;
}

#contents_menu .contents_menu_inner:before {
  content: '';
  background-repeat: no-repeat;
  background: url("../svg/icon_menu.svg");
  width: 60px;
  height: 20px;
  display: inline-block;
  position: relative;
  left: -10px
}

#contents_menu li {
  text-align: left;
  list-style: disc;
  white-space: nowrap
}

#contents_menu.open {
  border-radius: 15px 0 0 0;
  right: 0
}

#contents_menu.open li {
  display: list-item
}

#contents_menu.open li:last-child {
  padding-bottom: 20px
}

#contents_menu a {
  color: #fff
}

#contents_menu a:hover {
  color: #ffff64
}

.account #account svg {
  fill: #ffff64
}

.profile #profile svg {
  fill: #ffff64
}

.profile table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 2px solid #f2f2f2
}

.profile table tr:nth-child(odd) {
  background: #f2f2f2
}

.profile table th, .profile table td {
  text-align: left;
  padding: 3px 5px;
  margin: 0;
  font-weight: bold
}

.profile+.btn_area {
  text-align: center
}

.profile+.btn_area .btn {
  min-width: 60px;
  text-align: center
}

.profile+.btn_area .btn.close {
  cursor: pointer
}

.profile+.btn_area .btn.close::before {
  content: '';
  display: inline-block;
  width: 12px;
  aspect-ratio: 1/1;
  -webkit-mask: url("../svg/btn_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask: url("../svg/btn_close.svg");
  mask-repeat: no-repeat;
  position: relative;
  top: 1px
}

#footer{}

#footer_menu {
  background: #ea561d;
  padding: 0;
  position: fixed;
  position: -webkit-fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100010;
  margin: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
}

#footer_menu .inner{
  display:flex;
  width:100%;
  max-width:500px;
  margin:0 auto;
}

#footer_menu li {
  display: block;
  flex: 1;
  padding: 6px 8px;
}

#footer_menu li p {
  font-size:2.3vw;
  line-height: 0;
}

@media screen and (min-width: 609px) {
  #footer_menu li p {
    font-size:2vw;
  }
}


@media screen and (min-width: 700px) {
  #footer_menu li p {
    font-size:1vw;
  }
}

@media screen and (min-width: 1280px) {
  #footer_menu li p {
    font-size:9px;
  }
}

#footer_menu li#theme svg {
  transform: scale(0.88)
}

#footer_menu .desvg {
  fill: #fff;
  cursor: pointer
}

.pill {
  display: inline-block;
  padding: 3px 5px 2px;
  border-radius: 2rem;
  font-size: 1rem;
  line-height: 1;
  font-weight: normal;
  margin: 0 5px 0 5px;
  position: relative;
  top: -2px
}

.pill.public {
  background-color: #ea561d;
  color: #fff
}

.pill.private {
  background-color: #b3b3b3;
  color: #fff
}

.link {
  color: #ea561d;
  cursor: pointer
}

.modal, .usercard {
  display: block;
  width: calc(100% - 70px);
  margin: 50px auto;
  min-height: 200px;
  border-radius: 10px;
  background: #fff;
  padding: 15px 15px 100px;
  /*position: relative;*/
  top: calc(50% - 120px);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  /*z-index: 100001*/
}

.usercard.album{
  padding: 15px;
}

.modal h2, .usercard h2 {
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1.2
}

.modal h4, .usercard h4 {
  margin: 10px 0 10px;
  line-height: 1.2
}

.modal .scroll, .usercard .scroll {
  overflow: auto;
  max-height: calc(100% - 50px);
  padding-bottom: 20px;
  width: 100%;
  border-radius: 0 0 10px 10px
}

.modal .scroll.pb0, .usercard .scroll.pb0 {
  padding-bottom: 0
}

.modal .scroll section+section, .usercard .scroll section+section {
  margin-top: 20px
}

.modal .scroll section:last-child, .usercard .scroll section:last-child {
  margin-bottom: 0
}

.modal .scroll section:last-child button, .usercard .scroll section:last-child button {
  margin-bottom: 0
}

.modal .scroll section.extend_each, .usercard .scroll section.extend_each {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 1px
}

.modal .scroll section.extend_each.indent, .usercard .scroll section.extend_each.indent {
  padding-left: 22px;
  width: calc(100% + -7px) !important
}

.modal .scroll section.extend_each table.extend_right, .usercard .scroll section.extend_each table.extend_right {
  width: calc(100% + 15px)
}

.modal .scroll section.extend_each table.extend_right td, .usercard .scroll section.extend_each table.extend_right td {
  padding-right: 15px
}

.modal .scroll.extend_left, .usercard .scroll.extend_left {
  margin-left: -15px;
  padding-left: 15px
}

.modal .scroll.extend_left .chart h3.underline, .usercard .scroll.extend_left .chart h3.underline {
  font-size: 1.6rem;
  margin-left: -22px;
  margin-bottom: 0;
  padding-left: 22px
}

.modal .scroll.extend_each, .usercard .scroll.extend_each {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 0
}

.modal.q_modal p:last-child, .usercard.q_modal p:last-child {
  margin-bottom: 0
}

.deadline {
  font-size: 1.3rem;
  text-align: right
}

.avatar {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  margin-right: 5px
}

.photo_image {
  aspect-ratio: 16 / 9;
  position: relative;
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
  margin: 0 -15px 30px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center
}

.photo_image.stamp::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.8)
}

.photo_image.stamp.ineligible::before {
  width: 36px;
  height: 36px;
  right: 12px;
  bottom: 12px;
  border-radius: 8px
}

table.odai_data {
  font-size: 1.4rem;
  line-height: 1.3;
  border-collapse: separate;
  border-spacing: 2px 8px
}

table.odai_data th {
  background-color: #e6e6e6;
  font-weight: normal;
  padding: 2px 5px 1px
}

table.odai_data td {
  padding: 2px 5px 1px
}

h3.underline {
  margin-left: -15px;
  display: inline-block;
  padding-left: 15px;
  padding-right: 2px;
  border-bottom: 2px solid #ea561d
}

div.odai_data {
  margin-bottom: 1em
}

div.odai_data .clipboard {
  padding-right: 1.5em;
  font-size: 1.4rem;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 0 0 0.5em
}

div.odai_data .clipboard::after {
  -webkit-mask: url("../svg/icon_clipboard.svg");
  mask: url("../svg/icon_clipboard.svg");
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: #ea561d;
  position: absolute;
  top: calc(50% - 0.8em);
  right: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat
}

div.odai_data dl {
  line-height: 2;
  margin: 0.5em 0 0;
  display: inline-block
}

div.odai_data dl dt {
  font-size: 1.3rem;
  display: inline-block;
  background-color: #f2f2f2;
  padding: 2px 4px
}

div.odai_data dl dd {
  font-size: 1.3rem;
  margin: 0 10px 0 0;
  display: inline-block
}

div.odai_data dl dd strong {
  color: #ea561d;
  font-weight: bold;
  font-size: 1.2em
}

#odai_footer_link {
  margin: 0;
  text-align: center
}

#odai_footer_link ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  text-align: left
}

#odai_footer_link ul .search::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  -webkit-mask: url("../svg/icon_loupe.svg");
  mask: url("../svg/icon_loupe.svg");
  -webkit-mask-repeat: no-repeat;
  background-color: #ea561d
}

.filter {
  clear: both;
  border: 1px solid #999;
  padding: 20px 15px 10px 15px;
  font-size: 1.3rem;
  margin-bottom: 10px;
  position: relative
}

.filter::before {
  content: "";
  position: absolute;
  top: -23px;
  right: 8px;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2
}

.filter::after {
  content: "";
  position: absolute;
  top: -24px;
  right: 8px;
  margin-left: -17px;
  border: 12px solid transparent;
  border-bottom: 12px solid #555;
  z-index: 1
}

.filter ul {
  padding: 0;
  margin-bottom: 0
}

.filter ul li {
  display: inline;
  font-weight: bold
}

.filter ul li::after {
  content: ', '
}

.filter ul li:last-child::after {
  content: ''
}

section.border-top {
  border-top: 1px solid #999
}

section.border-bottom {
  border-bottom: 1px solid #999
}

section.extend_each {
  margin-left: -15px;
  margin-right: -15px;
  width: calc(100% + 30px)
}

section p.kome, section p.notice {
  color: #ea561d
}

section p.kome a, section p.notice a {
  display: inline !important;
  border-bottom: 1px solid
}

section.photoModal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  background: #fff;
  width: 100%;
  margin: 0;
  padding-top: 90px
}

section.photoModal .btn_area {
  padding: 5px 10px
}

section.photoModal .user_header {
  position: fixed;
  position: -webkit-fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  width: 100%
}

section.photoModal .post {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
  margin-bottom: 15px
}

section.photoModal .post:last-child {
  margin-bottom: 90px
}

section.photoModal .date, section.photoModal .post_title, section.photoModal .comment {
  width: calc(100% - 30px);
  margin: 5px auto
}

section.photoModal .date {
  font-size: 1.2rem
}

section.photoModal .post_title {
  font-weight: bold
}

section.photoModal .comment {
  line-height: 1.4
}

section .number {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: gray;
  margin-bottom: 3px
}

section h2 {
  margin: 0
}

section .btn_close {
  border: none;
  top: 10px;
  right: 10px;
  box-shadow: none
}

section .btn_close:after {
  content: '';
  -webkit-mask: url("../svg/icon_close.svg");
  mask: url("../svg/icon_close.svg");
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #333
}

section .photos {
  width: 100%;
  overflow: auto;
  margin-bottom: 20px
}

section .photos ul {
  width: calc(80% * 6);
  padding: 0;
  margin: 0 auto 10px
}

section .photos li {
  list-style: none;
  display: inline-block;
  max-width: 320px;
  min-width: 200px;
  max-height: 600px;
  aspect-ratio: 9 / 16;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  float: left;
  margin: 0 20px 0 0
}

section.list {
  border-bottom: solid 1px #999;
  padding-right: 15px;
  padding-bottom: 7px;
  margin-bottom: 10px
}

section.meet, section.election {
  margin-top: 15px
}

section.meet .label_area, section.election .label_area {
  margin-bottom: 10px
}

section.meet .label_area .number, section.election .label_area .number {
  display: inline-block
}

section.meet h4, section.election h4 {
  margin: 5px 0 0
}

section.meet .period, section.election .period {
  font-size: 1.2rem;
  text-align: right;
  color: #4d4d4d
}

section.meet .label, section.election .label {
  background-color: #999;
  color: #fff;
  font-size: 1.2rem;
  position: relative;
  top: -1px
}

section.meet .label.active, section.election .label.active {
  background-color: #39b54a
}

section.meet .other, section.election .other {
  font-size: 1.4rem;
  margin: 10px 0
}

section.meet .other p, section.election .other p {
  margin: 5px 0
}

section.meet .other p b, section.election .other p b {
  color: #ea561d
}

section.meet .other p a, section.election .other p a {
  font-weight: bold
}

section.meet .other p .status, section.election .other p .status {
  font-weight: bold
}

section.meet .other p .status.yet, section.election .other p .status.yet {
  color: #ea561d
}

section.meet .other p .status.done, section.election .other p .status.done {
  color: gray
}

section.album {
  margin-left: -15px;
  margin-right: -15px
}

.wrapper_user {
  margin-bottom: 0px;
  z-index: 100000
}

.wrapper_user.fixed {
  position: fixed;
  position: -webkit-fixed;
  backdrop-filter: blur(12px);
  top: 64px
}

.wrapper_user.fixed .usercard {
  box-shadow: none;
  margin-left: -15px;
  margin-right: -15px;
  width: calc(100% + 30px);
  margin-top: 0;
  padding-top: 10px;
  background: none;
  border-radius: 0;
  min-height: auto;
  background: #fff
}

.wrapper_user.fixed .usercard h2 {
  border-radius: 0;
  padding-top: 2px;
  padding-bottom: 1px;
  margin-bottom: 10px
}

.wrapper_user.fixed .usercard .user_header {
  margin-bottom: 0
}

.wrapper_user.fixed .usercard .btn_area {
  margin-left: -6px;
  margin-bottom: 7px
}

.usercard {
  width: calc(100% - 40px);
  z-index: auto;
  padding-top: 0;
  margin-top: 1.5rem
}

.usercard .user_header {
  justify-content: space-between;
  margin-bottom: 1em
}

.usercard h2 {
  margin-top: 0;
  border-radius: 10px 0 0 0;
  padding-top: 10px;
  padding-bottom: 7px;
  margin-right: auto;
  margin-bottom: 1em
}

.usercard .number {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: gray;
  margin-bottom: 3px
}

.usercard .photo {
  margin-top: 15px;
  aspect-ratio: 1 / 1
}

.usercard .tag {
  padding: 0;
  font-size: 0
}

.usercard .tag li {
  background-color: gray;
  color: #fff;
  border-radius: 50px;
  font-size: 1.1rem;
  padding: 4px 8px 3px;
  line-height: 1.2;
  margin: 0 5px 5px 0;
  display: inline-block;
  opacity: 0.5
}

.usercard .appeal {
  margin: 0 auto;
  padding: 12px 15px;
  background-color: #f2f2f2;
  text-align: justify;
  text-justify: inter-ideograph
}

ul.sns_list {
  padding: 0 0 0 1.7em
}

ul.sns_list li {
  margin-bottom: 0.2em
}

.other_site {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0071bc
}

.other_site .date {
  font-size: 1.3rem;
  font-weight: normal;
  color: #666;
  padding-left: 0.5em
}

.sns_icon {
  list-style: none;
  padding: 0;
  cursor: pointer;
  position: relative
}

.sns_icon:before {
  content: "";
  display: inline-block;
  background-color: #ea561d;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  left: -1.7em;
  top: 0.2em
}

.sns_icon.twitter::before {
  -webkit-mask: url("../svg/icon_twitter.svg");
  mask: url("../svg/icon_twitter.svg")
}

.sns_icon.facebook::before {
  -webkit-mask: url("../svg/icon_facebook.svg");
  mask: url("../svg/icon_facebook.svg")
}

.sns_icon.instagram::before {
  -webkit-mask: url("../svg/icon_instagram.svg");
  mask: url("../svg/icon_instagram.svg")
}

.overlay .usercard {
  margin: -15px;
  box-shadow: none;
  width: 100%;
  padding-bottom: 0;
  background-color: unset;
  max-height: 100%
}

.overlay .usercard table {
  margin-top: 0;
  margin-right: 0;
  width: 100%
}

.overlay .other_link {
  margin-bottom: 0
}

.table_wrapper {
  font-size: 1.3rem;
  margin-top: 1.5rem;
  line-height: 1.4;
  margin-left: -15px;
  margin-right: -15px;
  border: 1px solid #666;
  border-right: none;
  border-left: none;
  padding-top: 15px;
  padding-bottom: 15px
}

.table_wrapper.user_status {
  margin-left: auto;
  margin-right: auto
}

.table_wrapper.user_status.noBorder {
  border: none;
  padding: 0
}

.table_wrapper.center {
  text-align: center
}

.table_wrapper.center table {
  margin: 0 auto
}

.table_wrapper th {
  font-weight: normal
}

.table_wrapper td {
  font-weight: bold;
  font-size: 1.8rem;
  padding-right: 7px;
  text-align: left
}

.on {
  color: #ea561d
}

.on:before {
  background-color: #ea561d
}

.off {
  color: gray;
  opacity: 0.6
}

.off:before {
  background-color: gray
}

.check::before {
  content: '';
  -webkit-mask: url("../svg/icon_check.svg");
  mask: url("../svg/icon_check.svg");
  width: 15px;
  height: 15px;
  display: inline-block;
  position: relative;
  top: 2px
}

.prof {
  border-radius: 7px
}

.prof ul {
  margin-bottom: 0;
  padding: 15px 15px 15px 40px
}

.prof ul li::marker {
  color: #ea561d
}

.prof ul li a {
  color: #000
}

.prof.open {
  background-color: rgba(234, 86, 29, 0.1)
}

.other_link {
  padding-top: 1.5rem;
  justify-content: space-evenly;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: -16px
}

.other_link.border {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  margin: 10px 0
}

.other_link span {
  width: 50%;
  padding: 5px 0
}

.other_link span.active {
  background-color: rgba(234, 86, 29, 0.1);
  border-radius: 7px 7px 0 0
}

.other_link .center {
  text-align: center
}

.jump, .openModal {
  cursor: pointer
}

.odai {
  padding-bottom: 130px
}

.odai div.notification .label {
  position: relative
}

.odai div.notification .label.election {
  top: -6px;
  letter-spacing: normal
}

.odai div.notification .label.election.done {
  background-color: #ffd9d9;
  color: #c1272d
}

.odai div.notification .label.election.yet {
  background-color: #ceecf4;
  color: #0071bc
}

.odai a {
  color: #000
}

.odai a.btn {
  color: #fff;
  margin-right: 6px
}

.odai a.btn.default {
  color: #fff
}

.odai a.icon.jump::after {
  background: url(../svg/icon_color_pagejump.svg)
}

.odai a.icon.after::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  position: relative;
  top: 4px
}

.odai .btn.default.search a,
.user .btn.default.search a{
  color:#fff;
}

.odai .flex {
  margin: 3px 15px;
  padding-bottom: 10px
}

.odai .flex.modernSelect {
  padding-bottom: 0;
  margin: 0
}

.odai .flex .btn {
  margin-top: 7px
}

.odai .flex.pb100 {
  padding-bottom: 100px
}

.odai .flex.pb130 {
  padding-bottom: 130px
}

.odai article.list .flex {
  margin: 0;
  padding: 0
}

.odai .label {
  display: inline-block;
  min-width: 5em;
  font-size: 1.2rem;
  line-height: 1.4;
  background: #efe7ac;
  color: #605c45;
  text-align: center
}

.odai .label.election {
  color: #fff;
  background: #ff7bac;
  font-weight: bold;
  text-indent: 0.5em;
  letter-spacing: 0.5em
}

.odai .label.dis-election {
  color: #fff;
  background: #9c9c9c;
  font-weight: bold;
  text-indent: 0.5em;
  letter-spacing: 0.5em
}

.odai .label.yet {
  background: #39b54a;
  color: #fff
}

.odai .period {
  font-size: 1.4rem
}

.odai .period.pb0 {
  padding-bottom: 0
}

.odai .period b {
  font-size: 1.6rem;
  font-weight: bold
}

.odai ul {
  padding: 0;
  margin: 0
}

.odai ul li {
  list-style: none
}

.odai table.select {
  width: 100%
}

.odai table.select th {
  width: 40%;
  text-align: left;
  line-height: 1.2;
  font-size: 1.4rem
}

.odai table.select th[colspan] {
  width: 100%
}

.odai table.select th[colspan] .wrapper_checkbox {
  width: 100%;
  margin: 0
}

.odai table.select th.q_title {
  height: 4em
}

.odai table.select th.indent {
  padding-left: 1em
}

.odai .usercard .user_header {
  margin: 0
}

.odai .usercard .other_link {
  margin: 10px 0
}

.odai .usercard .other_link.flex a {
  color: #ea561d
}

.odai .btn {
  margin-left: 0
}

.pb130 {
  padding-bottom: 130px
}

.invisible {
  display: none
}

.btn_square ul {
  padding: 0;
  display: block
}

.btn_square ul li {
  list-style: none;
  display: inline-block;
  background-color: #ccc;
  width: calc(50% - 23px);
  aspect-ratio: 16 / 9;
  text-align: center;
  color: #fff;
  padding: 10px;
  margin-bottom: 5px;
  min-height: 90px;
  font-weight: bold;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

.btn_square ul li:nth-child(1) {
  border-radius: 15px 0 0 0;
  background-image: url(../images/atari/square_1.jpg)
}

.btn_square ul li:nth-child(2) {
  border-radius: 0 15px 0 0;
  background-image: url(../images/atari/square_2.jpg)
}

.btn_square ul li:nth-child(3) {
  border-radius: 0 0 0 15px;
  background-image: url(../images/atari/square_3.jpg)
}

.btn_square ul li:nth-child(4) {
  border-radius: 0 0 15px 0;
  background-image: url(../images/atari/square_4.jpg)
}

.stamp::after {
  position: absolute;
  right: 10px;
  bottom: 10px;
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px
}

.stamp.done::after {
  -webkit-mask: url("../svg/stamp_done.svg");
  mask: url("../svg/stamp_done.svg");
  background: #ea561d
}

.stamp.yet::after {
  -webkit-mask: url("../svg/stamp_yet.svg");
  mask: url("../svg/stamp_yet.svg");
  background: #368d1d
}

.stamp.ineligible::after {
  -webkit-mask: url("../svg/stamp_ineligible.svg");
  mask: url("../svg/stamp_ineligible.svg");
  background: gray
}

.other_data table {
  border-collapse: collapse
}

.other_data th {
  text-align: left;
  vertical-align: top
}

.other_data th .btn {
  margin-left: 0
}

.other_data td {
  padding-left: 10px
}

.other_data p.memo {
  font-size: 1.3rem;
  padding: 10px;
  background-color: #f2f2f2;
  margin: 5px 0 0
}

.other_data .btn {
  padding: 4px 8px 3px 25px;
  font-size: 1.2rem;
  min-width: calc(4em + 20px)
}

.other_data .btn.icon {
  font-size: 1.1rem;
  padding-left: 30px
}

.other_data .btn.icon::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 7px;
  width: 16px;
  height: 16px;
  background-color: #fff
}

.other_data .btn.icon.tag::before {
  -webkit-mask: url("../svg/icon_label.svg");
  mask: url("../svg/icon_label.svg")
}

.other_data .btn.icon.memo::before {
  -webkit-mask: url("../svg/icon_memo.svg");
  mask: url("../svg/icon_memo.svg");
  top: 2px
}

.other_data .btn.icon.mail::before {
  -webkit-mask: url("../svg/icon_mail.svg");
  mask: url("../svg/icon_mail.svg");
  top: 2px
}

.other_data .btn.icon.election::before {
  -webkit-mask: url("../svg/icon_medal.svg");
  mask: url("../svg/icon_medal.svg");
  top: 2px
}

.other_data .btn.icon.dis-election::before {
  -webkit-mask: url("../svg/icon_dis-election.svg");
  mask: url("../svg/icon_dis-election.svg");
  top: 2px
}

.other_data .btn.icon.notification::before {
  -webkit-mask: url("../svg/icon_notification.svg");
  mask: url("../svg/icon_notification.svg");
  top: 2px
}

.other_data .label_area .label {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1.4;
  background: #efe7ac;
  color: #605c45
}

.other_data .label_area .label.election {
  color: #0071bc;
  background: #ceecf4;
  font-weight: bold
}

.overlay_prof {
  /*position: absolute;*/
  top: 0;
  left: -15px;
  z-index: 9999;
  width: 100%;
  background: #fff;
  /*padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 130px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)*/
}

.overlay_prof .btn_close {
  top: 10px;
  left: 10px;
  right: auto;
  position: fixed;
  position: -webkit-fixed
}

.overlay_prof .photo_image {
  aspect-ratio: 16 / 9;
  position: relative;
  width: calc(100% + 30px);
  left: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center
}

.overlay_prof .photo_image .btn_area {
  position: absolute;
  right: 10px;
  bottom: 5px
}

.overlay_prof .number {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: gray;
  margin-bottom: 3px
}

.overlay_prof .photo {
  margin-top: 15px;
  aspect-ratio: 1 / 1
}

.overlay_prof .tag {
  padding: 0;
  font-size: 0
}

.overlay_prof .tag li {
  background-color: gray;
  color: #fff;
  border-radius: 50px;
  font-size: 1.1rem;
  padding: 4px 8px 3px;
  line-height: 1.2;
  margin: 0 5px 5px 0;
  display: inline-block;
  opacity: 0.5
}

.overlay_prof p {
  line-height: 1.5
}

.overlay_prof p.prof {
  margin: 0 30px
}

#keepMenu {
  position: fixed;
  position: -webkit-fixed;
  bottom: 75px;
  /*left: 10px;*/
  z-index:100001;
}

#keepMenu .btn {
  width: 50px;
  aspect-ratio: 1 /1;
  padding: 0
}

#keepMenu .btn::before {
  content: '';
  background-color: #fff;
  width: 50px;
  height: 50px;
  aspect-ratio: 1 /1;
  display: inline-block;
  position: relative;
  top: 1px;
  left: 2px
}

#keepMenu .btn.prev::before {
  -webkit-mask: url("../svg/icon_prev.svg");
  mask: url("../svg/icon_prev.svg")
}

#keepMenu .btn.next::before {
  -webkit-mask: url("../svg/icon_next.svg");
  mask: url("../svg/icon_next.svg")
}

#keepMenu .btn.keep::before {
  -webkit-mask: url("../svg/icon_keep.svg");
  mask: url("../svg/icon_keep.svg");
  width: 89%;
  left: 6px;
  top: 2px
}

.preview {
  width: 150px;
  max-height: 200px
}

section {
  margin: 3rem auto
}

section.center {
  text-align: center
}

section.center p.left {
  display: inline-block;
  text-align: left
}

section.wrapper_input {
  margin: 2em auto
}

section.indent {
  width: calc(100% - 15px);
  margin:0 auto;
}

section.indent.extend_right {
  width: calc(100% + 15px)
}

section:last-child {
  margin-bottom: 0
}

section.extend_right {
  /*margin-right: -15px*/
}

section.extend_left {
  margin-left: -15px
}

.wallet .float .btn_area {
  margin-top: -7px
}

.wallet table {
  border-collapse: collapse
}

.wallet table tr.border-top td, .wallet table tr.border-top th {
  border-top: 1px solid #999;
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: middle
}

.wallet table tr.border-top td:last-child {
  padding-right: 10px
}

.wallet table tr.border-top .wrapper_checkbox label.empty {
  top: unset
}

.wallet table tr.border-bottom td, .wallet table tr.border-bottom th {
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  padding-top: 10px
}

.wallet table tr.pt10 td, .wallet table tr.pt10 th {
  padding-top: 10px
}

.wallet table.wallet tr.border-bottom+tr td, .wallet table.wallet tr.border-bottom+tr th {
  padding-top: 10px
}

.wallet table.statement {
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 1.3rem;
  line-height: 1.3
}

.wallet table.statement th {
  font-weight: normal;
  width: 40%;
  background: #f2f2f2;
  text-align: center
}

.wallet table.statement td {
  text-align: left
}

.wallet table.statement th, .wallet table.statement td {
  padding: 5px 2px
}

.wallet table.statement th table.wallet td.yen, .wallet table.statement td table.wallet td.yen {
  text-align: right
}

.wallet table.statement th table.wallet td.detail, .wallet table.statement td table.wallet td.detail {
  font-size: 0.8em;
  text-align: left
}

#terms {
  padding: 15px;
  width: calc(100% - 32px) !important;
  border-color: #666;
  max-height: 50%;
  font-size: 1.4rem;
  line-height: 1.5;
  border-radius: 0
}

article.extend_each {
  margin-right: -15px;
  margin-left: -15px;
  padding-left: 15px;
  padding-right: 15px
}

article.extend_right {
  margin-right: -15px
}

article.border_top {
  margin-top: 1em;
  border-top: solid 1px #666;
  padding-top: 15px
}

article.border_top.dashed {
  border-top: dashed 1px #666
}

article.block {
  border-bottom: solid 1px #666;
  padding-left: 0
}

article.block.top {
  border-top: solid 1px #666
}

article.block h4 {
  margin-top: 0
}

article.block+.block {
  border-top: none
}

article.block:last-child {
  border-bottom: none;
  padding-bottom: 0
}

article.noBorder {
  border: none;
  padding-top: none;
  padding-bottom: none
}

article section {
  padding: 15px 10px
}

article section>h5 {
  margin-top: 0;
  color: #ea561d;
  font-size: 1.5rem;
  line-height: 1.3
}

article section>h5::before {
  content: '●';
  margin-right: 0px
}

article section .attribute>h6 {
  margin: 0
}

article section.prof {
  margin-bottom: 1.5rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
}

article section.prof+.prof {
  margin-top: 1.5rem
}

article section.prof>h4 {
  margin-top: 2rem
}

article section.prof>h4:first-child {
  margin-top: 0
}

article section.prof ul {
  padding: 0;
  margin: 0 0 15px;
  line-height: 1.6
}

article section.prof ul li {
  background-color: gray;
  color: #fff;
  border-radius: 50px;
  font-size: 1.1rem;
  padding: 4px 8px 3px;
  line-height: 1.2;
  margin: 0 5px 5px 0;
  display: inline-block;
  margin: 0;
  position: relative
}

article section.prof ul.edit li {
  padding-right: 27px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
}

article section.prof ul.edit li:hover {
  top: 1px;
  left: 1px
}

article section.prof ul.edit li::after {
  content: '';
  -webkit-mask: url("../svg/icon_close.svg");
  mask: url("../svg/icon_close.svg");
  background-color: rgba(0, 0, 0, 0.6);
  background-position: -1px center;
  display: inline-block;
  height: 100%;
  width: 19px;
  position: absolute;
  right: 1px;
  bottom: 0
}

article section.prof ul.edit li::before {
  content: '';
  display: inline-block;
  height: 100%;
  width: 19px;
  border-left: 1px solid #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.5
}

article section.prof ul.edit li:hover {
  background-color: #ea561d
}

article section.prof ul.edit li:hover::after {
  opacity: 1
}

article section.prof ul.edit li.error {
  background-color: #c1272d
}

article section.prof ul.edit li.btn_plus {
  background-color: #00c1e0
}

article section.prof ul.edit li.btn_plus::after {
  -webkit-mask: url("../svg/icon_tag_plus.svg");
  mask: url("../svg/icon_tag_plus.svg");
  background-color: #fff
}

article section.prof p.caution {
  text-align: center;
  margin: 10px -10px 0
}

article section.prof p.caution.mb20 {
  margin-bottom: 20px
}

article section.prof p.caution.left {
  text-align: left;
  text-indent: -1.2em;
  padding-left: 3em
}

article section.prof p.caution.left::before {
  left: -0.2em
}

article section.prof:last-child {
  margin-bottom: 0
}

article section.lock {
  background: #f2f2f2
}

article section.lock p.caution {
  margin-bottom: -15px
}

article section.lock .btn.lock {
  background: #e6e6e6;
  color: #808080
}

article section.lock .btn.lock::before {
  content: "";
  -webkit-mask: url("../svg/icon_lock.svg");
  mask: url("../svg/icon_lock.svg");
  background-color: #808080
}

.line {
  border: solid 1px #666
}

.line.dashed {
  border-style: dashed
}

.line.edit {
  border-color: #b3b3b3;
  color: #b3b3b3
}

.line.editted {
  border-color: transparent
}

.line.top {
  border-right: none;
  border-bottom: none;
  border-left: none
}

.v-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center
}

.photo {
  width: 110px;
  height: 110px;
  line-height: 1.2;
  text-align: center;
  font-size: 1.3rem;
  position: relative;
  background-repeat: no-repeat;
  cursor: pointer
}

.photo.circle {
  border-radius: 60px
}

.photo_wrap {
  display: inline-block;
  width: 110px;
  height: 110px
}

textarea {
  width: calc(100% - 22px);
  min-width: calc(100% - 22px);
  max-width: calc(100% - 22px);
  min-height: 4em;
  border: 1px solid #b3b3b3;
  padding: 10px;
  margin: 0;
  line-height: 1.2
}

textarea.single {
  min-height: 1em
}

textarea:disabled {
  border: none;
  background-color: #e6e6e6;
  color: gray
}

.btn {
  white-space: nowrap
}

.btn.icon {
  padding-left: 25px
}

.btn.done {
  background-color: gray
}

.btn.plus {
  position: absolute;
  right: -5px;
  bottom: -5px;
  top: auto;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  padding: 5px;
  margin: 0
}

.btn.plus.editted {
  transform: rotate(45deg);
  background-color: #c1272d
}

.btn.plus:active {
  top: auto;
  left: auto;
  right: -6px;
  bottom: -6px
}

.btn.plus::after {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  -webkit-mask: url("../svg/btn_plus.svg");
  mask: url("../svg/btn_plus.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle
}

.btn.send {
  padding-left: 25px
}

.btn.send:before {
  content: '';
  -webkit-mask: url("../svg/icon_mail.svg");
  mask: url("../svg/icon_mail.svg");
  display: inline-block;
  width: 1.7rem;
  height: 1.7rem;
  background-color: #fff;
  line-height: 1;
  position: absolute;
  top: 2px;
  left: 7px
}

.btn.sent {
  padding-left: 25px;
  background-color: #e6e6e6;
  color: gray;
  box-shadow: none;
  pointer-events: none
}

.btn.sent:before {
  content: '';
  -webkit-mask: url("../svg/icon_mail.svg");
  mask: url("../svg/icon_mail.svg");
  display: inline-block;
  width: 1.7rem;
  height: 1.7rem;
  background-color: gray;
  line-height: 1;
  position: absolute;
  top: 2px;
  left: 7px
}

.btn.balloon {
  padding-left: 25px
}

.btn.balloon:before {
  content: '';
  -webkit-mask: url("../svg/icon_balloon.svg");
  mask: url("../svg/icon_balloon.svg");
  display: inline-block;
  width: 1.7rem;
  height: 1.7rem;
  background-color: #fff;
  line-height: 1;
  position: absolute;
  top: 2px;
  left: 7px
}

.btn.graf {
  padding-left: 2.2em;
  background-color: #368d1d
}

.btn.graf::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: #ea561d;
  position: absolute;
  top: calc(50% - 0.8em);
  left: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask: url("../svg/icon_chart.svg");
  mask: url("../svg/icon_chart.svg");
  background-color: #fff;
  left: 7px;
  top: calc(50% - 0.7em);
  width: 1.4em;
  height: 1.4em
}

.btn.present {
  padding-left: 2.2em
}

.btn.present::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: #ea561d;
  position: absolute;
  top: calc(50% - 0.8em);
  left: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask: url("../svg/icon_present.svg");
  mask: url("../svg/icon_present.svg");
  background-color: #fff;
  left: 7px;
  top: calc(50% - 0.8em);
  width: 1.4em;
  height: 1.4em
}

.btn.search {
  padding-left: 25px
}

.btn.search::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: #ea561d;
  position: absolute;
  top: calc(50% - 0.8em);
  left: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 18px;
  height: 18px;
  -webkit-mask: url("../svg/icon_loupe.svg");
  mask: url("../svg/icon_loupe.svg");
  -webkit-mask-repeat: no-repeat;
  background-color: #fff;
  left: 6px
}

.btn.prev {
  padding-left: 2em
}

.btn.prev::before {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  -webkit-mask: url("../svg/icon_arrow_left.svg");
  mask: url("../svg/icon_arrow_left.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 0.5rem;
  top: calc(0.9em - 1rem)
}

.btn.next {
  padding-right: 2em
}

.btn.next::before {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  -webkit-mask: url("../svg/icon_arrow_right.svg");
  mask: url("../svg/icon_arrow_right.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  right: 0.5rem;
  top: calc(0.9em - 1rem)
}

.btn.mail::before {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 1.8rem;
  width: 1.8rem;
  -webkit-mask: url("../svg/icon_mail.svg");
  mask: url("../svg/icon_mail.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 0.6rem;
  top: calc(0.9em - 0.9rem)
}

.btn.dis-election {
  padding-left: 2em
}

.btn.dis-election::before {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 1.8rem;
  width: 1.8rem;
  -webkit-mask: url("../svg/icon_dis-election.svg");
  mask: url("../svg/icon_dis-election.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 0.6rem;
  top: calc(0.9em - 0.9rem)
}

.btn.edit_notice {
  padding-left: 2em
}

.btn.edit_notice::before {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 1.8rem;
  width: 1.8rem;
  -webkit-mask: url("../svg/icon_edit_notice.svg");
  mask: url("../svg/icon_edit_notice.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 0.6rem;
  top: calc(0.9em - 0.9rem)
}

.btn.block {
  padding-left: 2em
}

.btn.block::before {
  content: "";
  background-color: #fff;
  fill: #fff;
  display: inline-block;
  height: 1.8rem;
  width: 1.8rem;
  -webkit-mask: url("../svg/icon_block.svg");
  mask: url("../svg/icon_block.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 0.6rem;
  top: calc(0.9em - 0.9rem)
}

.relative {
  position: relative
}

span.caution {
  color: #c1272d
}

p.caution {
  background: #c1272d;
  color: #fff;
  padding: 3px 10px 5px 20px;
  line-height: 1.5
}

p.caution a {
  color: #fff;
  text-decoration: underline
}

p.caution.indent {
  width: auto
}

p.caution::before {
  content: '';
  height: 1.5rem;
  width: 1.5rem;
  display: inline-block;
  -webkit-mask: url("../svg/icon_aleart.svg");
  mask: url("../svg/icon_aleart.svg");
  background-color: #fff;
  position: relative;
  top: 3px
}

p.caution.block {
  padding-left: 3rem;
  text-indent: -2rem;
  padding-top: 10px;
  padding-bottom: 10px
}

p.caution.block:before {
  left: 0rem
}

p.caution.text {
  background: none;
  color: #c1272d
}

p.caution.text::before {
  background-color: #c1272d
}

p.caution.center {
  text-align: center
}

.aspect_ratio_16_9 {
  aspect-ratio: 16 / 9
}

.aspect_ratio_1_1 {
  aspect-ratio: 1 / 1
}

#camera {
  text-align: center;
  position: relative
}

#camera img {
  width: 100%;
  height: auto;
  display: inherit
}

#camera video {
  display: inherit
}

#changeCamera {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  z-index: 10000;
  bottom: 5px;
  right: 5px;
  border-radius: 50px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer
}

.flex {
  display: flex
}

.flex input[type="text"], .flex input[type="number"] {
  margin-right: 10px;
  font-size: 16px
}

.flex.start {
  justify-content: flex-start
}

.flex .wrapper_input {
  margin: 0
}

.flex .wrapper_input.mr10 {
  margin-right: 10px
}

.flex .wrapper_input:last-child input {
  margin-right: 0
}

.flex.equality>button {
  width: 100%;
  margin-bottom: 0
}

.flex h2 {
  margin-right: auto
}

.flex h2+.btn_area {
  margin-top: 32px
}

.flex h4 {
  margin-right: auto
}

.flex h4+.btn_area {
  margin-top: -4px
}

.flex.space-between {
  justify-content: space-between
}

.flex.right {
  justify-content: flex-end
}

.float.header {
  margin-top: 15px
}

.float .btn_area {
  float: right;
  margin-bottom: 5px
}

.float .btn_area+h2 {
  display: inline-block;
  float: left;
  margin-bottom: 5px;
  margin-top: 0
}

.balloon {
  border-radius: 10px;
  line-height: 1.2;
  font-size: 1.3rem;
  padding: 10px;
  position: relative
}

.balloon.left {
  background-color: #eaea7d
}

.balloon.left::before {
  content: '';
  border: none;
  border-top: 15px solid #eaea7d;
  border-left: 15px solid transparent;
  position: absolute;
  top: 10px;
  left: -15px
}

.balloon.right {
  background-color: #f2f2f2
}

.balloon.right::before {
  content: '';
  border: none;
  border-top: 15px solid #f2f2f2;
  border-right: 15px solid transparent;
  position: absolute;
  top: 10px;
  right: -15px
}

.balloon+.timeStamp {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 5px;
  display: block;
  text-align: right;
  color: gray
}

.keep, .apply, .prof_list, section.yaritori {
  padding: 0 0 15px 0;
  margin: 0 -15px 15px 0;
  border-bottom: 1px solid #999;
  position: relative;
  display: block
}

.keep .photo, .apply .photo, .prof_list .photo, section.yaritori .photo {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin-right: 15px
}

.keep .photo.circle, .apply .photo.circle, .prof_list .photo.circle, section.yaritori .photo.circle {
  border-radius: 50px
}

.keep .btn_area .icon::after, .apply .btn_area .icon::after, .prof_list .btn_area .icon::after, section.yaritori .btn_area .icon::after {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: #ea561d
}

.keep .btn_area .icon.label, .apply .btn_area .icon.label, .prof_list .btn_area .icon.label, section.yaritori .btn_area .icon.label {
  padding: 0
}

.keep .btn_area .icon.label::after, .apply .btn_area .icon.label::after, .prof_list .btn_area .icon.label::after, section.yaritori .btn_area .icon.label::after {
  -webkit-mask: url("../svg/icon_label.svg");
  mask: url("../svg/icon_label.svg")
}

.keep .btn_area .icon.memo::after, .apply .btn_area .icon.memo::after, .prof_list .btn_area .icon.memo::after, section.yaritori .btn_area .icon.memo::after {
  -webkit-mask: url("../svg/icon_memo.svg");
  mask: url("../svg/icon_memo.svg")
}

.keep .btn_area .icon.trash::after, .apply .btn_area .icon.trash::after, .prof_list .btn_area .icon.trash::after, section.yaritori .btn_area .icon.trash::after {
  -webkit-mask: url("../svg/icon_trash.svg");
  mask: url("../svg/icon_trash.svg")
}

.keep .data_area, .apply .data_area, .prof_list .data_area, section.yaritori .data_area {
  width: calc(100% - 140px)
}

.keep .data_area h4, .apply .data_area h4, .prof_list .data_area h4, section.yaritori .data_area h4 {
  display: inline-block;
  float: left
}

.keep .data_area h4+.btn_area, .keep .data_area h4+.invite, .keep .data_area h4+.notification, .apply .data_area h4+.btn_area, .apply .data_area h4+.invite, .apply .data_area h4+.notification, .prof_list .data_area h4+.btn_area, .prof_list .data_area h4+.invite, .prof_list .data_area h4+.notification, section.yaritori .data_area h4+.btn_area, section.yaritori .data_area h4+.invite, section.yaritori .data_area h4+.notification {
  float: right
}

.keep .data_area .invite .label, .apply .data_area .invite .label, .prof_list .data_area .invite .label, section.yaritori .data_area .invite .label {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1.4;
  background: #39b54a;
  color: #fff;
  position: relative;
  top: -6px
}

.keep .data_area .label_area, .apply .data_area .label_area, .prof_list .data_area .label_area, section.yaritori .data_area .label_area {
  width: 100%;
  clear: both;
  margin-bottom: 15px
}

.keep .data_area .label_area .label, .apply .data_area .label_area .label, .prof_list .data_area .label_area .label, section.yaritori .data_area .label_area .label {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1.4;
  background: #efe7ac;
  color: #605c45
}

.keep .data_area .memo p, .apply .data_area .memo p, .prof_list .data_area .memo p, section.yaritori .data_area .memo p {
  font-size: 1.3rem
}

.chat {
  padding-top: 50px
}

.chat .filter {
  padding: 0
}

.chat .filter+.result {
  font-size: 1.3rem
}

.chat .userName {
  font-weight: bold
}

.chat .resultText {
  line-height: 1.2;
  font-size: 1.3rem;
  position: relative
}

.chat .resultText .find {
  background-color: yellow;
  padding: 0 3px
}

.chat .filterText {
  margin: 0;
  border: none;
  width: calc(100% - 30px)
}

.chat .static_header.scroll {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
}

.chat #contents_menu {
  display: none !important
}

.chat #footer_menu {
  box-shadow: none
}

.chat #chat_input {
  position: fixed;
  position: -webkit-fixed;
  bottom: 87px;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
  display: flex
}

.chat #chat_input .input_text {
  width: 100%
}

.chat #chat_input .input_text input {
  padding: 15px 10px;
  font-size: 16px
}

.chat #chat_input .btn_image {
  width: 50px;
  margin-right: 10px
}

.chat #chat_input .btn_image .icon.active::before {
  background-color: #ea561d
}

.chat .icon {
  line-height: 2
}

.chat .icon.read::before {
  content: "";
  background-color: #ea561d;
  display: inline-block;
  height: 1.3em;
  width: 1.3em;
  -webkit-mask: url("../svg/icon_check.svg");
  mask: url("../svg/icon_check.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 3px;
  top: 4px
}

.chat .icon.image_file::before {
  content: "";
  background-color: #ea561d;
  display: inline-block;
  height: 40px;
  width: 40px;
  -webkit-mask: url("../svg/icon_image_file.svg");
  mask: url("../svg/icon_image_file.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 3px;
  top: 4px
}

.chat .icon.airplane::before {
  content: "";
  background-color: #e6e6e6;
  display: inline-block;
  height: 40px;
  width: 40px;
  -webkit-mask: url("../svg/icon_airplane.svg");
  mask: url("../svg/icon_airplane.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: absolute;
  left: 3px;
  top: 4px
}

.chat .static_header {
  margin: 0;
  position: fixed;
  position: -webkit-fixed;
  width: 100%;
  top: 0;
  left: 0
}

.chat .static_header .btn.search {
  right: 10px;
  top: 2px
}

.chat .static_header .btn.search:active {
  top: 3px;
  right: 9px;
  left: unset
}

.chat .static_header h2.backBtn {
  padding-left: calc(1em * 1.5 + 0.9em);
  margin: 0;
  margin-right: auto;
  border: none;
  position: relative;
  cursor: pointer
}

.chat .static_header h2.backBtn .backBtn {
  left: 0px;
  cursor: pointer
}

.chat .day {
  height: 1px;
  border: none;
  border-top: 1px solid #999;
  margin: 10px 0px 20px 0px;
  padding: 10px 0 15px;
  width: calc(100% + 15px);
  text-align: center;
  font-size: 1.3rem
}

.chat section.yaritori {
  border: none
}

.chat section.yaritori:first-of-type {
  margin-top: 20px
}

.chat section.yaritori .photo.circle {
  width: 50px;
  height: 50px;
  aspect-ratio: 1 / 1
}

.chat section.yaritori .data_area {
  width: calc(100% - 130px)
}

.chat section.yaritori .data_area .balloon.left {
  margin-top: 1em
}

.chat section.yaritori .data_area .balloon.right {
  margin-right: 30px
}

.chat section.yaritori .relative {
  min-width: 50px
}

.chat section.yaritori .timeStamp {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 5px;
  display: block;
  text-align: right;
  color: gray;
  position: absolute;
  bottom: 2px;
  left: 5px;
  width: calc(100% - 5px)
}

.chat section.yaritori .right .data_area {
  width: calc(100% - 90px)
}

.chat section.yaritori .right .timeStamp {
  left: unset;
  right: 5px
}

p.quote {
  background: #f2f2f2;
  padding: 10px;
  font-size: 1.4rem;
  line-height: 1.5
}

p.quote+h4 {
  margin-top: 30px
}

p.address {
  font-size: 1.4rem;
  line-height: 1.4
}

p.address+h4 {
  margin-top: 30px
}

p.image {
  background: #f2f2f2;
  padding: 10px;
  text-align: center
}

p.image img {
  max-height: 200px
}

p.odai_title {
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: left
}

.apply h4, .prof_list h4 {
  margin-bottom: 5px
}

.apply .data_area .label_area, .prof_list .data_area .label_area {
  margin-top: -5px;
  margin-bottom: 7px
}

.apply .data_area .label_area .label, .prof_list .data_area .label_area .label {
  background-color: gray;
  color: #FFF;
  border-radius: 20px;
  font-size: 1rem
}

.apply .data_area .status, .prof_list .data_area .status {
  font-size: 1.3rem;
  line-height: 1.2;
  color: #6d6d6d
}

.apply .data_area .status table td, .prof_list .data_area .status table td {
  padding: 2px 5px 2px 0
}

.apply .check_list, .prof_list .check_list {
  position: relative;
  left: -5px
}

.apply .check_list label, .prof_list .check_list label {
  font-size: 1.2rem;
  padding: 7px 5px 5px 30px
}

.wrapper_title {
  background: #fff;
  position: absolute;
  top: -0.5em;
  padding: 0 10px;
  line-height: 1
}

.mt0 {
  margin-top: 0
}

.mt10 {
  margin-top: 10px
}

.mt40 {
  margin-top: 40px
}

.mt20 {
  margin-top: 20px
}

.mt30 {
  margin-top: 30px
}

.mb10 {
  margin-bottom: 10px
}

.mb20 {
  margin-bottom: 20px
}

.mb60 {
  margin-bottom: 60px
}

.mb0 {
  margin-bottom: 0px
}

.mr10 {
  margin-right: 10px
}

.mr20 {
  margin-right: 20px
}

.ml10 {
  margin-left: 10px
}

.ml20 {
  margin-left: 20px
}

.ml30 {
  margin-left: 30px
}

.pt20 {
  padding-top: 20px
}

table.pt20 th, table.pt20 td {
  padding-top: 20px !important
}

.pt10 {
  padding-top: 10px
}

table.pt10 th, table.pt10 td {
  padding-top: 10px !important
}

.pb10 {
  padding-bottom: 10px
}

.pb20 {
  padding-bottom: 20px
}

.pb60 {
  padding-bottom: 60px
}

.pb100 {
  padding-bottom: 100px
}

.pb_m {
  padding-bottom: 120px
}

p.kome_indent {
  padding-left: 1em;
  position: relative
}

p.kome_indent::before {
  content: '※';
  position: absolute;
  left: 0
}

input[type="text"], input[type="password"], input[type="number"] {
  padding: 15px 5px;
  font-size: 16px !important;
  border-radius: 0;
  border: solid 1px #666;
  outline: none;
  width: calc(100% - 4rem)
}

input[type="text"].inputNormal, input[type="password"].inputNormal, input[type="number"].inputNormal {
  width: calc(100% - 20px)
}

input[type="text"].auth, input[type="password"].auth, input[type="number"].auth {
  text-align: center
}

input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder {
  color: #999
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
  background-color: #FEF6F3
}

input[type="text"]:disabled, input[type="password"]:disabled, input[type="number"]:disabled {
  background: #e6e6e6;
  color: gray;
  border-color: #e6e6e6
}

input[type="text"]:disabled::placeholder, input[type="password"]:disabled::placeholder, input[type="number"]:disabled::placeholder {
  color: gray
}

input[type="text"].datepicker, input[type="password"].datepicker, input[type="number"].datepicker {
  border: solid 1px #999;
  border-radius: 5px;
  width: 120px;
  background-color: transparent;
  position: relative
}

input[type="text"].datepicker:disabled, input[type="password"].datepicker:disabled, input[type="number"].datepicker:disabled {
  background-color: #e6e6e6;
  border-color: transparent
}

input[type="text"].datepicker:disabled+.btn, input[type="password"].datepicker:disabled+.btn, input[type="number"].datepicker:disabled+.btn {
  background-color: gray;
  pointer-events: none
}

input[type="text"].datepicker+.btn, input[type="password"].datepicker+.btn, input[type="number"].datepicker+.btn {
  box-shadow: none;
  border-radius: 0 5px 5px 0;
  content: '';
  display: inline-block;
  width: 20px;
  height: calc(100% - 10px);
  position: absolute;
  top: 1px;
  right: 1px;
  background: #ea561d
}

input[type="text"].datepicker+.btn::after, input[type="password"].datepicker+.btn::after, input[type="number"].datepicker+.btn::after {
  -webkit-mask: url("../svg/icon_calendar.svg");
  mask: url("../svg/icon_calendar.svg");
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  position: absolute;
  top: calc(50% - 0.8em);
  left: calc(50% - 0.75em)
}

input[type="text"].datepicker+.btn:active, input[type="text"].datepicker+.btn.active, input[type="password"].datepicker+.btn:active, input[type="password"].datepicker+.btn.active, input[type="number"].datepicker+.btn:active, input[type="number"].datepicker+.btn.active {
  left: unset;
  background-color: #f39c7a
}

.default input[type="radio"] {
  display: none
}

.default input[type="radio"]+label {
  position: relative;
  margin-right: 1.5em;
  padding-left: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer
}

.default input[type="radio"]+label::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 2px solid #b3b3b3;
  border-radius: 50%;
  box-sizing: border-box
}

.default input[type="radio"]+label::after {
  position: absolute;
  content: "";
  top: 10px;
  left: 10px;
  width: 12px;
  height: 12px;
  background: #b3b3b3;
  border-radius: 50%;
  transition: transform 0.5s
}

.default input[type="radio"]:checked+label::after {
  background: #ea561d
}

.default input[type="radio"]:checked+label::before {
  border: 2px solid #ea561d
}

.default input[type="radio"]:disabled+label::after {
  background: #e6e6e6
}

.default input[type="radio"]:disabled+label::before {
  border: 2px solid #e6e6e6
}

.default input[type="radio"]:disabled:checked+label::after {
  background: gray
}

.default input[type="radio"]:disabled:checked+label::before {
  border: 2px solid gray
}

.default input[type="radio"]:checked:disabled+label::after {
  background: gray
}

.default input[type="radio"]:checked:disabled+label::before {
  border: 2px solid gray
}

.default.vertical input[type="radio"]+label::before {
  top: 4px
}

.default.vertical input[type="radio"]+label::after {
  top: 14px
}

.checkedAndDisabled::after {
  background: gray !important
}

.checkedAndDisabled::before {
  border: 2px solid gray !important
}

.human {
  fill: #ccc
}

.wrapper_photo {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center
}

.yes_no {
  width: 100%;
  margin: 2rem auto 2rem
}

.yes_no th {
  padding-top: 8px
}

.yes_no td {
  text-align: right
}

.yes_no input[type="radio"] {
  display: none
}

.yes_no input[type="radio"]+label {
  border-bottom: solid 5px #b3b3b3;
  width: 50px;
  font-size: 1.2rem;
  text-align: center;
  display: inline-block;
  cursor: pointer
}

.yes_no input[type="radio"]:checked+label {
  color: #ea561d;
  border-bottom-color: #ea561d
}

.password input[type="password"] {
  letter-spacing: 3px
}

.btn_eye {
  display: inline-block;
  width: 40px;
  height: 40px;
  z-index: 10;
  position: absolute;
  top: 5px;
  right: 15px
}

.wrapper_input {
  position: relative;
  margin: 10px auto 15px
}

.wrapper_input p.kome {
  margin-top: 7px;
  font-size: 1.3rem
}

.wrapper_input.indent {
  margin-left: 10px
}

.wrapper_input.mt0 .hasPlaceholder {
  margin-top: 0;
  padding: 16px 15px 17px
}

.wrapper_input .pending_txt {
  position: absolute;
  top: -1.3em;
  right: 10px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #c1272d
}

.wrapper_input .hasPlaceholder {
  margin-top: 5px
}

.wrapper_input .hasPlaceholder.pending {
  color: #fff;
  background: gray
}

.wrapper_input.radio {
  margin-bottom: 30px
}

.wrapper_input.radio.vertical {
  display: flex;
  flex-flow: column
}

.wrapper_input input {
  z-index: 10;
  position: relative
}

.wrapper_input.focus .placeholder, .wrapper_input.focus .back_ph {
  background: #FEF6F3
}

.wrapper_input.disabled .placeholder, .wrapper_input.disabled .back_ph {
  background: #e6e6e6
}

.wrapper_input.disabled .placeholder.pending, .wrapper_input.disabled .back_ph.pending {
  background: gray;
  color: #fff
}

.wrapper_input.disabled .back_ph {
  border-color: #e6e6e6
}

.wrapper_input.textarea {
  padding-bottom: 1rem
}

.wrapper_input.textarea .counter {
  text-align: right;
  font-size: 1.1rem;
  margin: 0;
  padding: 0;
  line-height: 1
}

span.placeholder, span.back_ph {
  position: absolute;
  top: -3px;
  left: 8px;
  font-size: 1.1rem;
  border-radius: 5px 5px 0 0;
  line-height: 1;
  background: #fff
}

span.placeholder {
  padding: 3px 8px 0;
  z-index: 20
}

span.back_ph {
  border: solid 1px #666;
  padding: 3px 8px 0;
  top: -4px;
  left: 7px;
  display: inline-block;
  z-index: 5;
  height: 1rem;
  border-radius: 4px 4px 0 0
}

.btn_close {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #fff;
  border: 2px solid #333;
  fill: #333;
  display: inline-block;
  position: absolute;
  /*top: -15px;
  right: -15px;*/
  top: 0;
  right: 0;
  cursor: pointer;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3)
}

#ui-datepicker-div {
  z-index: 100100 !important
}

.cd_num {
  display: none
}

#logo {
  width: 80%;
  margin: 150px auto 100px
}

#logo h2 {
  border: none;
  margin: 10px 5px 0;
  padding: 0
}

#logo h2 img{
  width:100%;
  height:auto;
}

header, .static_header {
  display: flex;
  /*margin: 0 -15px;*/
  width: 100%;
  position: fixed;
  position: -webkit-fixed;
  top: 0px;
  left:0;
  z-index: 100000;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  justify-content: center;
  align-items: center;
  padding:10px 15px;
  box-sizing: border-box;
}

header.fixed, .static_header.fixed {
  top: 0;
  position: fixed;
  position: -webkit-fixed;
  backdrop-filter: none;
  background-color: #fff
}

header h2#logo_s, .static_header h2#logo_s {
  border: none;
  padding: 0;
  margin: 0;
  width: 90px;
  height: 44px
}

header p, .static_header p {
  margin: 0;
  text-align: right;
  width: calc(100% - 120px);
  /*line-height: 1.2*/
}

header p.color_default, .static_header p.color_default {
  color: #ea561d
}

.static_header {
  position: static;
  /*width: calc(100% + 30px);*/
  width:100%;
  box-shadow: none;
  justify-content: space-between;
}

footer {
  position: relative;
  z-index: 9999
}

footer ul {
  background: #c69c6d;
  margin: 2rem -15px 0;
  padding: 30px;
  text-align: center;
  color: #fff
}

footer ul a {
  color: #fff
}

footer ul a:hover {
  color: #0d48a0
}

footer ul li {
  list-style: none
}

.create_account {
  margin: 0 auto 80px
}

.copyright {
  font-size: 1rem;
  text-align: center;
  padding: 1.2rem 1rem 1rem
}

.pulldown {
  display: inline;
  position: relative
}

.pulldown::before {
  content: "";
  background-color: #ea561d;
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  border-radius: 0 5px 5px 0
}

table#enquete1 th, table#enquete2 th {
  text-align: left;
  font-size: 1.3rem
}

table#enquete2 {
  width: 100%
}

table#enquete2 td {
  text-align: right
}

table.ultoraWide {
  width: 100%
}

table.both_side th {
  text-align: left
}

table.both_side td {
  text-align: right
}

table.both_side td input[type="text"] {
  width: 130px
}

table tr.normal td {
  width: 100%
}

table th .wrapper_checkbox {
  width: 30px
}

table th.v-top {
  vertical-align: top
}

table.wallet, table.statement {
  width: 100%;
  font-size: 1.3rem;
  text-align: left
}

table.wallet th, table.statement th {
  width: 66%;
  line-height: 1.4
}

table.wallet td, table.statement td {
  text-align: right
}

table.wallet td.yen, table.statement td.yen {
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  white-space: nowrap
}

table.wallet td.yen::after, table.statement td.yen::after {
  content: '円';
  font-size: 1rem
}

input.maxlength.auto_void.auth {
  width: calc(100% / 6 - 20px);
  margin-right: 15px;
  height: 3em;
  text-align: center
}

#photoEditor, #photoEditor canvas {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -ms-user-select: none
}

#photoEditor {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 0px
}

#photoCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto
}

.editor_avatar {
  display: inline-block;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #ccc
}

.editor_avatar img {
  position: absolute;
  width: 100%
}

.editor_avatar .mask {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  -webkit-mask-image: url("../images/mask_avatar.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-mode: luminance;
  mask-image: url("../images/mask_avatar.png"), none;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-mode: luminance;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5
}

.editor_avatar .ring {
  width: 100%;
  height: 100%;
  background-image: url("../svg/edit_avatar_line.svg");
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  background-size: 120px 120px;
  top: 0;
  left: 0;
  z-index: 10
}

#rotationSlider {
  position: relative;
  z-index: 0;
  left: calc(50% - 75px);
  width: 150px;
  text-align: center
}

select {
  position: relative;
  background-color: white;
  border: thin solid #fff;
  border: solid 1px #666;
  border-radius: 4px;
  max-width: 340px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none
}

.select {
  margin-bottom: 30px
}

.select td {
  position: relative
}

.select td.right {
  text-align: right
}

.select td.right select option {
  text-align: left
}

.select td .modernSelect.flex {
  margin: 0;
  padding: 0
}

.modern {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  height: calc(100% - 0.5em)
}

.modern option {
  font-size: 1.2rem;
  width: 250px
}

.right .modern {
  left: unset;
  right: 0
}

.wrapper_select {
  display: inline-block
}

.wrapper_select.w100 {
  width: 100%
}

.wrapper_select.indent {
  margin-left: 15px
}

.btn {
  background: #ea561d;
  border-radius: 50px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 1.2rem;
  padding: 4px 10px 4px 10px;
  margin: 0 0 0 6px;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  font-weight: normal;
  top: -1px
}

.btn.text {
  background: none;
  color: #ea561d;
  box-shadow: none;
  font-weight: bold;
  display: block
}

.btn.em {
  background-color: #00c1e0;
  color: #fff
}

.btn:active {
  top: 1px;
  left: 1px
}

.btn::before {
  background-color: #fff;
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin: 0 3px 0 -2px
}

.btn.delete {
  background-color: #c1272d
}

.btn.edit::before {
  content: "";
  -webkit-mask: url("../svg/icon_edit.svg");
  mask: url("../svg/icon_edit.svg")
}

.btn.post::before {
  content: "";
  -webkit-mask: url("../svg/icon_post.svg");
  mask: url("../svg/icon_post.svg")
}

.btn.cart::before {
  content: "";
  -webkit-mask: url("../svg/icon_cart.svg");
  mask: url("../svg/icon_cart.svg")
}

.btn.revive::before {
  content: "";
  -webkit-mask: url("../svg/icon_revive.svg");
  mask: url("../svg/icon_revive.svg")
}

.btn.unlock::before {
  content: "";
  -webkit-mask: url("../svg/icon_unlock.svg");
  mask: url("../svg/icon_unlock.svg")
}

.btn.lock {
  background: rgba(234, 86, 29, 0.5)
}

.btn.lock::before {
  content: "";
  -webkit-mask: url("../svg/icon_lock.svg");
  mask: url("../svg/icon_lock.svg")
}

.btn.prof::before {
  content: "";
  -webkit-mask: url("../svg/icon_prof.svg");
  mask: url("../svg/icon_prof.svg");
  top: 0px
}

.btn.caution {
  background: #c1272d;
  color: #fff
}

.btn_select {
  background: #ea561d;
  border-radius: 50px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 1.1rem;
  padding: 4px 30px 4px 10px;
  margin: 0 0 0 6px;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  top: -1px;
  font-weight: normal
}

.btn_select.em {
  background-color: #00c1e0
}

.btn_select:active {
  top: 1px;
  left: 1px
}

.btn_select:after {
  content: '▼';
  display: inline-block;
  margin: 0 0 0 7px;
  padding: 6px 0 5px 5px;
  font-size: 1rem;
  position: absolute;
  top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.8)
}

.btn_select::before {
  background-color: #fff;
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin: 0 3px 0 -2px
}

.btn_select.free::before {
  content: "";
  -webkit-mask: url("../svg/icon_free.svg");
  mask: url("../svg/icon_free.svg")
}

.btn_select.coin::before {
  content: "";
  -webkit-mask: url("../svg/icon_coin.svg");
  mask: url("../svg/icon_coin.svg")
}

.btn_select>.option {
  margin: 0;
  position: absolute;
  top: 2.1rem;
  background: rgba(0, 0, 0, 0.85);
  right: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  padding: 0
}

.btn_select>.option li {
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
  padding: 9px 7px 9px 10px;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3)
}

.btn_select>.option li:last-child {
  border: none
}

.btn_select.open {
  border-radius: 50px 50px 0 50px
}

.btn_select.open>.option {
  display: block !important
}

.datepicker {
  border: 1px solid #999;
  border-radius: 5px
}

.modernSelect {
  text-align: left;
  font-size: 1.3rem;
  line-height: 1.3;
  width: 150px;
  padding-right: 10px;
  border: 1px solid #999;
  border-radius: 5px;
  min-height: 5rem;
  justify-content: left;
  align-items: center;
  position: relative
}

.modernSelect.flex .btn {
  margin-top: 0
}

.modernSelect .text {
  padding: 5px 10px;
  display: inline-block;
  height: 100%;
  width: calc(100% - 50px)
}

.modernSelect .btn {
  background: #ea561d;
  display: inline-block;
  width: 40px;
  height: 100%;
  position: absolute;
  top: -1px;
  right: -1px;
  border: 1px solid #ea561d;
  border-left: none;
  border-radius: 0 4px 4px 0;
  padding: 0;
  box-shadow: none
}

.modernSelect .btn.focus {
  background-color: #f39c7a;
  border-color: #f39c7a
}

.modernSelect .btn.focus svg {
  transform: rotate(180deg)
}

.modernSelect .btn svg {
  fill: #fff;
  width: 20px;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px)
}

.modernSelect.disabled {
  background-color: #e6e6e6;
  border-color: transparent;
  color: gray
}

.modernSelect.disabled .btn {
  background-color: gray;
  border: 1px solid gray;
  border-left: none;
  top: -1px;
  right: -1px
}

select.classic {
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(to right, #ea561d, #ea561d);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat
}

select.classic:focus {
  background-image: linear-gradient(45deg, #ea561d 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #ea561d 50%), linear-gradient(to right, rgba(234, 86, 29, 0.5), rgba(234, 86, 29, 0.5));
  background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000
}

.js-scrollable {
  max-width: 640px
}

.js-scrollable ol {
  width: calc(312px * 4);
  overflow: hidden;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
}

.js-scrollable ol li {
  counter-increment: mycounter;
  position: relative;
  /*float: left;*/
  width: 240px;
  padding: 0;
  margin: 3px 15px 0 30px;
  display: block;
  padding: 15px;
  border-radius: 10px;
  background-color: #d9e021
}

.js-scrollable ol li::after {
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display: inline-block;
  font-family: 'Impact', sans-serif;
  font-size: 3.5rem;
  left: -15px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  top: 5px;
  color: #999;
  content: counter(mycounter, decimal-leading-zero)
}

.js-scrollable ol li:last-child {
  margin-right: 0
}

.js-scrollable ol li::before {
  content: "";
  border-top: 70px solid #FFF;
  border-right: 70px solid transparent;
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.2));
  position: absolute;
  top: -7px;
  left: -7px
}

.js-scrollable ol li h3 {
  text-align: center;
  font-size: 2rem;
  margin: 5px auto 10px;
  color: #39934a
}

.js-scrollable ol li p {
  font-size: 1.3rem;
  text-align: justify;
  margin: 0
}

.js-scrollable ol li:nth-child(even) {
  background: #fbb03b
}

.js-scrollable ol li:nth-child(even) h3 {
  color: #f53a00
}

input:disabled.reEdit {
  pointer-events: unset
}

@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0
  }
  10% {
    opacity: 1
  }
  50%, 100% {
    transform: translateX(-40px);
    opacity: 0
  }
}

.scroll-hint.is-right-scrollable {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, transparent 16px, transparent)
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, transparent 16px, transparent), linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, transparent 16px, transparent)
}

.scroll-hint.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, transparent 16px, transparent)
}

.scroll-hint-icon {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 60px);
  box-sizing: border-box;
  width: 120px;
  height: 80px;
  border-radius: 5px;
  transition: opacity .3s;
  opacity: 0;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 20px 10px 10px 10px
}

.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none
}

.scroll-hint-text {
  font-size: 10px;
  color: #FFF;
  margin-top: 5px
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .8
}

.scroll-hint-icon:before {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=)
}

.scroll-hint-icon:after {
  content: "";
  width: 34px;
  height: 14px;
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -20px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
  opacity: 0;
  transition-delay: 2.4s
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear 1.2s linear;
  animation-iteration-count: 2
}

.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4)
}

.scroll-hint-icon-white:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=)
}

.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==)
}

.scroll-hint-icon-white .scroll-hint-text {
  color: #000
}

:root {
  --vc-off-color: #808080;
  --vc-on-color: #ea561d;
  --vc-animation-speed: 0.1s ease-out;
  --vc-font-family: Arial;
  --vc-font-size: 11px;
  --vc-font-weight: 300;
  --vc-on-font-color: white;
  --vc-off-font-color: white;
  --vc-label-position-off: 12px;
  --vc-label-position-on: 11px;
  --vc-width: 50px;
  --vc-height: 25px;
  --vc-handle-border-radius: 20px;
  --vc-box-border-radius: 18px;
  --vc-handle-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  --vc-handle-color: white;
  --vc-handle-width: 15px;
  --vc-handle-height: 15px;
  --vc-onclick-width: 30px;
  --vc-handle-top: 5px
}

.vc-toggle-container * {
  font-family: var(--vc-font-family);
  -webkit-transition: var(--vc-animation-speed);
  -moz-transition: var(--vc-animation-speed);
  -o-transition: var(--vc-animation-speed);
  transition: var(--vc-animation-speed)
}

.vc-switch {
  width: var(--vc-width);
  height: var(--vc-height)
}

.vc-toggle-container label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: var(--vc-box-border-radius);
  cursor: pointer
}

.vc-switch-input {
  position: absolute;
  transform: translate3d(5px, 5px, 0)
}

.vc-switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: var(--vc-font-size);
  font-weight: var(--vc-font-weight);
  background: var(--vc-off-color);
  border-radius: inherit
}

.vc-switch-label:before, .vc-switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  line-height: 1.1
}

.vc-switch-label:before {
  content: attr(data-off);
  color: var(--vc-on-font-color)
}

.vc-switch-label:after {
  content: attr(data-on);
  color: var(--vc-off-font-color);
  opacity: 0
}

.vc-switch-label:before {
  right: var(--vc-label-position-off)
}

.vc-switch-label:after {
  left: var(--vc-label-position-on)
}

.vc-switch-input:checked~.vc-switch-label {
  background: var(--vc-on-color)
}

.vc-switch-input:checked~.vc-switch-label:before {
  opacity: 0
}

.vc-switch-input:checked~.vc-switch-label:after {
  opacity: 1
}

.vc-handle {
  position: absolute !important;
  top: var(--vc-handle-top);
  left: 5px;
  background: var(--vc-handle-color);
  border-radius: var(--vc-handle-border-radius);
  box-shadow: var(--vc-handle-shadow)
}

.vc-handle {
  width: var(--vc-handle-width);
  height: var(--vc-handle-height)
}

.vc-handle:before {
  content: "";
  top: 50%;
  left: 50%;
  position: absolute !important;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  border-radius: 6px
}

.vc-switch-label:active~.vc-handle, .vc-handle:active {
  width: var(--vc-onclick-width)
}

.vc-switch-input:checked~.vc-handle {
  left: unset;
  right: 5px
}

table {
  margin-top: 10px
}

table.checkbox th {
  padding-top: 25px
}

table.checkbox th .wrapper_checkbox label.empty {
  top: unset;
  margin-top: -2px
}

table.checkbox td {
  padding-top: 30px
}

table.checkbox td.text {
  line-height: 1.4
}

table.checkbox td.text b {
  color: #ea561d
}

table.checkbox h4 {
  font-size: 1.3rem;
  margin-bottom: 5px;
  margin-top: -15px
}

table.checkbox tr.normal h4 {
  margin-top: 15px
}

table.checkbox tr.normal td, table.checkbox tr.normal th {
  padding-top: 0
}

.overlay table.checkbox th .wrapper_checkbox label.empty {
  margin-top: 6px
}

.wallet div.amount {
  display: inline-block;
  padding-right: 10px;
  margin: 0 auto;
  line-height: 1.2;
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: -1px;
  border-bottom: 1px solid #999
}

.wallet div.amount::before {
  content: '￥';
  font-size: 3rem
}

.wallet div.amount::after {
  content: '-';
  font-size: 3rem;
  position: relative;
  top: -5px;
  left: 2px
}

.wallet div.amount .link{
  color:#000;
}

.wallet article.add_bank table.checkbox td, .wallet article.add_bank table.checkbox th {
  padding-top: 10px
}

.wallet article.tabBlock, .wallet article.history, .wallet article.store, .wallet article.purchase, .wallet article.billing {
  width: 100%;
  text-align: center
}

.wallet article.tabBlock h3, .wallet article.history h3, .wallet article.store h3, .wallet article.purchase h3, .wallet article.billing h3 {
  text-align: left;
  margin: 0
}

.wallet article.tabBlock .tabHeader, .wallet article.history .tabHeader, .wallet article.store .tabHeader, .wallet article.purchase .tabHeader, .wallet article.billing .tabHeader {
  margin-bottom: 0;
  padding: 0;
  justify-content: center
}

.wallet article.tabBlock div.tab, .wallet article.history div.tab, .wallet article.store div.tab, .wallet article.purchase div.tab, .wallet article.billing div.tab {
  padding: 7px 20px;
  border: 1px solid #999;
  border-radius: 10px 10px 0 0;
  border-right: none;
  font-weight: bold;
  color: gray;
  cursor: pointer
}

.wallet article.tabBlock div.tab:last-child, .wallet article.history div.tab:last-child, .wallet article.store div.tab:last-child, .wallet article.purchase div.tab:last-child, .wallet article.billing div.tab:last-child {
  border: 1px solid #999
}

.wallet article.tabBlock div.tab.active, .wallet article.history div.tab.active, .wallet article.store div.tab.active, .wallet article.purchase div.tab.active, .wallet article.billing div.tab.active {
  color: #ea561d;
  border-bottom: none;
  background: #fff;
  z-index: 1
}

.wallet article.tabBlock #prize, .wallet article.history #prize, .wallet article.store #prize, .wallet article.purchase #prize, .wallet article.billing #prize {
  margin: 0
}

.wallet article.tabBlock .tabBody, .wallet article.history .tabBody, .wallet article.store .tabBody, .wallet article.purchase .tabBody, .wallet article.billing .tabBody {
  border-top: 1px solid #999;
  border-radius: 10px;
  padding: 0;
  padding-top: 10px;
  z-index: 0;
  position: relative;
  top: -2px;
  background: #fff
}

.wallet article.tabBlock .tabBody#other, .wallet article.history .tabBody#other, .wallet article.store .tabBody#other, .wallet article.purchase .tabBody#other, .wallet article.billing .tabBody#other {
  margin-top: 0
}

.wallet article.tabBlock .tabBody#other tr.title.border td, .wallet article.history .tabBody#other tr.title.border td, .wallet article.store .tabBody#other tr.title.border td, .wallet article.purchase .tabBody#other tr.title.border td, .wallet article.billing .tabBody#other tr.title.border td {
  border-bottom: 1px solid #999;
  padding-top: 10px;
  padding-bottom: 10px
}

.wallet article.tabBlock .tabBody table, .wallet article.history .tabBody table, .wallet article.store .tabBody table, .wallet article.purchase .tabBody table, .wallet article.billing .tabBody table {
  width: 100%
}

.wallet article.tabBlock .tabBody thead th, .wallet article.history .tabBody thead th, .wallet article.store .tabBody thead th, .wallet article.purchase .tabBody thead th, .wallet article.billing .tabBody thead th {
  background: #999999;
  color: #fff;
  width: 50%;
  font-size: 1.3rem
}

.wallet article.tabBlock .tabBody tr.result .text, .wallet article.history .tabBody tr.result .text, .wallet article.store .tabBody tr.result .text, .wallet article.purchase .tabBody tr.result .text, .wallet article.billing .tabBody tr.result .text {
  font-size: 1.6rem;
  font-weight: bold;
  padding-top: 5px
}

.wallet article.tabBlock .tabBody tr.payment.border td, .wallet article.tabBlock .tabBody tr.winner.border td, .wallet article.history .tabBody tr.payment.border td, .wallet article.history .tabBody tr.winner.border td, .wallet article.store .tabBody tr.payment.border td, .wallet article.store .tabBody tr.winner.border td, .wallet article.purchase .tabBody tr.payment.border td, .wallet article.purchase .tabBody tr.winner.border td, .wallet article.billing .tabBody tr.payment.border td, .wallet article.billing .tabBody tr.winner.border td {
  border-bottom: 1px solid #999;
  padding-bottom: 5px
}

.wallet article.tabBlock .tabBody td, .wallet article.history .tabBody td, .wallet article.store .tabBody td, .wallet article.purchase .tabBody td, .wallet article.billing .tabBody td {
  font-size: 1.3rem;
  line-height: 1.3;
  text-align: justify;
  text-justify: inter-ideograph;
  padding-top: 5px;
  position: relative
}

.wallet article.tabBlock .tabBody td.user_name, .wallet article.tabBlock .tabBody td.detail, .wallet article.tabBlock .tabBody td.date, .wallet article.history .tabBody td.user_name, .wallet article.history .tabBody td.detail, .wallet article.history .tabBody td.date, .wallet article.store .tabBody td.user_name, .wallet article.store .tabBody td.detail, .wallet article.store .tabBody td.date, .wallet article.purchase .tabBody td.user_name, .wallet article.purchase .tabBody td.detail, .wallet article.purchase .tabBody td.date, .wallet article.billing .tabBody td.user_name, .wallet article.billing .tabBody td.detail, .wallet article.billing .tabBody td.date {
  padding-top: 8px
}

.wallet article.tabBlock .tabBody td .result, .wallet article.history .tabBody td .result, .wallet article.store .tabBody td .result, .wallet article.purchase .tabBody td .result, .wallet article.billing .tabBody td .result {
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: -0.04em
}

.wallet article.tabBlock .tabBody td.status, .wallet article.history .tabBody td.status, .wallet article.store .tabBody td.status, .wallet article.purchase .tabBody td.status, .wallet article.billing .tabBody td.status {
  text-align: center;
  font-weight: bold;
  padding-right: 4px;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  vertical-align: middle
}

.wallet article.tabBlock .tabBody td.status.right, .wallet article.history .tabBody td.status.right, .wallet article.store .tabBody td.status.right, .wallet article.purchase .tabBody td.status.right, .wallet article.billing .tabBody td.status.right {
  text-align: right
}

.wallet article.tabBlock .tabBody td.status.border-bottom, .wallet article.history .tabBody td.status.border-bottom, .wallet article.store .tabBody td.status.border-bottom, .wallet article.purchase .tabBody td.status.border-bottom, .wallet article.billing .tabBody td.status.border-bottom {
  border-bottom: 1px solid #999
}

.wallet article.tabBlock .tabBody td.status.done, .wallet article.history .tabBody td.status.done, .wallet article.store .tabBody td.status.done, .wallet article.purchase .tabBody td.status.done, .wallet article.billing .tabBody td.status.done {
  color: gray
}

.wallet article.tabBlock .tabBody td.amount, .wallet article.history .tabBody td.amount, .wallet article.store .tabBody td.amount, .wallet article.purchase .tabBody td.amount, .wallet article.billing .tabBody td.amount {
  text-align: right;
  font-weight: bold;
  padding-right: 4px;
  font-size: 1.5rem;
  letter-spacing: -0.04em
}

.wallet article.tabBlock .tabBody td.amount.border-bottom, .wallet article.history .tabBody td.amount.border-bottom, .wallet article.store .tabBody td.amount.border-bottom, .wallet article.purchase .tabBody td.amount.border-bottom, .wallet article.billing .tabBody td.amount.border-bottom {
  border-bottom: 1px solid #999
}

.wallet article.tabBlock .tabBody td.amount::before, .wallet article.history .tabBody td.amount::before, .wallet article.store .tabBody td.amount::before, .wallet article.purchase .tabBody td.amount::before, .wallet article.billing .tabBody td.amount::before {
  content: '￥';
  font-size: 0.7em
}

.wallet article.tabBlock .tabBody td.amount::after, .wallet article.history .tabBody td.amount::after, .wallet article.store .tabBody td.amount::after, .wallet article.purchase .tabBody td.amount::after, .wallet article.billing .tabBody td.amount::after {
  content: '-';
  font-size: 0.7em;
  position: relative;
  top: -1px;
  left: 2px
}

.wallet article.tabBlock .tabBody td.amount .btn, .wallet article.history .tabBody td.amount .btn, .wallet article.store .tabBody td.amount .btn, .wallet article.purchase .tabBody td.amount .btn, .wallet article.billing .tabBody td.amount .btn {
  position: absolute;
  top: calc(50% + 1.3em);
  right: 0
}

.wallet article.tabBlock .tabBody td.amount2, .wallet article.tabBlock .tabBody td.response, .wallet article.history .tabBody td.amount2, .wallet article.history .tabBody td.response, .wallet article.store .tabBody td.amount2, .wallet article.store .tabBody td.response, .wallet article.purchase .tabBody td.amount2, .wallet article.purchase .tabBody td.response, .wallet article.billing .tabBody td.amount2, .wallet article.billing .tabBody td.response {
  text-align: right;
  font-weight: bold;
  padding-right: 4px;
  font-size: 1.5rem;
  letter-spacing: -0.04em
}

.wallet article.tabBlock .tabBody td.amount2.border-bottom, .wallet article.tabBlock .tabBody td.response.border-bottom, .wallet article.history .tabBody td.amount2.border-bottom, .wallet article.history .tabBody td.response.border-bottom, .wallet article.store .tabBody td.amount2.border-bottom, .wallet article.store .tabBody td.response.border-bottom, .wallet article.purchase .tabBody td.amount2.border-bottom, .wallet article.purchase .tabBody td.response.border-bottom, .wallet article.billing .tabBody td.amount2.border-bottom, .wallet article.billing .tabBody td.response.border-bottom {
  border-bottom: 1px solid #999
}

.wallet article.tabBlock .tabBody td.amount2.done, .wallet article.tabBlock .tabBody td.response.done, .wallet article.history .tabBody td.amount2.done, .wallet article.history .tabBody td.response.done, .wallet article.store .tabBody td.amount2.done, .wallet article.store .tabBody td.response.done, .wallet article.purchase .tabBody td.amount2.done, .wallet article.purchase .tabBody td.response.done, .wallet article.billing .tabBody td.amount2.done, .wallet article.billing .tabBody td.response.done {
  opacity: 0.4
}

.wallet article.tabBlock .tabBody td.amount2 .btn, .wallet article.tabBlock .tabBody td.response .btn, .wallet article.history .tabBody td.amount2 .btn, .wallet article.history .tabBody td.response .btn, .wallet article.store .tabBody td.amount2 .btn, .wallet article.store .tabBody td.response .btn, .wallet article.purchase .tabBody td.amount2 .btn, .wallet article.purchase .tabBody td.response .btn, .wallet article.billing .tabBody td.amount2 .btn, .wallet article.billing .tabBody td.response .btn {
  position: unset;
  top: unset;
  right: unset
}

.wallet article.tabBlock .tabBody td.amount2 .yen_mark, .wallet article.tabBlock .tabBody td.response .yen_mark, .wallet article.history .tabBody td.amount2 .yen_mark, .wallet article.history .tabBody td.response .yen_mark, .wallet article.store .tabBody td.amount2 .yen_mark, .wallet article.store .tabBody td.response .yen_mark, .wallet article.purchase .tabBody td.amount2 .yen_mark, .wallet article.purchase .tabBody td.response .yen_mark, .wallet article.billing .tabBody td.amount2 .yen_mark, .wallet article.billing .tabBody td.response .yen_mark {
  font-size: 0.7em
}

.wallet article.tabBlock .tabBody td.amount2 .hyphen, .wallet article.tabBlock .tabBody td.response .hyphen, .wallet article.history .tabBody td.amount2 .hyphen, .wallet article.history .tabBody td.response .hyphen, .wallet article.store .tabBody td.amount2 .hyphen, .wallet article.store .tabBody td.response .hyphen, .wallet article.purchase .tabBody td.amount2 .hyphen, .wallet article.purchase .tabBody td.response .hyphen, .wallet article.billing .tabBody td.amount2 .hyphen, .wallet article.billing .tabBody td.response .hyphen {
  font-size: 0.7em;
  position: relative;
  top: -1px;
  left: 2px
}

.wallet article.tabBlock .tabBody .label, .wallet article.history .tabBody .label, .wallet article.store .tabBody .label, .wallet article.purchase .tabBody .label, .wallet article.billing .tabBody .label {
  background: #e6e6e6;
  padding: 2px 5px;
  min-width: 5em;
  display: inline-block;
  text-align: center
}

.wallet article.tabBlock .tabBody .text.inline-block, .wallet article.history .tabBody .text.inline-block, .wallet article.store .tabBody .text.inline-block, .wallet article.purchase .tabBody .text.inline-block, .wallet article.billing .tabBody .text.inline-block {
  display: inline-block
}

.wallet article.tabBlock .tabBody .float.left, .wallet article.history .tabBody .float.left, .wallet article.store .tabBody .float.left, .wallet article.purchase .tabBody .float.left, .wallet article.billing .tabBody .float.left {
  float: left
}

.wallet article.tabBlock .tabBody .float.right, .wallet article.history .tabBody .float.right, .wallet article.store .tabBody .float.right, .wallet article.purchase .tabBody .float.right, .wallet article.billing .tabBody .float.right {
  float: right
}

.wallet article.tabBlock .tabBody .wrapper.flex .text, .wallet article.history .tabBody .wrapper.flex .text, .wallet article.store .tabBody .wrapper.flex .text, .wallet article.purchase .tabBody .wrapper.flex .text, .wallet article.billing .tabBody .wrapper.flex .text {
  padding-left: 5px
}

.wallet article.tabBlock .tabBody .block, .wallet article.history .tabBody .block, .wallet article.store .tabBody .block, .wallet article.purchase .tabBody .block, .wallet article.billing .tabBody .block {
  display: block;
  margin: 5px 0 5px 0;
  padding: 0
}

.wallet article.history .tabBody, .wallet article.store .tabBody, .wallet article.purchase .tabBody, .wallet article.billing .tabBody {
  border-top: none;
  padding-top: unset
}

.wallet article.history .tabBody tr.option td, .wallet article.history .tabBody tr.payee td, .wallet article.store .tabBody tr.option td, .wallet article.store .tabBody tr.payee td, .wallet article.purchase .tabBody tr.option td, .wallet article.purchase .tabBody tr.payee td, .wallet article.billing .tabBody tr.option td, .wallet article.billing .tabBody tr.payee td {
  border-top: 1px solid #999;
  padding: 10px 5px
}

.wallet article.history .tabBody tr.option td.right, .wallet article.history .tabBody tr.payee td.right, .wallet article.store .tabBody tr.option td.right, .wallet article.store .tabBody tr.payee td.right, .wallet article.purchase .tabBody tr.option td.right, .wallet article.purchase .tabBody tr.payee td.right, .wallet article.billing .tabBody tr.option td.right, .wallet article.billing .tabBody tr.payee td.right {
  text-align: right
}

.wallet article.history .tabBody tr.option td.center, .wallet article.history .tabBody tr.payee td.center, .wallet article.store .tabBody tr.option td.center, .wallet article.store .tabBody tr.payee td.center, .wallet article.purchase .tabBody tr.option td.center, .wallet article.purchase .tabBody tr.payee td.center, .wallet article.billing .tabBody tr.option td.center, .wallet article.billing .tabBody tr.payee td.center {
  text-align: center
}

.wallet article.history .tabBody tr.option td.control, .wallet article.history .tabBody tr.payee td.control, .wallet article.store .tabBody tr.option td.control, .wallet article.store .tabBody tr.payee td.control, .wallet article.purchase .tabBody tr.option td.control, .wallet article.purchase .tabBody tr.payee td.control, .wallet article.billing .tabBody tr.option td.control, .wallet article.billing .tabBody tr.payee td.control {
  line-height: 2
}

.wallet article.history .tabBody tr.option td.control .btn, .wallet article.history .tabBody tr.payee td.control .btn, .wallet article.store .tabBody tr.option td.control .btn, .wallet article.store .tabBody tr.payee td.control .btn, .wallet article.purchase .tabBody tr.option td.control .btn, .wallet article.purchase .tabBody tr.payee td.control .btn, .wallet article.billing .tabBody tr.option td.control .btn, .wallet article.billing .tabBody tr.payee td.control .btn {
  min-width: 6em;
  text-align: center
}

.wallet article.history .tabBody tr.option:last-child td, .wallet article.history .tabBody tr.payee:last-child td, .wallet article.store .tabBody tr.option:last-child td, .wallet article.store .tabBody tr.payee:last-child td, .wallet article.purchase .tabBody tr.option:last-child td, .wallet article.purchase .tabBody tr.payee:last-child td, .wallet article.billing .tabBody tr.option:last-child td, .wallet article.billing .tabBody tr.payee:last-child td {
  border-bottom: 1px solid #999
}

.wallet article.history .tabBody tr.option.btn_area td, .wallet article.history .tabBody tr.payee.btn_area td, .wallet article.store .tabBody tr.option.btn_area td, .wallet article.store .tabBody tr.payee.btn_area td, .wallet article.purchase .tabBody tr.option.btn_area td, .wallet article.purchase .tabBody tr.payee.btn_area td, .wallet article.billing .tabBody tr.option.btn_area td, .wallet article.billing .tabBody tr.payee.btn_area td {
  border-bottom: none
}

.wallet article.history .tabBody tr td .label, .wallet article.store .tabBody tr td .label, .wallet article.purchase .tabBody tr td .label, .wallet article.billing .tabBody tr td .label {
  min-width: 6em
}

.wallet article.history .tabBody tr.title, .wallet article.store .tabBody tr.title, .wallet article.purchase .tabBody tr.title, .wallet article.billing .tabBody tr.title {
  border-top: 1px solid #999
}

.wallet article.history .tabBody tr.last td, .wallet article.store .tabBody tr.last td, .wallet article.purchase .tabBody tr.last td, .wallet article.billing .tabBody tr.last td {
  padding-bottom: 5px
}

.wallet article.history .tabBody tr.right, .wallet article.store .tabBody tr.right, .wallet article.purchase .tabBody tr.right, .wallet article.billing .tabBody tr.right {
  text-align: right
}

.wallet article.history .tabBody tr.payee td.control, .wallet article.store .tabBody tr.payee td.control, .wallet article.purchase .tabBody tr.payee td.control, .wallet article.billing .tabBody tr.payee td.control {
  text-align: right
}

.wallet article.history .tabBody tr.payee td.control .btn, .wallet article.store .tabBody tr.payee td.control .btn, .wallet article.purchase .tabBody tr.payee td.control .btn, .wallet article.billing .tabBody tr.payee td.control .btn {
  min-width: 3em
}

.wallet article.history .tabBody tr.btn_area, .wallet article.store .tabBody tr.btn_area, .wallet article.purchase .tabBody tr.btn_area, .wallet article.billing .tabBody tr.btn_area {
  border-top: 1px solid #999
}

.wallet article.history .tabBody tr.btn_area td, .wallet article.store .tabBody tr.btn_area td, .wallet article.purchase .tabBody tr.btn_area td, .wallet article.billing .tabBody tr.btn_area td {
  padding-top: 15px;
  text-align: center
}

.wallet article.purchase {
  margin-bottom: 30px
}

.wallet article.purchase h3 {
  margin-bottom: -1em
}

.wallet article.billing .tabBody th:first-child {
  width: 70%
}

.wallet article.billing .tabBody th:last-child {
  width: 30%
}

.wallet article.billing .tabBody td.response {
  text-align: center
}

.wallet p.amount {
  text-align: right;
  font-weight: bold;
  padding-right: 4px;
  padding-left: 5px;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  white-space: nowrap
}

.wallet p.amount::before {
  content: '￥';
  font-size: 0.7em
}

.wallet p.amount::after {
  content: '-';
  font-size: 0.7em;
  position: relative;
  top: -1px;
  left: 2px
}

.wrapper_checkbox {
  height: 30px
}

.wrapper_checkbox input[type=checkbox] {
  display: none
}

.wrapper_checkbox input[type=checkbox]:checked+label::before {
  border-color: transparent;
  background-color: #e9e9e9
}

.wrapper_checkbox input[type=checkbox]:checked+label::after {
  opacity: 1;
  transform: rotate(45deg) scale3d(1, 1, 1)
}

.wrapper_checkbox label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px 5px 5px 30px;
  position: relative;
  width: auto;
  font-size: 1.5rem;
  line-height: 1.3;
  box-sizing: border-box
}

.wrapper_checkbox label.empty {
  height: 29px;
  width: 29px;
  padding: 0;
  overflow: hidden;
  top: 10px
}

.wrapper_checkbox label::before {
  background: #fff;
  border: 1px solid #ccc;
  content: '';
  display: block;
  height: 16px;
  width: 16px;
  left: 5px;
  position: absolute;
  top: 5px
}

.wrapper_checkbox label::after {
  border-right: 6px solid #ea561d;
  border-bottom: 3px solid #ea561d;
  content: '';
  display: block;
  height: 20px;
  left: 7px;
  margin-top: -6px;
  opacity: 0;
  position: absolute;
  top: 5px;
  transform: rotate(45deg) translate3d(0, 2px, 0) scale3d(0.7, 0.7, 1);
  transition: transform .1s ease-in-out, opacity .1s ease-in-out;
  width: 9px
}

.anim-box.slidein.is-fadeIned {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards
}

.anim-box.slideout.is-fadeOuted {
  animation: slideOut 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards
}

@keyframes slideIn {
  0% {
    transform: translateY(-70px);
    opacity: 0
  }
  100% {
    transform: translateY(0)
  }
  40%, 100% {
    opacity: 1
  }
}

@keyframes slideOut {
  0% {
    transform: translateY(0px);
    opacity: 0
  }
  100% {
    transform: translateY(-70px)
  }
  40%, 100% {
    opacity: 1
  }
}

@media screen and (min-width: 1280px) {
  .container, footer, #footer_menu, .chat #chat_input, .chat .static_header {
    max-width: 375px;
    margin: 0 auto;
    left: unset
  }
  footer {
    position: relative;
    width: 375px;
    padding: 0px;
    right: unset;
    text-align: right
  }
  #contents_menu {
    width:375px;
  }
  .modal {
    max-width: 305px
  }
}

.terms ul{
  list-style-type: none;
  padding-left: 10px;
}

.terms ul li{
  text-indent: -1.3em;
  padding-left: 1em;
  line-height:1.7;
}

.terms ul ul li{
  text-indent: -2.1em;
  padding-left: 2.4em;
}

.terms p{
  line-height:1.7;
}


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