@charset "utf-8";

/* カスタマイズ用CSS */

.ec-eyecatchRole__image img{
    width:100% !important;
    max-width:700px;
    height:auto !important;
    display:block;
}

.ec-eyecatchRole{
    display:flex;
    align-items:center;
    gap:60px;
}

.ec-eyecatchRole__intro{
    width:45%;
}

.ec-topicRole__list{
    display:flex;
    gap:20px;
    justify-content:space-between;
    flex-wrap:nowrap;
}

.ec-topicRole__listItem{
    width:32%;
}

.ec-topicRole__listItem img{
    width:100%;
    border-radius:20px;
    display:block;
}

/* SUNIVA ヘッダー検索BOX */

.ec-headerSearch{
    border-radius:999px;
}

.ec-headerSearch .ec-select select{
    background:#EAF7EC !important;
    color:#4E7F5A !important;
    border:none !important;
    border-radius:999px 0 0 999px !important;
}

.ec-headerSearch .ec-input input{
    background:#ffffff !important;
    border:1px solid #DDEADD !important;
    border-left:none !important;
    border-radius:0 !important;
}

.ec-headerSearch__keywordBtn{
    background:#ffffff !important;
    border:1px solid #DDEADD !important;
    border-left:none !important;
    border-radius:0 999px 999px 0 !important;
}

.ec-headerSearch__keywordBtn img{
    opacity:.55;
}

.ec-headerSearch{
max-width:320px;
transform:scale(.92);
transform-origin:left center;
}

/* SUNIVA ロゴ周り余白調整 */
.ec-headerRole{
    margin-top:20px !important;
    margin-bottom:20px !important;
}

.ec-headerTitle__title h1{
    margin:0 !important;
}

.ec-headerTitle__title img{
    width:380px !important;
    max-width:80% !important;
}

/* カテゴリナビを少し上へ */
.ec-categoryNaviRole{
    margin-top:10px !important;
    margin-bottom:18px !important;
}

/* SUNIVA スライダー演出 */

.main_visual .slick-slide img{
    transform:scale(1);
    transition:transform 7s ease;
}

.main_visual .slick-active img{
    transform:scale(1.05);
}

/* ページトップボタン SUNIVA化 */
.ec-blockTopBtn a{
    background:linear-gradient(
    135deg,
    #9EDBB2 0%,
    #7CCB97 100%
    ) !important;

    color:#fff !important;

    border-radius:999px !important;

    box-shadow:0 8px 24px rgba(124,203,151,.28);

    border:none !important;
}

.ec-blockTopBtn a:hover{
    transform:translateY(-2px);
    opacity:.92;
}

.suniva-wrap{
max-width:1100px;
margin:auto;
padding:30px;
}

.card{
background:#fff;
border-radius:20px;
padding:25px;
margin-bottom:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

border:1px solid #eee;
}

.card h3{
font-size:38px;
margin-bottom:10px;
}

.card p{
color:#666;
margin-bottom:20px;
}

.card button{

width:60px;

height:60px;

font-size:30px;

border:none;

border-radius:50%;

background:#f2f2f2;

cursor:pointer;
}

.card span{

display:inline-block;

width:80px;

text-align:center;

font-size:30px;

font-weight:bold;

}

.fixed-bar{

position:sticky;

bottom:0;

background:white;

padding:25px;

box-shadow:

0 -10px 30px rgba(0,0,0,.1);

text-align:center;

margin-top:40px;

border-radius:20px;

}

.fixed-bar button{

background:#2d6cff;

color:white;

border:none;

padding:20px 50px;

font-size:24px;

border-radius:50px;

margin-top:20px;

}

.counter{

display:flex;

align-items:center;

gap:20px;

justify-content:center;

margin-top:20px;

}

.counter button{

width:60px;

height:60px;

border-radius:999px;

background:#f5f5f5;

font-size:30px;

}

.counter span{

font-size:30px;

font-weight:bold;

width:80px;

text-align:center;

}

.suniva-wrap .card{

background:#fff !important;

padding:30px !important;

margin-bottom:30px !important;

border-radius:25px !important;

box-shadow:
0 10px 35px rgba(0,0,0,.08) !important;

border:1px solid #eee !important;

}

