@import url(https://fonts.googleapis.com/css?family=Nunito);
@charset "UTF-8";
html, body, input {
  margin: 0;
  padding: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: #FF007C;
  font-weight: 100;
}

input {
  font-weight: bold;
}

body {
  background-image: url("/images/common/bg6.png");
}

h1, h2, h3, h4, h5 {
  padding: 0;
  margin: 0;
  font-weight: 100;
}

a {
  text-decoration: none;
  color: #555;
}
a:hover {
  color: #F55;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* The container */
.radioContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-right: 10px;
  cursor: pointer;
}
.radioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0px;
}
.radioContainer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}
.radioContainer .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.radioContainer:hover input ~ .checkmark {
  background-color: #ccc;
}
.radioContainer input:checked ~ .checkmark {
  background-color: #977;
}
.radioContainer input:checked ~ .checkmark:after {
  display: block;
}
.radioContainer .checkmark:after {
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.common_page .main .block {
  background-color: #fff;
  color: #977;
  margin: 10px;
  padding: 20px;
  line-height: 150%;
  border-radius: 10px;
  font-weight: normal;
  font-size: 16px;
}
.common_page .main .block h3 {
  font-weight: bold;
  margin-bottom: 5px;
}
.common_page .main .block {
  font-size: 12px;
}
.common_page .main .block div {
  margin: 10px 0;
  font-size: 14px;
  line-height: 140%;
}
.common_page .main .text {
  margin: 5px 0 5px 0;
  font-size: 12px;
  line-height: 120%;
}
.common_page .main h2 {
  margin: 15px 0;
  background-color: #0001;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 16px;
}
.common_page .main h3 {
  font-size: 14px;
  margin-top: 15px;
  border-bottom: 1px solid #0003;
}
.common_page .main h4 {
  font-weight: bold;
}
.common_page .main li {
  font-size: 14px;
  line-height: 140%;
}

a.btn-normal {
  box-sizing: border-box;
  color: #FF007C;
  display: inline-block;
  line-height: 1em;
  padding: 15px 30px;
  font-size: 30px;
  background-color: #FF007C;
  color: #fff;
  border-radius: 5px;
  border: 3px solid #FF007C;
}
a.btn-normal:hover {
  background-color: #fff;
  color: #FF007C;
  font-weight: bold;
  border: 3px solid #FF007C;
}

a.btn-reverse {
  color: #FF007C;
  display: inline-block;
  line-height: 1em;
  padding: 15px 30px;
  font-size: 30px;
  border: 3px solid #FF007C;
  border-radius: 5px;
}
a.btn-reverse:hover {
  background-color: #FF007C;
  color: #fff;
}

.pn_container {
  background-color: #fff;
  padding: 30px;
}
.pn_container h2, .pn_container h3, .pn_container h4 {
  font-weight: bold;
  text-align: left;
  margin: 5px 0;
}
.pn_container .pn_item {
  display: flex;
  margin-bottom: 5px;
  line-height: 100%;
  color: #977;
  font-weight: bold;
}
.pn_container .pn_item .pn_label {
  width: 100px;
  background-color: #977;
  font-size: 14px;
  color: #fff;
  padding: 3px 5px;
  line-height: 100%;
  font-weight: bold;
  margin-right: 5px;
}
.pn_container .pn_item .pn_value {
  width: calc(100% - 100px);
  word-break: break-all;
}

@media screen and (max-width: 500px) {
  .pn_container {
    padding: 10px;
  }
  .pn_container h1 {
    font-size: 24px;
  }
  .pn_container h2 {
    font-size: 20px;
  }
  .pn_container h3 {
    font-size: 16px;
    font-weight: bold;
  }
  .pn_container h4 {
    font-size: 12px;
    font-weight: bold;
  }
}
.pn_qanda_block {
  padding: 10px 0px;
}
.pn_qanda_block:last-child {
  border: none;
}
.pn_qanda_block .question, .pn_qanda_block .answer {
  display: flex;
  align-items: flex-start;
}
.pn_qanda_block .question .label, .pn_qanda_block .answer .label {
  color: #fff;
  margin-right: 5px;
  width: 40px !important;
  height: 100%;
  text-align: center;
  border-radius: 3px;
}
.pn_qanda_block .question .text, .pn_qanda_block .answer .text {
  width: calc(100% - 40px);
  font-weight: bold;
}
.pn_qanda_block .question {
  padding: 2px 0;
  margin-bottom: 5px;
}
.pn_qanda_block .question .label {
  background-color: #FF007C;
}
.pn_qanda_block .answer {
  color: #777;
  font-weight: normal;
}
.pn_qanda_block .answer .label {
  background-color: #0f90d0;
}

.pn_navi {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 500px) {
  .pn_navi .pn_button {
    font-size: 10px;
  }
}
.pn_navi_m .pn_button {
  margin-right: 5px;
  margin-bottom: 5px;
}
.pn_navi_m .pn_button:last-child {
  margin-right: 0px;
}

.pn_button {
  display: inline-block;
  color: #fff;
  background-color: #FF007C;
  font-weight: bold;
}
.pn_button:hover {
  color: #fff;
  background-color: #da0069;
}
.pn_button:active {
  color: #fff;
  background-color: #880042;
}

.pn_button_s {
  padding: 5px 15px;
  font-size: 16px;
  border-radius: 5px;
}

.pn_qa .new:before {
  content: "NEW\a新着";
}

.pn_blockWithThumbnail {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  line-height: 100%;
}
.pn_blockWithThumbnail .thumbnail {
  margin-right: 10px;
}
.pn_blockWithThumbnail .thumbnail img {
  width: 80px;
}
.pn_blockWithThumbnail h2 {
  font-weight: bold;
  font-size: 20px;
  line-height: 100%;
  margin-bottom: 8px;
}
.pn_blockWithThumbnail .texts {
  width: calc(100% - 100px);
  font-weight: normal;
  line-height: 130%;
}

.pn_balloon {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.pn_balloon .icon {
  width: 80px;
  box-sizing: border-box;
}
.pn_balloon .icon img {
  width: 100%;
  height: auto;
  border: solid 3px #ddd;
  border-radius: 50%;
}
.pn_balloon .text {
  position: relative;
  padding: 17px 13px;
  border-radius: 12px;
  width: calc(100% - 100px);
  box-sizing: border-box;
  font-weight: bold;
  font-size: 16px;
}
.pn_balloon .text a {
  color: #FF007C;
  padding: 1px 3px;
  background-color: #fff;
  line-height: 100%;
  border-radius: 5px;
  margin: 0 3px;
  font-size: 90%;
  box-sizing: border-box;
  border: 2px solid #FF007C;
}
.pn_balloon .text a:hover {
  opacity: 0.9;
}
.pn_balloon .text a:active {
  opacity: 1;
  background-color: #FF007C;
  color: #fff;
  border: 2px solid #fff;
}
.pn_balloon .text:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 28px;
  border: 12px solid transparent;
}

@media screen and (max-width: 500px) {
  .pn_balloon .icon {
    width: 50px;
  }
  .pn_balloon .text {
    width: calc(100% - 70px);
    font-size: 12px;
  }
  .pn_balloon .text:after {
    top: 13px;
  }
}
.pn_balloon_left .icon img {
  border: solid 3px #FF007C;
}
.pn_balloon_left .text:after {
  right: auto;
  left: -20px;
  border-right: 12px solid #f5f5f5;
}

.pn_balloon_right {
  flex-direction: row-reverse;
}
.pn_balloon_right .text:after {
  right: -24px;
  left: auto;
}

.pn_balloon_panlove .icon img {
  border: solid 3px #FF007C;
}
.pn_balloon_panlove .text {
  background: #FF007C;
  color: #fff;
}
.pn_balloon_panlove .text:after {
  border-right-color: #FF007C;
}

.pn_balloon_buyer .icon img {
  border: solid 3px #78D1D0;
}
.pn_balloon_buyer .text {
  color: #78D1D0;
  border: 3px solid #78D1D0;
}
.pn_balloon_buyer .text:after {
  border-left-color: #78D1D0;
}

.pn_balloon_seller .icon img {
  border: solid 3px #FA7F7F;
}
.pn_balloon_seller .text {
  color: #FA7F7F;
  border: 3px solid #FA7F7F;
}
.pn_balloon_seller .text:after {
  border-left-color: #FA7F7F;
}

.imageUploaderContainer {
  background-image: url("/images/common/usericon_blank.png");
  border-radius: 50%;
  margin-right: 20px;
  background-size: contain;
  background-position: center;
  box-sizing: border-box;
  box-shadow: 0px 2px 2px #5557;
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.imageUploaderContainer .imageframe {
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: solid 3px #ddd;
  border-width: 3px;
  border-radius: 50%;
  position: relative;
}
.imageUploaderContainer .imageframe input {
  position: absolute;
  background-color: #0005;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 50%;
  cursor: pointer;
}

.btnAddOnMypage {
  background-color: #FF007C;
  color: #fff;
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  padding: 3px 15px 3px 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.btnDeleteOnMypage {
  display: inline-block;
  padding: 5px 15px;
  line-height: 100%;
  font-size: 12px;
  font-weight: bold;
  color: #F55;
  border-radius: 5px;
  border: 1px solid #F55;
  margin-bottom: 15px;
  cursor: pointer;
}
.btnDeleteOnMypage:active {
  background-color: #F55;
  color: #fff;
}

#page_mypage_profile #thumbnailContainer .line {
  margin-bottom: 0;
}
#page_mypage_profile #thumbnailContainer .field {
  width: calc(100% - 180px);
  font-size: 14px;
}
#page_mypage_profile #thumbnailContainer .field h3 {
  font-size: 16px;
  margin: 0;
}
#page_mypage_profile #thumbnailContainer .field .howto {
  font-size: 16px;
}
#page_mypage_profile #thumbnailContainer .field .info {
  box-sizing: border-box;
  border: 1px solid #0003;
  padding: 5px 10px;
  margin-top: 5px;
  font-size: 14px;
  border-radius: 5px;
}

@media screen and (max-width: 500px) {
  .imageUploaderContainer {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  #page_mypage_profile #thumbnailContainer .field {
    width: 100%;
  }
  #page_mypage_profile #thumbnailContainer .field h3 {
    text-align: center;
  }
  #page_mypage_profile #thumbnailContainer .field .howto {
    text-align: center;
  }
  #page_mypage_profile #thumbnailContainer .field .info {
    font-size: 12px;
  }
}
#passwordGenerator {
  padding: 10px 10px;
  margin: 5px 0;
  background-color: #0001;
}
#passwordGenerator .update {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
#passwordGenerator .update input {
  width: 130px;
  padding: 3px 7px;
  font-size: 14px;
}
#passwordGenerator .btnGenerate, #passwordGenerator .btnCandidate {
  padding: 3px 10px;
  font-size: 12px;
  width: auto;
  display: inline-block;
  background-color: #977;
  color: #fff;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
}
#passwordGenerator .btnGenerate {
  margin: 0 10px 0 3px;
  padding: 7px 13px;
  background-color: #FF007C;
}
#passwordGenerator .btnCandidate {
  margin-right: 5px;
}
#passwordGenerator .btnDelete {
  padding: 3px 10px;
  font-size: 10px;
  width: auto;
  color: #f00;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #f00;
  margin-right: 10px;
}

.error-message {
  font-weight: bold;
  color: #FF007C;
}

#loading {
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #966a;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}
#loading .frame {
  width: 300px;
  height: 300px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  box-shadow: 0px 3px 3px #f775;
  box-sizing: border-box;
  padding: 30px;
  font-weight: bold;
  color: #977;
  border: 5px solid #FF007C;
}
#loading .frame .message, #loading .frame .icon {
  text-align: center;
  font-size: 24px;
}
#loading .frame .message2 {
  margin-top: 10px;
  text-align: left;
  font-size: 80%;
}

.orderButton {
  text-align: center;
  margin-top: 50px;
}
.orderButton .forGuest {
  margin-bottom: 10px;
  font-weight: bold;
  color: #F77;
}
.orderButton .forGuest a {
  display: inline-block;
  color: #FF007C;
  font-size: 120%;
  margin: 3px;
  border-bottom: 3px double #FF007C;
}
.orderButton .forGuest a:hover {
  background-color: #FF007C;
  color: #fff;
}
.orderButton .notes {
  margin-top: 10px;
  color: #000a;
}
.orderButton .notes .description {
  font-size: 12px;
  margin: 0 auto;
  text-align: center;
  font-weight: normal;
  line-height: 170%;
}
.orderButton .notes .description span {
  font-weight: bold;
  border-bottom: 3px double #FF007C;
}

.buttonContainer {
  text-align: center;
  display: inline-block;
  border: 3px solid #FF007C;
  font-size: 20px;
  padding: 10px 20px;
  color: #FF007C;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}
.buttonContainer .buttonlabel {
  display: flex;
  align-items: center;
}
.buttonContainer .buttonlabel .thumbnail {
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-right: 10px;
  width: 50px !important;
  height: 50px !important;
  box-sizing: border-box;
  border: 2px solid #ddd;
  box-shadow: 0px 2px 2px #5557;
}
.buttonContainer .text .row1, .buttonContainer .text .row2 {
  margin: 0;
  padding: 0;
  line-height: 100%;
}
.buttonContainer .text .row1 {
  font-size: 120%;
  margin-bottom: 7px;
}
.buttonContainer .text .row2, .buttonContainer .text .row3 {
  font-size: 60%;
}
.buttonContainer .text .row3 {
  margin-top: 3px;
}
.buttonContainer:hover {
  background-color: #FF007C;
  color: #fff;
}
.buttonContainer:active {
  background-color: #F77;
  color: #fff;
}
.buttonContainerDisabled {
  pointer-events: none;
  cursor: pointer;
  opacity: 0.5;
}

.page_item_order #paymentmethods .methods {
  display: flex;
}
.page_item_order #paymentmethods .methods .method {
  font-size: 24px;
  box-sizing: border-box;
  padding: 15px 30px;
  margin-right: 15px;
  border-radius: 10px;
  border: 3px solid #fefefe;
  border: 3px solid #ccc;
  color: #ccc;
  font-weight: bold;
  cursor: pointer;
}
.page_item_order #paymentmethods .methods .selected {
  color: #FF007C;
  background-color: #fee;
  border: 3px solid #FF007C;
}
@media screen and (max-width: 640px) {
  .page_item_order #paymentmethods .methods .method {
    padding: 10px 20px;
    font-size: 20px;
  }
}
.page_item_order .paymentMethod .methodTitleContainer {
  margin-bottom: 10px;
}
.page_item_order .paymentMethod .methodTitleContainer h3 {
  margin-bottom: 0 !important;
}
.page_item_order .paymentMethod .methodTitleContainer .text {
  font-size: 75%;
  font-weight: bold;
}
.page_item_order .paymentMethod .commentContainer {
  margin-top: 30px;
  margin-left: 30px;
  margin-right: 30px;
}
.page_item_order .paymentMethod .commentContainer h3 {
  font-weight: bold;
  margin-bottom: 10px;
}
.page_item_order .paymentMethod .commentContainer .text {
  padding: 10px;
  border: 2px solid #ccc;
  font-size: 14px;
  color: #977;
  line-height: 110%;
  font-weight: bold;
}

.order_history .dateandstatus .created_at {
  font-size: 14px;
}
.order_history .dateandstatus .status_text {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  padding: 3px 5px;
  line-height: 100%;
  display: inline-block;
}
.order_history .buyerandprice {
  text-align: right;
  font-size: 12px;
}
.order_history .buyerandprice .price {
  font-size: 16px;
}

#page_mypage_seller_order_history .dateandstatus .needtosend {
  background-color: #FF007C;
}
#page_mypage_seller_order_history .dateandstatus .sent {
  background-color: #977;
}
#page_mypage_seller_order_history .buyerandprice .buyer {
  font-weight: bold;
}

#page_mypage_buyer_order_history .dateandstatus .waittosend {
  background-color: #977;
}
#page_mypage_buyer_order_history .dateandstatus .received {
  background-color: none;
  box-sizing: border-box;
  border: 1px solid #977;
  color: #977;
}
#page_mypage_buyer_order_history .dateandstatus .waittoreceived {
  background-color: #FF007C;
}
#page_mypage_buyer_order_history .dateandstatus .canceled {
  background-color: #333;
}
#page_mypage_buyer_order_history .buyerandprice .buyer {
  font-weight: bold;
}

