@charset "UTF-8";
/*************
FMT
*************/
.content_wrap {
  margin-top: 66px;
}

@media (min-width: 751px) {
  .content_wrap {
    margin-top: 90px;
  }
}
/*************
CONTENTS
*************/
html {
  font-size: clamp(13px, 1.7vw, 18px);
}
@media (max-width: 750px) {
  html {
    font-size: 4vw;
  }
}

body {
  font-size: 1rem;
}

main {
  overflow-x: hidden;
}

.fs13, .notes-list li, .btn_access {
  font-size: clamp(11px, 1.083vw, 13px);
  line-height: 1.8;
}
@media (max-width: 750px) {
  .fs13, .notes-list li, .btn_access {
    font-size: 2.8vw;
    line-height: 1.44;
  }
}

.fs18, .movie-box-bottom, .flow-card, .btn_notes {
  line-height: 1.8;
  font-size: clamp(13px, 1.7vw, 18px);
}
@media (max-width: 750px) {
  .fs18, .movie-box-bottom, .flow-card, .btn_notes {
    font-size: 3.7vw;
  }
}

.fs24, .outline-btn {
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.8;
}
@media (max-width: 750px) {
  .fs24, .outline-btn {
    font-size: 4.8vw;
    line-height: 1.6;
  }
}

.fs28 {
  font-size: clamp(18px, 2.333vw, 28px);
}
@media (max-width: 750px) {
  .fs28 {
    font-size: 6vw;
  }
}

.bold {
  font-weight: 800;
}

.col-w {
  color: white;
}

._flex {
  display: flex;
}

.container {
  width: calc(100% - 2.6666666667rem);
  max-width: 66.6666666667rem;
  padding-left: 1.3333333333rem;
  padding-right: 1.3333333333rem;
  margin-inline: auto;
}

.firstFadein {
  animation: fadein 3s forwards;
}

