@media (min-width: 768px) and (max-width: 1024px) {
/* ----------------------------------------------------
    共通
---------------------------------------------------- */
	html, body {
    overflow-x: clip;
  }

  .tab-br {
		display: inline;
	}

  .ttl-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .ttl-left {
		margin-left: 3rem;
	}

  .ttl-left-none {
    margin-left: 0;
    align-items: center;
  }

  .ttl-center {
		align-items: center;
	}

  .ttl-right {
    margin-right: 0;
    align-items: flex-end;
  }

  /* === font-size === */
  h1.name-txt-c {
    font-size: 2.5rem;
  }

  h2.copy-txt-b {
    font-size: 1.75rem;
  }

/* ----------------------------------------------------
    sec01
---------------------------------------------------- */
  .sec01-inner {
		padding: 8rem 3rem;
	}

/* ----------------------------------------------------
    sec02
---------------------------------------------------- */
  .sec02-inner {
		padding: 0rem 3rem 10rem 3rem;
	}

  .info-table {
    font-size: 15px;
  }

	.info-table th,
	.info-table td {
		padding: 1rem 1.5rem;
	}

  .plan-card-list {
    gap: 1rem;
  }

/* ----------------------------------------------------
    sec03
---------------------------------------------------- */
  .sec03-bg {
    background-image: url("../images/sec03_back_tab.png");
    background-size: cover;
  }

  .train-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .train-track {
    overflow: hidden;
  }

  .train-set {
    margin-left: 15rem;
  }

  .train-btn {
  }
  
/* ----------------------------------------------------
    sec04
---------------------------------------------------- */
  .copy {
		left: 1rem;
	}

	.guest-introduce {
    padding: 7.25rem 3rem 10rem 3rem;
		gap: 2rem;
	}

	.guest-photo {
		width: 45%;
	}

	.guest-card {
		width: 50%;
	}

	.guest-card-inner {
		margin: 3rem;
	}
/* ----------------------------------------------------
    sec05
---------------------------------------------------- */
  .sec05-bg {
    background-image: url("../images/sec05_back_sp.png");
    background-size: cover;
  }

  .sec05-inner {
    padding: 7.5rem 3rem 0 3rem;
  }

  .character {
    gap: 2rem;
  }

  .character-photo {
    width: 420px;
  }

  .character-introduce {
    width: 50%;
  }

  .txt-messeage {
    padding: 1.5rem 2rem;
  }

  .character-photo-spot {
    gap: 2rem;
  }

  .photo-panel {
    width: 300px;
    height: 600px;
  }

  .illustrator {
    padding: 0 3rem;
  }
/* ----------------------------------------------------
    sec06
---------------------------------------------------- */
  .route {
    flex-direction: column-reverse;
    gap: 3rem;
    padding-top: 2rem;
  }

  ul.route-list li:not(:last-child)::after {
    height: calc(100% + 2rem);
  }
/* ----------------------------------------------------
    sec07
---------------------------------------------------- */
  .wrapper {
    padding: 4rem 3rem 10rem 3rem;
  }

  .contents > li {
    padding: 3rem;
  }

  ul.contents li.is-pink::before {
    top: 13%;
    right: -7%;
  }

  ul.contents li.is-pink::after {
    bottom: 8%;
    left: 77%;
  }

  ul.contents li.is-grey::before {
    top: 40%;
    right: 2%;
  }
/* ----------------------------------------------------
    sec08
---------------------------------------------------- */
  ul.question-list {
    padding: 7.5rem 3rem 10rem 3rem;
  }

  .question-content {
    gap: 1rem;
    width: 90%;
  }

  .answer {
    padding: 2rem 7rem 2rem 4rem;
  }

/* ----------------------------------------------------
    sec09
---------------------------------------------------- */
  .ticket {
    padding: 7.5rem 3rem 10rem 3rem;
  }

  ul.ticket-card-list {
    flex-direction: column;
    align-items: center;
  }

  .participate {
    margin-bottom: 8rem;
    padding: 0 3rem;
  }

  .photo-area-map {
    padding: 7.5rem 3rem 10rem 3rem;
  }
/* ----------------------------------------------------
    sec10
---------------------------------------------------- */
  .sec10-inner {
    padding: 7.5rem 3rem 0 3rem;
  }

  ul.images-photo-list {
    padding: 4rem 0 0 0;
    gap: 2rem 2rem;
  }

  li.photo-card {
    flex: 0 0 calc((100% - 2rem) / 2);
  }

  ul.four-col {
    padding: 2rem 0rem 10rem 0rem;
  }

  .modal-content {
    width: 88%;
  }

  .modal-close {
    right: -2.5rem;
  }
/* ----------------------------------------------------
    footer
---------------------------------------------------- */
  .sec-footer-inner {
    padding: 0 3rem 10rem 3rem;
  }

  .contact {
    width: 100%;
    gap: 1rem;
  }

  .contact-card {
    flex:0 0 calc((100% - 1rem) / 2);
  }

  .contact-card-inner {
    margin: 0;
    padding: 2rem 1rem;
  }

  .contact-ttl {
    padding: 0.375rem 1.5rem;
  }

  .telephone img {
    width: 1.875rem;
  }

  .sponsorship-cooperation {
    margin-top: 3rem;
    gap: 2rem;
  }

/* ----------------------------------------------------
    利用規約
---------------------------------------------------- */
  .terms-page {
    margin: 5rem 3rem 7rem 3rem;
  }
}