#page_mypage_seller_order_history_single #item_info .canceled {
  display: inline-block;
  background-color: #333;
  padding: 10px 15px;
  margin-bottom: 15px;
  color: #fff;
  font-size: 100%;
}
#page_mypage_seller_order_history_single #item_info .status {
  background-color: #333;
  color: #fff;
  padding: 10px 15px;
  margin-bottom: 15px;
}
#page_mypage_seller_order_history_single #item_info .status span {
  color: #fff;
  font-size: 120%;
}
#page_mypage_seller_order_history_single #item_info .item {
  display: flex;
  margin: 7px 0;
}
#page_mypage_seller_order_history_single #item_info .item .title {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  line-height: 100%;
  padding: 3px 10px;
  margin: 0;
  width: 100px;
  background-color: #0001;
  font-size: 12px;
  font-weight: bold;
  margin-right: 5px;
}
#page_mypage_seller_order_history_single #item_info .item .data {
  width: calc(100% - 100px);
  word-break: break-all;
}
#page_mypage_seller_order_history_single #item_info .item_thumbnail .image_containers {
  display: flex;
  flex-wrap: wrap;
}
#page_mypage_seller_order_history_single #item_info .item_thumbnail .image_containers .image_container {
  width: 150px;
  height: 150px;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box;
  border: 1px solid #0003;
}
@media screen and (max-width: 600px) {
  #page_mypage_seller_order_history_single #item_info .item {
    display: block;
  }
  #page_mypage_seller_order_history_single #item_info .item .data {
    width: 100%;
  }
  #page_mypage_seller_order_history_single #item_info .item_thumbnail .image_containers {
    margin-top: 5px;
  }
  #page_mypage_seller_order_history_single #item_info .item_thumbnail .image_containers .image_container {
    margin-bottom: 5px;
  }
}

.panSubmitBtn1 {
  text-align: center;
  display: inline-block;
  border: 3px solid #FF007C;
  font-size: 20px;
  padding: 10px 14px;
  color: #FF007C;
  border-radius: 10px;
  font-weight: bold;
  background-color: #fff;
  cursor: pointer;
}
.panSubmitBtn1 .buttonlabel {
  line-height: 100%;
}
.panSubmitBtn1 .buttonlabel .label {
  font-size: 120%;
  line-height: 100%;
}
.panSubmitBtn1 .buttonlabel .description {
  margin-top: 5px;
  font-size: 60%;
  line-height: 100%;
}
.panSubmitBtn1:hover {
  background-color: #FF007C;
  color: #fff;
}
.panSubmitBtn1:active {
  background-color: #F77;
  color: #fff;
}

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

.pn_info_container .pn_block {
  text-align: left;
}
.pn_info_container .pn_block .pn_h2 {
  font-size: 24px;
  font-weight: bold;
}
.pn_info_container .pn_block .pn_h3 {
  font-size: 16px;
  margin-top: 20px;
}
.pn_info_container .pn_block .pn_description {
  font-size: 14px;
}
.pn_info_container .pn_block .pn_framed {
  font-size: 14px;
  padding: 15px;
  margin: 5px 0;
  background-color: #00000011;
}
.pn_info_container .pn_block .pn_item {
  display: flex;
  margin: 7px 0;
  align-items: center;
}
.pn_info_container .pn_block .pn_item .pn_title {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  line-height: 100%;
  padding: 3px 10px;
  margin: 0;
  width: 100px;
  background-color: #0001;
  font-size: 12px;
  font-weight: bold;
  margin-right: 5px;
}
.pn_info_container .pn_block .pn_item .pn_data {
  width: calc(100% - 100px);
}
.pn_info_container .pn_block .pn_item .value {
  text-align: right;
  width: 300px;
}
.pn_info_container .pn_block .item_thumbnail .pn_image_containers {
  display: flex;
  flex-wrap: wrap;
}
.pn_info_container .pn_block .item_thumbnail .pn_image_containers .pn_image_container {
  width: 150px;
  height: 150px;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box;
  border: 1px solid #0003;
}
.pn_info_container .pn_block .detials {
  width: 100%;
  font-size: 12px;
  box-sizing: border-box;
  border: 1px solid #0002;
  margin-bottom: 30px;
}
.pn_info_container .pn_block .detials .item {
  display: flex;
  padding: 3px 5px;
}
.pn_info_container .pn_block .detials .item .label {
  width: 150px;
}
.pn_info_container .pn_block .detials .item .data {
  width: calc(100% - 150px);
  text-align: right;
}
.pn_info_container .pn_block .detials .item:nth-child(odd) {
  background-color: #edebeb;
}
.pn_info_container .pn_block .detials .item:last-child {
  border-top: 2px solid #0003;
}
@media screen and (max-width: 600px) {
  .pn_info_container .pn_block .pn_item {
    display: block;
  }
  .pn_info_container .pn_block .pn_item .pn_data {
    width: 100%;
  }
  .pn_info_container .pn_block .pn_thumbnail .pn_image_containers {
    margin-top: 5px;
  }
  .pn_info_container .pn_block .pn_thumbnail .pn_image_containers .pn_image_container {
    margin-bottom: 5px;
  }
  .pn_info_container .pn_block .detials {
    width: 100%;
  }
  .pn_info_container .pn_block .detials .item {
    display: block;
    padding: 3px 5px;
  }
  .pn_info_container .pn_block .detials .item .label {
    width: 100%;
  }
  .pn_info_container .pn_block .detials .item .data {
    width: 100%;
  }
}

.space_s_top {
  margin-top: 30px;
}

.space_s_bottom {
  margin-bottom: 30px;
}

.space_s_v {
  margin-top: 30px;
  margin-bottom: 30px;
}

.space_s_h {
  margin-left: 30px;
  margin-right: 30px;
}

.simple_input {
  padding: 5px;
  width: 40%;
}

.simple_button {
  padding: 5px;
}

.pn_message_list_container .pn_item {
  display: flex;
  border-top: 1px solid #0003;
  padding: 3px 0;
}
.pn_message_list_container .pn_item .pn_created_at, .pn_message_list_container .pn_item .pn_sent_at {
  box-sizing: border-box;
  font-size: 14px;
  width: 180px;
  display: flex;
  align-items: center;
}
.pn_message_list_container .pn_item .thubnailContainer .thumbnail {
  width: 36px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.pn_message_list_container .pn_item .thubnailContainer .pn_message .pn_sender, .pn_message_list_container .pn_item .thubnailContainer .pn_message .pn_sendto {
  font-size: 14px;
  font-weight: normal;
}
.pn_message_list_container .pn_item .thubnailContainer .pn_message .pn_sender span, .pn_message_list_container .pn_item .thubnailContainer .pn_message .pn_sendto span {
  font-size: 14px;
}
.pn_message_list_container .pn_item:last-child {
  border-bottom: 1px solid #0003;
}
.pn_message_list_container .pn_unread {
  font-weight: bold;
}
@media screen and (max-width: 600px) {
  .pn_message_list_container .pn_item {
    display: block;
    border: none;
    border-top: 1px solid #0005;
  }
  .pn_message_list_container .pn_item .pn_created_at, .pn_message_list_container .pn_item .pn_sent_at {
    width: 100%;
    font-size: 12px;
    padding: 1px 5px;
  }
  .pn_message_list_container .pn_item .thubnailContainer {
    margin-top: 5px;
  }
  .pn_message_list_container .pn_item .thubnailContainer .pn_message {
    width: 100%;
  }
  .pn_message_list_container .pn_item .thubnailContainer .pn_message .pn_sender, .pn_message_list_container .pn_item .thubnailContainer .pn_message .pn_sendto {
    font-size: 12px;
    line-height: 100%;
  }
  .pn_message_list_container .pn_item .thubnailContainer .pn_message .pn_sender span, .pn_message_list_container .pn_item .thubnailContainer .pn_message .pn_sendto span {
    font-size: 12px;
  }
}

.pn_message_single_container .pn_created_at .pn_sent_at {
  text-align: right;
}
.pn_message_single_container .sender {
  background-color: #f551;
  border-top: 1px solid #f553;
  border-bottom: 1px solid #f553;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.pn_message_single_container .sender .nickname {
  font-size: 20px;
}

.pn_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  list-style-type: none;
  margin: 15px auto;
}
.pn_pagination a {
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  margin: 0 4px;
  border: 0px solid #FF007C;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  background-color: #f773;
  font-weight: bold;
  color: #888;
}
.pn_pagination a:hover {
  background-color: #fff;
}
.pn_pagination a.active {
  background-color: #F77;
  color: white;
}
.pn_pagination a.prev, .pn_pagination a.next {
  font-weight: bold;
}

@media (max-width: 600px) {
  .pn_pagination a {
    padding: 6px 10px;
  }
}
.pn_simpleButton {
  display: inline-block !important;
  background-color: #f77;
  padding: 5px 15px;
  font-size: 14px;
  color: #fff;
  border-radius: 15px;
  line-height: 100%;
}
.pn_simpleButton:hover {
  background-color: #F55;
  color: #fff !important;
}
.pn_simpleButton:active {
  background-color: #FF007C;
}

.pn_btn {
  width: 150px;
  height: 50px;
  padding: 10px 0px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  background-color: #FF007C;
  color: #fff;
}
.pn_btn:hover {
  background-color: #f55;
}
.pn_btn:active {
  background-color: #d70068;
}

.pn_btn_frame_multipleline {
  text-align: center;
  display: inline-block;
  border: 3px solid #FF007C;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: bold;
  color: #FF007C;
  cursor: pointer;
}
.pn_btn_frame_multipleline .pn_container {
  display: flex;
  align-items: center;
}
.pn_btn_frame_multipleline .pn_label .pn_main, .pn_btn_frame_multipleline .pn_label .pn_sub {
  margin: 0;
  padding: 0;
  line-height: 100%;
}
.pn_btn_frame_multipleline .pn_label .pn_main {
  font-size: 120%;
}
.pn_btn_frame_multipleline .pn_label .pn_sub {
  font-size: 60%;
  margin-top: 7px;
}
.pn_btn_frame_multipleline .pn_label .pn_sub div {
  margin-top: 3px;
}
.pn_btn_frame_multipleline:hover {
  background-color: #FF007C;
  color: #fff;
}
.pn_btn_frame_multipleline:active {
  background-color: #F77;
  color: #fff;
}
.pn_btn_frame_multipleline_disabled {
  pointer-events: none;
  cursor: pointer;
  opacity: 0.5;
}

.pn_pre {
  background-color: #0001;
  padding: 20px;
}

.pn_frame_warnings {
  background-color: #FF007C !important;
  color: #fff;
  font-weight: bold !important;
}
.pn_frame_warnings a {
  color: #fff;
  text-decoration: underline;
  margin: 0 3px;
}

.pn_options_list .pn_options_list_item {
  display: flex;
}
.pn_options_list .pn_options_list_item .pn_price {
  margin-left: 10px;
}
.pn_thumbnails_list {
  display: flex;
  flex-wrap: wrap;
}
.pn_thumbnails_list .pn_thumbnails_list_item {
  margin-left: 5px;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #977;
  background-color: #00000008;
  overflow: hidden;
}
.pn_thumbnails_list .pn_thumbnails_list_item:first-child {
  margin-left: 0;
}
.pn_thumbnails_list .pn_thumbnails_list_item .pn_thumbnails_list_item_image {
  width: 100%;
  height: 100%;
}

.pn_alert {
  background-color: #FF007C;
  padding: 10px 15px;
  margin: 10px 0;
  color: #fff;
}
.pn_alert .pn_sub {
  font-size: 80%;
}
.pn_alert ol {
  font-size: 80%;
  padding: 0;
  margin: 0;
  margin-left: 20px;
  margin-top: 5px;
}

.pn_space_v_s {
  height: 10px;
}

.pn_manager_itemContainer {
  margin-top: 5px;
}
.pn_manager_itemContainer .pn_item {
  display: flex;
  padding: 5px 10px;
}
.pn_manager_itemContainer .pn_item .pn_id {
  width: 40px;
}
.pn_manager_itemContainer .pn_item .pn_subline {
  width: calc(100% - 40px);
  display: flex;
}
.pn_manager_itemContainer .pn_item .pn_subline .pn_title {
  width: 200px;
}
.pn_manager_itemContainer .pn_item .pn_subline .pn_description {
  width: calc(100% - 200px);
}
.pn_manager_itemContainer .pn_item:nth-child(even) {
  background-color: #00000005;
}
.pn_manager_itemContainer .pn_item:nth-child(odd) {
  background-color: #00000011;
}
@media screen and (max-width: 640px) {
  .pn_manager_itemContainer .pn_item .pn_subline {
    display: block;
  }
  .pn_manager_itemContainer .pn_item .pn_subline .pn_title {
    width: 100%;
  }
  .pn_manager_itemContainer .pn_item .pn_subline .pn_description {
    width: 100%;
    font-size: 12px;
  }
}

.pn_notification_item {
  display: flex;
  padding: 5px 10px;
}
.pn_notification_item .id {
  width: 40px;
}
.pn_notification_item .info {
  width: calc(100% - 40px);
}
.pn_notification_item .info .updated_at {
  font-size: 14px;
}
.pn_notification_item .info .receiver {
  display: flex;
}
.pn_notification_item .info .message {
  font-size: 12px;
}
.pn_notification_item:nth-child(even) {
  background-color: #00000005;
}
.pn_notification_item:nth-child(odd) {
  background-color: #00000011;
}

.pn_btn_inline {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #FF007C;
  color: #FF007C;
  font-weight: bold;
  font-size: 12px;
  line-height: 100%;
  padding: 2px 5px;
  height: 100%;
  cursor: pointer;
}
.pn_btn_inline:hover {
  background-color: #FF007C;
  color: #fff !important;
}

.size_m {
  font-size: 16px;
}

.pn_chatwindow .pn_bubble_container {
  padding: 0 10px 10px 10px;
}
.pn_chatwindow .pn_bubble_container:first-child {
  padding-top: 10px;
}
.pn_chatwindow .pn_bubble_container .pn_bubble .pn_bubble_text {
  margin-left: 8px;
  margin-right: 30px;
  color: #FF007C;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  line-height: 130%;
  box-shadow: 2px 2px 1px #0001;
}
.pn_chatwindow .pn_bubble_opponent .pn_bubble {
  background-image: url("/images/common/bubble_tongari_left.png");
  background-repeat: no-repeat;
}
.pn_chatwindow .pn_bubble_opponent .pn_bubble .pn_bubble_text {
  margin-left: 8px;
  margin-right: 30px;
}
.pn_chatwindow .pn_bubble_myself .pn_bubble {
  background-image: url("/images/common/bubble_tongari_right.png");
  background-repeat: no-repeat;
  background-position: right top;
}
.pn_chatwindow .pn_bubble_myself .pn_bubble .pn_bubble_text {
  margin-left: 30px;
  margin-right: 8px;
  color: #977;
}

.pn_user_thumbnail {
  aspect-ratio: 1;
  width: 100%;
  background-size: cover;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #0001;
  border: 1px solid #0003;
}

.pn_iconContainer .thumbnail {
  aspect-ratio: 1;
  width: 100%;
  background-size: cover;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #0001;
  border: 1px solid #0003;
}

.pn_list:nth-child(even) {
  background-color: #00000005;
}
.pn_list:nth-child(odd) {
  background-color: #00000011;
}

.form-add {
  padding: 20px;
  margin: 20px 0;
  background-color: #0001;
}
.form-add input, .form-add textarea {
  width: 100%;
  padding: 5px;
}
.form-add input {
  font-size: 16px;
  margin-bottom: 5px;
}
.form-add textarea {
  height: 50px;
}

.main h1 {
  font-size: 30px;
  font-weight: 400;
  color: #FF007C;
  margin-bottom: 20px;
}
.main .note {
  font-size: 14px;
  color: #555;
  margin-bottom: 25px;
}

.notfound_main {
  width: 100%;
  height: 200px;
  background-color: #0000000a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notfound_main h2, .notfound_main div {
  font-weight: 100;
}
.notfound_main .content {
  text-align: center;
}

#loginuser {
  position: fixed;
  z-index: 20;
  top: 5px;
  right: 7px;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 2px;
  padding-right: 15px;
  border-radius: 40px;
  box-shadow: 1px 2px 5px #f555;
  color: #FF007C;
}
#loginuser .thumbnail {
  box-sizing: border-box;
  background-color: #f551;
  border: 1px solid #f552;
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 1px 2px;
}
#loginuser .name {
  font-size: 18px;
  margin-left: 5px;
  font-weight: bold;
}
#loginuser:hover {
  background-color: #F55;
  color: #fff;
}

@media screen and (max-width: 800px) {
  #loginuser {
    padding-right: 15px;
    margin-top: 3px;
  }
  #loginuser .thumbnail {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }
  #loginuser .name {
    font-size: 14px;
  }
}
#slick {
  border-top: 5px solid #faa;
  border-bottom: 5px solid #faa;
  box-shadow: 0px 2px 2px #0005;
}
#slick button {
  z-index: 1;
}
#slick div img {
  width: 480px;
}
@media screen and (max-width: 800px) {
  #slick div img {
    width: 320px;
  }
}
#slick .slick-prev {
  left: 20px;
}
#slick .slick-next {
  right: 20px;
}

