/*
  ベーススタイル
  - ページ全体のフォント設定、リセット、ボックスモデルの指定
*/
:root {
    /* カラーパレット */
    --main-bg-color: #0d012e; /* 濃い紺色 */
    --border-color-start: #ff25fa; /* ピンクのボーダー色 */
    --text-color-light: #ffffff;
    --bgc-color-dark: #0000003a;
    --shop-color: #13a6ad;  /* 緑のショップロゴボーダー色 */
    /* フォント設定 */
    --font-family-base:"Shippori Mincho", serif;
    --font-family-items:"Sawarabi Gothic", sans-serif;
    --font-family-price:"Roboto", sans-serif;
}

.miku_wrapper {
    margin: 0;
    padding: 0;
    font-family:var(--font-family-base);
    color: var(--text-color-light);
    line-height: 1.6;
    overflow-x: hidden; /* 横スクロールバーが出ないように */
    background-image: url('/html/upload/user_data/shop/S363/shop/css/magical_mirai_lp/miku_lp_haikei.jpg?ver=20250710162659'); /* 星空の背景画像 */
    background-size: cover;
    background-position: center;
}

/* 全ての要素にbox-sizing: border-box; を適用 */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 画像の最大幅を設定し、親要素からはみ出さないようにする */
.miku_wrapper img {
    max-width: 100%;
    height: auto;
    display: block; /* 余分な下マージンをなくす */
}

.miku_wrapper a {
    color: var(--link-color);
    text-decoration: none;
}

/*
  ユーティリティクラス
*/
/* コンテンツを中央に配置し、最大幅を設定 */
.nd_hana_wrapper {
    max-width: 1200px; /* 必要に応じて調整 */
    margin: 0 auto;
    padding: 0 20px; /* 左右の余白 */
}

/* 視覚的に隠すが、スクリーンリーダーには読み上げさせる */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*
  ヘッダー
  - LPの最上部のセクション
*/
.main-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    /* max-width: 1920px; /* 原寸大の画像の幅に合わせて調整 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 130px;
}

/*
  メインコンテンツのセクション
*/
.miku_wrapper main {
    padding: 10px 0; /* セクション間の上下余白 */
}

/* 各ストアブロック (NewDays/HANAGATAYA) の外枠のスタイル */
/* ピンクの光るボーダーのスタイル */
.section-border {
    background-color: var(--bgc-color-dark); /* 半透明の背景 */
    padding:180px 40px 40px 40px; /* 内側の余白 */
    margin-bottom: 40px; /* 下の要素との間隔 */
    position: relative; /* 疑似要素の基準位置 */
    overflow: hidden; /* 角丸からはみ出るコンテンツを隠す */
    /* 光るボーダーエフェクト（グラデーションとシャドウ） */
    border: 5px solid var(--border-color-start);
    box-shadow: 0 0 10px var(--text-color-light), inset 0 0 10px var(--text-color-light), 0 0 0px var(--text-color-light), 0 0 0px var(--border-color-start), 0 0 0px var(--border-color-start), 0 0 10px var(--border-color-start),0 0 10px var(--border-color-start), inset 0 0 20px var(--border-color-start); 
    /* 内部コンテンツの配置調整 */
    display: flex;
    width: 90%;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    text-align: center;
    z-index: 1;
    transform: translateY(-170px);
}

/* 各ロゴの見出し (NewDays / HANAGATAYA) */
.store-logo .store-logo_hana {
    margin-top: 0;
    margin-bottom: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 80px; /* ロゴ画像の高さに合わせて調整 */
    width: 100%; /* 親要素に合わせる */
    margin-bottom: 90px;
}

.store-logo img  {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 25px 60px;
    background-color: var(--text-color-light);
    border: 5px solid #ffffffec;  
    display: block;
    border-radius: 100px;
    box-shadow: 0 0 10px var(--text-color-light), inset 0 0 10px var(--text-color-light), 0 0 0px var(--text-color-light), 0 0 0px var(--shop-color), 0 0 0px var(--shop-color), 0 0 10px var(--shop-color),0 0 10px var(--shop-color), inset 0 0 10px var(--shop-color);
    z-index: 2;
    position: relative;
    transform: translateY(-105px);
}

.store-logo_hana img {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 25px 60px;
    background-color: var(--text-color-light);
    border: 5px solid #ffffffec;  
    display: block;
    border-radius: 100px;
    box-shadow: 0 0 10px var(--text-color-light), inset 0 0 10px var(--text-color-light), 0 0 0px var(--text-color-light), 0 0 0px var(--shop-color), 0 0 0px var(--shop-color), 0 0 10px var(--shop-color),0 0 10px var(--shop-color), inset 0 0 10px var(--shop-color);
    z-index: 2;
    position: relative;
    transform: translateY(-105px);
}