.kv {
  opacity: 0;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.zindex {
  position: relative;
  z-index: 0;
}

.js-fadein {
  opacity: 0;
  transform: translateY(15px);
}
@media (min-width: 751px) {
  .js-fadein {
    transform: translateY(20px);
  }
}
.js-fadein {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.kv-img {
  width: 100%;
  display: block;
}

.intro {
  position: relative;
  z-index: 5;
  padding: 2.5rem 0 0;
  overflow: hidden;
  width: 100%;
}
@media (max-width: 750px) {
  .intro {
    padding: 1.2rem 0 0;
  }
}

.intro-body {
  padding: 2rem 0 0;
  max-width: 66.6666666667rem;
  margin: auto;
  display: flex;
}
@media (min-width: 751px) {
  .intro-body {
    align-items: center;
    height: clamp(8rem, 24vw, 294px);
    justify-content: space-between;
  }
}
@media (max-width: 750px) {
  .intro-body {
    padding: 1.3rem;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (min-width: 751px) {
  .intro-logo {
    max-width: clamp(10rem, 53vw, 680px);
  }
}
.intro-logo .image {
  max-width: 25.5555555556rem;
}
@media (max-width: 750px) {
  .intro-logo .image {
    width: 61vw;
  }
}
.intro-logo p {
  margin-top: 1em;
  padding-bottom: 1em;
}

.intro-train {
  position: relative;
  width: clamp(6rem, 43vw, 530px);
}
@media (min-width: 751px) {
  .intro-train {
    height: 100%;
  }
}
@media (max-width: 750px) {
  .intro-train {
    width: 58vw;
  }
}
.intro-train .image {
  display: block;
  margin: 0 auto -2rem;
}
@media (min-width: 751px) {
  .intro-train .image {
    position: absolute;
    z-index: 5;
    right: -5rem;
    top: -4.1rem;
    bottom: -2rem;
  }
}

.loop-slider {
  width: 100%;
  overflow: hidden;
}

.loop-slider-track {
  display: flex;
  gap: 1rem;
  width: -moz-max-content;
  width: max-content;
  animation: infinite-banner 40s linear infinite;
}

.intro-title {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 750px) {
  .intro-title {
    height: 2.5rem;
  }
}

@keyframes infinite-banner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.anchor-links {
  background: black;
  border-bottom: 0.2222222222rem solid #ed6c00;
  position: relative;
  z-index: -1;
}
@media (min-width: 751px) {
  .anchor-links {
    padding: 2.2222222222rem 0 1.5555555556rem;
  }
}
@media (max-width: 750px) {
  .anchor-links {
    padding-top: 0.5rem;
  }
}

.anchor-grid {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: center;
}
.anchor-grid a:hover {
  opacity: 0.7;
}
@media (max-width: 750px) {
  .anchor-grid {
    flex-wrap: wrap;
  }
}

.bg-check {
  background-color: #e9e6dc;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0.0555555556rem, transparent 0.0555555556rem), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0.0555555556rem, transparent 0.0555555556rem);
  background-size: 1.8888888889rem 1.8888888889rem;
}
@media (max-width: 750px) {
  .bg-check {
    background-size: 5vw 5vw;
  }
}

.section {
  position: relative;
  padding: 6.1111111111rem 0 5.5555555556rem;
  background-color: #e9e6dc;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0.0555555556rem, transparent 0.0555555556rem), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0.0555555556rem, transparent 0.0555555556rem);
  background-size: 1.8888888889rem 1.8888888889rem;
  border-bottom: 0.0555555556rem solid black;
}
@media (max-width: 750px) {
  .section {
    padding: 3rem 0;
    background-size: 5vw 5vw;
  }
}

.section-drama,
.section-sns,
.section-spot,
.section-goods {
  position: relative;
}
.section-drama::before,
.section-sns::before,
.section-spot::before,
.section-goods::before {
  content: "";
  height: min(20vw, 16.1111111111rem);
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}
@media (max-width: 750px) {
  .section-drama::before,
  .section-sns::before,
  .section-spot::before,
  .section-goods::before {
    height: 24vw;
  }
}

.section-drama::before {
  background: url(../img/01.webp) top right/contain no-repeat;
}

.section-sns {
  background-color: #f0efe9;
}
.section-sns::before {
  background: url(../img/02.webp) top right/contain no-repeat;
}

.section-spot::before {
  background: url(../img/03.webp) top right/contain no-repeat;
}

.section-goods {
  background-color: #f0efe9;
}
.section-goods::before {
  background: url(../img/04.webp) top right/contain no-repeat;
}

.title-img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 66.6666666667rem;
  margin: 0 auto;
}
@media (min-width: 751px) {
  .title-img {
    margin: 0 auto -2.5rem;
  }
}

.lead {
  position: relative;
  z-index: 1;
  margin: 1em auto;
  font-weight: 500;
  line-height: 2;
}
@media (max-width: 750px) {
  .lead {
    line-height: 1.74;
  }
}

.drama-cards {
  margin: 1rem auto 0;
}
@media (min-width: 751px) {
  .drama-cards {
    margin: 2.4rem auto -3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2222222222rem;
    align-items: stretch;
  }
}
.drama-cards img {
  display: block;
  margin-bottom: 1.5rem;
}

.drama-listen {
  text-align: center;
  margin-bottom: 2rem;
}
.drama-listen h3 {
  padding-top: 3rem;
  padding-bottom: 2rem;
  text-align: center;
}
@media (max-width: 750px) {
  .drama-listen h3 {
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
}
.drama-listen h3 img {
  width: 20rem;
}
@media (max-width: 750px) {
  .drama-listen h3 img {
    width: 39vw;
  }
}

.sns-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1111111111rem 2.2222222222rem;
  padding-top: 0;
  margin: -4.4444444444rem auto 0.5555555556rem;
}
@media (max-width: 750px) {
  .sns-cards {
    display: block;
  }
  .sns-cards li {
    margin-bottom: 1rem;
  }
}

.dot-panel,
.orange-panel,
.yellow-panel {
  max-width: 88.8888888889rem;
  margin: auto;
}

.orange-panel {
  margin-top: 5.5555555556rem;
  padding: 0.0555555556rem 0 4.4444444444rem 0;
  background: url(../img/bg_orange.png);
  border-radius: 3.3333333333rem 3.3333333333rem 0 0;
  position: relative;
  z-index: 0;
}
@media (max-width: 750px) {
  .orange-panel {
    border-radius: 8vw 8vw 0 0;
    margin-top: 11vw;
    padding: 1px 0 2rem;
  }
}

.yellow-panel {
  background: url(../img/bg_yellow.png);
  border-radius: 0 0 3.3333333333rem 3.3333333333rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 750px) {
  .yellow-panel {
    border-radius: 0 0 8vw 8vw;
  }
}

.dot-panel {
  background: url(../img/bg_dot.png);
  border-radius: 1.6666666667rem;
}

.character-row {
  position: relative;
}
@media (min-width: 751px) {
  .character-row {
    display: flex;
    justify-content: space-between;
  }
}

.label {
  font-weight: 500;
  font-size: 1.1111111111rem;
  background: #ed6c00;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  margin: 0 auto 1em 0;
}
@media (min-width: 751px) {
  .label {
    width: 7em;
    height: 7em;
    border-radius: 50%;
    aspect-ratio: 1/1;
  }
}
@media (max-width: 750px) {
  .label {
    padding: 0.5em 1em;
    border-radius: 2em;
    display: block;
    margin: 2rem auto 0;
    width: 100%;
    text-align: center;
  }
}

.character {
  width: min(var(--img-width), 43vw);
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  z-index: 10;
}

#chara01 {
  --img-width: 12.6666666667rem;
  top: 0.5555555556rem;
  left: 0;
}

#chara02 {
  --img-width: 10.3333333333rem;
  top: -0.5555555556rem;
  right: 0;
}

#chara03 {
  --img-width: 10.2222222222rem;
  top: -2.7777777778rem;
  right: 8vw;
}