body .grid_wrapper header {
  border-bottom: 1px solid #f779;
  padding: 20px 0px;
  background-color: #fffa;
}
body .grid_wrapper header h1 {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 800px) {
  body .grid_wrapper header h1 {
    font-size: 10px;
  }
  body .grid_wrapper header .top .side {
    display: none;
  }
}
body .grid_wrapper header .top {
  text-align: center;
}
body .grid_wrapper header .top .side {
  width: 100px;
  background-color: #0002;
  text-align: center;
}
body .grid_wrapper header .top #sitename {
  display: inline-block;
  padding: 0;
  margin: 7px;
  padding: 0px 20px;
  color: #F77;
}
body .grid_wrapper header .top #sitename .rect {
  width: 200px;
}
body .grid_wrapper header .top #sitename .square {
  width: 40px;
  display: none;
}
body .grid_wrapper header .menu .btnmenu {
  display: none;
}
body .grid_wrapper header .menu a, body .grid_wrapper header .menu .disabled {
  text-align: center;
  display: block;
  padding: 5px 10px;
  font-weight: bold;
}
body .grid_wrapper header .menu a {
  color: #555;
}
body .grid_wrapper header .menu a:hover {
  background-color: #fff;
}
body .grid_wrapper header .menu .header_icon {
  display: block;
  width: calc(10% - 12px);
  background-color: #fff;
  overflow: hidden;
  padding: 0px 0px;
  margin: 3px;
  background-color: #fff8;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  color: #F77;
  border: 3px solid #FF007C;
  border-radius: 10px;
  box-shadow: 0 0 5px #0001;
}
body .grid_wrapper header .menu .header_icon i {
  font-size: 30px;
}
body .grid_wrapper header .menu .header_icon .image {
  background-image: url("/images/common/navi_dummy.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 65px;
}
body .grid_wrapper header .menu .header_icon .label {
  font-size: 12px;
  font-weight: bold;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  border-top: 1px solid #F77;
}
body .grid_wrapper header .menu .header_icon:hover {
  border: 3px solid #FF007C;
  box-shadow: 0px 3px 3px #0008;
}
body .grid_wrapper header .menu .preopen {
  opacity: 0.2;
}
body .grid_wrapper header .menu .preopen:hover {
  border: 3px solid #F77;
  box-shadow: 0px 0px 0px #0000;
}
body .grid_wrapper header .menu #navi_home .image {
  background-image: url("/images/common/navi_icon_top.png");
}
body .grid_wrapper header .menu #navi_sellers .image {
  background-image: url("/images/common/navi_icon_sellers.png");
}
body .grid_wrapper header .menu #navi_items .image {
  background-image: url("/images/common/navi_icon_items.png");
}
body .grid_wrapper header .menu #navi_categories .image {
  background-image: url("/images/common/navi_icon_categories.png");
}
body .grid_wrapper header .menu #navi_tweet .image {
  background-image: url("/images/common/navi_icon_tweet.png");
}
body .grid_wrapper header .menu #navi_guide .image {
  background-image: url("/images/common/navi_icon_guide.png");
}
body .grid_wrapper header .menu #navi_history .image {
  background-image: url("/images/common/navi_icon_history.png");
}
body .grid_wrapper header .menu #navi_util .image {
  background-image: url("/images/common/navi_icon_util.png");
}
body .grid_wrapper header .menu #navi_login .image {
  background-image: url("/images/common/navi_icon_login.png");
}
body .grid_wrapper header .menu #navi_mypage .image.navi_mypage_seller {
  background-image: url("/images/common/navi_icon_mypage_seller.png");
}
body .grid_wrapper header .menu #navi_mypage .image.navi_mypage_buyer {
  background-image: url("/images/common/navi_icon_mypage_buyer.png");
}
body .grid_wrapper header .menu #navi_logout .image {
  background-image: url("/images/common/navi_icon_logout.png");
}
body .grid_wrapper header .menu #navi_register .image {
  background-image: url("/images/common/navi_icon_register.png");
}
body .grid_wrapper header .menu .account {
  border: 1x solid #F77;
  color: #fff;
}
body .grid_wrapper header .menu .account:hover {
  background-color: #F55;
  border: 1x solid #F55;
}
body .grid_wrapper header .menu .account .label {
  background-color: #FF007C;
  color: #fff;
}
body .grid_wrapper header .menu .line1 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 0 7px;
}
body .grid_wrapper header .menu .disabled {
  color: #0002;
}
body .grid_wrapper header .menu .disabled .label {
  font-size: 12px;
  font-weight: 400;
}
body .grid_wrapper header #headermenuForMobile {
  display: none;
}
body .grid_wrapper header #btnmenu {
  display: none;
  position: fixed;
  bottom: 0;
  z-index: 11;
  height: 70px;
  width: 70px;
  background-color: #F55;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3px solid #fff;
  box-shadow: 0px 3px 5px #0005;
}
body .grid_wrapper header #btnmenu i {
  font-size: 24px;
}
body .grid_wrapper header #btnmenu .fa-times {
  display: none;
}
body .grid_wrapper header #headermenu {
  display: flex;
  justify-content: space-around;
}
body .grid_wrapper header #headermenu .right {
  display: flex;
  width: 100%;
}
@media screen and (max-width: 800px) {
  body .grid_wrapper header {
    padding: 0;
  }
  body .grid_wrapper header .top {
    width: 100%;
    position: fixed;
    z-index: 5;
    background-color: #fffe;
    border-bottom: 3px solid #f779;
    color: #FF007C;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
  body .grid_wrapper header .top h1 {
    font-size: 14px;
    padding-right: 110px;
    text-align: left;
    line-height: 1em;
  }
  body .grid_wrapper header .top #sitename {
    padding: 0;
    line-height: 1em;
  }
  body .grid_wrapper header .top #sitename .rect {
    width: 100px;
  }
  body .grid_wrapper header #headermenu {
    display: none;
  }
  body .grid_wrapper header #btnmenu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-left: 10px;
    margin-bottom: 20px;
    color: #fff;
  }
  body .grid_wrapper header #headermenuForMobile {
    z-index: 10;
    position: fixed;
    display: block;
    bottom: 0;
    width: 100%;
    border-top: 3px solid #F77;
    background-color: #fffe;
  }
  body .grid_wrapper header #headermenuForMobile h2 {
    text-align: center;
    line-height: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
  }
  body .grid_wrapper header #headermenuForMobile h2 img {
    width: 150px;
  }
  body .grid_wrapper header #headermenuForMobile .line1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding: 3%;
    padding-top: 0px;
    padding-bottom: 100px;
  }
  body .grid_wrapper header #headermenuForMobile .line1 .header_icon {
    width: 80px;
    margin: 5px;
  }
  body .grid_wrapper header #headermenuForMobile .line1 .header_icon i {
    font-size: 18px;
  }
  body .grid_wrapper header #headermenuForMobile .line1 .header_icon .label {
    font-size: 12px;
  }
  body .grid_wrapper header #headermenuForMobile .line1 .header_icon .image {
    height: 65px;
  }
}
@media screen and (max-width: 500px) {
  body .grid_wrapper header .top h1 {
    font-size: 12px;
  }
  body .grid_wrapper header .top #sitename {
    padding: 0;
    line-height: 1em;
  }
  body .grid_wrapper header .top #sitename .rect {
    display: none;
  }
  body .grid_wrapper header .top #sitename .square {
    display: block;
  }
}
@media screen and (max-width: 380px) {
  body .grid_wrapper header .top h1 {
    font-size: 10px;
  }
}
body .grid_wrapper .container {
  padding: 20px 0;
}
body .grid_wrapper .container .title {
  text-align: center;
  margin: 10px 0;
}
body .grid_wrapper .container .title h2 {
  font-size: 36px;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  body .grid_wrapper .container .title h2 {
    font-size: 28px;
    font-weight: 400;
  }
}
body .grid_wrapper .container .title div {
  display: inline;
  margin: 0 auto;
  font-size: 10px;
  font-weight: bold;
  width: auto;
  padding: 1px 30px;
  margin: 10px;
  border-radius: 20px;
  border: 1px solid #F77;
  background-color: #fff5f5;
  box-shadow: 0 0 5px #0001;
}
@media screen and (max-width: 800px) {
  body .grid_wrapper .container {
    padding-top: 70px;
  }
}
body .grid_wrapper footer {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  opacity: 0.7;
  border-top: 1px solid #f779;
  background-color: #fffa;
  padding: 20px 0px;
}

#page_index .message_for_tweet_user {
  padding: 20px;
  box-sizing: border-box;
  margin: 0 10px;
  background-color: #fff;
  font-weight: bold;
}
#page_index .message_for_tweet_user h2 {
  font-weight: bold;
}
#page_index .message_for_tweet_user .message_for_tweet_user_text {
  text-align: center;
}
#page_index .tweet_container {
  overflow: scroll;
  background-color: #f001;
}
#page_index .tweet_container .guide_for_tweet {
  display: flex;
  justify-content: center;
  align-items: center;
}
#page_index .tweet_container .guide_for_tweet .button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 150px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 50px 10px 80px 20px;
  cursor: pointer;
  box-shadow: 0px 1px 3px #0005;
  color: #F55;
}
#page_index .tweet_container .guide_for_tweet .button:hover {
  background-color: #F55;
  color: #fff;
}
#page_index .tweet_container .guide_for_tweet .button .icon {
  line-height: 1;
  font-size: 50px;
}
#page_index .tweet_container .guide_for_tweet .button .text {
  margin-top: 10px;
  line-height: 1;
  font-size: 16px;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  #page_index .tweet_container .guide_for_tweet .button {
    height: 80px;
  }
  #page_index .tweet_container .guide_for_tweet .button .icon {
    font-size: 40px;
  }
  #page_index .tweet_container .guide_for_tweet .button .text {
    font-size: 10px;
  }
}
#page_index .tweet_container .tweets {
  width: -moz-max-content;
  width: max-content;
  display: flex;
}
#page_index #preopen_container .block, #page_index #preopen_container h3, #page_index #preopen_container h2 {
  font-weight: bold;
}
#page_index #preopen_container .block {
  color: #F55;
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  font-weight: normal;
}
#page_index #preopen_container .block h1 {
  color: #FF007C;
}
#page_index #preopen_container .block h3 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 5px;
}
#page_index #preopen_container .block .notice {
  background-color: #f00;
  color: #fff;
  display: inline-block;
  line-height: 1em;
  padding: 5px 20px;
  font-size: 16px;
  border-radius: 20px;
  margin: 5px 0;
}
#page_index #preopen_container .block a {
  color: #FF007C;
  display: inline-block;
  line-height: 1em;
  padding: 15px 30px;
  font-size: 30px;
  border: 3px solid #FF007C;
  border-radius: 5px;
}
#page_index #preopen_container .block a:hover {
  background-color: #FF007C;
  color: #fff;
}
#page_index #preopen_container .head {
  text-align: center;
}
#page_index #preopen_container .head h1 {
  font-size: 20px;
  font-weight: bold;
}
#page_index #preopen_container .head img {
  margin-top: 20px;
  width: 50%;
}
#page_index #preopen_container .head .screenshots {
  display: flex;
  justify-content: space-between;
}
#page_index #preopen_container .head .screenshots .screenshot {
  width: calc(33.3333333333% - 10px);
}
#page_index #preopen_container .head .screenshots .screenshot img {
  width: 100%;
}
#page_index #preopen_container .head .msg {
  font-size: 30px;
  font-weight: 700;
  line-height: 1em;
  color: #fff;
  background-color: #F55;
  padding: 20px 0;
  margin: 15px 0;
  border-radius: 10px;
}
#page_index #preopen_container .head .msg .yearmonth {
  font-size: 1.5em;
  line-height: 1em;
  margin-bottom: 0.1em;
}
#page_index #preopen_container .unlimited, #page_index #preopen_container .discount {
  display: flex;
  justify-content: space-between;
}
#page_index #preopen_container .unlimited .thumbnail, #page_index #preopen_container .discount .thumbnail {
  width: 40%;
}
#page_index #preopen_container .unlimited .thumbnail img, #page_index #preopen_container .discount .thumbnail img {
  width: 100%;
}
#page_index #preopen_container .unlimited .info, #page_index #preopen_container .discount .info {
  width: calc(60% - 20px);
}
#page_index #preopen_container .unlimited .info .needed, #page_index #preopen_container .discount .info .needed {
  background-color: #f553;
  padding: 15px;
  border-radius: 10px;
  margin: 15px 0;
}
#page_index #preopen_container .unlimited .info .needed h3, #page_index #preopen_container .discount .info .needed h3 {
  text-align: center;
}
@media screen and (max-width: 640px) {
  #page_index #preopen_container .head h1 {
    font-size: 12px;
    font-weight: bold;
  }
  #page_index #preopen_container .head img {
    margin-top: 10px;
    width: 80%;
  }
  #page_index #preopen_container .unlimited, #page_index #preopen_container .discount {
    display: block;
  }
  #page_index #preopen_container .unlimited .thumbnail, #page_index #preopen_container .discount .thumbnail {
    width: 100%;
  }
  #page_index #preopen_container .unlimited .info, #page_index #preopen_container .discount .info {
    width: auto;
  }
}

.ranking_sellers, .index_sellers {
  background-color: #fff;
  display: flex;
  padding: 20px 10px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 0px 5px #0001;
}
.ranking_sellers .item, .index_sellers .item {
  width: calc(16.6666666667% - 5px);
  margin-right: 5px;
}
.ranking_sellers .item a, .index_sellers .item a {
  background-color: #f773;
  display: block;
  font-weight: normal;
  color: #f00a;
  width: 100%;
  border-radius: 10px;
  margin: 1px;
}
.ranking_sellers .item a:hover, .index_sellers .item a:hover {
  color: #fff;
  background-color: #f77e;
  box-shadow: 0 2px 1px #0002;
}
.ranking_sellers .item a .rank, .index_sellers .item a .rank {
  font-size: 14px;
  text-align: center;
  padding: 5px 0;
}
.ranking_sellers .item a .image, .index_sellers .item a .image {
  width: 100%;
  aspect-ratio: 12/15;
  overflow: hidden;
  background-size: cover;
}
.ranking_sellers .item a .info, .index_sellers .item a .info {
  font-size: 12px;
  text-align: center;
  padding: 5px 0;
}
.ranking_sellers .item a .info .name, .index_sellers .item a .info .name {
  font-weight: bold;
}
@media screen and (max-width: 1100px) {
  .ranking_sellers .item, .index_sellers .item {
    width: calc(16.6666666667% - 5px);
  }
}
@media screen and (max-width: 860px) {
  .ranking_sellers .item, .index_sellers .item {
    width: calc(25% - 5px);
  }
}
@media screen and (max-width: 500px) {
  .ranking_sellers .item, .index_sellers .item {
    width: calc(33.3333333333% - 5px);
  }
}
@media screen and (max-width: 400px) {
  .ranking_sellers .item, .index_sellers .item {
    width: calc(50% - 5px);
  }
}

