@charset "UTF-8";
ul, li {
  list-style-type: none;
  padding: 0;
  margin: 0; }

a:hover {
  color: #707070; }

p {
  margin-bottom: 0; }

body {
  font-size: 1rem; }

.header {
  display: flex;
  width: 100%;
  background-color: #FFAB4B;
  align-items: center;
  padding: 1rem 0; }
  .header__inner {
    margin: 0 auto;
    display: flex; }
  .header__ttl {
    margin: 0.3em 0.5em;
    color: #FFFFFF;
    font-weight: 800;
    font-size: calc(1.375rem + 1vw); }

.body {
  background-color: #EEEEEE; }

.main {
  margin: 0 auto; }

.main_contents {
  width: 90%;
  margin: 1.5rem auto; }
  .main_contents__ttl {
    font-size: 1.2rem;
    font-weight: 800; }
    .main_contents__ttl--center {
      text-align: center; }
  .main_contents_ttlonly {
    padding: 1rem;
    background-color: #EEEEEE; }
  .main_contents__username {
    text-align: right;
    font-size: calc(1.325rem + 0.4vw); }
  .main_contents__white {
    background-color: #FFFFFF; }
    .main_contents__white--top {
      margin-top: 3rem;
      text-align: center; }
  .main_contents__whiteinner {
    width: 90%;
    margin: auto;
    padding: 1.5rem 0; }
  .main_contents__price {
    text-align: center;
    font-weight: 900;
    font-size: calc(1.325rem + 0.9vw);
    color: #EE3E3E;
    margin-bottom: 0; }
  .main_contents__message {
    margin-bottom: 1rem;
    line-height: 1.5rem; }
    .main_contents__message--red, .main_contents__message--annotation {
      color: #EE3E3E; }
    .main_contents__message--annotation {
      font-weight: 800;
      line-height: 1rem;
      font-size: .8rem; }
    .main_contents__message--bold {
      font-weight: 800; }
    .main_contents__message--right {
      text-align: right; }
  .main_contents__btn_area {
    width: 90%;
    margin: auto;
    margin-top: 1rem; }
    .main_contents__btn_area_side {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
  .main_contents__btn {
    display: block;
    width: 100%;
    background-color: #FFFFFF;
    border: 0.1em solid #707070;
    color: #707070;
    border-radius: 0.5rem;
    box-sizing: border-box;
    font-weight: 600;
    padding: 0.9rem;
    position: relative;
    text-decoration: none;
    margin-bottom: 1rem;
    line-height: 1.3rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
    .main_contents__btn::after {
      font-family: "Font Awesome 5 Free";
      content: "\f105";
      position: absolute;
      top: calc(50% - 0.5em);
      left: 93%;
      font-size: 1em;
      color: #707070; }
    .main_contents__btn::hover {
      color: #707070; }
    .main_contents__btn--half {
      width: 48%; }
    .main_contents__btn--card {
      width: 94%;
      left:  3%;
    }
      .main_contents__btn--half::after {
        content: none; }
    .main_contents__btn--gray {
      background-color: #707070;
      color: #FFFFFF; }
      .main_contents__btn--gray::after {
        content: "\f104";
        color: #FFFFFF;
        top: calc(50% - 0.5em);
        right: 90%;
        left: 0; }
    .main_contents__btn--green {
      background-color: #56CE66;
      border: none;
      color: #FFFFFF; }
      .main_contents__btn--green::after {
        color: #FFFFFF; }
  .main_contents__list {
    background: #FFFFFF; }
    .main_contents__list_inner {
      margin-bottom: 1rem; }
    .main_contents__list_contents {
      display: flex;
      justify-content: space-between;
      padding: 0.8rem;
      border-bottom: solid #EEEEEE 0.07rem; }
      .main_contents__list_contents:last-of-type {
        border-bottom: none; }
    .main_contents__list_dot {
      list-style-type: disc;
      margin: 0 0 .5rem 1.5rem; }

.footer {
  background-color: #FFFFFF;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 3rem;
  padding: 1rem; }

/*--------------------------------------
モーダル
--------------------------------------*/
.entry-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  font-weight: normal; }
  .entry-modal-pare {
    display: block;
    text-align: center;
    justify-content: center; }
    .entry-modal-pare input {
      display: none; }

.entry-modal__open:checked + label + input + .entry-modal {
  display: block;
  animation: modal-animation .6s; }

.entry-modal__content-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  /* モバイルでのモーダルの幅 */
  max-width: 650px;
  background-color: #fefefe;
  z-index: 2;
  border-radius: 5px; }

.close-label {
  background: #777;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 20px;
  width: 36px;
  height: 36px;
  line-height: 1.35;
  text-align: center;
  display: table-cell;
  position: fixed;
  top: -17px;
  right: -4%;
  z-index: 99999;
  font-size: 1.5em; }

.open-label {
  display: block; }
  .open-label__text {
    margin-top: 0.5rem;
    display: inline-block; }
  .open-label__img {
    max-width: fit-content; }

.entry-modal__content {
  max-width: 100%;
  max-height: 65vh;
  overflow-y: auto; }

.entry-modal__background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1; }

@keyframes modal-animation {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@media only screen and (min-width: 960px) {
  .close-label {
    top: -13px;
    right: -2%; }

  .entry-modal__content {
    max-height: 80vh;
    /* モーダルの高さ */ }
    .entry-modal__content-wrap {
      width: 80%;
      /* PCでのモーダルの幅 */ } }