#chara04 {
  --img-width: 11.8333333333rem;
  top: 4.2222222222rem;
  left: 0;
}

#chara05 {
  --img-width: 15.2777777778rem;
  top: 2.0555555556rem;
  right: 0;
}

#chara06 {
  --img-width: 11.9444444444rem;
  top: -2.2222222222rem;
  right: 7rem;
}

#chara01-sp {
  margin: 1.3rem auto -2rem;
}

#chara03-sp {
  --img-width: 16.7777777778rem;
  right: 0;
  bottom: -1rem;
}

#chara04-sp {
  margin: 1rem auto -2rem;
}

#chara06-sp {
  width: 45vw;
  right: 0;
  bottom: -1rem;
}

.btn_access {
  text-decoration: none;
  background: black;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 0.5em 2.5em 0.5em 1.1em;
  border-radius: 2em;
  position: relative;
  white-space: nowrap;
  vertical-align: 5%;
}
@media (max-width: 750px) {
  .btn_access {
    display: inline-block;
    margin: 0.7rem auto 0.3rem;
  }
}
.btn_access:after {
  content: url(../img/icon_acc.svg);
  display: inline-block;
  width: 1em;
  position: absolute;
  right: 9%;
  top: 21%;
}
.btn_access:hover {
  opacity: 0.7;
}

.qr {
  width: 11.1111111111rem;
}

.container-top {
  margin-top: -3.3333333333rem;
}

#drama .orange-panel {
  padding: 2.2222222222rem 0;
}

#sns .orange-panel {
  margin-top: 7.2222222222rem;
  padding-bottom: 1.6666666667rem;
}

#spot .orange-panel {
  padding-bottom: 1.6666666667rem;
}
#spot .spot-main {
  margin-top: -2.7777777778rem;
  margin-bottom: 2.7777777778rem;
}
@media (max-width: 750px) {
  #spot .spot-main {
    margin-bottom: 0;
  }
}
@media (max-width: 750px) {
  #spot .lead {
    margin-bottom: 4rem;
  }
}

@media (max-width: 750px) {
  #goods .lead {
    margin-bottom: 5rem;
  }
}

@media (max-width: 750px) {
  .inc_notes {
    margin-top: 3rem;
  }
}

.notes-box {
  margin: 3.3333333333rem auto 2.7777777778rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 34rem;
  width: 100%;
}
.notes-box p {
  margin: 0.5em auto;
}
.notes-box.wide {
  width: 100%;
  margin: auto;
}
@media (min-width: 751px) {
  .notes-box.wide {
    max-width: clamp(400px, 61vw, 820px);
    margin: 3.3333333333rem auto 3.3333333333rem 0;
  }
}
@media (max-width: 750px) {
  .notes-box.wide {
    padding-bottom: 2rem;
  }
}

.place {
  font-weight: 500;
}

.shedule {
  border-top: 0.0555555556rem solid black;
  margin: 1em 0;
  padding-top: 1em;
  line-height: 2;
  width: 100%;
}
@media (max-width: 750px) {
  .shedule {
    line-height: 1.8;
  }
  .shedule small {
    display: block;
    line-height: 1.44;
  }
}

.title-listen {
  display: block;
  width: 13.3333333333rem;
}