.ranking_sellers {
  flex-wrap: wrap;
}
.ranking_sellers .item {
  margin-bottom: 10px;
}
.ranking_sellers .item:nth-child(n+1):nth-child(-n+4) {
  width: calc(25% - 5px);
}
.ranking_sellers .item:nth-child(n+5):nth-child(-n+10) {
  width: calc(16.6666666667% - 5px);
}
.ranking_sellers .item:nth-child(n+11):nth-child(-n+100) {
  display: none;
}
@media screen and (max-width: 800px) {
  .ranking_sellers .item:nth-child(n+1):nth-child(-n+3) {
    width: calc(33.3333333333% - 5px);
  }
  .ranking_sellers .item:nth-child(n+4):nth-child(-n+13) {
    display: inherit;
    width: calc(20% - 5px);
  }
  .ranking_sellers .item:nth-child(n+14):nth-child(-n+100) {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .ranking_sellers .item:nth-child(n+1):nth-child(-n+2) {
    width: calc(50% - 5px);
  }
  .ranking_sellers .item:nth-child(n+3):nth-child(-n+11) {
    display: inherit;
    width: calc(33.3333333333% - 5px);
  }
  .ranking_sellers .item:nth-child(n+12):nth-child(-n+100) {
    display: none;
  }
}

.ranking_sellers_202206 .item a {
  width: 100%;
}

.index_sellers {
  flex-wrap: wrap;
}
.index_sellers .item a {
  margin-bottom: 15px;
}

.ranking_items {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 10px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 0px 5px #0001;
}
.ranking_items .item {
  display: flex;
  border-radius: 15px;
  overflow: hidden;
  width: 32.7%;
  margin: 3px;
  background-color: #f773;
  box-shadow: 0 0px 2px #0003;
}
.ranking_items .item .image_container {
  display: block;
}
.ranking_items .item .item_container {
  background-color: #0001;
  background-image: url("/images/common/defaultItem.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.ranking_items .item .item_container .price {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #FF007C;
  display: inline-block;
  color: #fff;
  font-size: 12px;
  line-height: 100%;
  padding: 3px 5px;
}
.ranking_items .item .item_container .is_negotiation {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0008;
  height: 100%;
  color: #fff;
}
.ranking_items .item .item_container .is_negotiation .text {
  background-color: #fff;
  color: #FF007C;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 10px;
}
.ranking_items .item a {
  font-weight: normal;
  color: #f00a;
  width: 150px;
  margin: 1px;
}
.ranking_items .item a:hover {
  color: #fff;
  background-color: #f77e;
  box-shadow: 0 2px 1px #0002;
}
.ranking_items .item a .image {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.ranking_items .item .info {
  font-size: 12px;
  padding: 5px 10px;
  width: calc(100% - 150px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ranking_items .item .info .date_category {
  display: flex;
}
.ranking_items .item .info .date_category .created_at {
  font-weight: bold;
  opacity: 0.7;
  margin-right: 10px;
}
.ranking_items .item .info .date_category .category {
  background-color: #fff6;
  border-radius: 10px;
  display: inline;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
}
.ranking_items .item .info .name {
  font-weight: bold;
  font-size: 16px;
  margin: 5px 0;
}
.ranking_items .item .info .comment_container .comment {
  background-color: #fff;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 10px;
  font-weight: bold;
  color: #777;
}
.ranking_items .item .info .comment_container .seller {
  display: flex;
  width: 100%;
  align-items: center;
}
.ranking_items .item .info .comment_container .seller .imageContainer {
  background-color: #eee;
  background-image: url("/images/common/defaultSellerIcon.png");
  background-size: cover;
  padding: 0;
  margin: 0;
  margin-top: -7px;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 3px solid #fff;
  width: 50px;
  height: 50px;
  box-shadow: 1px 1px 1px #0002;
}
.ranking_items .item .info .comment_container .seller .imageContainer .image {
  width: 44px;
  height: 44px;
}
.ranking_items .item .info .comment_container .seller .seller_name {
  width: calc(100% - 60px);
  line-height: 100%;
  font-weight: bold;
  box-sizing: border-box;
  padding-right: 10px;
  margin-left: 10px;
}
@media screen and (max-width: 1000px) {
  .ranking_items .item {
    width: calc(50% - 6px);
  }
}
@media screen and (max-width: 640px) {
  .ranking_items .item {
    width: 100%;
  }
}

#page_seller_single .container .header {
  display: flex;
  justify-content: space-evenly;
  background-color: #fff;
  box-sizing: border-box;
  border-top: solid 16px #faa;
  border-bottom: solid 16px #faa;
}
#page_seller_single .container .header .seller_container {
  width: 300px;
  line-height: 100%;
  background-color: #FFDEDE;
  overflow: hidden;
}
#page_seller_single .container .header .seller_container #bookmark_face {
  position: absolute;
  width: 100px;
  aspect-ratio: 1;
  bottom: -15px;
  right: -25px;
  background-image: none;
  background-size: 100%;
}
#page_seller_single .container .header .seller_container .marked {
  background-image: url("/images/common/favorite_face.png") !important;
}
#page_seller_single .container .header .seller_container .thumbnail {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}
#page_seller_single .container .header .seller_info {
  padding: 30px;
  box-sizing: border-box;
  width: calc(100% - 300px);
}
#page_seller_single .container .header .seller_info .btn_container {
  display: flex;
  justify-content: right;
}
#page_seller_single .container .header .seller_info .btn_container #btn_bookmark {
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  border: 2px solid #aaa;
  color: #aaa;
  font-weight: bold;
  cursor: pointer;
}
#page_seller_single .container .header .seller_info .btn_container #btn_bookmark .bookmark {
  display: flex;
}
#page_seller_single .container .header .seller_info .btn_container #btn_bookmark .bookmark i {
  margin-right: 5px;
  font-size: 150%;
}
#page_seller_single .container .header .seller_info .btn_container #btn_bookmark:hover {
  border: 2px solid #ff007c;
  background-color: #ff007c33;
}
#page_seller_single .container .header .seller_info .btn_container #btn_bookmark:active {
  background-color: #ff007c33;
}
#page_seller_single .container .header .seller_info .btn_container .marked {
  border: 2px solid #ff007c !important;
  color: #ff007c !important;
}
#page_seller_single .container .header .seller_info .seller_info_container {
  display: flex;
  font-size: 36px;
  color: #FF007C;
  margin-bottom: 10px;
  background-image: linear-gradient(to right, #faa, #faa 2px, transparent 2px, transparent 8px);
  /* 幅2の線を作る */
  background-size: 8px 2px;
  /* グラデーションの幅・高さを指定 */
  background-position: left bottom;
  /* 背景の開始位置を指定 */
  background-repeat: repeat-x;
  /* 横向きにのみ繰り返す */
}
#page_seller_single .container .header .seller_info .seller_info_container .item {
  margin: 0 5px;
  font-weight: 400;
}
#page_seller_single .container .header .seller_info .seller_info_container .item span {
  font-weight: 300;
  font-size: 70%;
  color: #f99;
}
#page_seller_single .container .header .seller_info .seller_info_container #genres {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
}
#page_seller_single .container .header .seller_info .seller_info_container #genres .genre {
  margin-right: 8px;
  margin-bottom: 8px;
  box-sizing: border-box;
  padding: 2px 8px;
  border: solid 1px #FF007C;
  border-radius: 30px;
  opacity: 0.5;
}
#page_seller_single .container .header .seller_info .seller_info_container #genres .selected {
  opacity: 1;
  border: solid 1px #FF007C;
  background-color: #FF007C;
  color: #fff;
  font-weight: bold;
}
#page_seller_single .container .header .seller_info .widearea {
  display: block;
  margin-top: 10px;
  padding-bottom: 10px;
}
#page_seller_single .container .header .seller_info .line7, #page_seller_single .container .header .seller_info .line8 {
  font-size: 24px;
}
@media screen and (max-width: 800px) {
  #page_seller_single .container .header .seller_info {
    padding: 10px;
  }
  #page_seller_single .container .header .seller_info .seller_info_container {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  #page_seller_single .container .header .seller_info .seller_info_container .item {
    margin: 0 5px;
  }
  #page_seller_single .container .header .seller_info .seller_info_container .item span {
    font-size: 70%;
    color: #f99;
  }
}
@media screen and (max-width: 640px) {
  #page_seller_single .container .header {
    display: block;
  }
  #page_seller_single .container .header .seller_container {
    width: 100%;
  }
  #page_seller_single .container .header .seller_info {
    width: 100%;
  }
}

.rounded_label {
  display: inline;
  margin: 0 auto;
  font-size: 10px;
  font-weight: bold;
  width: auto;
  padding: 1px 30px;
  margin: 10px;
  border-radius: 30px;
  border: 1px solid #f77;
  background-color: #fff5f5;
  box-shadow: 0 0 5px #0001;
}

#page_preopen .block {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  font-weight: normal;
}
#page_preopen .block h3 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 5px;
}
#page_preopen .block h2 {
  font-size: 200%;
  font-weight: bold;
}
#page_preopen .block span {
  font-size: 200%;
}
#page_preopen .block .line {
  margin-bottom: 10px;
}

#page_inquiry .block {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  font-weight: normal;
}
#page_inquiry .block h3 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 5px;
}
#page_inquiry .block .notice {
  margin-bottom: 5px;
  font-size: 80%;
}
#page_inquiry .block span {
  font-size: 200%;
}
#page_inquiry .block .line {
  margin-bottom: 10px;
}

#page_item_single .container .created_at {
  text-align: center;
}
#page_item_single .container .titleandcreatedat {
  margin: 20px;
}
#page_item_single .container .titleandcreatedat h1 {
  margin: 0;
  line-height: 100%;
}
#page_item_single .container .titleandcreatedat .price {
  text-align: center;
  font-weight: bold;
  font-size: 170%;
}
#page_item_single .container .titleandcreatedat .created_at {
  margin: 5px;
  font-weight: bold;
  color: #977;
}
#page_item_single .container .thumbnailContainer {
  background-image: url("/images/common/usericon_blank.png");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 2px solid #ddd;
  box-shadow: 0px 2px 2px #5557;
  overflow: hidden;
}
#page_item_single .container .thumbnailContainer .thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}
#page_item_single .container .header_bar {
  display: flex;
  justify-content: center;
  background-color: #fff;
  font-weight: bold;
  box-shadow: 0px 1px 2px #0001;
}
#page_item_single .container .header_bar .seller_container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  width: 300px;
}
#page_item_single .container .header_bar .seller_container .role {
  font-size: 70%;
  border-bottom: 1px solid #977;
  padding-bottom: 2px;
  line-height: 100%;
  color: #977;
  white-space: nowrap;
}
#page_item_single .container .header_bar .seller_container .info {
  width: calc(100% - 100px);
}
#page_item_single .container .slider .image_container {
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #F77;
  border-radius: 5px;
  box-sizing: border-box;
}
#page_item_single .container .slider .preview {
  display: none;
  justify-content: space-evenly;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 15px;
}
#page_item_single .container .slider .preview .image_container {
  width: calc(100% - 30px);
}
#page_item_single .container .slider .items {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}
#page_item_single .container .slider .items .image_container {
  width: calc(33.3333333333% - 20px);
  height: 300px;
  margin-bottom: 15px;
}
@media screen and (max-width: 640px) {
  #page_item_single .container .slider .preview {
    display: flex;
  }
  #page_item_single .container .slider .items .selected {
    border: 5px solid #f00;
  }
  #page_item_single .container .slider .items .image_container {
    height: 150px;
  }
}
#page_item_single .header {
  background-color: #fff;
  box-sizing: border-box;
  border-top: solid 16px #faa;
  border-bottom: solid 16px #faa;
  padding-bottom: 50px;
}
#page_item_single .header .thumbnailContainer {
  width: 80px;
  height: 80px;
}
#page_item_single .header .commentContainer {
  margin-top: 30px;
  position: relative;
}
#page_item_single .header .commentContainer .comment {
  border: 5px solid #f779;
  color: #F77;
  padding: 20px;
  padding-right: 40px;
  font-weight: bold;
  font-size: 14px;
  margin-left: 30px;
  margin-right: 30px;
  border-radius: 10px;
}
#page_item_single .header .commentContainer .comment .seller {
  color: #FF007C;
}
#page_item_single .header .commentContainer .thumbnailContainer {
  position: absolute;
  right: 0;
  bottom: -40px;
}
#page_item_single .header .optionContainer, #page_item_single .header .methodContainer, #page_item_single .header .comment {
  margin-top: 30px;
  margin-left: 30px;
  margin-right: 30px;
}
#page_item_single .header .optionContainer h3, #page_item_single .header .methodContainer h3, #page_item_single .header .comment h3 {
  font-weight: bold;
  margin-bottom: 10px;
}
#page_item_single .header .optionContainer .item, #page_item_single .header .optionContainer .totalPriceRow, #page_item_single .header .methodContainer .item, #page_item_single .header .methodContainer .totalPriceRow, #page_item_single .header .comment .item, #page_item_single .header .comment .totalPriceRow {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #0003;
}
#page_item_single .header .optionContainer .item .info, #page_item_single .header .optionContainer .totalPriceRow .info, #page_item_single .header .methodContainer .item .info, #page_item_single .header .methodContainer .totalPriceRow .info, #page_item_single .header .comment .item .info, #page_item_single .header .comment .totalPriceRow .info {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 0px);
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  margin-right: 10px;
}
#page_item_single .header .optionContainer .item .info .name, #page_item_single .header .optionContainer .totalPriceRow .info .name, #page_item_single .header .methodContainer .item .info .name, #page_item_single .header .methodContainer .totalPriceRow .info .name, #page_item_single .header .comment .item .info .name, #page_item_single .header .comment .totalPriceRow .info .name {
  padding-right: 30px;
  word-break: break-all;
}
#page_item_single .header .optionContainer .item .info .price, #page_item_single .header .optionContainer .totalPriceRow .info .price, #page_item_single .header .methodContainer .item .info .price, #page_item_single .header .methodContainer .totalPriceRow .info .price, #page_item_single .header .comment .item .info .price, #page_item_single .header .comment .totalPriceRow .info .price {
  text-align: right;
  width: 100px;
  font-weight: bold;
  white-space: nowrap;
}
#page_item_single .header .optionContainer .item .order, #page_item_single .header .optionContainer .totalPriceRow .order, #page_item_single .header .methodContainer .item .order, #page_item_single .header .methodContainer .totalPriceRow .order, #page_item_single .header .comment .item .order, #page_item_single .header .comment .totalPriceRow .order {
  padding-right: 10px;
}
#page_item_single .header .optionContainer .item:last-child, #page_item_single .header .methodContainer .item:last-child, #page_item_single .header .comment .item:last-child {
  border-bottom: 1px solid #0003;
}
#page_item_single .header .optionContainer .item:nth-child(odd), #page_item_single .header .methodContainer .item:nth-child(odd), #page_item_single .header .comment .item:nth-child(odd) {
  background-color: #00000010;
}
#page_item_single .header .optionContainer .item:nth-child(even), #page_item_single .header .methodContainer .item:nth-child(even), #page_item_single .header .comment .item:nth-child(even) {
  background-color: #00000005;
}
#page_item_single .header .methodContainer .item .info {
  margin-right: 0px;
}
#page_item_single .header .methodContainer .item .info .priceAndButton {
  display: flex;
  align-items: center;
}
#page_item_single .header .methodContainer .item .info .priceAndButton .price {
  margin-right: 20px;
}
#page_item_single .header .methodContainer .errormessage {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
#page_item_single .header .methodContainer .errormessage .error-message {
  background-color: #f00;
  padding: 3px 10px;
  display: inline-block;
  color: #fff;
}
#page_item_single .header .comment .text {
  color: #977;
  box-sizing: border-box;
  margin-top: 5px;
  font-size: 14px;
  border-radius: 5px;
  font-weight: bold;
}
#page_item_single .header .comment textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  background-color: #eee;
  color: #555;
  box-sizing: border-box;
  outline: none;
  border: none;
  width: 100%;
  height: 100px;
  padding: 10px 13px;
  border-radius: 5px;
  resize: none;
}
#page_item_single .header .buttons {
  text-align: center;
  margin-top: 50px;
}
#page_item_single .header .buttons a {
  display: inline-block;
  border: 3px solid #FF007C;
  font-size: 20px;
  padding: 5px 20px;
  color: #FF007C;
  border-radius: 10px;
  font-weight: bold;
}
#page_item_single .header .buttons a .buttonlabel {
  display: flex;
  align-items: center;
}
#page_item_single .header .buttons a .buttonlabel .thumbnail {
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-right: 10px;
  width: 50px !important;
  height: 50px !important;
  box-sizing: border-box;
  border: 2px solid #ddd;
  box-shadow: 0px 2px 2px #5557;
}
#page_item_single .header .buttons a:hover {
  background-color: #FF007C;
  color: #fff;
}
#page_item_single .header .buttons {
  text-align: center;
  margin-top: 50px;
}
#page_item_single .header .buttons div {
  display: inline-block;
  border: 3px solid #FF007C;
  font-size: 20px;
  padding: 5px 20px;
  color: #FF007C;
  border-radius: 10px;
  font-weight: bold;
}
#page_item_single .header .buttons div .buttonlabel {
  display: flex;
  align-items: center;
}
#page_item_single .header .buttons div .buttonlabel .thumbnail {
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-right: 10px;
  width: 50px !important;
  height: 50px !important;
  box-sizing: border-box;
  border: 2px solid #ddd;
  box-shadow: 0px 2px 2px #5557;
}
#page_item_single .header .buttons div:hover {
  background-color: #FF007C;
  color: #fff;
}
#page_item_single .is_negotiation {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #977;
  box-sizing: border-box;
  font-weight: bold;
  padding: 10px 20px;
}
#page_item_single .is_negotiation .text {
  color: #fff;
  font-size: 200%;
}
#page_item_single .is_negotiation.top {
  margin-bottom: 30px;
}
#page_item_single .is_negotiation.bottom {
  margin-top: 30px;
}

