/* ====================================
   Service Prime セクション - 抽出CSS
   元ファイル: main.css (たびぬきトップページ)
   ==================================== */

/* 
 * 使用方法:
 * 1. このCSSをstyle.cssにコピーするか、別ファイルとして読み込んでください
 * 2. HTMLで以下の構造を使用してください:
 *    <div class="service-prime is-map">...</div>
 * 3. 必要に応じて、カスタムプロパティ（CSS変数）を調整してください
 */

/* ====================================
   基本スタイル
   ==================================== */

.service-prime {
    --mw: 104rem;
    --x: 2rem;
    width: calc(100% - var(--x));
    max-width: var(--mw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    column-gap: 4rem;
    position: relative;
    z-index: 1;
    padding-top: 10.5rem;
    padding-bottom: 10.5rem;
}

/* 装飾的なボーダー（破線） */
.service-prime::before,
.service-prime::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 60px;
}

.service-prime::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='2' y='2' width='calc(100%25 - 4px)' height='calc(100%25 - 5px)' rx='60' ry='60' fill='none' stroke='%23023D97' stroke-width='4' stroke-dasharray='0.01 11' stroke-linecap='round' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.service-prime::after {
    z-index: -2;
    background-color: #fff;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

/* ====================================
   ヘッダー部分
   ==================================== */

.service-prime__head {
    grid-column: var(--column);
    --tabinukikun-color: #023D97;
}

.service-prime__head p {
    position: absolute;
    top: var(--head-pos-t);
    left: var(--head-pos-l);
    right: var(--head-pos-r);
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.12, 0.81, 0.41, 0.83);
}

.service-prime__head p span {
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 19.6rem;
    height: 16.5rem;
    padding-bottom: 5.5rem;
    background-color: var(--tabinukikun-color);
    -webkit-mask-image: url("../imgs/tabinukikun/mask.svg");
    mask-image: url("../imgs/tabinukikun/mask.svg");
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    rotate: var(--head-rotate);
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 700;
}

/* アニメーション: rinrin（揺れる効果） */
@keyframes rinrin {
    0% { rotate: 0deg; }
    25% { rotate: 7deg; }
    50% { rotate: 0deg; }
    75% { rotate: 7deg; }
    100% { rotate: 0deg; }
}

.service-prime__head.isActive p {
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.12, 0.81, 0.41, 0.83);
    animation: rinrin 0.4s cubic-bezier(0.3, 0.015, 0.12, 1) forwards;
}

.service-prime__head h3 {
    display: flex;
    align-items: center;
}

.service-prime__head h3 .logo {
    width: var(--logo-size-w);
    height: var(--logo-size-h);
}

.service-prime__head h3 .logo img {
    display: block;
    width: 100%;
}

.service-prime__head h3 .label {
    margin-left: 2em;
    color: #b0b0b0;
    font-size: 2.6rem;
    line-height: 1.36;
    font-weight: 700;
}

/* ====================================
   詳細部分
   ==================================== */

.service-prime__detail {
    grid-column: var(--column);
    margin-top: 6rem;
}

.service-prime__detail h4 {
    color: #023d97;
    font-size: 3.2rem;
    line-height: 1.125;
    font-weight: 700;
}

.service-prime__detail ul {
    margin-top: 4rem;
    font-size: 2.4rem;
    line-height: 1.667;
    font-weight: 500;
}

.service-prime__detail ul li {
    display: flex;
}

.service-prime__detail ul li::before {
    content: "・";
}

/* ====================================
   メディア要素（画像・動画）
   ==================================== */

.service-prime .media {
    --media-size-w: 22.6rem;
    --media-size-h: 44.1rem;
    width: var(--media-size-w);
    height: var(--media-size-h);
    margin-block: auto;
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    left: var(--media-pos-l);
    right: var(--media-pos-r);
}

.service-prime .media::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    background-color: #00236a;
    rotate: 0deg;
    transition: rotate 0.2s cubic-bezier(0.12, 0.81, 0.41, 0.83);
}

.service-prime .media-thumbnail {
    position: relative;
    z-index: 3;
}

.service-prime .media-movie {
    z-index: 2;
}

.service-prime .media-thumbnail,
.service-prime .media-movie {
    grid-row: 1;
    grid-column: 1;
}

.service-prime .media-thumbnail img,
.service-prime .media-thumbnail video,
.service-prime .media-movie img,
.service-prime .media-movie video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-prime .media.isActive::before {
    rotate: calc(var(--media-rotate) * var(--index, 1));
    transition: rotate 0.4s cubic-bezier(0.3, 0.015, 0.12, 1);
}

.service-prime .media.isPlaying .media-thumbnail {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ====================================
   たびぬきくんキャラクター
   ==================================== */

.service-prime .tabinukikun {
    position: absolute;
    z-index: 2;
}

.service-prime .tabinukikun img {
    display: block;
    width: 100%;
}

/* ====================================
   バリエーション: is-map
   ==================================== */

.service-prime.is-map {
    --column: 3/9;
    --head-pos-t: -5.2rem;
    --head-pos-r: -3.2rem;
    --head-rotate: 15deg;
    --media-pos-l: -11.3rem;
    --media-rotate: -4deg;
    --logo-size-w: 40rem;
    --logo-size-h: 10.4rem;
    margin-top: 3rem;
}

.service-prime.is-map .tabinukikun {
    width: 17.7rem;
    height: 9.2rem;
    right: -2.7rem;
    bottom: -1.2rem;
}

.service-prime.is-map .tabinukikun img {
    opacity: 0;
    transform-origin: 50% 70%;
    transition: opacity 0.2s cubic-bezier(0.12, 0.81, 0.41, 0.83);
}

/* アニメーション: goron（ゴロンと転がる効果） */
@keyframes goron {
    0% { rotate: 0deg; }
    25% { rotate: 10deg; }
    50% { rotate: -3deg; }
    75% { rotate: 7deg; }
    100% { rotate: 0deg; }
}

.service-prime.is-map .tabinukikun.isActive img {
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.12, 0.81, 0.41, 0.83);
    animation: goron 1s cubic-bezier(0.3, 0.015, 0.12, 1) forwards;
}