.suniva-wrap .card h3{

font-size:46px !important;

margin-bottom:15px !important;

}

.suniva-wrap .counter{

display:flex !important;

align-items:center !important;

gap:20px !important;

margin-top:25px !important;

}

.suniva-wrap .counter button{

width:56px !important;

height:56px !important;

border-radius:999px !important;

border:none !important;

font-size:28px !important;

background:#f2f2f2 !important;

}

.suniva-wrap .counter span{

font-size:32px !important;

font-weight:bold !important;

width:60px !important;

text-align:center !important;

}

.fixed-bar{

position:sticky !important;

bottom:0 !important;

background:white !important;

padding:25px !important;

border-radius:25px !important;

box-shadow:
0 -10px 30px rgba(0,0,0,.08) !important;

}

.suniva-menu-wrap{
    padding:28px 22px 34px;
    background:linear-gradient(180deg,#ffffff 0%,#f7fff4 45%,#eefbea 100%);
}

.suniva-menu-logo{
    text-align:center;
    padding:18px 0 26px;
}

.suniva-menu-logo h2{
    font-size:28px;
    letter-spacing:.16em;
    color:#314a42;
    margin:0 0 10px;
}

.suniva-menu-logo p{
    font-size:13px;
    line-height:1.9;
    color:#6b7d70;
}

.suniva-menu-list a{
    display:block;
    position:relative;
    padding:16px 16px 16px 20px;
    margin-bottom:10px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(120,170,130,.18);
    border-radius:18px;
    color:#263b34;
    text-decoration:none;
    font-size:16px;
    box-shadow:0 8px 24px rgba(80,120,90,.06);
}

.suniva-menu-list a span{
    display:block;
    margin-top:5px;
    font-size:12px;
    color:#7a8b80;
    line-height:1.5;
}

.suniva-menu-list a:before{
    content:"";
    
}
.suniva-menu-list a:before{
    content:"";
    position:absolute;
    left:0;
    top:18px;
    width:4px;
    height:34px;
    border-radius:999px;
    background:linear-gradient(180deg,#b9e7a3,#6ec7a5);
}

/* SUNIVA footer */
.ec-footerRole {
    background:linear-gradient(180deg,#F8FFF8 0%,#EEF9F0 28%,#DFF3E4 68%,#CFE8D5 100%) !important;
}

.ec-footerRole,
.ec-footerRole * {
    color:#4E7F5A !important;
}

.ec-footerRole__copyright {
    color:#6E8D76 !important;
}

.ec-footerRole__copyright {
  color: #6E8D76 !important;
}

.ec-footerRole {
  background: linear-gradient(
    180deg,
    #F8FFF8 0%,
    #EEF9F0 28%,
    #DFF3E4 68%,
    #CFE8D5 100%
  ) !important;
}

.ec-footerRole,
.ec-footerRole * {
  color: #4E7F5A !important;
}

.ec-footerRole__copyright {
  color: #6E8D76 !important;
}

/* SUNIVA footer 最終版 */

.ec-footerRole {
    background: linear-gradient(
        180deg,
        #F8FFF8 0%,
        #EEF9F0 28%,
        #DFF3E4 68%,
        #CFE8D5 100%
    ) !important;
    padding: 70px 20px 50px !important;
}

.ec-footerRole__inner {
    opacity: 1 !important;
}

.ec-footerTitle,
.ec-footerTitle * {
    color: #4E7F5A !important;
    opacity: 1 !important;
}

.ec-footerNavi,
.ec-footerNavi__link {
    opacity: 1 !important;
}

.ec-footerNavi__link a {
    color: #123B28 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-underline-offset: 6px !important;
}

.ec-footerNavi__link a:hover {
    color: #1F8F4D !important;
}

.ec-footerTitle__copyright {
    color: #6E8D76 !important;
    opacity: 1 !important;
}

/* =====================================================
🌱 SUNIVA ボタン統一デザイン
===================================================== */

/* メインボタン */
.ec-blockBtn--action,
.ec-blockBtn--cancel,
button.ec-blockBtn--action,
button.ec-blockBtn--cancel,
a.ec-blockBtn--action,
a.ec-blockBtn--cancel,
button[type="submit"],
.ec-inlineBtn,
.ec-cartButton,
.ec-cartRole__actions a,
.ec-cartRole__actions button {

    background: linear-gradient(
        135deg,
        #6BB37B 0%,
        #4E8D5D 100%
    ) !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 999px !important;

    box-shadow:
        0 10px 30px rgba(78,141,93,.22) !important;

    transition: all .25s ease !important;

    font-weight: 700 !important;

    letter-spacing: .03em !important;
}

/* hover */
.ec-blockBtn--action:hover,
.ec-blockBtn--cancel:hover,
button.ec-blockBtn--action:hover,
button.ec-blockBtn--cancel:hover,
a.ec-blockBtn--action:hover,
a.ec-blockBtn--cancel:hover,
button[type="submit"]:hover {

    transform: translateY(-2px);

    opacity: .93;

    box-shadow:
        0 14px 34px rgba(78,141,93,.28) !important;
}

/* サブボタン風 */
.ec-blockBtn--cancel {

    background: linear-gradient(
        135deg,
        #EAF7EC 0%,
        #DFF0E3 100%
    ) !important;

    color: #4E7F5A !important;

    border: 1px solid #CFE4D5 !important;
}

/* カート数量ボタン */
.counter button,
.ec-numberInput button {

    border-radius: 999px !important;

    background: #EEF7F0 !important;

    color: #4E7F5A !important;

    border: none !important;
}

/* 小さいボタン */
.ec-inlineBtn {

    padding: 10px 18px !important;

    border-radius: 999px !important;
}

/* SP対応 */
@media screen and (max-width: 768px){

    .ec-blockBtn--action,
    .ec-blockBtn--cancel,
    button[type="submit"]{

        border-radius: 999px !important;

        font-size: 16px !important;

        min-height: 56px !important;
    }
}

/* =========================================
🌱 SUNIVA 強制ボタン上書き
========================================= */

a.ec-blockBtn--action,
button.ec-blockBtn--action,
.ec-blockBtn--action {

    background: linear-gradient(
        135deg,
        #6BB37B 0%,
        #4E8D5D 100%
    ) !important;

    background-color:#4E8D5D !important;

    color:#fff !important;

    border:none !important;

    border-radius:999px !important;

    box-shadow:
    0 10px 30px rgba(78,141,93,.25) !important;
}

/* サブボタン */

a.ec-blockBtn--cancel,
button.ec-blockBtn--cancel,
.ec-blockBtn--cancel {

    background: linear-gradient(
        135deg,
        #EEF8F0 0%,
        #DFF0E3 100%
    ) !important;

    background-color:#EEF8F0 !important;

    color:#4E7F5A !important;

    border:1px solid #D3E6D7 !important;

    border-radius:999px !important;

    box-shadow:
    0 8px 24px rgba(78,141,93,.08) !important;
}



/* ========================================== */
/* 1/1 ここから SUNIVAスマホ上部ナビ横ズレ修正 */
/* ========================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .ec-layoutRole,
    .ec-layoutRole__header,
    .ec-layoutRole__contents {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .suniva-mega-nav {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        padding: 10px 14px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .suniva-mega-nav::-webkit-scrollbar {
        display: none !important;
    }

    .suniva-mega-nav .suniva-item,
    .suniva-mega-nav .suniva-main-link {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* ========================================== */
/* 1/1 ここまで SUNIVAスマホ上部ナビ横ズレ修正 */
/* ========================================== */

/* ========================================== */
/* 1/1 ここから SUNIVAスマホヘッダー強制修正 最終 */
/* ========================================== */

@media (max-width: 768px) {

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .ec-layoutRole__header {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .ec-layoutRole__header nav,
    .ec-layoutRole__header ul,
    .ec-layoutRole__header .ec-categoryNaviRole,
    .ec-layoutRole__header .ec-categoryNaviRole ul,
    .ec-layoutRole__header .ec-categoryNaviRole__list {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;

        -webkit-overflow-scrolling: touch !important;
    }

    .ec-layoutRole__header nav::-webkit-scrollbar,
    .ec-layoutRole__header ul::-webkit-scrollbar,
    .ec-layoutRole__header .ec-categoryNaviRole::-webkit-scrollbar,
    .ec-layoutRole__header .ec-categoryNaviRole ul::-webkit-scrollbar {
        display: none !important;
    }

    .ec-layoutRole__header li,
    .ec-layoutRole__header a,
    .ec-layoutRole__header .ec-categoryNaviRole__listItem {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        float: none !important;
    }
}

/* ========================================== */
/* 1/1 ここまで SUNIVAスマホヘッダー強制修正 最終 */
/* ========================================== */


/* ==========================================================================
   🌏 SUNIVA WORLD - Phase2 ゲーム画面レイヤー＆キャラクターベース設定
   ========================================================================== */

/* 1. ゲーム画面全体のコンテナ構造 */
.suniva-game-container {
    position: relative;
    width: 100%;
    height: 100vh;           /* 画面いっぱいに表示 */
    height: -webkit-fill-available; /* iOS Safariツールバー対策 */
    overflow: hidden;
    background-color: #000000;
    margin: 0;
    padding: 0;
}

/* 2. 厳格なレイヤー階層構造（Layer 1 〜 Layer 5） */
.suniva-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 基本はタッチイベントを貫通させ、背後の操作を邪魔しない */
    pointer-events: none; 
}

/* Layer 1: 背景画像レイヤー */
.suniva-bg-layer {
    z-index: 10;
    pointer-events: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Layer 2: ポータル配置予定レイヤー */
.suniva-portal-layer {
    z-index: 20;
}

/* Layer 3: 主人公キャラクターレイヤー（今回のメイン） */
.suniva-character-layer {
    z-index: 30;
}

/* Layer 4: エフェクト・演出レイヤー */
.suniva-effect-layer {
    z-index: 40;
}

/* Layer 5: UI/HUDレイヤー（最前面：ステータスやボタンなど） */
.suniva-ui-layer {
    z-index: 50;
    pointer-events: auto; /* ボタン等のタップイベントを有効化 */
}


/* 3. Layer 3: 主人公（プレイヤー）の配置とサイズ制御 */
.suniva-player {
    position: absolute;
    /* 下部35%の空きスペース（石畳道路）に配置。最下部基準で微調整可能。 */
    bottom: 2%; 
    left: 50%;
    /* 左右中央揃え */
    transform: translateX(-50%); 
    
    /* 300px高のプレイヤーキャラクター表示エリアを確保 */
    width: auto;
    height: 300px;
    
    /* 足元を常に中央・下部にピタッと合わせる */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    
    /* GPS移動や状態遷移時のスムーズな挙動用 */
    transition: transform 0.3s ease, bottom 0.3s ease, opacity 0.3s ease;
    
    /* キャラクター自体をタップ可能にする */
    pointer-events: auto; 
}

/* キャラクター画像そのものの最適化 */
.suniva-player img {
    display: block;
    width: auto;
    height: 100%; /* 高さを300pxに固定し、アスペクト比を絶対維持 */
    max-height: 300px;
    object-fit: contain;
    -webkit-user-select: none; /* スマホでの画像長押しバグ防止 */
    user-select: none;
    pointer-events: none; /* 親要素でイベントをハンドリングするため画像はスルー */
}


/* 4. 将来の拡張用：GPS移動・歩行アニメーション・演出の土台 */

/* 歩行アニメーションのトリガー */
.suniva-player[data-status="walking"] img {
    /* 必要に応じてアニメーションを追加可能 */
}

/* チェックイン時の演出トリガー用 */
.suniva-player[data-status="checking-in"] {
    /* キャラクターの軽いジャンプや光の演出用 */
}

/* 待機状態（通常時） */
.suniva-player[data-status="idle"] img {
    /* 緩やかな上下演出などを仕込めます */
}


/* 5. レスポンシブ対応（スマホ縦画面の安全マージン） */
@media screen and (max-width: 480px) {
    .suniva-player {
        /* 画面幅が非常に狭いスマホの場合、キャラサイズを少しスケールダウン可能 */
        height: 280px; 
    }
}