#page_manager_order_index .userItem .left {
  width: calc(100% - 200px);
}
#page_manager_order_index .userItem .left .profileImage .thumbnailContainer {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#page_manager_order_index .userItem .left .base .statusContainer .arrow {
  display: flex;
  align-items: center;
  font-size: 8px;
  margin-right: 5px;
}
#page_manager_order_index .userItem .left .base .statusContainer .is_sold {
  opacity: 0.5;
}
#page_manager_order_index .userItem .left .base .statusContainer .is_sent {
  opacity: 0.5;
}
#page_manager_order_index .userItem .left .base .statusContainer .is_sold.colored {
  opacity: 1;
  background-color: #00f;
  color: #fff;
}
#page_manager_order_index .userItem .left .base .statusContainer .is_sent.colored {
  opacity: 1;
  background-color: #00f;
  color: #fff;
}
#page_manager_order_index .userItem .left .base .priceAndMethod {
  display: flex;
  align-items: center;
  margin-top: 2px;
}
#page_manager_order_index .userItem .left .base .priceAndMethod .method {
  margin-left: 10px;
  line-height: 1;
  border: 1px solid #977;
  font-size: 80%;
  padding: 1px 4px;
}
#page_manager_order_index .userItem .right {
  width: 200px;
}
#page_manager_order_index .order_canceled {
  background-color: #0002;
}
#page_manager_order_index .order_canceled * {
  font-size: 10px;
}
#page_manager_order_index .order_canceled .cancel_info {
  display: inline-block;
  background-color: #000;
  color: #fff;
  line-height: 100%;
  padding: 2px 5px;
  font-size: 8px;
}
#page_manager_order_index .order_canceled .cancel_info .timestamp {
  margin-left: 10px;
}
#page_manager_order_index .order_canceled .base .name {
  margin: 0;
}
@media screen and (max-width: 640px) {
  #page_manager_order_index .userItem {
    display: block;
  }
  #page_manager_order_index .userItem .left {
    width: 100%;
  }
  #page_manager_order_index .userItem .right {
    width: 100%;
  }
}

#page_list_seller #genres {
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  font-weight: bold;
  padding: 0 18px 18px 18px;
}
#page_list_seller #genres .genre {
  line-height: 100%;
  background-color: #fff;
  margin-right: 7px;
  margin-bottom: 7px;
  box-sizing: border-box;
  padding: 5px 8px;
  color: #FF007C;
  border-radius: 30px;
}

#page_list_items .categories {
  padding: 0px 15px 15px 15px;
  text-align: center;
}
#page_list_items .categories .category_item {
  display: inline-block;
  background-color: #fff;
  color: #FF007C;
  border-radius: 1em;
  line-height: 100%;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 20px;
  margin-bottom: 8px;
  margin-right: 5px;
}
#page_list_items .categories .category_item:hover {
  background-color: #FF007C;
  color: #fff;
}
#page_list_items .categories .selected {
  color: #fff;
  background-color: #FF007C;
}
@media screen and (max-width: 800px) {
  #page_list_items .categories .category_item {
    font-size: 14px;
    margin-bottom: 5px;
    margin-right: 3px;
    padding: 3px 14px;
  }
}
@media screen and (max-width: 640px) {
  #page_list_items .categories .category_item {
    font-size: 12px;
    margin-bottom: 2px;
    margin-right: 2px;
    padding: 3px 8px;
  }
}

#page_list_tweet .main_container {
  background-color: #fff;
  display: flex;
  padding: 20px 10px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 0px 5px #0001;
}
#page_list_tweet .tweet-form {
  background-color: #f772;
  padding: 20px;
}
#page_list_tweet .tweet-form h1 {
  text-align: center;
}
#page_list_tweet .tweet-form h3 {
  font-size: 14px;
  font-weight: bold;
  color: #0005;
  text-align: center;
}
#page_list_tweet .tweet-form form {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#page_list_tweet .tweet-form .form-container {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 60%;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 1px 3px #0005;
  border-radius: 15px;
  border: 5px solid #fff;
  overflow: hidden;
  background-color: #0001;
}
#page_list_tweet .tweet-form .form-container .form-group-image {
  aspect-ratio: 16/9;
  background-color: #eee;
  color: #ccc;
  font-weight: bold;
}
#page_list_tweet .tweet-form .form-container .form-group_textarea_container {
  background-color: #fff;
}
#page_list_tweet .tweet-form .form-container .form-group_textarea_container textarea {
  box-sizing: border-box;
  width: 100%;
  border: none;
  resize: none;
  height: 100px;
  padding: 10px;
  outline: none;
}
#page_list_tweet .tweet-form .form-container .form-group_textarea_container textarea:focus {
  outline: none;
}
#page_list_tweet .tweet-form .form-container .drop-zone {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 15px;
  box-sizing: border-box;
}
#page_list_tweet .tweet-form .form-container .drop-zone.dragover {
  background-color: #e1e1e1;
  border-color: #999;
}
#page_list_tweet .tweet-form .form-group-submit {
  display: flex;
  justify-content: center;
}
#page_list_tweet .tweets {
  max-width: 1200px;
  margin: 0 auto;
}
#page_list_tweet .tweets .pn_tweet_user_container.usertype_seller {
  display: flex;
}
#page_list_tweet .tweets .pn_tweet_user_container.usertype_buyer {
  display: flex;
  justify-content: flex-end;
  position: relative;
}
#page_list_tweet .tweets .pn_tweet_user_container.usertype_buyer .pn_user_container {
  right: -40px;
}
#page_list_tweet .tweets .pn_tweet_user_container.usertype_buyer .pn_user_container .user {
  flex-direction: row-reverse;
}
#page_list_tweet .tweets .pn_tweet_user_container.usertype_buyer .pn_user_container .user .info {
  margin-right: 10px;
  color: #1793d1;
}
#page_list_tweet .tweets .pn_tweet_user_container.usertype_buyer .pn_user_container .user .info .nickname {
  width: 100%;
  text-align: right;
}
#page_list_tweet .tweets .pn_tweet_user_container.usertype_buyer .tweet .updated_at {
  text-align: left;
  padding-left: 5px;
}
#page_list_tweet .tweets .pn_tweet_user_container.singlePage {
  display: flex;
  justify-content: center;
}
#page_list_tweet .drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  border: 2px dashed #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
  min-height: 150px;
}
#page_list_tweet .drop-zone:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}
#page_list_tweet .drop-zone.dragover {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: #666;
}
#page_list_tweet .preview-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* margin-top: 10px; */
  background-color: #f8f9fa;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}
#page_list_tweet .preview-wrapper.dragover {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#page_list_tweet .preview-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#page_list_tweet #preview-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#page_list_tweet #remove-image {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
#page_list_tweet #remove-image:hover {
  background-color: #c82333;
}
#page_list_tweet .textarea-wrapper {
  position: relative;
}
#page_list_tweet .character-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}
#page_list_tweet .character-count.warning {
  color: #dc3545;
}
#page_list_tweet .form-group_textarea_container textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  min-height: 100px;
  font-size: 14px;
  line-height: 1.5;
}
#page_list_tweet .form-group_textarea_container textarea:focus {
  outline: none;
}

@media screen and (max-width: 700px) {
  #page_list_tweet .tweet-form {
    padding: 20px 10px;
    margin-bottom: 50px;
  }
  #page_list_tweet .tweet-form .form-container {
    width: 100%;
  }
  #page_list_tweet .tweets .pn_tweet_user_container.usertype_buyer .pn_user_container {
    right: 10px;
  }
}
#page_tweet_single .pn_tweet_user_container {
  margin-bottom: 0px;
}
#page_tweet_single .user_info_large {
  width: -moz-max-content;
  width: max-content;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
  align-items: center;
  background-color: #fff;
  width: 100%;
}
#page_tweet_single .user_info_large .thumbnail {
  width: 100px;
  display: flex;
  align-items: center;
  margin-right: 15px;
}
#page_tweet_single .user_info_large .thumbnail .pn_user_thumbnail {
  border: 7px solid #fff;
  box-shadow: 0px 1px 3px #0005;
}
#page_tweet_single .user_info_large .info {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
}
#page_tweet_single .user_info_large .info .job {
  font-size: 50%;
}
#page_tweet_single .user_info_large .info a {
  display: block;
  margin-top: 5px;
  padding: 5px;
}
#page_tweet_single .tweet_container {
  background-color: #f001;
  overflow: scroll;
}
#page_tweet_single .tweet_container .tweets {
  width: -moz-max-content;
  width: max-content;
  display: flex;
}
#page_tweet_single .pn_tweet_user_container.singlePage {
  display: flex;
  justify-content: center;
}
#page_tweet_single .pn_tweet_user_container.singlePage .pn_user_container {
  left: calc(20% - 40px);
  display: none;
}

#page_mypage_tweet .tweet-list {
  padding: 15px 0px;
}
#page_mypage_tweet .tweet-list .tweet-item.deleted .tweet-content {
  background-color: #555;
}
#page_mypage_tweet .tweet-list .tweet-item.deleted .tweet-content * {
  color: #ccc;
}
#page_mypage_tweet .tweet-list .tweet-item {
  border-top: 1px solid #eee;
  background-color: #f5f5f5;
  font-size: 12px;
}
#page_mypage_tweet .tweet-list .tweet-item:nth-child(even) {
  background-color: #fff;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content {
  display: flex;
  color: #777;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-image {
  width: 100px;
  aspect-ratio: 1;
  margin-right: 10px;
  background-image: url("/images/common/tweet_empty.png");
  background-size: cover;
  background-position: center;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta {
  position: relative;
  padding: 15px;
  width: calc(100% - 110px);
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta .tweet-header {
  display: flex;
  line-height: 1;
  align-items: center;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta .tweet-header .tweet-date {
  font-size: 14px;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta .tweet-header .status-badge {
  font-size: 14px;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta .tweet-header .status-badge.status-active {
  color: #00f;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta .tweet-header form.d-inline button {
  font-size: 10px;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta .tweet-text {
  word-break: break-all;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta .tweet-actions {
  position: absolute;
  top: 10px;
  right: 10px;
}
#page_mypage_tweet .tweet-list .tweet-item .tweet-content .tweet-meta .tweet-actions button {
  font-size: 10px;
}

.pn_tweet_user_container_mini.usertype_buyer .pn_user_container .user .info {
  color: #1793d1;
}

.pn_tweet_user_container_mini {
  margin: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  position: relative;
  width: 400px;
}
.pn_tweet_user_container_mini .pn_tweet_container {
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 1px 3px #0005;
  border-radius: 15px;
  border: 5px solid #fff;
  overflow: hidden;
}
.pn_tweet_user_container_mini .pn_tweet_container .tweet .images .image {
  aspect-ratio: 16/9;
  background-color: #3f82d3;
  background-image: url("/images/common/tweet_empty.png");
  background-size: cover;
  background-position: center;
}
.pn_tweet_user_container_mini .pn_tweet_container .tweet .images .subimages {
  display: flex;
  margin-top: 5px;
}
.pn_tweet_user_container_mini .pn_tweet_container .tweet .images .subimages .subimage {
  margin-right: 5px;
  width: calc(10% - 5px);
  aspect-ratio: 1;
  background-color: #ff0;
}
.pn_tweet_user_container_mini .pn_tweet_container .tweet .text {
  height: 120px;
  margin-top: 5px;
  padding: 15px;
  padding-bottom: 25px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #555;
  overflow-y: scroll;
  word-break: break-all;
}
.pn_tweet_user_container_mini .pn_tweet_container .tweet .updated_at {
  text-align: right;
  font-size: 12px;
  padding-right: 5px;
  color: #999;
  font-weight: bold;
}
.pn_tweet_user_container_mini .pn_tweet_container .buttons {
  display: flex;
  justify-content: flex-end;
}
.pn_tweet_user_container_mini .pn_tweet_container .buttons .button {
  padding: 5px 10px;
  box-sizing: border-box;
}
.pn_tweet_user_container_mini .pn_user_container {
  top: 155px;
  left: 0px;
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin: 10px 10px 0 10px;
}
.pn_tweet_user_container_mini .pn_user_container .job, .pn_tweet_user_container_mini .pn_user_container .nickname {
  color: #FF007C;
}
.pn_tweet_user_container_mini .pn_user_container:hover {
  background-color: #fff7;
}
.pn_tweet_user_container_mini .pn_user_container .user {
  display: flex;
  width: 100%;
  align-items: center;
}
.pn_tweet_user_container_mini .pn_user_container .user .imageContainer {
  background-color: #eee;
  background-image: url("/images/common/defaultSellerIcon.png");
  background-size: cover;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid #fff;
  width: 50px;
  height: 50px;
  box-shadow: 0px 2px 3px #0005;
}
.pn_tweet_user_container_mini .pn_user_container .user .imageContainer .image {
  width: 44px;
  height: 44px;
}
.pn_tweet_user_container_mini .pn_user_container .user .info {
  margin-left: 10px;
  color: #FF007C;
  font-size: 12px;
}
.pn_tweet_user_container_mini .pn_user_container .user .info .job {
  font-weight: bold;
}
.pn_tweet_user_container_mini .pn_user_container .user .info .nickname {
  line-height: 100%;
  font-weight: bold;
  box-sizing: border-box;
  font-size: 150%;
}
.pn_tweet_user_container_mini .pn_user_container_buyer .job, .pn_tweet_user_container_mini .pn_user_container_buyer .nickname {
  color: #1793d1;
}

@media screen and (max-width: 700px) {
  .pn_tweet_user_container_mini {
    width: 300px;
  }
}
@media screen and (max-width: 700px) and (max-width: 500px) {
  .pn_tweet_user_container_mini .pn_tweet_container .tweet .text {
    padding: 5px;
    line-height: 1.3;
    font-size: 12px;
  }
}
@media screen and (max-width: 700px) {
  .pn_tweet_user_container_mini .pn_user_container {
    top: 110px;
  }
  .pn_tweet_user_container_mini .pn_user_container .user .imageContainer {
    width: 40px;
    height: 40px;
  }
  .pn_tweet_user_container_mini .pn_user_container .user .info .job {
    font-size: 11px;
  }
  .pn_tweet_user_container_mini .pn_user_container .user .info .nickname {
    font-size: 14px;
  }
}
.pn_tweet_user_container {
  margin: 60px;
  margin-bottom: 70px;
  box-sizing: border-box;
  position: relative;
}
.pn_tweet_user_container .pn_tweet_container {
  width: 60%;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 1px 3px #0005;
  border-radius: 15px;
  border: 5px solid #fff;
  overflow: hidden;
}
.pn_tweet_user_container .pn_tweet_container .tweet {
  display: block;
}
.pn_tweet_user_container .pn_tweet_container .tweet .images .image {
  aspect-ratio: 16/9;
  background-color: #3f82d3;
  background-size: cover;
  background-position: center;
}
.pn_tweet_user_container .pn_tweet_container .tweet .images .subimages {
  display: flex;
  margin-top: 5px;
}
.pn_tweet_user_container .pn_tweet_container .tweet .images .subimages .subimage {
  margin-right: 5px;
  width: calc(10% - 5px);
  aspect-ratio: 1;
  background-color: #ff0;
}
.pn_tweet_user_container .pn_tweet_container .tweet .text {
  margin-top: 5px;
  padding: 15px;
  padding-bottom: 25px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: #555;
}
.pn_tweet_user_container .pn_tweet_container .tweet .updated_at {
  text-align: right;
  font-size: 12px;
  padding-right: 5px;
  color: #999;
  font-weight: bold;
}
.pn_tweet_user_container .pn_tweet_container .buttons {
  display: flex;
  justify-content: flex-end;
}
.pn_tweet_user_container .pn_tweet_container .buttons .button {
  padding: 5px 10px;
  box-sizing: border-box;
}
.pn_tweet_user_container .pn_user_container {
  position: absolute;
  bottom: -40px;
  left: -40px;
}
.pn_tweet_user_container .pn_user_container .user {
  display: flex;
  width: 100%;
  align-items: center;
}
.pn_tweet_user_container .pn_user_container .user .imageContainer {
  background-color: #eee;
  background-image: url("/images/common/defaultSellerIcon.png");
  background-size: cover;
  padding: 0;
  margin: 0;
  margin-top: -40px;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 5px solid #fff;
  width: 80px;
  height: 80px;
  box-shadow: 0px 2px 3px #0005;
}
.pn_tweet_user_container .pn_user_container .user .imageContainer .image {
  width: 44px;
  height: 44px;
}
.pn_tweet_user_container .pn_user_container .user .info {
  margin-left: 10px;
  color: #FF007C;
  font-size: 12px;
}
.pn_tweet_user_container .pn_user_container .user .info .job {
  font-weight: bold;
}
.pn_tweet_user_container .pn_user_container .user .info .nickname {
  line-height: 100%;
  font-weight: bold;
  box-sizing: border-box;
  font-size: 150%;
}

@media screen and (max-width: 700px) {
  .pn_tweet_user_container {
    margin: 10px;
    margin-bottom: 60px;
  }
  .pn_tweet_user_container .pn_tweet_container {
    width: 100%;
    border-radius: 10px;
    border: 2px solid #fff;
  }
  .pn_tweet_user_container .pn_tweet_container .tweet .text {
    font-size: 14px;
  }
  .pn_tweet_user_container .pn_user_container {
    left: 10px;
  }
  .pn_tweet_user_container .pn_user_container .user .imageContainer {
    margin-top: -20px;
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
  }
  .pn_tweet_user_container .pn_user_container .user .info .nickname {
    font-size: 14px;
  }
}
@media screen and (max-width: 500px) {
  .pn_tweet_user_container .pn_tweet_container .tweet .text {
    padding: 5px;
    line-height: 1.3;
    font-size: 12px;
  }
}
#page_manager_order_index nav {
  margin-bottom: 30px;
}
#page_manager_order_index nav .relative {
  display: flex;
  align-items: center;
}
#page_manager_order_index nav > div:nth-child(1) {
  display: none;
}
#page_manager_order_index nav > div:nth-child(2) > div:nth-child(1) {
  text-align: center;
}
#page_manager_order_index nav > div:nth-child(2) > div:nth-child(2) {
  display: flex;
  justify-content: center;
}
#page_manager_order_index nav > div:nth-child(2) > div:nth-child(2) > span * {
  margin: 0 2px;
}
#page_manager_order_index nav > div:nth-child(2) > div:nth-child(2) > span > span {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
}
#page_manager_order_index nav > div:nth-child(2) > div:nth-child(2) > span a {
  border: solid 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  width: 40px;
  height: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#page_manager_order_index nav svg {
  width: 40px;
}
@media (max-width: 768px) {
  #page_manager_order_index nav > div:nth-child(2) > div:nth-child(2) > span > span {
    width: 25px;
  }
  #page_manager_order_index nav > div:nth-child(2) > div:nth-child(2) > span a {
    width: 25px;
  }
  #page_manager_order_index nav svg {
    width: 25px;
  }
}

