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

  .pc-br {
    display: none;
  }

  .sp-br {
    display: inline;
  }

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

  h1.outline-text {
    font-size: 4rem;
  }

  h1.txt-q {
    font-size: 2rem;
  }

  h1.txt-a {
    font-size: 2rem;
  }

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

	h2.ttl-txt {
    font-size: 1.125rem;
  }

  h2.ttl-txt-24 {
    font-size: 1.5rem;
  }

  h2.ttl-txt-15 {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  h2.copy-txt {
    font-size: 1.5rem;
    padding: 0.5rem 0.75rem;
  }

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

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

  h2.highlight-txt {
    font-size: 1.75rem;
    letter-spacing: 0.05em;
  }

  h2.highlight-txt-b {
    font-size: 1.5rem;
  }

  h3.ttl-txt-c {
    font-size: 1.375rem;
  }

  h3.ttl-txt-c18 {
    font-size: 1.125rem;
  }

  p.ttl-txt-w {
    font-size: 1.125rem;
  }

  p.ttl-txt-b {
    font-size: 0.875rem;
    line-height: 1.7;
  }

  p.ttl-txt-bs {
    font-size: 1.125rem;
    text-align: center;
  }

  p.ttl-txt-bq {
    font-size: 1.125rem;
  }

  p.ttl-txt-bn {
    font-size: 1.5rem;
  }

  p.name-txt-b {
    font-size: 15px;
  }

  p.name-txt-bs {
    font-size: 1.125rem;
  }

  p.name-txt-c {
    font-size: 1rem;
  }

  p.txt-nml {
    font-size: 0.75rem;
  }

  p.txt-nml-b {
    font-size: 0.9rem;
  }

  p.txt-nml-c {
    font-size: 0.875rem;
  }

  p.nml-txt-c {
    font-size: 0.875rem;
  }

  p.txt-nml-w3 {
    font-size: 0.875rem;
  }

  p.txt-nml-sp15 {
    font-size: 15px;
  }

  p.txt-sp14 {
    font-size: 0.875rem;
  }

  span.sub-txt {
    font-size: 0.875rem;
  }

  span.min-txt {
    font-size: 0.75rem;
  }

  span.min-txt-b {
    font-size: 0.75rem;
  }

  span.min-txt-n {
    font-size: 0.875rem;
  }

  span.min-txt-n14 {
    font-size: 0.875rem;
  }

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

  .ttl-left-b {
    margin-left: 1rem;
  }

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

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

  .sp-txt-center {
    text-align: center;
  }

  .top-space {
    margin-top: 0.25rem;
  }

  .top-space-b {
    margin-top: 0;
  }

  .top-space-e {
    margin-top: 1.25rem;
  }

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

  .left-space-b {
    margin-left: 3rem;
  }

/* ----------------------------------------------------
    mv
---------------------------------------------------- */
  .pc-mv {
    display: none;
  }

  .sp-mv {
    display: inline;
    width: 100%;
    overflow: hidden;
  }

  .sp-mv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* ----------------------------------------------------
    sec01
---------------------------------------------------- */
  .sec01-bg {
    background-image: url("../images/sec01_back_sp.png");
    background-size: cover;
  }

  .sec01-inner {
    padding: 3.5rem 1.75rem 4rem 1.75rem;
    gap: 2.5rem;
  }

  p.sec01-txt {
    font-size: 15px;
    text-align: left;
  }

/* ----------------------------------------------------
    sec02
---------------------------------------------------- */
  .sec02-inner {
    padding: 0rem 1rem 5rem 1rem;
    gap: 2.5rem;
  }

  .info-table,
  .info-table tbody,
  .info-table tr {
    display: block;
    width: 100%;
  }

  .info-table {
    font-size: 15px;
    border: 1px solid #E73652;
  }

  .info-table th,
  .info-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #E73652;
  }

  .info-table th {
    text-align: center;
    padding: 1rem 0;
  }

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

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


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

  .sec03-inner {
    padding-top: 4rem;
  }

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

  .train-section::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .train-track {
    gap: 50rem;
    overflow: hidden;
    transform:none !important;
  }

  .train-set {
    width: 2268px;
    margin-left: 0rem;
    transform: none !important;
  }

  ul.train-card-list {
    width: 1914px;
    gap: 2rem;
    top: -4rem;
    left: 8%;
  }

  li.train-card {
    flex: 0 0 calc((100% - 8rem) / 5);
    min-height: 472px;
    gap: 1rem;
  }

  .train-txt {
    padding: 0 1rem 1.25rem 1rem;
  }

  .txt-gap {
    margin: 0.625rem 0 0.5rem 0;
  }

  .train-btn {
    /* display: none; */
    gap: 0.75rem;
    bottom:  11%;
  }

  .train-prev,
  .train-next {
    width: 50px;
    height: 50px;
  }

  .marquee {
    font-size: 5.5rem;
    letter-spacing: 1.43rem;
    top: -1rem;
  }