/* ストア説明画像 */
.store-description {
    margin-bottom: 30px;
}
.store-description img {
    max-width: 85%; /* 説明画像の幅を調整 */
    margin: 0 auto;
}

/* キャンペーンうちわ画像 */
.campaign-gift {
    margin-bottom: 40px;
}
.campaign-gift img {
    max-width: 90%; /* うちわ画像の幅を調整 */
    margin: 0 auto;
}

/* コラボ限定商品のタイトル */
.collaboration-products-title {
    margin-bottom: 30px;
    /* CSSでの背景画像によるタイトル表示 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100px; /* タイトル画像の高さに合わせて調整 */
    width: 100%;
    background-image: url('/html/upload/user_data/shop/S363/shop/css/magical_mirai_lp/miku_lp_title_korabo.png?ver=20250710162659');
}

.ec-products-title{
    margin-bottom: 30px;
    /* CSSでの背景画像によるタイトル表示 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100px; /* タイトル画像の高さに合わせて調整 */
    width: 100%;
    background-image: url('/html/upload/user_data/shop/S363/shop/css/magical_mirai_lp/miku_lp_title_EC.png?ver=20250710162700');
}


/* 商品グリッドレイアウト */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr)); /* 適切なサイズで自動調整 */
    gap: 30px; /* 商品間の隙間 */
    width: 100%;
    margin-bottom: 40px;
}

.product-item {
    background-color: #ffffffeb; /* 商品背景の透明度 */
    border-radius: 10px;
    overflow: hidden; /* 角丸からはみ出ないように */
    display: block; /* リンク全体をブロック要素に */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 5px; /* 内側の余白 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-item:hover {
    transform: translateY(-5px); /* ホバーで少し上に移動 */
}

.product-item img {
    width: 100%;
    height: auto;
}

/*商品説明*/
.miku_item_name{
    color: var(--main-bg-color);
    font-family: var(--font-family-items);
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    margin: 20px 5px 10px 5px;    
}

.miku_item_price {
    color: var(--main-bg-color);
    font-family: var(--font-family-price);
    font-size: 15px;
    text-align: right;
    margin-bottom: 10px;
}

/* ボタンエリア */
.button-area {
    margin-top: 20px;
    text-align: center;
}

.button a {
    background: var(--text-color-light);
    border-radius: 100px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    padding: 15px 50px 17px 45px;
    font-family: var(--font-family-base);
    font-weight: bold;
    text-decoration: none;
    color: #4c6598;
    line-height: 1.8;
    transition: 0.3s ease-in-out;
    font-size: 30px;
}
.button a:after {
content: "";
position: absolute;
top: 50%;
bottom: 0;
right: 2rem;
font-size: 90%;
display: flex;
justify-content: center;
align-items: center;
transition: right 0.3s;
width: 10px;
height: 10px;
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
transform: translateY(-50%) rotate(45deg);
}
.button a:hover {
background: #ff6bfde5;
color: var(--text-color-light);
}
.button a:hover:after {
right: 1.6rem;
}


/*フッター*/
#footer {
    padding:40px 20px;
    font-size: 0.9em;
    color:var(--text-color-light);
    line-height: 1.8;
filter: drop-shadow(2px 2px 0px #00000079);
background-color: #00000015;
}


.copyright-miku,
.copyright {
    text-align: right;
    margin-bottom: 10px;
}

.copyright {
    text-align: center;
}

/*
メディアクエリ (レスポンシブデザイン)
- 画面サイズに応じてスタイルを調整
*/

/* スマートフォン向けの調整 */
@media (max-width: 767px) {
    .main-hero-image img {
        width: 100%;
        margin-top: 10%;
        margin-bottom: 130px;
    }

    .miku_wrapper h2 img  {
    max-width: 270px;
    transform: translateY(-110px);
    padding: 20px 40px;
}

.store-logo_hana img {
    max-width: 280px;
    transform: translateY(-100px);
}

    .section-border {
        padding: 80px 10px 40px 10px;
        border-radius: 15px;
    }

    .store-logo,
    .collaboration-products-title,
    .ec-products-title{
        min-height: 60px; /* スマートフォンでのロゴの高さ */
        margin-bottom: 20px;
    }
    .store-description img,
    .campaign-gift img {
        max-width: 100%; /* 説明・うちわ画像の幅を調整 */
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(100px, 1fr)); /* 小さめの画面での商品グリッド */
        gap: 15px;
        width: 100%;
    }

    .miku_item_name {
        font-size: 12px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .miku_item_price {
        font-size: 11px;
        margin-bottom: 2px;
    }

    .button a {
        font-size: 15px;
        color: var(--text-color-light);
        background-color: var(--border-color-start);
    }

    .button a:after{
    width: 7px;
    height: 7px;
    }

    #footer {
        padding: 20px 15px;
    }

    #footer p {
        font-size: 10px;
    }
}