/* ====================================
   バリエーション: is-rally
   ==================================== */

.service-prime.is-rally {
    --column: 2/8;
    --head-pos-t: -7rem;
    --head-pos-l: -6rem;
    --head-rotate: -15deg;
    --media-pos-r: -11.3rem;
    --media-rotate: 4deg;
    --logo-size-w: 39.7rem;
    --logo-size-h: 10.9rem;
    margin-top: 12rem;
}

.service-prime.is-rally .tabinukikun {
    width: 14.8rem;
    height: 11.5rem;
    right: 22.5rem;
    bottom: -1.3rem;
    display: grid;
    grid-template-areas: "tabinukikun";
}

.service-prime.is-rally .tabinukikun img {
    grid-area: tabinukikun;
    will-change: opacity, translate;
    opacity: 0;
    transition: translate 0s ease 0.2s, scale 0s ease 0.2s, opacity 0.2s cubic-bezier(0.12, 0.81, 0.41, 0.83);
}

.service-prime.is-rally .tabinukikun img:first-child {
    translate: 0 -20%;
    scale: 1 0.5;
    transform-origin: bottom;
}

.service-prime.is-rally .tabinukikun img:last-child {
    translate: 0 50%;
    scale: 1 0.5;
}

.service-prime.is-rally .tabinukikun.isActive img {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

.service-prime.is-rally .tabinukikun.isActive img:first-child {
    transition: opacity 0.25s cubic-bezier(0.12, 0.81, 0.41, 0.83) 0.14s, translate 0.38s cubic-bezier(0.7, 0.2, 0.3, 1.4), scale 0.38s cubic-bezier(0.7, 0.2, 0.3, 1.4);
}

.service-prime.is-rally .tabinukikun.isActive img:last-child {
    transition: opacity 0.25s cubic-bezier(0.12, 0.81, 0.41, 0.83) 0.18s, translate 0.38s cubic-bezier(0.7, 0.2, 0.3, 1.4) 0.04s, scale 0.38s cubic-bezier(0.7, 0.2, 0.3, 1.4) 0.04s;
}

/* ====================================
   レスポンシブ対応（タブレット・モバイル）
   ==================================== */

@media screen and (max-width: 1024px) {
    .service-prime {
        --x: 4rem;
        display: block;
        padding-top: 7rem;
        padding-bottom: 4.3rem;
    }

    .service-prime::before,
    .service-prime::after {
        border-radius: 30px;
    }

    .service-prime::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='2' y='2' width='calc(100%25 - 4px)' height='calc(100%25 - 4px)' rx='30' ry='30' fill='none' stroke='%23023D97' stroke-width='4' stroke-dasharray='0.01 11' stroke-linecap='round' /%3E%3C/svg%3E");
    }

    .service-prime__head p span {
        font-size: 2.2rem;
        width: 10.7rem;
        height: 9rem;
        padding-bottom: 3.4rem;
    }

    .service-prime__head h3 {
        flex-direction: column;
        justify-content: center;
    }

    .service-prime__head h3 .label {
        font-size: 1.7rem;
        line-height: 1;
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .service-prime__detail {
        width: fit-content;
        margin-inline: auto;
        margin-top: 5rem;
    }

    .service-prime__detail h4 {
        font-size: 2rem;
        line-height: 1.5;
    }

    .service-prime__detail ul {
        margin-top: 2.5rem;
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .service-prime__detail ul li + li {
        margin-top: 0.5em;
    }

    .service-prime .media {
        --media-size-w: 19.2rem;
        --media-size-h: 37.4rem;
        position: relative;
        inset: 0 !important;
        margin-top: 3rem;
        margin-inline: auto;
    }

    .service-prime .media.isActive::before {
        rotate: calc(4deg * var(--index, 1));
    }

    /* is-map モバイル */
    .service-prime.is-map {
        --head-pos-t: -3.2rem;
        --head-pos-r: -1.8rem;
        --logo-size-w: 25.2rem;
        --logo-size-h: 6.6rem;
        margin-top: 8rem;
    }

    .service-prime.is-map .tabinukikun {
        width: 13.4rem;
        height: 7rem;
        right: -2rem;
        bottom: -1rem;
    }

    /* is-rally モバイル */
    .service-prime.is-rally {
        --head-pos-t: -3.2rem;
        --head-pos-l: -1.8rem;
        --logo-size-w: 24.8rem;
        --logo-size-h: 6.8rem;
        margin-top: 8rem;
    }

    .service-prime.is-rally .tabinukikun {
        width: 9.3rem;
        height: 7.2rem;
        right: inherit;
        left: 1.3rem;
        bottom: -0.8rem;
    }
}