.text-card {
  position: relative;
  margin: 3.8rem auto 0;
  padding: 3.3333333333rem 2.2222222222rem 2.2222222222rem;
  border-radius: 1.6666666667rem;
  background: #fbf9f0;
}
@media (max-width: 750px) {
  .text-card {
    margin: 3rem auto 0;
    padding: 2.4rem 1rem 2rem;
    border-radius: 1rem;
  }
}
.text-card p {
  font-size: 0.7222222222rem;
}
.text-card a {
  color: #ed6d00;
  text-decoration: underline;
}
.text-card.is-close {
  padding-bottom: 0;
  padding-top: 0;
}

.btn_notes {
  font-weight: 500;
  margin: auto;
  text-align: center;
  background: black;
  color: white;
  padding: 0.5em;
  border-radius: 3em;
  width: 16.6666666667rem;
  position: absolute;
  cursor: pointer;
  top: -1.42em;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 750px) {
  .btn_notes {
    padding: 0.3em;
    width: 12rem;
    top: -1.2em;
  }
}
.btn_notes:after {
  content: "－";
  position: absolute;
  right: 1.5em;
}

.notes-wrap.is-close .btn_notes::after {
  content: "＋";
}

.notes-list li {
  line-height: 2.2;
  padding-left: 1em;
  text-indent: -1em;
}
@media (max-width: 750px) {
  .notes-list li {
    line-height: 1.44;
  }
}

.text-area .notes-list li {
  line-height: 1.8;
}

.pc-center {
  margin: 1.5rem auto 0;
}
@media (min-width: 751px) {
  .pc-center {
    width: -moz-max-content;
    width: max-content;
    text-align: center;
  }
}

.text-area {
  margin: 3.3333333333rem auto 0 auto;
}
@media (max-width: 750px) {
  .text-area {
    margin: 2rem auto 0;
  }
}

.center {
  text-align: center;
}

.single {
  justify-self: center;
}

.flow {
  position: relative;
}
.flow ._flex {
  justify-content: center;
  margin: auto;
}
@media (min-width: 751px) {
  .flow ._flex {
    flex-wrap: wrap;
  }
}
@media (max-width: 750px) {
  .flow ._flex {
    gap: 1rem;
    align-items: flex-start;
  }
}

.dot-panel.flow {
  margin-top: 4.6666666667rem;
  padding: 3.3333333333rem 0.5555555556rem 0.5555555556rem;
}
@media (max-width: 750px) {
  .dot-panel.flow {
    padding: 3rem 4vw 0;
  }
}
.dot-panel.flow.is-close {
  padding-bottom: 0;
  padding-top: 0;
}

.btn_notes + * {
  max-height: 5000px;
  opacity: 1;
}
@media (min-width: 751px) {
  .btn_notes + * {
    max-height: 2000px;
  }
}

.notes-wrap.is-close .btn_notes + * {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
}

.flow-img {
  max-width: 48.8888888889rem;
  width: 86%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 750px) {
  .flow-img {
    max-width: 12rem;
    width: 28vw;
  }
}

.flow-card {
  font-weight: 500;
}
@media (max-width: 750px) {
  .flow-card {
    width: 16rem;
  }
}
@media (min-width: 751px) {
  .flow-card {
    margin: 1.1111111111rem auto;
    text-align: center;
    width: 100%;
    max-width: 57.6666666667rem;
    display: flex;
    justify-content: center;
    gap: 3%;
  }
}
@media (min-width: 751px) {
  .flow-card li {
    width: 33.3%;
  }
}
@media (max-width: 750px) {
  .flow-card li {
    max-height: 11rem;
    height: 38vw;
  }
  .flow-card li:nth-child(2) {
    margin-top: 0;
    margin-bottom: 15vw;
  }
}
.flow-card li span {
  color: #f67800;
  font-weight: 900;
}
.flow-card li p {
  line-height: 1.8;
  margin: 0.3333333333rem 0 0;
}
.flow-card li p small {
  font-size: 76%;
  display: inline-block;
  line-height: 1.6;
}

.piyorin {
  margin-top: 5rem;
  margin-bottom: 4.4444444444rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 750px) {
  .piyorin {
    margin-top: 3rem;
  }
}
.piyorin .pc-center {
  font-weight: 500;
}
.piyorin h3 {
  text-align: center;
  margin-bottom: 1.1111111111rem;
}
.piyorin h3 img {
  width: auto;
}