#page_contact_index .grid_wrapper > .container .main, #page_contact_confirm .grid_wrapper > .container .main {
  color: #977;
}
#page_contact_index .grid_wrapper > .container .main .note, #page_contact_confirm .grid_wrapper > .container .main .note {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #FF007C;
}
#page_contact_index .grid_wrapper > .container .main .note img, #page_contact_confirm .grid_wrapper > .container .main .note img {
  height: 50px;
  margin-right: 10px;
  transform: scale(-1, 1);
}
#page_contact_index .grid_wrapper > .container .main .note div, #page_contact_confirm .grid_wrapper > .container .main .note div {
  color: #977;
  font-size: 24px;
}
#page_contact_index .grid_wrapper > .container .main h3, #page_contact_confirm .grid_wrapper > .container .main h3 {
  display: block;
}
#page_contact_index .grid_wrapper > .container .main .line, #page_contact_confirm .grid_wrapper > .container .main .line {
  display: flex;
  margin-bottom: 10px !important;
}
#page_contact_index .grid_wrapper > .container .main .line .field, #page_contact_confirm .grid_wrapper > .container .main .line .field {
  width: calc(50% - 10px);
  margin-right: 10px;
}
#page_contact_index .grid_wrapper > .container .main .line .field label, #page_contact_confirm .grid_wrapper > .container .main .line .field label {
  font-size: 14px;
  display: block;
}
#page_contact_index .grid_wrapper > .container .main .line .field input, #page_contact_confirm .grid_wrapper > .container .main .line .field input {
  background-color: #eee;
  color: #555;
  box-sizing: border-box;
  font-size: 16px;
  outline: none;
  border: none;
  width: 100%;
  padding: 10px 13px;
  border-radius: 5px;
}
#page_contact_index .grid_wrapper > .container .main .line .field .data, #page_contact_confirm .grid_wrapper > .container .main .line .field .data {
  background-color: #9771;
  padding: 5px 10px;
  font-weight: bold;
  color: #555;
  font-size: 150%;
}
#page_contact_index .grid_wrapper > .container .main .line .field .error-message, #page_contact_confirm .grid_wrapper > .container .main .line .field .error-message {
  font-weight: bold;
  color: #FF007C;
}
#page_contact_index .grid_wrapper > .container .main .line .field .file, #page_contact_confirm .grid_wrapper > .container .main .line .field .file {
  box-sizing: border-box;
  border: solid 1px #555;
  text-align: center;
}
#page_contact_index .grid_wrapper > .container .main .line .field_1, #page_contact_confirm .grid_wrapper > .container .main .line .field_1 {
  width: 100%;
  margin-right: 0;
}
#page_contact_index .grid_wrapper > .container .main .line .field_2, #page_contact_confirm .grid_wrapper > .container .main .line .field_2 {
  width: 50%;
}
#page_contact_index .grid_wrapper > .container .main .line .field_3, #page_contact_confirm .grid_wrapper > .container .main .line .field_3 {
  width: 33.3333333333%;
}
#page_contact_index .grid_wrapper > .container .main .line .field_4, #page_contact_confirm .grid_wrapper > .container .main .line .field_4 {
  width: 25%;
}
#page_contact_index .grid_wrapper > .container .main .line .field_5, #page_contact_confirm .grid_wrapper > .container .main .line .field_5 {
  width: 20%;
}
#page_contact_index .grid_wrapper > .container .main .line .field_6, #page_contact_confirm .grid_wrapper > .container .main .line .field_6 {
  width: 16.6666666667%;
}
#page_contact_index .grid_wrapper > .container .main .line .field_7, #page_contact_confirm .grid_wrapper > .container .main .line .field_7 {
  width: 14.2857142857%;
}
#page_contact_index .grid_wrapper > .container .main .line .field_8, #page_contact_confirm .grid_wrapper > .container .main .line .field_8 {
  width: 12.5%;
}
#page_contact_index .grid_wrapper > .container .main .line .field_last, #page_contact_confirm .grid_wrapper > .container .main .line .field_last {
  margin-right: 0;
}
#page_contact_index .grid_wrapper > .container .main .buttons, #page_contact_confirm .grid_wrapper > .container .main .buttons {
  display: flex;
  justify-content: center;
}
#page_contact_index .grid_wrapper > .container .main .buttons button, #page_contact_confirm .grid_wrapper > .container .main .buttons button {
  margin: 0 15px;
}
@media screen and (max-width: 500px) {
  #page_contact_index .grid_wrapper > .container .main .line, #page_contact_confirm .grid_wrapper > .container .main .line {
    display: block;
  }
  #page_contact_index .grid_wrapper > .container .main .line .field, #page_contact_confirm .grid_wrapper > .container .main .line .field {
    width: 100%;
  }
}
#page_contact_index .grid_wrapper > .container .main .submit, #page_contact_confirm .grid_wrapper > .container .main .submit {
  text-align: center;
  margin: 30px 0 20px 0;
}
#page_contact_index .grid_wrapper > .container .main .submit input, #page_contact_index .grid_wrapper > .container .main .submit button, #page_contact_confirm .grid_wrapper > .container .main .submit input, #page_contact_confirm .grid_wrapper > .container .main .submit button {
  width: 150px;
  height: 50px;
  padding: 10px 0px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  background-color: #FF007C;
  color: #fff;
}
#page_contact_index .grid_wrapper > .container .main .submit input:hover, #page_contact_index .grid_wrapper > .container .main .submit button:hover, #page_contact_confirm .grid_wrapper > .container .main .submit input:hover, #page_contact_confirm .grid_wrapper > .container .main .submit button:hover {
  background-color: #f55;
}
#page_contact_index .grid_wrapper > .container .main .submit input:active, #page_contact_index .grid_wrapper > .container .main .submit button:active, #page_contact_confirm .grid_wrapper > .container .main .submit input:active, #page_contact_confirm .grid_wrapper > .container .main .submit button:active {
  background-color: #d70068;
}
#page_contact_index .grid_wrapper > .container .main .photoSample, #page_contact_confirm .grid_wrapper > .container .main .photoSample {
  width: 50%;
}
@media screen and (max-width: 800px) {
  #page_contact_index .grid_wrapper > .container .main .photoSample, #page_contact_confirm .grid_wrapper > .container .main .photoSample {
    width: 70%;
  }
}
@media screen and (max-width: 500px) {
  #page_contact_index .grid_wrapper > .container .main .photoSample, #page_contact_confirm .grid_wrapper > .container .main .photoSample {
    width: 100%;
    padding-right: 10px;
  }
}
#page_contact_index .grid_wrapper > .container .main .content, #page_contact_confirm .grid_wrapper > .container .main .content {
  font-size: 16px;
}
#page_contact_index .grid_wrapper > .container .main .content span, #page_contact_confirm .grid_wrapper > .container .main .content span {
  color: #FF007C;
  line-height: 100%;
  margin: 0 5px;
}
#page_contact_index .grid_wrapper > .container .main .content .container, #page_contact_confirm .grid_wrapper > .container .main .content .container {
  padding: 0;
}
#page_contact_index .grid_wrapper > .container .main .content .block, #page_contact_confirm .grid_wrapper > .container .main .content .block {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  font-weight: normal;
}
#page_contact_index .grid_wrapper > .container .main .content .block h3, #page_contact_confirm .grid_wrapper > .container .main .content .block h3 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 5px;
}
#page_contact_index .grid_wrapper > .container .main .content .block .notice, #page_contact_confirm .grid_wrapper > .container .main .content .block .notice {
  margin-bottom: 5px;
  font-size: 80%;
}
#page_contact_index .grid_wrapper > .container .main .content .block span, #page_contact_confirm .grid_wrapper > .container .main .content .block span {
  font-size: 200%;
}
#page_contact_index .grid_wrapper > .container .main .content .block .line, #page_contact_confirm .grid_wrapper > .container .main .content .block .line {
  margin-bottom: 10px;
}
#page_contact_index .grid_wrapper > .container .main .content #menu, #page_contact_confirm .grid_wrapper > .container .main .content #menu {
  margin: 0px 0px 10px 10px;
  padding-bottom: 5px;
  font-weight: bold;
}
#page_contact_index .grid_wrapper > .container .main .content #menu .container, #page_contact_confirm .grid_wrapper > .container .main .content #menu .container {
  display: flex;
  flex-wrap: wrap;
}
#page_contact_index .grid_wrapper > .container .main .content #user, #page_contact_confirm .grid_wrapper > .container .main .content #user {
  margin: 10px;
  margin-top: 0px;
  padding-bottom: 5px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
#page_contact_index .grid_wrapper > .container .main .content #user .container, #page_contact_confirm .grid_wrapper > .container .main .content #user .container {
  display: flex;
  align-items: center;
}
#page_contact_index .grid_wrapper > .container .main .content #user .container .thumbnailContainer, #page_contact_confirm .grid_wrapper > .container .main .content #user .container .thumbnailContainer {
  background-image: url("/images/common/usericon_blank.png");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-right: 10px;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border: 2px solid #ddd;
  box-shadow: 0px 2px 2px #5557;
  overflow: hidden;
}
#page_contact_index .grid_wrapper > .container .main .content #user .container .thumbnailContainer .thumbnail, #page_contact_confirm .grid_wrapper > .container .main .content #user .container .thumbnailContainer .thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}
#page_contact_index .grid_wrapper > .container .main .content #user .container .info .userId, #page_contact_confirm .grid_wrapper > .container .main .content #user .container .info .userId {
  word-wrap: break-word;
}
#page_contact_index .grid_wrapper > .container .main .agreement, #page_contact_confirm .grid_wrapper > .container .main .agreement {
  background-color: #eee;
  color: #555;
  box-sizing: border-box;
  font-size: 16px;
  outline: none;
  border: none;
  width: 100%;
  padding: 10px 13px;
  border-radius: 5px;
}
#page_contact_index .grid_wrapper > .container .main .agreement a, #page_contact_confirm .grid_wrapper > .container .main .agreement a {
  display: inline-block;
  padding: 5px 10px;
  border: solid 2px #977;
  color: #977;
  border-radius: 5px;
  margin-bottom: 10px;
}
#page_contact_index .grid_wrapper > .container .main .agreement a:hover, #page_contact_confirm .grid_wrapper > .container .main .agreement a:hover {
  background-color: #977;
  border: solid 2px #977;
  color: #fff;
}
#page_contact_index .grid_wrapper > .container .main .agreement input, #page_contact_confirm .grid_wrapper > .container .main .agreement input {
  margin-right: 10px;
}
#page_contact_index .grid_wrapper > .container .main .agreement .error-message, #page_contact_confirm .grid_wrapper > .container .main .agreement .error-message {
  font-weight: bold;
  color: #FF007C;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments, #page_contact_confirm .grid_wrapper > .container .main #iddocuments {
  border-top: 1px solid #977;
  border-bottom: 1px solid #977;
  padding: 20px 0;
  margin: 25px 0;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments ul, #page_contact_confirm .grid_wrapper > .container .main #iddocuments ul {
  padding-left: 1em;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments b, #page_contact_confirm .grid_wrapper > .container .main #iddocuments b {
  /* display: inline-block;
  background-color: #f002; */
  /* margin: 0 5px;
  padding: 0 10px; */
  /* color: #f00; */
  /* font-size: 12px; */
  /* border-radius: 10px; */
  /* border: solid 1px #f005; */
  /* border-bottom: solid 1px #f005; */
  font-weight: bold;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments .line label, #page_contact_confirm .grid_wrapper > .container .main #iddocuments .line label {
  font-size: 150%;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments .line .field:last-child, #page_contact_confirm .grid_wrapper > .container .main #iddocuments .line .field:last-child {
  margin-right: 0;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments .uploadimageContainer, #page_contact_confirm .grid_wrapper > .container .main #iddocuments .uploadimageContainer {
  background-color: #eee;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 10px;
  position: relative;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments .uploadimageContainer .thumbnail, #page_contact_confirm .grid_wrapper > .container .main #iddocuments .uploadimageContainer .thumbnail {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments .uploadimageContainer input, #page_contact_confirm .grid_wrapper > .container .main #iddocuments .uploadimageContainer input {
  aspect-ratio: 5/4;
  opacity: 0;
  cursor: pointer;
}
#page_contact_index .grid_wrapper > .container .main #iddocuments #filename_id1, #page_contact_confirm .grid_wrapper > .container .main #iddocuments #filename_id1 {
  background-image: url("/images/common/bg_document_id1.png");
}
#page_contact_index .grid_wrapper > .container .main #iddocuments #filename_id2, #page_contact_confirm .grid_wrapper > .container .main #iddocuments #filename_id2 {
  background-image: url("/images/common/bg_document_id2.png");
}
#page_contact_index .grid_wrapper > .container .main #iddocuments #filename_id3, #page_contact_confirm .grid_wrapper > .container .main #iddocuments #filename_id3 {
  background-image: url("/images/common/bg_document_id3.png");
}

#page_contact_thanks .container .main {
  color: #977;
}
#page_contact_thanks .container .main .content {
  font-size: 16px;
}
#page_contact_thanks .container .main .content .block {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  font-weight: normal;
}
#page_contact_thanks .container .main .content .block h3 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 5px;
}
#page_contact_thanks .container .main .content .block .line {
  margin-bottom: 10px;
}
#page_contact_thanks .container .main .content .block .line .notice {
  font-size: 150%;
  color: #FF007C;
}
#page_contact_thanks .container .main .content .block .line a {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  background-color: #FF007C;
  color: #fff;
}
#page_contact_thanks .container .main .content .block .line a:hover {
  background-color: #f55;
}
#page_contact_thanks .container .main .content .block .line a:active {
  background-color: #d70068;
}

#mypagemenu {
  display: flex;
  justify-content: flex-start;
}
#mypagemenu .item {
  position: relative;
  width: calc(16.6666666667% - 5px);
  margin-bottom: 3px;
  margin-right: 5px;
}
#mypagemenu .item a {
  display: flex;
  height: 46px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #fff;
  line-height: 100%;
  color: #FF007C;
  border: 2px solid #FF007C;
  border-radius: 5px;
  width: 100%;
  text-align: center;
}
#mypagemenu .item a:hover {
  color: #fff;
  background-color: #FF007C;
}
#mypagemenu .item span {
  position: absolute;
  display: inline-block;
  background-color: #FF007C;
  color: #fff;
  top: -4px;
  right: -8px;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  padding: 1px 7px;
}
#mypagemenu .disabled a {
  color: #aaa;
  border: 2px solid #aaa;
}
@media screen and (max-width: 600px) {
  #mypagemenu .item {
    width: calc(33.3333333333% - 6px);
    line-height: 100%;
  }
  #mypagemenu .item a {
    font-size: 12px;
    height: 36px;
    line-height: 100%;
  }
}

