@charset "UTF-8";
@import url("../css/reset.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");
body {
  background: #fff;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif, "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
@media (min-width: 768px) {
  body {
    font-size: 17px;
  }
}
body img {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

:root {
  --black-blue: #2d2e4d;
  --light-blue: #2b72c9;
  --red: #ae0000;
}

.br-sp {
  display: inline-block;
}

.br-pc {
  display: none;
}

.inner {
  width: 100%;
  margin: 0 auto;
}

/* -- pc -- */
@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
  .br-pc {
    display: inline-block;
  }
  .inner {
    width: 1100px;
  }
}
/* -- tablet-- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .inner {
    width: 100%;
  }
}
/*-------------------------------*/
/*-------------------------------*/
.aboutTour {
  padding: 3rem 1rem;
  background: #fafafa;
}
.aboutTour__title {
  font-size: 2em;
  color: var(--black-blue);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.3;
}
.aboutTour__title::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto;
  background: var(--red);
  mask: url(../img/ticket.svg) no-repeat center center/contain;
  -webkit-mask: url(../img/ticket.svg) no-repeat center center/contain;
}
.aboutTour__image {
  max-width: 300px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .aboutTour__image {
    max-width: 400px;
  }
}
.aboutTour__main {
  margin-bottom: 2rem;
  text-align: center;
}
.aboutTour__main .sale {
  font-size: 1.1em;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.2em;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  -webkit-text-decoration-color: rgba(174, 0, 0, 0.1098039216);
  text-decoration-color: rgba(195, 175, 0, 0.21);
  margin-bottom: 1.5rem;
}
.aboutTour__main p span {
  color: var(--red);
  font-weight: 700;
}
.aboutTour__anchorLink {
  display: flex;
  justify-content: space-around;
  align-items: center;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.aboutTour__anchorLink li {
  border-radius: 0.3em;
  overflow: hidden;
  width: 25%;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1882352941);
}
.aboutTour__anchorLink a {
  display: block;
  width: 100%;
  color: var(--black-blue);
  background: #fff;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
}
.aboutTour__anchorLink a span {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.aboutTour__anchorLink a span::after {
  content: "\f0dd";
  font-family: "Font Awesome 6 pro";
}
@media (min-width: 768px) {
  .aboutTour__anchorLink a {
    opacity: 1;
    transition: all 0.2s;
    font-size: 1em;
  }
  .aboutTour__anchorLink a:hover {
    background: var(--red);
    color: #fff;
  }
}

/*-------------------------------*/
.schedule {
  padding: 3rem 1rem;
  background: var(--black-blue);
  background-image: linear-gradient(#4b4d61 1px, transparent 0), linear-gradient(90deg, #4b4d61 1px, transparent 0);
  background-size: 20px 20px;
}
.schedule article {
  background: #fff;
  padding: 1.5rem 1rem;
}
.schedule article:not(:last-of-type) {
  margin-bottom: 2rem;
}
.schedule dl {
  background: #fafafa;
  padding: 0.75rem;
  font-size: 15px;
}
.schedule dl dd:not(:last-of-type) {
  margin-bottom: 1rem;
}
.schedule__day {
  text-align: center;
  margin-bottom: 0.5rem;
}
.schedule__day h2 {
  color: var(--black-blue);
  font-size: 2em;
  margin-bottom: 2rem;
}
.schedule__day p {
  font-size: 0.8em;
  font-weight: 500;
}
.schedule__text p {
  text-align: center;
  margin-bottom: 1rem;
}
.schedule__text span {
  font-weight: 600;
  font-size: 2em;
  color: #cf0000;
}
.schedule__artist {
  display: flex;
  justify-content: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.schedule__artist .colum {
  width: 50%;
}
.schedule__artist h3 {
  text-align: center;
  margin: 0.5rem 0;
  font-weight: 500;
}
.schedule__artist p {
  font-size: 0.75em;
  line-height: 1.5;
}
.schedule__tour {
  margin-top: 1.5rem;
}
.schedule__tour h3 {
  font-size: 14px;
  color: var(--black-blue);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.2em;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  -webkit-text-decoration-color: rgba(174, 0, 0, 0.1098039216);
          text-decoration-color: rgba(174, 0, 0, 0.1098039216);
}
.schedule__tour h4 {
  text-align: center;
  margin-bottom: 0.75rem;
  font-size: 14px;
}
.schedule__tour .tourLink {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.schedule__tour .tourLink a {
  border-radius: 0.3em;
  display: inline-block;
  padding: 0.75em;
  color: #ffffff;
  background: #36823e;
  width: 35%;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.schedule__tour .tourLink a::before {
  content: "\f238";
  font-family: "Font Awesome 6 pro";
  padding-right: 0.5rem;
}
.schedule__tour .tourLink a::after {
  content: "\f0da";
  font-family: "Font Awesome 6 pro";
  padding-left: 0.5rem;
}
.schedule__tour .tourLink.air a {
  background: #123476;
}
.schedule__tour .tourLink.air a::before {
  content: "\f5b0";
}
@media (min-width: 768px) {
  .schedule .pc_inner {
    width: 70%;
    margin: 0 auto;
  }
  .schedule__artist p {
    font-size: 0.8em;
  }
  .schedule__tour h3 {
    font-size: 1.2em;
  }
  .schedule__tour h4 {
    font-size: 18px;
  }
  .schedule__tour .tourLink a {
    opacity: 1;
    transition: all 0.2s;
    padding: 1rem;
  }
  .schedule__tour .tourLink a:hover {
    opacity: 0.6;
  }
}

/*-------------------------------*/
.information {
  padding: 3rem 1rem;
  background: #fafafa;
}
.information__title {
  text-align: center;
  font-size: 2em;
  margin-bottom: 2rem;
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.2em;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  -webkit-text-decoration-color: rgba(174, 0, 0, 0.1098039216);
  text-decoration-color: rgba(195, 175, 0, 0.21);
}
.information__ticket, .information__cancel, .information__contact {
  border: 1px solid var(--black-blue);
  margin-bottom: 1rem;
}
.information__ticket h3, .information__cancel h3, .information__contact h3 {
  background: var(--black-blue);
  color: #fff;
  padding: 0.75rem;
}
.information__ticket p, .information__cancel p, .information__contact p {
  padding: 1rem;
  line-height: 1.8;
}
.information__ticket a, .information__cancel a, .information__contact a {
  color: #0b65d4;
}
@media (min-width: 768px) {
  .information__ticket a, .information__cancel a, .information__contact a {
    opacity: 1;
    transition: all 0.2s;
  }
  .information__ticket a:hover, .information__cancel a:hover, .information__contact a:hover {
    opacity: 0.6;
  }
}

/*-------------------------------*/
.aboutConcert {
  padding: 3rem 1rem;
  background: rgba(45, 46, 77, 0.1019607843);
  color: var(--black-blue);
}
.aboutConcert__title {
  margin-bottom: 2rem;
}
.aboutConcert__title h1 {
  font-size: 2em;
  text-align: center;
}
.aboutConcert__title h1 span {
  display: block;
  font-size: 0.7em;
  margin-bottom: 0.5rem;
}
.aboutConcert p {
  line-height: 1.8;
}
@media (min-width: 768px) {
  .aboutConcert p {
    width: 950px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .aboutConcert p {
    width: 100%;
  }
}
.aboutConcert__image {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 950px;
  margin: 0 auto 1rem;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.aboutConcert__image img {
  display: block;
  width: calc(50% - 0.25rem);
  height: auto;
  aspect-ratio: 4/5;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 400px;
}

/*-------------------------------*/
.eventOverView {
  padding: 3rem 1rem;
  font-weight: 500;
}
.eventOverView section:not(:first-of-type) {
  padding-top: 3rem;
}
.eventOverView__title {
  font-size: 1.2em;
  text-align: center;
  background: rgba(45, 46, 77, 0.1019607843);
  margin: 0 auto 2rem;
  color: var(--black-blue);
  padding: 0.3rem 0;
}
.eventOverView__main h3 {
  text-align: center;
  margin-bottom: 0.75rem;
}
.eventOverView__main p {
  text-align: center;
  font-size: 0.9em;
  line-height: 1.8;
}
.eventOverView__main a {
  color: var(--light-blue);
  font-weight: 500;
  text-decoration: underline;
}
.eventOverView__main dl {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.9em;
  row-gap: 0.75rem;
}
.eventOverView__main dl dt::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 pro";
  font-weight: 700;
  padding-right: 0.3rem;
}
.eventOverView__main dl dt:not(:first-of-type) {
  padding-top: 0.5rem;
}
.eventOverView__main dl dd {
  border-bottom: 1px solid rgba(45, 46, 77, 0.1019607843);
  padding-bottom: 1.5rem;
  line-height: 1.5;
}
.eventOverView__main dl dd:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.eventOverView__map {
  display: flex;
  justify-content: center;
}
.eventOverView__map img {
  aspect-ratio: 3/2;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 800px;
}
@media (min-width: 768px) {
  .eventOverView__main h3 {
    font-size: 1.2em;
  }
  .eventOverView__main p {
    font-size: 1em;
  }
  .eventOverView__main a {
    opacity: 1;
    transition: all 0.2s;
  }
  .eventOverView__main a:hover {
    opacity: 0.6;
  }
  .eventOverView__main dl {
    flex-direction: row;
    row-gap: 1.5rem;
    font-size: 1em;
  }
  .eventOverView__main dl dt {
    width: 35%;
    border-bottom: 1px solid rgba(45, 46, 77, 0.1019607843);
    padding: 0 0.5rem 1.5rem;
  }
  .eventOverView__main dl dt:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }
  .eventOverView__main dl dd {
    width: 55%;
    line-height: 1.5;
  }
  .eventOverView__map img {
    aspect-ratio: 16/9;
  }
}

/*-------------------------------*/
.notes p {
  font-size: 0.8em;
  text-align: left;
}
.notes p:not(:first-of-type) {
  margin-top: 1rem;
}

.eventOverView__main h4 {
  margin: 0.75rem 0 0.375rem;
  text-align: center;
  font-size: 14px;
}

.tour {
  padding: 3rem 1rem;
}
.tour__title {
  color: var(--black-blue);
  text-align: center;
  margin-bottom: 2rem;
}
.tour__title h2 {
  font-size: 2em;
  margin-bottom: 1rem;
}

.tourDetails {
  padding: 3rem 0;
}
.tourDetails:not(:last-of-type) {
  margin-bottom: 1rem;
}
.tourDetails__title {
  margin-bottom: 2rem;
  text-align: center;
}
.tourDetails__title h3 {
  font-size: 2em;
  margin-bottom: 2.5rem;
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.2em;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  -webkit-text-decoration-color: rgba(188, 0, 0, 0.3098039216);
          text-decoration-color: rgba(188, 0, 0, 0.3098039216);
}
.tourDetails ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .tourDetails ul {
    grid-template-columns: repeat(5, 1fr);
  }
}
.tourDetails ul li {
  border: 1px solid #e8e8e8;
  border-bottom: none;
  box-shadow: rgba(87, 87, 87, 0.3411764706) 0px 2px 5px;
}
@media screen and (min-width: 768px) {
  .tourDetails ul li {
    opacity: 1;
    transition: all 0.2s;
  }
  .tourDetails ul li:hover {
    opacity: 0.8;
  }
  .tourDetails ul li:hover h4 {
    color: #bc0000;
  }
}
.tourDetails ul li a {
  padding: 0.5rem 0 0.5rem 0.5rem;
  color: var(--black-blue);
  text-align: center;
}
.tourDetails ul li a h4 {
  font-size: 1.5em;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed #ddd3d3;
}
.tourDetails ul li a h4::after {
  content: "公演";
  display: inline-block;
  margin-left: 0.5rem;
}
@media screen and (min-width: 768px) {
  .tourDetails ul li a h4::after {
    display: block;
    margin: 0.5rem 0 0;
  }
}
.tourDetails ul li a p {
  font-weight: 500;
}
.tourDetails ul li a p::before {
  content: "出発日：";
}
.tourDetails ul li a span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #bc0000;
  padding: 0.5rem;
  margin-top: 1rem;
}
.tourDetails ul li a span::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: #fff;
  -webkit-mask: url(https://bigs.jp/icon/fontawesome/caret-right-solid.svg) no-repeat center center/contain;
  mask: url(https://bigs.jp/icon/fontawesome/caret-right-solid.svg) no-repeat center center/contain;
}
.tourDetails ul li.sensyuraku h4::after {
  content: "千穐楽公演";
}
.tourDetails ul li.syonichi h4::after {
  content: "初日公演";
}
.tourDetails:last-of-type .tourDetails__title h3 {
  -webkit-text-decoration-color: rgba(0, 103, 188, 0.2588235294);
          text-decoration-color: rgba(0, 103, 188, 0.2588235294);
}
@media screen and (min-width: 768px) {
  .tourDetails:last-of-type li:hover h4 {
    color: #0067bc;
  }
}
.tourDetails:last-of-type li a span {
  background: #0067bc;
}