@charset "utf-8";

/* CSS Document */
@-ms-viewport {
  width: device-width;
}

:root {
  --bBlue: #0d2ea0;
  /*ブラザーブルー*/
  --gold: #a98740;
  --brown: #6c4400;
  --gray: #dddddd;
}

.taC {
  text-align: center !important;
}

/*PCのみ表示*/
@media print,
screen and (min-width: 901px) {
  .show-pc {
    display: block;
  }

  .show-sp {
    display: none !important;
  }
}

/*SPのみ表示（SP・タブレット）*/
@media print,
screen and (max-width: 900px) {
  .show-sp {
    display: block;
  }

  .show-pc {
    display: none !important;
  }
}

/*改行タグ限定のPC・SP表示*/
@media print,
screen and (min-width: 901px) {
  .break-pc {
    display: block;
  }

  .break-sp {
    display: inline;
  }
}

@media print,
screen and (max-width: 900px) {
  .break-sp {
    display: block;
  }

  .break-pc {
    display: inline;
  }
}

#pvs202612.wrap {
  max-width: none;
  width: 100%;
  position: relative;
  font-feature-settings: 'palt';
}

#pvs202612 .pankuzu {
  display: block;
  padding: 10px 2em;
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
}

#pvs202612 {
  h2 {
    margin: 0;
    padding: 0;
    border: none;
  }

  .ls-loose {
    display: inline-block;
    padding-left: 0.15em;
    letter-spacing: 0.3em;
  }

  #mv-box {
    height: auto;
    padding: 0;
    background: url(../../../img/events/pvs202612/mv-box-kv.png) no-repeat center top / 100%, linear-gradient(to bottom, #000000 0%, #000000 30%, #b1b1b1 70%, var(--gray) 100%);

    .main-ttl {
      position: relative;

      .main-ttl-copy {
        display: block;
        width: 50%;
        max-width: 760px;
        margin-inline: auto;
        position: relative;
        right: -10%;
        top: -3vw;
      }

      .main-ttl-img {
        display: block;
        width: 80%;
        max-width: 1000px;
        margin-inline: auto;
      }
    }

    .event-info {
      width: 90%;
      max-width: 680px;
      margin-top: -3vw;
      margin-inline: auto;

      .event-notice {
        padding: 10px;
        color: #fff;
        text-align: center;
        background: #000;
        background-image: radial-gradient(at 50% -10%, #a98740, #000000 75% 100%);

        .event-notice__title {
          font-size: 18px;
        }

        .event-notice__text {}
      }

      .event-detail {
        padding: 20px 0;
        font-size: 18px;

        .event-detail__row {
          display: grid;
          grid-template-columns: 12% 1fr;
          align-items: center;
          border-bottom: #b1b1b1 solid 1px;

          &:last-of-type {
            border: none;
          }

          dt {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            height: 100%;
            background: #fff;
            font-weight: 700;
          }

          dd {
            padding: 0px 20px;
            font-weight: 700;
            line-height: 1;



            .date {
              letter-spacing: 0.05em;

              .date-date {
                font-size: 38px;
                font-weight: 900;
              }

              .date-day {}
            }

            .facility {
              font-size: 14px;
            }

            .venue {
              font-size: 28px;
            }
          }
        }
      }
    }
  }

  .contents-bg {
    background: var(--gray);
    bottom: auto;
    margin-bottom: 0;

    .contents-box {
      padding-top: 30px;

    }

    #products {
      margin-left: -117px;
      margin-right: -117px;

      @media print,
      screen and (min-width:900px) and (max-width: 1100px) {
        margin-left: 0;
        margin-right: 0;

      }

      .largetxt-header {
        color: #000;
        font-size: 41px;
        text-align: center;

        .largetxt-header-small {
          margin-bottom: 8px;
          display: block;
          font-size: 20px;
        }
      }

      .products-list {
        margin-top: -30px;
        margin-bottom: 100px;

        .products-list-row {
          display: grid;
          grid-template-columns: repeat(3, 1fr);

          &:first-of-type {
            grid-template-columns: 1fr;
            margin-right: -30px;

          }

        }
      }

    }

    #app-form {
      .table-header {
        padding: 10px;
        background: var(--brown);
        border: none;
        font-size: 24px;
        color: #fff;
        text-align: center;
      }

      .table-box {
        margin-bottom: 10px;
        padding: 20px 60px;
        background: #fff;

        .ex-table {
          margin-bottom: 0;

          tr {
            font-weight: 700;

            &:last-of-type th,
            &:last-of-type td {
              border: none;
            }

            th {
              padding: 20px 0;
              font-size: 20px;
              background: transparent;
              color: #000;
              border-bottom: var(--brown) solid 1px;
            }

            td {
              padding: 20px;
              background: transparent;
              border-bottom: var(--brown) solid 1px;

              .program {
                li {
                  list-style-type: none;
                  position: relative;

                  &::before {
                    content: "□";
                    position: relative;
                    left: -2px;

                  }
                }
              }
            }
          }

          .mini {
            font-weight: 500;
          }

          .link {
            color: var(--brown);
            text-decoration: none;

            &::before {
              border-color: var(--brown);
            }
          }
        }
      }

      .form {
        background: #fff;
        padding: 30px 50px;
      }
    }
  }

}