.dera {
  position: relative;
  padding: 3.2222222222rem 0 0;
  background: #e9e6dc;
  text-align: center;
}

@media (min-width: 751px) {
  .dera-title {
    width: min(34.4444444444rem, 100%);
  }
}

.movie-box {
  max-width: 55.5555555556rem;
  width: 96%;
  margin: 1.6666666667rem auto 1.1111111111rem;
}

.movie-box-top {
  border-radius: 1.6666666667rem 1.6666666667rem 0 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 750px) {
  .movie-box-top {
    border-radius: 1rem 1rem 0 0;
  }
}

.movie-box-bottom {
  border-radius: 0 0 1.6666666667rem 1.6666666667rem;
  background: black;
  padding: 1em;
  color: white;
  text-align: center;
  font-weight: 500;
  margin-bottom: 1rem;
}
@media (max-width: 750px) {
  .movie-box-bottom {
    border-radius: 0 0 1rem 1rem;
  }
}

.train-line-wrap {
  position: relative;
  z-index: 2;
  height: 0;
}

.train-line {
  z-index: 2;
  position: absolute;
  right: 0;
  top: -7.3333333333rem;
  width: 63%;
  max-width: 782px;
}
@media (max-width: 750px) {
  .train-line {
    top: -18vw;
    width: 100%;
    right: -19vw;
  }
}

.deramas-wrap {
  position: relative;
  z-index: 1;
  padding: 6.3333333333rem 0 3.1111111111rem;
  background: #0072ce url("../img/dera_bg.webp") center/cover no-repeat;
}
@media (max-width: 750px) {
  .deramas-wrap {
    padding: 3rem 0;
    background: #0072ce url("../img/dera_bg_sp.webp") center/cover no-repeat;
  }
}

.banner-area {
  text-align: center;
  display: flex;
  justify-content: space-between;
  margin: auto auto 1.6666666667rem;
  gap: 1.1111111111rem;
}
@media (max-width: 750px) {
  .banner-area {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.dera-image {
  max-width: 647px;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 647/364;
}
@media (min-width: 751px) {
  .dera-image {
    width: 55%;
  }
}

.outline-btn {
  margin: 2.7777777778rem auto 0.5555555556rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.2222222222rem;
  height: 3.8888888889rem;
  color: white;
  border: 0.1111111111rem solid white;
  border-radius: 3em;
  font-weight: 800;
  transition: all 0.4s;
}
@media (max-width: 750px) {
  .outline-btn {
    width: 95%;
    height: 3rem;
    margin: 2rem auto 0.6rem;
  }
}
.outline-btn:hover {
  background-color: white;
  color: #0072ce;
}

.indent-1 {
  padding-left: 1em;
  text-indent: -1em;
}

li.indent-2 {
  padding-left: 3em;
  text-indent: -2em;
}

/*その他の推し旅プラン*/
.info_wrap {
  margin: 0 auto;
  padding: 8px 40px 20px;
  position: relative;
  background-color: #fff;
}

.oshitabi_btn {
  display: block;
  border: 4px solid #000;
  background-color: #fff;
  max-width: 740px;
  margin: 32px auto 0;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  border-radius: 10px;
  position: relative;
  padding: 10px 30px 10px 5px;
  font-size: 18px;
  transition: all 0.3s;
}

.oshitabi_btn:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  height: 12px;
  width: 12px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}

.oshitabi_btn:hover {
  background-color: #ed6c00;
  color: #fff;
  border: 4px solid #ed6c00;
}

.oshitabi_btn:hover::after {
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

.credit {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
}

.footer_container {
  position: relative;
  z-index: 100;
  background-color: #fff;
  padding-top: 1px;
}

@media (min-width: 751px) {
  .info_wrap {
    margin: 0 auto;
    padding: 8px 20px 100px;
  }
  .oshitabi_btn {
    padding: 15px;
    font-size: 20px;
  }
}
/*************
footer
*************/
.footer_container {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif";
  font-size: 16px;
  color: #000;
  line-height: 1.5;
  font-weight: 400;
  position: relative;
  z-index: 100;
  background-color: #fff;
  padding-top: 1px;
}

/*************
メディアクエリ
*************/
@media (min-width: 751px) {
  .sp {
    display: none;
  }
}
@media (max-width: 750px) {
  .pc {
    display: none;
  }
}