/* ----------------------------------------------------
    sec04
---------------------------------------------------- */
  .sec04-inner {
    padding: 4rem 1rem;
  }

  .copy {
    left: 1rem;
    padding-top: 2.5rem;
  }

  .guest-photo {
    width: 90%;
    min-width: 296px;
    max-width: 500px;
  }

  .guest-introduce {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-top: 4rem;
    padding-bottom: 0;
  }

  .guest-card {
    width: 100%;
  }

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

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

  .sec05-inner {
    padding: 4rem 1rem 0 1rem;
  }

  .character {
    flex-direction: column;
    gap: 1rem;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .sp-character-name {
    display: inline;
    text-align: center;
  }

  .character-photo {
    width: calc(100% - 4rem);
    max-width: 400px;
    max-height: 600px;
  }

  .character-name {
    display: none;
  }

  .character-messeage {
    margin-top: 1rem;
  }

  .txt-messeage {
    padding: 1.25rem;
  }

  .character-photo-spot {
    gap: 0.75rem;
    align-items: flex-end;
    padding-bottom: 14.375rem;
  }

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

  .photo-panel {
    width: 155px;
    height: 255px;
  }

  .illustrator {
    padding: 0rem 1.75rem 0 1rem;
  }

  .illustrator-back-card {
    transform: translate(12px,12px);
  }

  .illustrator-card-inner {
    margin: 1.75rem 0rem 2rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .profile {
    gap: 1rem;
  }
  
  .photo-circle {
    width: 80px;
  }

  .illustrator-introduce {
    gap: 0;
  }

  .profile-sentence {
    display: none;
  }

  .profile-sentence-sp {
    display: inline;
    padding: 0 1.5rem;
  }

/* ----------------------------------------------------
    sec06
---------------------------------------------------- */
  .sec06 {
    margin-top: -7rem;
  }

  .sec06-inner {
    padding: 0rem 1rem 5rem 1rem;
  }

  .route {
    flex-direction: column-reverse;
    gap: 2rem;
    padding-top: 2.5rem;
  }

  .route-map {
    width: 100%;
  }

  ul.route-list {
    gap: 2rem;
  }

  ul.route-list h3::before { 
    margin-right: 2rem;
  }

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

  ul.route-list li:nth-child(3)::before {
    top: 0.25rem;
    left: 5.5rem;
  }
/* ----------------------------------------------------
    sec07
---------------------------------------------------- */
  .sec07-inner {
    padding: 0 1rem;
  }

  .wrapper {
    padding: 2.5rem 0rem 5rem 0rem;
  }

  .nav {
    gap: 0.25rem;
  }

  .nav > li {
    font-size: 1.125rem;
    padding: 1.25rem 1rem;
  }

  .contents > li {
    padding: 2rem 1.5rem;
  }

  .schedule {
    gap: 0.25rem;
  }

  .schedule dt {
    font-size: 1.375rem;
    background-size: 100% 0.5rem;
  }

  .schedule dd {
    font-size: 15px;
  }

  ul.contents li.is-pink::before {
    width: 150px;
    height: 75px;
    top: 13%;
    right: -10%;
  }

  ul.contents li.is-pink::after {
    width: 170px;
    height: 100px;
    bottom: 16%;
    left: 65%;
  }

  ul.contents li.is-grey::before {
    width: 100px;
    height: 200px;
    right: -1%;
  }
/* ----------------------------------------------------
    sec08
---------------------------------------------------- */
  .sec08-inner {
    padding: 4rem 1rem;
  }

  .question::after {
    bottom: -3.25rem;
    right: 1.5rem;
  }

  ul.question-list {
    padding: 2.5rem 0 0 0;
    gap: 1rem;
  }

  .question-inner {
    padding: 1.25rem;
  }

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

  .accordion-button {
    width: 1.25rem;
    height: 1.25rem;
  }

  .accordion-button::before,
  .accordion-button::after {
    width: 1.25rem;
    height: 4px;
  }

  .accordion-content::before {
    right: 2rem;
  }

  .answer {
    padding: 1.25rem 3rem 1.25rem 1.25rem;
    gap: 0.5rem;
  }
/* ----------------------------------------------------
    sec09
---------------------------------------------------- */
  .sec09-inner {
    padding-top: 5rem;
  }

  .ticket {
    padding: 2.5rem 1rem 5rem 1rem;
  }

  .ticket-back {
    padding: 2rem 0rem;
  }

  ul.ticket-card-list {
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 1rem 2rem 1rem;
  }

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

  .ticket-details {
    gap: 0.5rem;
  }

  .ticket-details dt {
    font-size: 0.875rem;
  }

  .sec09-icon {
    width: 15px;
    height: 15px;
  }

  .lottery {
    top: -0.75rem;
    right: 0.75rem;
  }

  .lottery-right {
    right: 0.25rem;
  }

  .entry-btn {
    font-size: 1rem;
    padding: 1rem 4.2rem;
  }

  .participate {
    gap: 2rem;
    margin-bottom: 5rem;
    padding: 0rem 1.5rem;
  }

  .photo-area-map {
    padding: 4rem 1.5rem 5rem 1.5rem;
    gap: 2rem;
  }
/* ----------------------------------------------------
    sec10
---------------------------------------------------- */
  .sec10-inner {
    padding: 5rem 1rem;
  }

  ul.images-photo-list {
    padding: 2.5rem 0 0 0;
    gap: 0.75rem;
  }

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

  .modal-content {
    top: 45%;
    width: calc(100% - 2rem);
  }

  .modal-close {
    top: 105%;
    right: 43%;
  }
/* ----------------------------------------------------
    footer
---------------------------------------------------- */
  .sec-footer-inner {
    padding: 0rem 1rem;
  }

  .contact {
    width: 100%;
    flex-direction: column;
  }

  .contact-card {
    min-height: fit-content;
  }

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

  .telephone img {
    width: 1.875rem;
  }

  .sponsorship-cooperation {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 6.25rem;
  }

/* ----------------------------------------------------
    参加規約
---------------------------------------------------- */
  .terms-page {
    margin: 4rem 1rem 6rem 1rem;
  }

  h1.ttl-txt-t {
    font-size: 1.5rem;
  }

  h2.sub-ttl-txt {
    font-size: 1.25rem;
    margin-top: 2rem;
  }

  .cloakroom-card {
    padding: 1rem;
    gap: 1rem;
  }

  .cloakroom-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 15px;
  }

  .cloakroom-row {
    flex-direction: column;
  }

  .cloakroom-row dt {
    margin-left: 1rem;
  }

  .cloakroom-row dt::before {
    content: '⚫︎';
    position: absolute;
    left: 2rem;
    width: 2rem;
    height: 2rem;
  }

  .bottom-space {
    margin-bottom: 1rem;
  }

}

