@charset "UTF-8";

/* ===========================================================
   common.css
   reset.css の後、top.css の前に読み込む
   全ページ共通のレイアウトと共通ブロックを定義する
   =========================================================== */

:root {
    /* 全体 */
    --site-max: 1920px;
    --col-left: 1058;
    --col-right: 862;
    --content-width: 500px;
    --frame-space: 40px;

    /* 色 */
    --default-color-section-color-white: #FFf;
    --default-color-section-color-blue: #00A5C1;
    --default-color-section-color-lightOrange: #F9AB08;
    --default-color-section-color-orange: #FF7B00;
    --default-color-section-color-yellow: #FFEA00;
    --color-bg:  #FF7B00;
    --color-sidebar-link: #00A5C1;
    --color-current: #E64290;

    /* フォント */
    --default-font-family-main: "Noto Sans JP", sans-serif;
    --default-font-family-m-plus: "M PLUS Rounded 1c", sans-serif;

    /* 拡大の基準単位
     デザイン（500px幅）の 1px にあたる長さ
     使い方： font-size: calc(24 * var(--u));
     781px以上と500px以下は 1px 固定、501〜780pxだけ画面幅に比例して拡大 */
    --u: 1px;
}

/* 501〜780px：500pxデザインを画面幅に比例して拡大
   0.2vw = 100vw / 500 なので、画面幅500pxのときちょうど1pxになる */
@media (min-width: 501px) and (max-width: 780px) {
    :root {
        --u: 0.2vw;
    }
}

html,
body {
    min-height: 100%;
    font-family: var(--default-font-family-m-plus);
}

body {
    overflow-x: hidden;
    background-color: var(--color-bg);
    background-attachment: fixed;
}
img{
    vertical-align: bottom;
}
a{
    display: inline-block;
}
/* ===========================================================
   レイアウト
   -----------------------------------------------------------
   .column
   ├ .left_column  … sidebar（中の500pxは中央揃え）
   └ .right_column … wrapper（中の500pxは左揃え）
   =========================================================== */

.column {
    display: grid;
    grid-template-columns: 1fr;
    margin-inline: auto;
    width: 100%;
    max-width: var(--site-max);
}

.right_column {
    min-width: 0;
    color: #FFF;
}

.wrapper {
    width: var(--content-width);
    min-height: 100vh;
}

.left_column {
    display: none;
}


/* 1000px以上：sidebarを表示 */
@media (min-width: 1000px) {
    .left_column {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100dvh;
    }

    .sidebar {
        width: var(--content-width);
        position: fixed;
    }
}

/* 1201px以上：1058 : 862 の2カラム */
@media (min-width: 1201px) {
    .column {
        grid-template-columns: 1058fr 862fr;
    }

}

/* 1200〜1000px：均等2カラム */
@media (max-width: 1200px) and (min-width: 1000px) {
    .column {
        grid-template-columns: 1fr 1fr;
    }
}