.mypage .main {
  color: #977;
}
.mypage .main h3 {
  display: block;
}
.mypage .main .line {
  display: flex;
  margin-bottom: 10px !important;
}
.mypage .main .line .field {
  width: calc(50% - 10px);
  margin-right: 10px;
}
.mypage .main .line .field label {
  font-size: 14px;
  display: block;
}
.mypage .main .line .field input {
  background-color: #eee;
  color: #555;
  box-sizing: border-box;
  font-size: 16px;
  outline: none;
  border: none;
  width: 100%;
  padding: 10px 13px;
  border-radius: 5px;
}
.mypage .main .line .field:last-child {
  margin-right: 0px;
}
.mypage .main .line .field_1 {
  width: 100%;
  margin-right: 0;
}
.mypage .main .line .field_2 {
  width: 50%;
}
.mypage .main .line .field_3 {
  width: 33.3333333333%;
}
.mypage .main .line .field_4 {
  width: 25%;
}
.mypage .main .line .field_5 {
  width: 20%;
}
.mypage .main .line .field_6 {
  width: 16.6666666667%;
}
.mypage .main .line .field_7 {
  width: 14.2857142857%;
}
.mypage .main .line .field_8 {
  width: 12.5%;
}
.mypage .main .line .field_last {
  margin-right: 0;
}
.mypage .main .line .field_2_3 {
  width: 66.6666666667%;
}
.mypage .main .line .field_3_4 {
  width: 75%;
}
.mypage .main .line .field_2_5 {
  width: 40%;
}
.mypage .main .line .field_3_5 {
  width: 60%;
}
.mypage .main .line .field_4_5 {
  width: 80%;
}
.mypage .main .line .field_5_6 {
  width: 83.3333333333%;
}
.mypage .main .line .field_3_8 {
  width: 37.5%;
}
.mypage .main .line .field_5_8 {
  width: 62.5%;
}
.mypage .main .line .field_7_8 {
  width: 87.5%;
}
@media screen and (max-width: 500px) {
  .mypage .main .line {
    display: block;
  }
  .mypage .main .line .field {
    width: 100%;
  }
}
.mypage .main .textarea {
  font-weight: bold;
}
.mypage .main textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  background-color: #eee;
  color: #555;
  box-sizing: border-box;
  outline: none;
  border: none;
  width: 100%;
  height: 200px;
  padding: 10px 13px;
  border-radius: 5px;
  resize: none;
}
.mypage .main .submit {
  text-align: center;
  margin: 30px 0 20px 0;
}
.mypage .main .submit input {
  width: 150px;
  height: 50px;
  padding: 10px 0px;
  border: none;
  font-size: 16px;
  border-radius: 5px;
  background-color: #FF007C;
  color: #fff;
}
.mypage .main .submit input:hover {
  background-color: #f55;
}
.mypage .main .submit input:active {
  background-color: #d70068;
}
.mypage .main .content {
  font-size: 16px;
}
.mypage .main .content span {
  color: #FF007C;
  line-height: 100%;
  margin: 0 5px;
}
.mypage .main .content .container {
  padding: 0;
}
.mypage .main .content .block {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  font-weight: normal;
}
.mypage .main .content .block h3 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 5px;
}
.mypage .main .content .block .notice {
  margin-bottom: 5px;
  font-size: 80%;
}
.mypage .main .content .block span {
  font-size: 200%;
}
.mypage .main .content .block .line {
  margin-bottom: 10px;
}
.mypage .main .content #menu {
  margin: 0px 10px 10px 10px;
  padding-bottom: 5px;
  font-weight: bold;
}
.mypage .main .content #menu .container {
  display: flex;
  flex-wrap: wrap;
}
.mypage .main .content #userContainer #prepare ul {
  background-color: #fff;
  margin: 0;
  padding: 0;
}
.mypage .main .content #userContainer #prepare ul li {
  display: inline-block;
  margin: 0;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  background-color: #eee;
  color: #f77;
  list-style-type: none;
}
.mypage .main .content #userContainer #user {
  margin: 10px;
  margin-top: 0px;
  padding-bottom: 5px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
.mypage .main .content #userContainer #user .container {
  display: flex;
  align-items: center;
}
.mypage .main .content #userContainer #user .container .thumbnailContainer {
  background-image: url("/images/common/usericon_blank.png");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-right: 10px;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border: 2px solid #ddd;
  box-shadow: 0px 2px 2px #5557;
  overflow: hidden;
}
.mypage .main .content #userContainer #user .container .thumbnailContainer .thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}
.mypage .main .content #userContainer #user .container .info .userId {
  word-wrap: break-word;
}
.mypage .main .content #userContainer #user .container .info .role {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 20px;
  font-size: 14px;
  padding: 3px 15px;
  line-height: 100%;
  margin-bottom: 5px;
  color: #fff;
  background-color: #FF007C;
}
.mypage .main .content #userContainer #user .container .info .seller {
  background-color: #FF007C;
}
.mypage .main .content #userContainer #user .container .info .buyer {
  background-color: #2b0fff;
}
#page_mypage_account .imageContainer {
  background-image: url("/images/common/usericon_blank.png");
  border-radius: 50%;
  margin-right: 20px;
  background-size: contain;
  background-position: center;
  box-sizing: border-box;
  box-shadow: 0px 2px 2px #5557;
  width: 150px;
  height: 150px;
  overflow: hidden;
}
#page_mypage_account .imageContainer .imageframe {
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: solid 3px #ddd;
  border-width: 3px;
  border-radius: 50%;
  position: relative;
}
#page_mypage_account .imageContainer .imageframe input {
  position: absolute;
  background-color: #0005;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 50%;
  cursor: pointer;
}
#page_mypage_account #imageId1, #page_mypage_account #imageId2 {
  background-image: url("/images/common/bg_document_id.png");
  margin-right: 20px;
  background-size: contain;
  background-position: center;
  box-sizing: border-box;
  box-shadow: 0px 2px 2px #5557;
  width: 100%;
  aspect-ratio: 5/4;
  overflow: hidden;
}
#page_mypage_account #imageId1 .imageframe, #page_mypage_account #imageId2 .imageframe {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: solid 3px #ddd;
  border-width: 3px;
  position: relative;
}
#page_mypage_account #imageId1 .imageframe input, #page_mypage_account #imageId2 .imageframe input {
  position: absolute;
  background-color: #0005;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#page_mypage_login .block,
#page_mypage_register .block,
#page_mypage_resetemail .block,
#page_mypage_reset .block,
#page_mypage_passwordupdate .block {
  width: 50%;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
@media screen and (max-width: 640px) {
  #page_mypage_login .block,
#page_mypage_register .block,
#page_mypage_resetemail .block,
#page_mypage_reset .block,
#page_mypage_passwordupdate .block {
    width: 70%;
  }
}
#page_mypage_login .block .line,
#page_mypage_register .block .line,
#page_mypage_resetemail .block .line,
#page_mypage_reset .block .line,
#page_mypage_passwordupdate .block .line {
  display: block;
}
#page_mypage_login .block .line .field,
#page_mypage_register .block .line .field,
#page_mypage_resetemail .block .line .field,
#page_mypage_reset .block .line .field,
#page_mypage_passwordupdate .block .line .field {
  width: 100%;
}
#page_mypage_login .block .line .field input,
#page_mypage_register .block .line .field input,
#page_mypage_resetemail .block .line .field input,
#page_mypage_reset .block .line .field input,
#page_mypage_passwordupdate .block .line .field input {
  font-weight: normal;
}
#page_mypage_login .block .invalid-feedback,
#page_mypage_register .block .invalid-feedback,
#page_mypage_resetemail .block .invalid-feedback,
#page_mypage_reset .block .invalid-feedback,
#page_mypage_passwordupdate .block .invalid-feedback {
  font-size: 12px;
  padding: 0;
}
#page_mypage_login .block .password_reset,
#page_mypage_register .block .password_reset,
#page_mypage_resetemail .block .password_reset,
#page_mypage_reset .block .password_reset,
#page_mypage_passwordupdate .block .password_reset {
  text-align: center;
}
#page_mypage_login .block .password_reset a,
#page_mypage_register .block .password_reset a,
#page_mypage_resetemail .block .password_reset a,
#page_mypage_reset .block .password_reset a,
#page_mypage_passwordupdate .block .password_reset a {
  color: #977;
  font-size: 14px;
}
#page_mypage_login .block .alert-success,
#page_mypage_register .block .alert-success,
#page_mypage_resetemail .block .alert-success,
#page_mypage_reset .block .alert-success,
#page_mypage_passwordupdate .block .alert-success {
  color: #f00;
  font-size: 14px;
  padding: 2px 15px;
  text-align: center;
}
#page_mypage_login #accountlinks a,
#page_mypage_register #accountlinks a,
#page_mypage_resetemail #accountlinks a,
#page_mypage_reset #accountlinks a,
#page_mypage_passwordupdate #accountlinks a {
  display: block;
}

#page_mypage_profile #thumbnailContainer .line {
  align-items: center;
}
#page_mypage_profile .genreH3 {
  display: flex;
  align-items: center;
}
#page_mypage_profile .genreH3 #btnCheckedAll, #page_mypage_profile .genreH3 #btnUnCheckedAll {
  display: inline-block;
  box-sizing: border-box;
  font-size: 10px;
  padding: 3px 10px;
  color: #977;
  border-radius: 10px;
  margin: 0;
  margin-left: 10px;
  border: 1px solid #977;
  cursor: pointer;
}
#page_mypage_profile .genreH3 #btnCheckedAll:hover, #page_mypage_profile .genreH3 #btnUnCheckedAll:hover {
  background-color: #977;
  color: #fff;
}
#page_mypage_profile #genres {
  margin-bottom: 20px;
}
#page_mypage_profile #genres label {
  display: inline-block;
  width: 150px;
}
#page_mypage_profile #genres label span {
  color: #977;
  font-size: 14px;
}
#page_mypage_profile #genres label input {
  display: inline-block;
  width: auto;
}

.mypage_item {
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 0px;
  background-color: #f5f5f5;
  justify-content: space-between;
}
.mypage_item .left {
  display: flex;
  width: calc(100% - 0px);
}
.mypage_item .left a {
  display: flex;
  width: 100%;
  color: #977;
}
.mypage_item .left .thumbnailContainer {
  width: 70px;
  background-size: cover;
  background-position: center;
}
.mypage_item .left .info {
  border-left: 1px solid #0001;
  box-sizing: border-box;
  padding: 5px 10px;
  width: calc(100% - 70px);
}
.mypage_item .left .info .dateandcategory {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.mypage_item .left .info .dateandcategory .created_at {
  font-weight: bold;
  margin-right: 10px;
  font-size: 14px;
}
.mypage_item .left .info .dateandcategory .category {
  background-color: #f77;
  color: #fff;
  border-radius: 10px;
  display: inline;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 10px;
}
.mypage_item .left .info .price {
  font-weight: bold;
  color: #FF007C;
}
.mypage_item .left .info .name {
  font-weight: bold;
  font-size: 16px;
  line-height: 100%;
  margin: 5px 0;
  display: flex;
  align-items: center;
}
.mypage_item .left .info .name .disabled {
  font-size: 10px;
  border: 1px solid #FF007C;
  padding: 2px 10px;
  line-height: 100%;
  margin: 0;
  margin-right: 5px;
  border-radius: 3px;
}
.mypage_item .left .info .comment {
  font-size: 12px;
}
.mypage_item .left .info .trackingcode {
  font-size: 12px;
}
.mypage_item .left .info .trackingcode span {
  font-size: inherit;
  color: inherit;
  font-weight: bold;
}
.mypage_item .right {
  display: flex;
}
.mypage_item .right a {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #F77;
  color: #fffe;
  width: 70px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: bold;
}
.mypage_item .right a:hover {
  background-color: #F55;
}

@media screen and (max-width: 640px) {
  .mypage_item {
    border-radius: 0px;
    margin: 0px -20px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
  }
  .mypage_item:first-child {
    border-top: 1px solid #ddd;
    margin-top: 15px;
  }
}
.navigationContainer {
  display: flex;
  align-items: center;
}
.navigationContainer .name {
  font-weight: bold;
  display: flex;
  width: 100%;
  align-items: center;
}
.navigationContainer .name .container {
  margin-left: 15px;
}
.navigationContainer .name .container a:hover {
  color: #fffa;
}
.navigationContainer .navigation {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
}
.navigationContainer .navigation li {
  list-style-type: none;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid #977;
  padding: 1px 10px;
  border-radius: 10px;
  margin: 3px;
  cursor: pointer;
}
.navigationContainer .navigation li:hover {
  background-color: #9773;
}
.navigationContainer .navigation li:active {
  background-color: #977;
  color: #fff;
}

#myPageItemThumbnailsContainer .line {
  display: block;
}
#myPageItemThumbnailsContainer .line .info {
  font-size: 12px;
}
#myPageItemThumbnailsContainer .line .field {
  margin-bottom: 15px;
}

#itemThumbnailsContainer {
  width: calc(100% + 10px);
}
#itemThumbnailsContainer #btnDeleteContainer {
  text-align: right;
  margin-right: 10px;
}
#itemThumbnailsContainer #btnDeleteContainer #btnDelete {
  display: inline-block;
  padding: 5px 15px;
  line-height: 100%;
  font-size: 12px;
  font-weight: bold;
  color: #F55;
  border-radius: 5px;
  border: 1px solid #F55;
  margin-bottom: 15px;
  cursor: pointer;
}
#itemThumbnailsContainer #btnDeleteContainer #btnDelete:active {
  background-color: #F55;
  color: #fff;
}
#itemThumbnailsContainer .itemThumbnails {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
}
#itemThumbnailsContainer .itemThumbnails .itemThumbnail {
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #977;
  width: calc(25% - 10px);
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 10px 10px 0;
  border-radius: 5px;
  position: relative;
}
#itemThumbnailsContainer .itemThumbnails .itemThumbnail .btnDeleteImage {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-color: #f99;
  height: 40px;
  aspect-ratio: 1;
  right: 5px;
  top: 5px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3px solid #fff;
  box-shadow: 0px 1px 2px #000a;
  color: #fff;
  cursor: pointer;
}
#itemThumbnailsContainer .itemThumbnails .itemThumbnail .btnDeleteImage:hover {
  background-color: #f55;
}
#itemThumbnailsContainer .itemThumbnails .itemThumbnail .btnDeleteImage:active {
  background-color: #f00;
}
#itemThumbnailsContainer .itemThumbnails #btnImageAddContainer {
  background-image: url("/images/common/bg_addButton.png");
  background-size: contain;
  background-position: center;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  margin-right: 0px;
}
#itemThumbnailsContainer .itemThumbnails #btnImageAddContainer input {
  background-color: #977;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  box-sizing: border-box;
  padding-top: 100px;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  #itemThumbnailsContainer .itemThumbnails .itemThumbnail {
    width: calc(33.3333333333% - 10px);
  }
}
#itemThumbnailsContainer .btnImageAddContainer {
  width: 100px;
  overflow: hidden;
  background-color: #f001;
}

#page_mypage_item .headerContainer, #page_mypage_item_single .headerContainer {
  position: relative;
}
#page_mypage_item .headerContainer .btnDeleteOnMypage, #page_mypage_item_single .headerContainer .btnDeleteOnMypage {
  background-color: #fff;
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
  height: auto;
  display: inline-block;
  padding: 5px 15px;
  line-height: 100%;
  font-size: 12px;
  font-weight: bold;
  color: #f55;
  border-radius: 5px;
  border: 1px solid #f55;
  cursor: pointer;
}

#page_mypage_itemoption .optionContainer .line label {
  display: none;
}
#page_mypage_itemoption .optionContainer .line .price {
  text-align: right;
}
#page_mypage_itemoption .optionContainer .line .btnDelete {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#page_mypage_itemoption .optionContainer .head label {
  display: block;
  border-bottom: 1px solid #0003;
}
#page_mypage_itemoption .optionContainer .lineWithButton .error {
  background-color: #f005;
}
#page_mypage_itemoption .optionContainer .lineWithButton .buttons {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
#page_mypage_itemoption .optionContainer .lineWithButton .buttons .button {
  background-color: #00000010;
  box-sizing: border-box;
  width: calc(50% - 5px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}