/* ----------------------------------------------------
    その他：スマホサイズ毎の調整
---------------------------------------------------- */
@media screen and (max-width: 384px) {

  h2.copy-txt {
    padding: 0.5rem;
  }

  .nav > li {
    padding: 1.25rem 0.5rem;
  }

  p.txt-nml-b {
    font-size: 0.85rem;
  }

  h2.highlight-txt {
    font-size: 1.6rem;
  }

  .ticket-details dt {
    width: 6rem;
  }
  
  .entry-btn {
    padding: 1rem 3.5rem;
  }

  p.txt-nml-w3 {
    font-size: 0.75rem;
  }

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

@media (min-width: 400px) and (max-width: 420px) {

  ul.contents li.is-pink::after {
    bottom: 16.5%;
    left: 68%;
  }

  ul.contents li.is-grey::before {
    top: 52%;
    right: 2%;
  }
}

@media (min-width: 421px) and (max-width: 450px) {

  ul.contents li.is-pink::after {
    bottom: 16%;
    left: 70%;
  }

  ul.contents li.is-grey::before {
    top: 52%;
    right: 2%;
  }
}

@media (min-width: 451px) and (max-width: 470px) {

  ul.contents li.is-pink::after {
    bottom: 15%;
    left: 73%;
  }

  ul.contents li.is-grey::before {
    top: 52%;
    right: 2%;
  }
}

@media (min-width: 471px) and (max-width: 500px) {

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

  ul.contents li.is-pink::after {
    bottom: 15%;
    left: 73%;
  }

  ul.contents li.is-grey::before {
    top: 52%;
    right: 2%;
  }
}

@media (min-width: 501px) and (max-width: 630px) {

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

  ul.contents li.is-pink::after {
    bottom: 13%;
    left: 73%;
  }

  ul.contents li.is-grey::before {
    top: 52%;
    right: 7%;
  }
}

@media (min-width: 631px) and (max-width: 767px) {

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

  ul.contents li.is-pink::after {
    bottom: 13%;
    left: 80%;
  }

  ul.contents li.is-grey::before {
    top: 46%;
    right: 7%;
  }
}