/* 999px以下：1カラム。コンテンツは中央寄せ */
@media (max-width: 999px) {
    .wrapper {
        width: 100%;
        max-width: var(--content-width);
        padding-inline: 0;
    }

    .right_column {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media(min-width: 781px) {
    .wrapper {
        box-shadow: 0 0 0 4px #fff;
    }
}

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

    .wrapper {
        max-width: 100%;
    }
}


/* ===========================================================
   共通ブロック
   =========================================================== */

/* リンクは全て共通で、マウスなどホバーできる環境でだけ少し浮き上がる */
@media (hover: hover) and (pointer: fine) {

    a,
    button {
        transition: transform .2s ease;
    }

    a:hover,
    button:hover {
        transform: translateY(-5px);
    }
}

/* === ボタン === */
.button-gradation {
    display: inline-block;
    min-width: calc(204 * var(--u));
    border-radius: 999px;
    background: linear-gradient(90deg, #E64290 0%, #EF821D 100%);
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    color: #FFF;
    text-align: center;

    font-size: calc(16 * var(--u));
    font-weight: 800;
    line-height: 130%;
}

.button-gradation.__big-button {
    min-height: calc(64 * var(--u));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === 文字 === */

.text-bluecolor {
    color: #1558D6;
}

.text-redcolor {
    color: #FF0004;
}

/* ===========================================================
   marquee（装飾：流れる文字・流れる画像）
   =========================================================== */
.marquee {
    overflow: hidden;
}

.marquee__inner {
    display: flex;
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    height: 100%;
    /* ループの継ぎ目でコンポジットレイヤーが組み直されて一瞬ちらつくのを防ぐ */
    will-change: transform;
}

.marquee__image {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: none;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* 動きを減らす設定のときは止める */
@media (prefers-reduced-motion: reduce) {
    .marquee__inner {
        animation: none;
    }
}


/* ===========================================================
   sidebar（PCのみ表示）
   =========================================================== */

.sidebar__logo-link {
    display: block;
    text-align: center;
    margin-bottom: 48px;
}

.sidebar__list {
    padding: 40px;
    border-radius: 24px;
    background: #FFF;
    margin: auto;
    max-width: 388px;
    margin-bottom: 48px;
}

.sidebar__item:not(:last-child) {
    margin-bottom: 24px;
}

.sidebar__link {
    width: 100%;
    display: inline-block;
    text-align: center;
}


.sidebar__link-image {
    filter: brightness(0) saturate(100%) invert(48%) sepia(90%) saturate(1810%) hue-rotate(158deg) brightness(92%) contrast(101%);
    transition: filter .3s ease;
    height: 84px;
}

.sidebar__link--current .sidebar__link-image {
    filter: brightness(0) saturate(100%) invert(38%) sepia(74%) saturate(2624%) hue-rotate(311deg) brightness(94%) contrast(94%);
}

.sidebar__characters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    place-items: center;
}

/* 画面の高さが低い時は、ナビ（sidebar__list）を隠してロゴ＋キャラクターだけにする */
@media (max-height: 910px) {
    .sidebar__list {
        display: none;
    }
}


/* ===========================================================
   header
   =========================================================== */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:calc(24 * var(--u)) calc(48 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u));
}

.header__menu {
    display: none;
}

/* === ハンバーガーメニュー === */
.header__toggle {
    position: relative;
    flex-shrink: 0;
    width: calc(72 * var(--u));
    height: calc(72 * var(--u));
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #FFF;
}

.header__toggle-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(48 * var(--u));
    height: calc(8 * var(--u));
    border-radius: calc(16 * var(--u));
    background: #00A5C1;
    transform: translate(-50%, -50%);
    transition: transform .3s ease, opacity .3s ease;
}

.header__toggle-bar:nth-child(1) {
    transform: translate(-50%, calc(-50% - 12 * var(--u)));
}

.header__toggle-bar:nth-child(3) {
    transform: translate(-50%, calc(-50% + 12 * var(--u)));
}

.header__toggle--open .header__toggle-bar:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.header__toggle--open .header__toggle-bar:nth-child(2) {
    opacity: 0;
}

.header__toggle--open .header__toggle-bar:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.header__nav {
    display: none;
}

.header__nav--open {
    display: block;
}


/* ===========================================================
   main
   =========================================================== */

/* ====== モデルプラン ====== */
.plan {
    position: relative;
    z-index: 4;
    border-top: calc(2 * var(--u)) solid #000;
    background: url(/assets/common/images/bg_pattern_tile.gif) 0% 0% / calc(100 * var(--u)) calc(100 * var(--u)) repeat, #F5F5F5;
    background-size: auto;
}

.plan__marquee {
    height: 100px;
}

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

