@charset "UTF-8";

.header {
   background: var(--default-color-section-color-orange, #FF7B00);
}

/* ===========================================================
   mv
   =========================================================== */
.mv {
   position: relative;
   z-index: 1;
   text-align: center;
   background: var(--default-color-section-color-orange, #FF7B00);
}


.mv__catch {
   color: #FFF;
   text-align: center;
   font-size: calc(24 * var(--u));
   font-weight: 800;
   line-height: 150%;
   letter-spacing: calc(9.6 * var(--u));
   margin-bottom: calc(40 * var(--u));
}

.mv__image {
   position: relative;
}

/* 7枚の写真を自動でループ再生（Splide + Auto Scroll拡張。assets/common/js/mv-slider.js） */
.mv__slider {
   overflow: hidden;
   margin-bottom: calc(40 * var(--u));
}

.mv__slider-image {
   width: calc(240 * var(--u));
   aspect-ratio: 3 / 5;
   object-fit: cover;
}

.mv__marquee--first {
   margin-bottom: calc(40 * var(--u));
}

.mv__body {
   padding-bottom: calc(80 * var(--u));
}

.mv__title {
   margin-bottom: calc(40 * var(--u));
   text-align: center;
}

.mv__title-image {
   filter: invert(100%);
}

.mv__description {
   text-align: center;
}

.mv__description-text {
   font-size: calc(16 * var(--u));
   font-weight: 800;
   line-height: 150%;
}

.mv__description-text:not(:last-child) {
   margin-bottom: 1em;
}

.mv__character-suu {
   position: absolute;
   bottom: 0;
   right: calc(32 * var(--u));
   z-index: 1;
   width: calc(154 * var(--u));
   height: auto;
}

.mv__character-bibi {
   position: absolute;
   bottom: calc(20 * var(--u));
   right: 0;
}

/* ===========================================================
   topics
   =========================================================== */
.topics {
   position: relative;
   z-index: 2;
   border-bottom: 2px solid #000;
   background: url(/assets/common/images/bg_pattern_dot.png) 0% 0% / calc(100 * var(--u)) calc(100 * var(--u)) repeat, #00A5C1;
   background-size: auto;
}

/* 装飾用の要素をtopics__innerとは別に用意し、その中の::beforeを追従させる */
.topics__decoration {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   pointer-events: none;overflow: clip;
}

.topics__decoration::before {
   content: "";
   display: block;
   position: sticky;
   top: 0;
   width: calc(380 * var(--u));
   height: calc(390 * var(--u));
   background: url(/assets/common/images/character/suu_bg.svg) no-repeat top left;
   background-size: contain;
}

.topics__inner {
   position: relative;
   z-index: 2;
   padding: calc(40 * var(--u)) 0 calc(80 * var(--u)) 0;
}

.topics__title {
   margin-bottom: calc(40 * var(--u));
   text-align: center;
}

.topics__title-image {
   height: calc(80 * var(--u));
   aspect-ratio: 15/8;
   filter: invert(100%);
}

.topics__item {
   width: 100%;
   max-width: calc(300 * var(--u));
   box-sizing: border-box;
   border-radius: calc(16 * var(--u));
   border: calc(2 * var(--u)) solid #000;
   background: #FFF;
   overflow: hidden;

   box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 calc(4 * var(--u)) #000;
   margin: auto;
   margin-bottom: calc(40 * var(--u));
}

.topics__item-body {
   padding: calc(16 * var(--u));
}

.topics__item-title {
   color: #000;
   text-align: center;
   font-size: calc(20 * var(--u));
   font-weight: 800;
   line-height: 130%;
   margin-bottom: calc(16 * var(--u));
}

.topics__item-text {
   color: #000;
   font-size: calc(16 * var(--u));
   font-weight: 400;
   line-height: 150%;
   margin-bottom: calc(16 * var(--u));
}

.topics__item-action {
   text-align: center;
}

/* ===========================================================
   plan
   =========================================================== */

/* ボタン */
.plan__action-title {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: calc(16 * var(--u));
   color: #2C2A29;
   font-size: calc(24 * var(--u));
   font-weight: 800;
   line-height: 110%;
   margin-bottom: calc(16 * var(--u));
}

.plan__action-title::before,
.plan__action-title::after {
   content: "";
   display: inline-block;
   width: calc(3 * var(--u));
   height: 1em;
   border-radius: 999px;
   background: currentColor;
}

.plan__action-title::before {
   transform: rotate(-25deg);
}

.plan__action-title::after {
   transform: rotate(25deg);
}

.plan__action-list {
   width: calc(335 * var(--u));
   margin: auto;
}

.plan__action:not(:last-child) {
   margin-bottom: calc(24 * var(--u));
}

.plan__button {
   width: 100%;
}

.plan__button--pc {
   display: none;
}

.plan__button--sp {
   display: block;
}

@media (min-width: 781px) {
   .plan__button--pc {
      display: block;
   }

   .plan__button--sp {
      display: none;
   }

}

/* ===========================================================
   campaign
   =========================================================== */
.campaign {
   position: relative;
   z-index: 3;
   border-bottom: 2px solid #000;
   background: url(/assets/common/images/bg_pattern_dot.png) 0% 0% / calc(100 * var(--u)) calc(100 * var(--u)) repeat, var(--default-color-section-color-lightOrange, #F9AB08);
   background-size: auto;
}

.campaign__decoration {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   pointer-events: none;overflow: clip;
}

.campaign__decoration::before {
   content: "";
   display: block;
   position: sticky;
   top: 0;
   width: calc(380 * var(--u));
   height: calc(390 * var(--u));
   background: url(/assets/common/images/character/suu_bg.svg) no-repeat top left;
   background-size: contain;
}

.campaign__character {
   position: absolute;
   top: calc(-50 * var(--u));
   right: 0;
}

.campaign__inner {
   padding: calc(40 * var(--u)) 0 calc(80 * var(--u)) 0;
   position: relative;
   z-index: 2;
}

.campaign__title {
   margin-bottom: calc(40 * var(--u));
   text-align: center;
}

.campaign__title-image {
   height: calc(80 * var(--u));
   aspect-ratio: 7/2;
   filter: invert(100%);
}

.campaign__item {
   width: 100%;
   max-width: calc(300 * var(--u));
   box-sizing: border-box;
   border-radius: calc(16 * var(--u));
   border: calc(2 * var(--u)) solid #000;
   background: #FFF;
   overflow: hidden;

   box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 calc(4 * var(--u)) #000;
   margin: auto;
   margin-bottom: calc(40 * var(--u));

   padding: calc(16 * var(--u));
}

.campaign__item-title {
   color: #000;
   text-align: center;
   font-size: calc(20 * var(--u));
   font-weight: 800;
   line-height: 130%;
   margin-bottom: calc(16 * var(--u));
}

.campaign__item-description p+.campaign__item-description p {
   margin-bottom: calc(16 * var(--u));
}

.campaign__item-text,
.campaign__item-note {
   color: #000;
   font-size: calc(16 * var(--u));
   font-weight: 400;
   line-height: 150%;
   margin-top: calc(16 * var(--u));
}

/* 2行目以降のnoteは詰めて、note同士の間には余白を空けない */

.campaign__item-text~.campaign__item-text,
.campaign__item-note~.campaign__item-note {
   margin-top: calc(16 * var(--u));
}

.campaign__item-attention {
   color: #000;
   font-weight: 400;
   line-height: 150%;
   font-size: calc(12 * var(--u));
   margin-top: calc(16 * var(--u));
}
span.campaign__item-attention{
    display: inline-block;
}

.campaign__item-action {
   text-align: center;
   margin-top: calc(16 * var(--u));
}


/* ===========================================================
   character
   --character-color に現在のキャラクターの色が入る
   =========================================================== */
/* 背景色は character.js が --character-color を書き換える
   transition があるので、切替のたびにふわっと色が変わる */
.character {
   position: relative;
   z-index: 5;
   background-color: var(--character-color, #FF7B00);
   transition: background-color .6s ease;
}

.character__inner {
   padding: calc(40 * var(--u)) 0 calc(80 * var(--u)) 0;
}

.character__title {
   margin-bottom: calc(40 * var(--u));
   text-align: center;
}

.character__title-image {
   height: calc(80 * var(--u));
   aspect-ratio: 93/26;
   filter: invert(100%);
}

.character__lead {
   color: #FFF;
   text-align: center;
   font-size: calc(16 * var(--u));
   font-weight: 800;
   line-height: 150%;
   margin-bottom: calc(12 * var(--u));
}

.character__lead-text:not(:last-child) {
   margin-bottom: 1em;
}

/* キャラコンテンツ（character.js が生成） */
.character__slider {
   width: calc(320 * var(--u));
   margin: auto;
}

.character__stage {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: calc(8 * var(--u));
   margin-bottom: calc(32 * var(--u));
}

.character__figure {
   padding-top: calc(20 * var(--u));
   text-align: center;
}

.character__image {
   display: inline-block;
   width: calc(200 * var(--u));
   height: auto;
}

/* 名前と旅タイプは、そのキャラクターの色（character.js の color）と連動 */
.character__body {
   padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
   border-radius: calc(24 * var(--u));
   background: #FFF;
   color: #000;
   margin: auto;
}

.character__name {
   color: var(--character-color);
   text-align: center;
   font-size: calc(40 * var(--u));
   font-weight: 800;
   line-height: calc(34 * var(--u));
   margin-bottom: calc(10 * var(--u));
}

.character__birthday {
   text-align: center;
   font-size: calc(12 * var(--u));
   color: #9A9A9A;
   font-weight: 800;
   line-height: 130%;
   margin-bottom: calc(8 * var(--u));
}

.character__personality {
   font-size: calc(16 * var(--u));
   font-weight: 800;
   line-height: 150%;
   margin-bottom: calc(16 * var(--u));
}

.character__profile {
   display: grid;
   gap: calc(8 * var(--u));
   border-top: calc(2 * var(--u)) dotted #DBDBDB;
   margin-top: calc(16 * var(--u));
   padding-top: calc(16 * var(--u));
}

.character__profile-row {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: calc(8 * var(--u));
}

.character__profile-row:not(:last-child) {
   margin-bottom: calc(8 * var(--u));
}

.character__profile-label {
   font-size: calc(14 * var(--u));
   font-weight: 800;
   line-height: 150%;
   white-space: nowrap;
   display: block;
   background-color: var(--character-color);
   color: #fff;
   padding: 0 calc(8 * var(--u));
   border-radius: calc(8 * var(--u));
}

.character__profile-data {
   font-size: calc(14 * var(--u));
   font-weight: 800;
   line-height: 150%;
}

.character__profile-data--type {
   color: var(--character-color);
   font-weight: 800;
   letter-spacing: -0.05em;
}

/* 切替ナビ */
.character__button {
   flex: 0 0 auto;
   width: calc(40 * var(--u));
   height: calc(40 * var(--u));
}

.character__button:disabled {
   visibility: hidden;
}

/* 切替ナビ（ページネーションはSplideが自動生成） */
.character__slider .splide__pagination {
   gap: calc(8 * var(--u));
   margin-top: calc(16 * var(--u));
   position: relative;
}

.character__slider .splide__pagination__page {
   width: calc(8 * var(--u));
   height: calc(8 * var(--u));
   border: 0;
   padding: 0;
   border-radius: 50%;
   background: #fff;
   opacity: 1;
}
.splide__pagination__page:hover{
    transform: none;
}

.character__slider .splide__pagination__page.is-active {
   width: calc(20 * var(--u));
   height: calc(8 * var(--u));
   border-radius: 999px;
}

/* キャラ切替時のバウンド（character.js がクラスを付け外しする） */
.character-bounce {
   animation: character-bounce .6s ease-out;
}

@keyframes character-bounce {
   0% {
      transform: translateY(0);
   }

   30% {
      transform: translateY(calc(-20 * var(--u)));
   }

   55% {
      transform: translateY(0);
   }

   75% {
      transform: translateY(calc(-8 * var(--u)));
   }

   100% {
      transform: translateY(0);
   }
}