/* ----------------------------------------------------
    その他サイズ：iPad mini/Air
---------------------------------------------------- */

@media (min-width: 768px) and (max-width: 820px) {

  h1.name-txt-c {
    text-align: center;
  }

  .plan-card-list {
    flex-direction: column;
  }

  .copy {
    left: 4rem;
  }

  .guest-introduce {
    flex-direction: column;
    align-items: center;
  }

  .guest-photo {
    width: 80%;
  }

  .guest-card {
    width: 90%;
  }

  .character {
    flex-direction: column;
  }

  .character-introduce {
    width: 80%;
    align-items: center;
  }

  .character-messeage {
    width: max-content;
  }

  .txt-messeage {
    padding: 2rem 2.5rem;
  }

  .tab-copy-txt {
    text-align: center;
  }

  .character-photo-spot {
    gap: 1rem;
  }

  .illustrator-card-inner {
    margin: 2rem;
  }

  .sec06 {
    margin-top: -5rem;
  }

  .sponsorship-cooperation {
    gap: 1rem;
    font-size: 15px;
  }
}

@media (min-width: 821px) and (max-width: 1024px) {
  
  .info-table th {
    width: 20%;
  }

  .plan-card-inner {
    margin: 1.5rem 1rem;
  }

  .plan-btn {
    padding: 0.5rem 2rem;
  }

  .tab-copy-txt {
    width: max-content;
  }

  .sec06 {
    margin-top: -5rem;
  }

  li.ticket-card {
    width: 100%;
  }
}

/* ----------------------------------------------------
    その他サイズ：1025-
---------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1430px) {

  .ttl-right {
    margin-right: 5rem;
  }

  .left-space {
    margin-left: 0;
  }

  .sec02-inner {
    padding: 0rem 5rem 10rem 5rem
  }

  .info-table th, .info-table td {
    padding: 1.5rem 2rem;
  }

  .info-table th {
    width: 20%;
  }

  .plan-card-inner {
    margin: 1.5rem 1rem;
  }

  .plan-btn {
    padding: 0.5rem 2rem;
  }

  .guest-introduce {
    gap: 3rem;
  }

  .copy {
    left: 5%;
  }

  .character {
    gap: 3rem;
  }

  .tab-copy-txt {
    width: max-content;
  }

  .illustrator {
    padding: 0 8rem;
  }

  .sec06 {
    margin-top: -5rem;
  }

  .route {
    gap: 3rem;
  }

  ul.route-list li:not(:last-child)::after {
    height: calc(100% + 2.5rem);
  }

  .wrapper {
    padding: 4rem 8rem 10rem 8rem;
  }

  .contents > li {
    padding:4.5rem 5rem;
  }

  ul.contents li.is-pink::before {
    top: 11rem;
  }

  ul.contents li.is-pink::after {
    left: -10rem;
  }

  ul.contents li.is-grey::before {
    top: 19rem;
  }

  .question-content {
    width: 90%;
  }

  .answer {
    padding: 2rem 8rem 2rem 4rem;
  }

  .ticket {
    padding: 3rem 5rem 10rem 5rem;
  }

  li.ticket-card {
    padding: 2rem 2rem 2.5rem 2rem;
  }

  .entry-btn {
    padding: 1.5rem 4.75rem;
  }

  ul.images-photo-list {
    padding: 3rem 5rem 3.5rem 5rem;
    gap: 2.5rem 2rem;
  }

  li.photo-card {
    flex: 0 0 calc((100% - 4rem) / 3);
  }

  ul.four-col {
    padding: 0rem 5rem 10rem 5rem;
    gap: 1.5rem;
  }

  .four-col li {
    flex: 0 0 calc((100% - 4.5rem) / 4);
  }

  .sec-footer-inner {
    padding: 0rem 5rem 10rem 5rem;
  }

  .sponsorship-cooperation {
    gap: 3rem;
  }
}

@media (min-width: 1025px) and (max-width: 1083px) {
  
  ul.ticket-card-list{
    gap: 1rem;
  }

  .contact-card-inner {
    margin: 2.5rem 5rem;
  }
}

@media screen and (min-width: 1500px) {
  
  .sec01-bg {
    background-position: center bottom;
    background-size: cover;
  }

  .sec03-bg {
    background-size: cover;
  }

  .sec05-bg {
    background-size: cover;
  }
}