.plan__title {
    display: inline-block;
    width: 100%;
    margin-bottom: calc(40 * var(--u));
    text-align: center;
    background: linear-gradient(90deg, #47BDC8 0%, #65AADD 98.82%);
    -webkit-mask: url(/assets/common/images/text_modelplan.svg) no-repeat center / contain;
    mask: url(/assets/common/images/text_modelplan.svg) no-repeat center / contain;
}

.plan__title-image {
    height: calc(80 * var(--u));
    aspect-ratio: 63/16;
    opacity: 0;
}

/* ====== 旅タイプ診断 ====== */
.plan__diagnosis {
    width: 100%;
    max-width: calc(300 * var(--u));
    border-radius: calc(16 * var(--u));
    border: calc(2 * var(--u)) solid #000;
    background: linear-gradient(131deg, #C93CFF 1.6%, #9CFFF7 100%);
    box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 calc(4 * var(--u)) #000;
    color: #fff;
    padding: calc(16 * var(--u));
    margin: auto;
    margin-bottom: calc(40 * var(--u));
}

.plan__diagnosis-catch {
    text-align: center;
    font-size: calc(20 * var(--u));
    font-weight: 800;
    line-height: 130%;
    margin-bottom: calc(16 * var(--u));
}

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

.plan__diagnosis-figure {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    place-items: center;
    gap: calc(8 * var(--u));
    margin-bottom: calc(16 * var(--u));
}

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

/* --plan-theme-color にテーマカラー */

.plan__theme:not(:last-child) {
    padding-bottom: 56px;
}

.plan__theme-title {
    color: var(--plan-theme-color);
    margin-bottom: calc(8 * var(--u));
    text-align: center;

    font-size: calc(24 * var(--u));
    font-weight: 800;
    line-height: 150%;
}

.plan__theme-lead {
    color: #000;
    text-align: center;

    font-size: calc(16 * var(--u));
    font-weight: 400;
    line-height: 150%;
    margin-bottom: calc(19 * var(--u));
}

/* ====== スライダー（本体は Splide） ====== */
.plan__slider {
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.plan__slider--dragging {
    cursor: grabbing;
}

.plan__slider:not(.is-overflow) {
    cursor: default;
}

.plan__slider-item {
    padding-top: calc(5 * var(--u));
    padding-bottom: calc(8 * var(--u));
}

.plan__slider .splide__pagination {
    gap: calc(8 * var(--u));
    margin-top: calc(16 * var(--u));
    position: relative;
}

.plan__slider .splide__pagination__page {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: #CCC;
    opacity: 1;
    transform: scale(1) !important;
    margin: 0;
}

.plan__slider .splide__pagination__page.is-active {
    width: calc(24 * var(--u));
    border-radius: 999px;
    background: var(--plan-theme-color);
}

.plan__card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(16 * var(--u));
    border: calc(2 * var(--u)) solid #000;
    background: #fff;
    box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 calc(4 * var(--u)) #000;
    overflow: hidden;
    position: relative;
    color: #000;
    padding-bottom: calc(4 * var(--u));
}

.plan__card-figure {
    display: block;
    height: calc(180 * var(--u));
}

.plan__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

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

.plan__card-region {
    display: inline-block;
    font-size: calc(12 * var(--u));
    font-weight: 800;
    color: #fff;
    border-radius: 999px;
    border: 1px solid #000;
    padding: calc(4 * var(--u)) calc(16 * var(--u));
    position: absolute;
    top: calc(8 * var(--u));
    left: calc(8 * var(--u));
    line-height: 130%;
}

/* 国内・海外で色 */
.plan__card-region--kaigai {
    background-color: #007CDD;
}

.plan__card-region--kokunai {
    background-color: rgba(46, 163, 7, 1);
}

.plan__card-dst {
    color: var(--plan-theme-color);
    font-size: calc(12 * var(--u));
    font-weight: 800;
    line-height: 130%;
    margin-bottom: calc(8 * var(--u));
}

.plan__card-type {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--u));
    position: absolute;
    top: calc(8 * var(--u));
    right: calc(8 * var(--u));
}

.plan__card-type-text {
    display: inline-block;
    border-radius: calc(8 * var(--u));
    border: 1px solid #000;
    background: #FFF;
    color: var(--plan-theme-color);
    padding: calc(4 * var(--u)) calc(16 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 800;
    line-height: 130%;
    position: relative;
}

.plan__card-type-text::before,
.plan__card-type-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    transform: translateY(-50%);
}

.plan__card-type-text::before {
    border-width: calc(8.66px / 2) 0 calc(8.66px / 2) calc(5 * var(--u));
    border-left-color: #000;
}

.plan__card-type-text::after {
    border-width: calc(8.66px / 2) 0 calc(8.66px / 2) calc(5 * var(--u));
    border-left-color: #FFF;
    margin-left: calc(-2 * var(--u));
}

.plan__card-type-image {
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    object-fit: contain;
    pointer-events: none;
}


.plan__card-title {
    color: #2C2A29;
    font-size: calc(16 * var(--u));
    font-weight: 800;
}

/* メーター */
.plan__barometer {
    display: grid;
    gap: calc(8 * var(--u));
    border-top: 2px dotted #DBDBDB;
    padding-top: calc(16 * var(--u));
    margin-top: calc(16 * var(--u));
}

.plan__barometer-item {
    display: grid;
    gap: calc(4 * var(--u));
}

.plan__barometer-labels {
    display: flex;
    justify-content: space-between;
    gap: calc(8 * var(--u));
}