#pvs202612 .shere-list,
#pvs202612 .mini-btn {
  width: 100%;
  padding: 0 2em;
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

#pvs202612 .mini-btn {
  padding: 30px 0;
}



/* ------------ SP ------------ */


@media print,
screen and (max-width: 900px) {

  #pvs202612 {

    .link-area {
      margin-top: -30px;
      padding-top: 30px;
    }

    #mv-box {
      background: url(../../../img/events/pvs202612/mv-box-kv-sp.png) no-repeat center top / 100%, linear-gradient(to bottom, #000000 0%, #000000 20%, #b1b1b1 35%, var(--gray) 100%);

      .main-ttl {

        .main-ttl-copy {
          width: 100%;
          right: auto;
        }

        .main-ttl-img {
          width: 100%;
          margin-top: 20vw;
          max-width: 600px;
        }
      }

      .event-info {

        .event-detail {

          .event-detail__row {
            grid-template-columns: 20% 1fr;

            dt {
              padding-top: 10px;
              line-height: 1.6;
              align-items: flex-start;
              font-weight: 500;
              font-size: 16px;
            }

            dd {
              padding: 5px 10px 10px 20px;
              line-height: 1.6;

              .date {

                .date-date {
                  font-size: 24px;
                }

              }

              .venue {
                display: block;
                margin-top: 5px;
                line-height: 1.2;
                font-size: 22px;
              }
            }

          }
        }
      }
    }

    .contents-bg {
      padding-top: 0;

      #products {
        margin-left: 0;
        margin-right: 0;

        .largetxt-header {
          font-size: 28px;

          .largetxt-header-small {
            line-height: 1.2;
            font-size: 14px;
          }
        }

        .products-list {
          width: 90%;
          max-width: 500px;
          margin-inline: auto;
          margin-top: 20px;
          margin-bottom: 50px;


          .products-list-row {
            margin-top: 30px;
            grid-template-columns: 1fr;


            &:first-of-type {
              margin-top: 0;
              margin-right: 0;
            }

          }
        }

      }

      #app-form {
        .table-header {
          font-size: 18px;
        }

        .table-box {
          padding: 0px 20px 10px;

          .ex-table {

            tr {
              th {
                border: none;
                padding: 10px;
                padding-bottom: 0;
                font-size: 18px;
              }

              td {
                padding: 5px 10px 10px;

              }
            }


          }
        }

        .form {
          padding: 20px;
        }
      }


    }
  }

  #pvs202612 .shere-list {
    padding: 0;
  }
}