#page_mypage_itemoption .optionContainer .lineWithButton .buttons .button:hover {
  background-color: #00000030;
}
#page_mypage_itemoption .optionContainer .lineWithButton .buttons .button:active {
  background-color: #00000050;
}
@media screen and (max-width: 500px) {
  #page_mypage_itemoption .optionContainer .line {
    padding: 20px 10px;
  }
  #page_mypage_itemoption .optionContainer .line label {
    display: block;
  }
  #page_mypage_itemoption .optionContainer .line:nth-child(even) {
    background-color: #efefef;
    border-radius: 10px;
  }
  #page_mypage_itemoption .optionContainer .line:nth-child(even) input {
    background-color: #fff;
  }
  #page_mypage_itemoption .optionContainer .line:nth-child(odd) {
    background-color: #efefef;
    border-radius: 10px;
  }
  #page_mypage_itemoption .optionContainer .line:nth-child(odd) input {
    background-color: #fff;
  }
  #page_mypage_itemoption .optionContainer .line .btnDelete {
    margin-top: 15px;
    justify-content: flex-start;
  }
  #page_mypage_itemoption .optionContainer .head {
    display: none;
  }
}
#page_mypage_itemoption .btnAddOnMypageContainer {
  margin: 25px 0;
}
#page_mypage_itemoption .btnAddOnMypageContainer .btnAddItemOption {
  display: inline-block;
  margin: 0 auto;
  width: auto;
}

#page_mypage_item_single #shippingfees {
  margin-top: 10px;
}
#page_mypage_item_single #shippingfees .item {
  display: flex;
  padding: 7px;
  border-top: 1px solid #0003;
  align-items: center;
}
#page_mypage_item_single #shippingfees .item .order {
  width: 30px;
}
#page_mypage_item_single #shippingfees .item .info {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 30px);
  align-items: center;
}
#page_mypage_item_single #shippingfees .item .info .method {
  display: flex;
  width: calc(100% - 130px);
}
#page_mypage_item_single #shippingfees .item .info .method .name span {
  font-size: 12px;
  color: inherit;
  font-weight: bold;
}
#page_mypage_item_single #shippingfees .item .info .priceContainer {
  display: flex;
  width: 130px;
  justify-content: right;
  font-weight: bold;
  align-items: center;
}
#page_mypage_item_single #shippingfees .item .info .priceContainer input {
  color: inherit;
  margin-left: 10px;
  padding: 3px 10px;
  width: 80px;
  text-align: right;
  padding-right: 10px;
  border: 1px solid #0005;
}
#page_mypage_item_single #shippingfees .item:nth-child(even) {
  background-color: #00000005;
}
#page_mypage_item_single #shippingfees .item:nth-child(even) input {
  background-color: #fff;
}
#page_mypage_item_single #shippingfees .item:nth-child(odd) {
  background-color: #00000010;
}
#page_mypage_item_single #shippingfees .item:nth-child(odd) input {
  background-color: #fff;
}
#page_mypage_item_single #shippingfees .item:last-child {
  border-bottom: 1px solid #0003;
}
@media screen and (max-width: 640px) {
  #page_mypage_item_single #shippingfees .item {
    font-size: 90%;
  }
  #page_mypage_item_single #shippingfees .item .order {
    width: 30px;
  }
  #page_mypage_item_single #shippingfees .item .info {
    display: block;
    width: calc(100% - 30px);
  }
  #page_mypage_item_single #shippingfees .item .info .method {
    width: 100%;
  }
  #page_mypage_item_single #shippingfees .item .info .priceContainer {
    width: 100%;
  }
}
#page_mypage_item_single .optionContainer .item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #0003;
}
#page_mypage_item_single .optionContainer .item .info {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 60px);
  margin-right: 10px;
}
#page_mypage_item_single .optionContainer .item .info .option {
  width: calc(100% - 80px);
  box-sizing: border-box;
  padding-left: 10px;
}
#page_mypage_item_single .optionContainer .item .info .price {
  text-align: right;
  width: 80px;
  font-weight: bold;
}
#page_mypage_item_single .optionContainer .item .order {
  width: 50px;
}
#page_mypage_item_single .optionContainer .item:last-child {
  border-bottom: 1px solid #0003;
}
#page_mypage_item_single .optionContainer .item:nth-child(odd) {
  background-color: #00000010;
}
#page_mypage_item_single .optionContainer .item:nth-child(even) {
  background-color: #00000005;
}
#page_mypage_item_single .buttons {
  display: flex;
  justify-content: space-between;
}
#page_mypage_item_single .buttons .btnRefreshOptionList {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #977;
  padding: 1px 10px;
  border-radius: 5px;
  margin: 10px 0;
  cursor: pointer;
}
#page_mypage_item_single .buttons .btnRefreshOptionList:hover {
  background-color: #9773;
}
#page_mypage_item_single .buttons .btnRefreshOptionList:active {
  background-color: #977;
  color: #fff;
}
#page_mypage_item_single .buttons .btnCheckAllContainer {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  padding: 1px 10px;
  border-radius: 5px;
  margin: 10px 0;
  display: flex;
  align-items: center;
}
#page_mypage_item_single .buttons .btnCheckAllContainer input {
  margin: 0 8px;
}

#page_mypage_message #users .container {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: solid 1px #0003;
  font-size: 12px;
}
#page_mypage_message #users .container .thumbnailContainer {
  background-image: url("/images/common/usericon_blank.png");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-right: 10px;
  width: 50px !important;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 2px solid #ddd;
  overflow: hidden;
}
#page_mypage_message #users .container .thumbnailContainer .thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}
#page_mypage_message #users .container .info {
  width: calc(100% - 90px);
  margin-right: 10px;
}
#page_mypage_message #users .container .info div {
  line-height: 100%;
}
#page_mypage_message #users .container .info .created_at {
  font-size: 10px;
  color: #0009;
}
#page_mypage_message #users .container .info .nameAndBadge {
  display: flex;
  align-items: center;
}
#page_mypage_message #users .container .info .nameAndBadge .badge {
  background-color: #f00;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  margin-right: 5px;
  padding: 2px 5px;
}
#page_mypage_message #users .container .info .nameAndBadge .name {
  font-size: 16px;
  margin: 3px 0;
}
#page_mypage_message #users .container .info .nameAndBadge .name a {
  color: #FF007C;
}
#page_mypage_message #users .container .info .message {
  font-size: 10px;
  color: #0009;
}
#page_mypage_message #users .container .btnDetail {
  font-size: 10px;
  line-height: 100%;
  width: 30px;
  text-align: center;
  padding: 10px 5px;
  color: #fff;
  border-radius: 5px;
  background-color: #f77;
}
#page_mypage_message #users .container:last-child {
  border-bottom: solid 1px #0003;
}

#page_mypage_message_chat .content {
  position: relative;
}
#page_mypage_message_chat .content #chat_history {
  padding-bottom: 100px;
}
#page_mypage_message_chat .content #chat_textarea_contaiiner {
  position: fixed;
  z-index: 3;
  box-sizing: border-box;
  width: calc(100% - 20px);
  bottom: -10px;
  border-radius: 0;
  padding: 0px 10px 30px 10px;
  border-top: 2px solid #0005;
}
#page_mypage_message_chat .content #chat_textarea_contaiiner textarea {
  height: 100px;
}
#page_mypage_message_chat .navigationContainer {
  margin-bottom: 10px;
}
#page_mypage_message_chat .navigationContainer a {
  line-height: 100%;
  font-size: 12px;
  border: solid 1px #0005;
  border-radius: 5px;
  padding: 3px 10px;
}
#page_mypage_message_chat #messages .bubble {
  padding: 10px 15px;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}
#page_mypage_message_chat #messages .sent_at {
  font-size: 12px;
  opacity: 0.7;
}
#page_mypage_message_chat #messages .received {
  box-sizing: border-box;
  margin-right: 200px;
}
#page_mypage_message_chat #messages .sent {
  margin-left: 200px;
  position: relative;
}
#page_mypage_message_chat #messages .sent .has_read {
  position: absolute;
  text-align: right;
  font-size: 12px;
  color: #777;
  left: -30px;
  line-height: 120%;
}
#page_mypage_message_chat #messages .sent .sent_at {
  text-align: right;
}
#page_mypage_message_chat #messages .buyer {
  background-color: #d8f2ff;
}
#page_mypage_message_chat #messages .seller {
  background-color: #f553;
}
@media screen and (max-width: 640px) {
  #page_mypage_message_chat #messages .received {
    margin-right: 15%;
  }
  #page_mypage_message_chat #messages .sent {
    margin-left: 15%;
  }
}

#page_mypage_reward .mypage_item .info .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#page_mypage_reward .mypage_item .info .container .dateandstatus {
  width: calc(100% - 280px);
}
#page_mypage_reward .mypage_item .info .container .dateandstatus .comment {
  word-break: break-all;
}
#page_mypage_reward .mypage_item .info .container .prices {
  width: 280px;
  font-size: 12px;
  padding: 0;
  margin: 0;
  margin-top: 10px;
  margin-bottom: 5px;
  border: solid 1px #0003;
  border-radius: 3px;
  background-color: #fff;
}
#page_mypage_reward .mypage_item .info .container .prices div {
  padding: 0;
  margin: 0;
  line-height: 100%;
}
#page_mypage_reward .mypage_item .info .container .prices .price_line {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 5px;
  padding-top: 5px;
}
#page_mypage_reward .mypage_item .info .container .prices .price_line .label {
  margin-right: 5px;
}
#page_mypage_reward .mypage_item .info .container .prices .price_line .price {
  color: #977;
}
#page_mypage_reward .mypage_item .info .container .prices .price_line:first-child {
  border-bottom: dotted 1px #0002;
}
#page_mypage_reward .mypage_item .info .container .prices .reward {
  border-top: solid 1px #0003;
  padding-top: 5px;
}
#page_mypage_reward .mypage_item .info .container .prices .reward .price {
  color: #FF007C;
}
@media screen and (max-width: 640px) {
  #page_mypage_reward .mypage_item .info .container {
    display: inline;
  }
  #page_mypage_reward .mypage_item .info .container .dateandstatus {
    width: auto;
  }
  #page_mypage_reward .mypage_item .info .container .prices {
    width: auto;
  }
}
#page_mypage_reward .total {
  display: flex;
  justify-content: flex-end;
}
#page_mypage_reward .requestRewerdContainer {
  display: flex;
  justify-content: flex-end;
}

#page_mypage_bookmark #howto div {
  margin: 5px 0;
}
#page_mypage_bookmark #howto a {
  color: #FF007C;
  padding: 1px 3px;
  background-color: #fff;
  line-height: 100%;
  border-radius: 5px;
  margin: 0 3px;
  font-size: 90%;
  box-sizing: border-box;
  border: 2px solid #FF007C;
}
#page_mypage_bookmark .items {
  display: flex;
  flex-wrap: wrap;
}
#page_mypage_bookmark .items .item {
  display: flex;
  align-items: center;
  width: 50%;
  margin-bottom: 15px;
}
#page_mypage_bookmark .items .item .left {
  margin-right: 20px;
}
#page_mypage_bookmark .items .item .left .imageContainer {
  background-image: url("/images/common/defaultSellerIcon.png");
  background-size: cover;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 3px solid #fff;
  width: 80px;
  height: 80px;
  box-shadow: 1px 1px 1px #0002;
}
#page_mypage_bookmark .items .item .right .nickname {
  font-size: 24px;
  color: #FF007C;
  margin-bottom: 3px;
}
@media screen and (max-width: 800px) {
  #page_mypage_bookmark .items .item {
    width: 100%;
  }
  #page_mypage_bookmark .items .right .buttons a {
    margin-bottom: 3px;
  }
}

#page_guide_packing .main .block {
  background-color: #fff;
  color: #977;
  margin: 10px;
  padding: 20px;
  line-height: 150%;
  border-radius: 10px;
  font-weight: normal;
  font-size: 16px;
}
#page_guide_packing .main .box {
  display: flex;
  margin: 20px 0;
  flex-direction: row;
  align-items: center;
}
#page_guide_packing .main h2 {
  margin: 15px 0;
  background-color: #0001;
  padding: 0.5em;
  font-weight: bold;
  font-size: 24px;
}
#page_guide_packing .main h3 {
  font-size: 14px;
  margin-top: 15px;
  border-bottom: 1px solid #0003;
}
#page_guide_packing .main h4 {
  font-weight: bold;
}
#page_guide_packing .main li {
  font-size: 24px;
  line-height: 140%;
}
#page_guide_packing .main .img {
  width: 300px;
  line-height: 100%;
  margin-right: 20px;
}
#page_guide_packing .main .img img {
  width: 100%;
  border-radius: 10px;
}
#page_guide_packing .main .text {
  font-size: 24px;
  width: calc(100% - 300px - 20px);
  line-height: 150%;
}
@media screen and (max-width: 800px) {
  #page_guide_packing .main .box {
    display: block;
  }
  #page_guide_packing .main .img {
    width: 100%;
    line-height: 100%;
    margin-right: 0px;
  }
  #page_guide_packing .main .text {
    font-size: 20px;
    width: 100%;
    line-height: 150%;
  }
}

#page_guide #guide_navi {
  margin-bottom: 20px;
}
#page_guide .content .pn_container h2, #page_guide .content .pn_container h3 {
  text-align: center;
  font-weight: bold;
}
#page_guide .content .pn_container h3 {
  background-color: #FF007C;
  color: #fff;
}
#page_guide .content .title {
  text-align: center;
}
#page_guide .content .title img {
  box-sizing: border-box;
  width: 200px;
}
#page_guide .content .image {
  text-align: center;
}
#page_guide .content #about_01 img {
  height: 300px;
}
@media screen and (max-width: 500px) {
  #page_guide .content .title img {
    width: 100px;
  }
  #page_guide .content .title h2 {
    font-size: 20px;
  }
  #page_guide .content #about_01 img {
    width: 100%;
    height: auto;
  }
}
#page_guide .content .mobile .section, #page_guide .content .pc .section {
  display: flex;
  justify-content: space-between;
  padding: 30px 0;
  box-sizing: border-box;
  border-top: 1px dotted #555;
  align-items: center;
}
#page_guide .content .mobile .section img, #page_guide .content .pc .section img {
  border: solid 1px #0005;
  margin-right: 15px;
}
#page_guide .content .mobile .section .text, #page_guide .content .pc .section .text {
  font-size: 24px;
  color: #977;
  font-weight: bold;
  padding: 20px 10px;
  box-sizing: border-box;
}
#page_guide .content .mobile .section:last-child, #page_guide .content .pc .section:last-child {
  border-bottom: 1px dotted #555;
}
#page_guide .content .mobile .section img {
  width: 400px;
}
#page_guide .content .mobile .section .text {
  background-color: #f001;
  width: calc(100% - 415px);
}
#page_guide .content .pc {
  margin-top: 50px;
}
#page_guide .content .pc .section img {
  width: 50%;
}
#page_guide .content .pc .section .text {
  background-color: #0001;
  width: calc(100% - 415px);
}
@media screen and (max-width: 800px) {
  #page_guide .content .mobile .section, #page_guide .content .pc .section {
    display: block;
    text-align: center;
  }
  #page_guide .content .mobile .section img, #page_guide .content .pc .section img {
    width: 75%;
  }
  #page_guide .content .mobile .section .text, #page_guide .content .pc .section .text {
    text-align: left;
    width: 100%;
    font-size: 16px;
  }
}

#page_guide_top .pn_blockWithThumbnail {
  margin-bottom: 20px;
}
#page_guide_top .pn_blockWithThumbnail .texts h2 {
  text-align: left;
}
#page_guide_top .pn_blockWithThumbnail:last-child {
  margin-bottom: 0px;
}

#page_guide_top .pn_blockWithThumbnail {
  margin-bottom: 20px;
}
#page_guide_top .pn_blockWithThumbnail .texts h2 {
  text-align: left;
}
#page_guide_top .pn_blockWithThumbnail:last-child {
  margin-bottom: 0px;
}

#page_guide_money .description {
  padding: 10px 15px;
  font-weight: 400;
  background-color: #f001;
}
#page_guide_money .example {
  margin: 30px 0;
}
#page_guide_money .example .title {
  font-size: 24px;
  color: #977;
  font-weight: bold;
  text-align: left;
}
#page_guide_money table {
  font-size: 24px;
  width: 100%;
  border-collapse: collapse;
  color: #977;
  font-weight: bold;
  border-bottom: 1px solid #977;
}
#page_guide_money table .price {
  text-align: right;
}
#page_guide_money table td, #page_guide_money table th {
  margin: 0;
  padding: 5px 10px;
  border: none;
  box-sizing: border-box;
  border-left: 1px solid #977;
}
#page_guide_money table td:last-child, #page_guide_money table th:last-child {
  border-right: 1px solid #977;
}
#page_guide_money table td:last-child {
  font-size: 60%;
}
#page_guide_money table th {
  background-color: #977;
  color: #fff;
}
#page_guide_money table tr:nth-child(odd) {
  background-color: #f001;
}
#page_guide_money table .total {
  border-top: 2px solid #977;
}

@media screen and (max-width: 700px) {
  #page_guide_money .description {
    font-size: 12px;
  }
  #page_guide_money .example .title {
    font-size: 12px;
  }
  #page_guide_money table {
    font-size: 12px;
  }
  #page_guide_money table td:last-child {
    font-size: 80%;
  }
}