.plan__barometer-label {
    color: rgba(68, 68, 68, 1);
    font-size: calc(12 * var(--u));
    font-weight: 800;
    line-height: 130%;
    white-space: nowrap;
}

.plan__barometer-bar {
    --bar-line: calc(2 * var(--u));
    --bar-tick: calc(12 * var(--u));

    position: relative;
    display: block;
    height: var(--bar-tick);
    background-image: linear-gradient(#D1D5DC, #D1D5DC);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% var(--bar-line);
}

.plan__barometer-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg,
            #D1D5DC 0 var(--bar-line),
            transparent var(--bar-line));
    background-repeat: repeat-x;
    background-position: left top;
    background-size: calc((100% - var(--bar-line)) / 4) 100%;
}

/* 現在値の点 */
.plan__barometer-point {
    position: absolute;
    top: 50%;
    left: calc(12.5% + var(--barometer-ratio, 0) * 75%);
    z-index: 1;
    width: calc(40 * var(--u));
    height: calc(10 * var(--u));
    transform: translate(-50%, -50%);
    background: var(--plan-theme-color);
    border-radius: 999px;
}


/* ===========================================================
   footer
   =========================================================== */
.footer {
    background: #FFF;
    font-family: var(--default-font-family-main);
}

.footer__inner {
    width: calc(340 * var(--u));
    margin: auto;
}

.footer__sns-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(24 * var(--u));
    padding: calc(24 * var(--u)) 0;
}

.footer__sns-link {
    display: block;
    text-align: center;
}

.footer__sns-icon {
    display: block;
    width: calc(50 * var(--u));
    text-align: center;
}

.footer__info {
    padding: calc(40 * var(--u)) 0 calc(24 * var(--u));
}

.footer__logo {
    margin-bottom: calc(24 * var(--u));
}

.footer__logo-link {
    display: block;
    margin: auto;
    text-align: center;
}

.footer__logo-image {
    width: calc(120 * var(--u));
}

.footer__nav {
    margin-bottom: calc(24 * var(--u));
}

.footer__nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(8 * var(--u));
}

.footer__nav-link {
    color: #2C2A29;
    text-align: center;

    font-size: calc(12 * var(--u));
    font-weight: 400;
    line-height: 130%;
}

.footer__copyright {
    color: #697180;
    text-align: center;
    font-size: calc(12 * var(--u));
    font-weight: 400;
    line-height: 130%;
}

/* ===========================================================
   animation
   =========================================================== */

/* ====== mv ====== */
/* .mv__slider の自動スクロールは Splide の Auto Scroll拡張（assets/common/js/mv-slider.js）で行う */


/* ====== キャラクター ====== */
/* 移動（外側のfigure）と回転（内側のimg）で要素を分け、
   1要素につき1つのtransform系プロパティだけをアニメーションさせる。
   （rotate と translate を同じ要素で同時にループさせると、
   Safariでは2周目以降うまく再生されないことがあったため） */
.animation__character {
    z-index: 1;
    animation: character__translate 10s linear infinite;
}

.animation__character-image {
    display: block;
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
    transform-origin: center center;
    animation: character__rotate 10s linear infinite;
}

/* 独立した rotate プロパティを直接アニメーションさせる。
   （--rotate-transform のようなカスタムプロパティ経由だと、
   @property 未対応のSafari/iOSでは補間されずジグザグに揺れなかったため） */
@keyframes character__rotate {

    0% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: -0.13rad;
    }

    4.545% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: 0.151rad;
    }

    9.091% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: -0.13rad;
    }

    13.636% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: 0.151rad;
    }

    18.182% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: -0.13rad;
    }

    22.727% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: 0.151rad;
    }

    27.273% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: -0.13rad;
    }

    31.818% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: 0.151rad;
    }

    36.364% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: -0.13rad;
    }

    40.909% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: 0.151rad;
    }

    45.455% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: -0.13rad;
    }

    50% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: 0.151rad;
    }

    100% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
        rotate: -0.13rad;
    }
}

@keyframes character__translate {
    0% {
        translate: calc(-2 * var(--u)) calc(0 * var(--u));
    }

    50% {
        translate: calc(-114.608 * var(--u)) calc(2.913 * var(--u));
    }

    100% {
        translate: calc(-2 * var(--u)) calc(0 * var(--u));
    }
}