/* index.htmlのcss */

body{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;

  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #bcbcbc calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #bcbcbc calc(100% - 1px));
  background-size: 30px 30px;
  background-repeat: repeat;
  background-position: center center;
  background-color: #ededed;

  position: relative;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* サイトと同じ方眼紙の背景にします */
    background-color: #000000;
    background-position: center center;
    color: #fff;
    
    z-index: 99999999; /* ヘッダーやもこもこよりさらに一番手前に！ */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 消えるときのフワッとしたアニメーション */
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* ぽよんぽよん跳ねる設定 */
.loading-content {
    text-align: center;
    animation: bounce 1.5s infinite ease-in-out;
}

.loading-icon {
    font-size: 60px; /* アイコンや絵文字の大きさ */
    margin-bottom: 10px;
}

/* Loading... の文字 */
.loading-content p {
    font-family: "M PLUS 1 Code", monospace;
    font-weight: bold;
    font-size: 1.2em;
    color: #767676;
    margin: 0;
    letter-spacing: 0.1em;
}

/* ぽよんぽよんの動きを作る魔法 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); } /* 20px上に跳ねる */
}

/* JavaScriptでこのクラスがついたら画面を消す */
.loaded #loading-screen {
    opacity: 0;
    visibility: hidden;
}




body::before,
body::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px; /* もこもこの出っ張り具合（大きくしました） */
    z-index: 9990; /* ヘッダーの下、コンテンツより上に配置 */
    pointer-events: none; /* 下のボタン等をクリックできるようにする */
}

/* 左側のもこもこ */
body::before {
    left: 0;
    /* 中心を左端(0)、上から30pxの位置にして、半径30pxの白い円を作る */
    background-image: radial-gradient(circle at 0px 30px, #ffffff 30px, transparent 30.5px);
    background-size: 60px 60px; /* 縦横60pxを1セットとして繰り返す */
    background-repeat: repeat-y;
}

/* 右側のもこもこ */
body::after {
    right: 0;
    /* 中心を右端(30px)、上から30pxの位置にして、半径30pxの白い円を作る */
    background-image: radial-gradient(circle at 30px 30px, #ffffff 30px, transparent 30.5px);
    background-size: 60px 60px;
    background-repeat: repeat-y;
}




header{
    background-color: #000;
    color: #fff;
    display: flex; /* Flexboxを維持 */
    justify-content: space-between; /* ヘッダータイトルとハンバーガーメニューを左右に */
    align-items: center; /* ヘッダー内の要素を垂直方向（上下）中央に揃える */
    padding: 8px 20px; /* 上下と左右のパディングを確保 */
    position: sticky; /* 必要に応じて、子要素のabsolute配置の基準とする */
    top: 0;
    z-index: 9999;
}



.header-title {
    flex-grow: 1; /* 残りのスペースを埋めて、他の要素が左右に寄るようにする */
    text-align: center; /* タイトルは中央寄せ */
    }

/* アイコン全体のコンテナ */
.custom-hamburger {
    position: absolute; 
    top: 25px; 
    right: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    cursor: pointer;
    width: auto;
    z-index: 1001;
    
}

.custom-hamburger .burger-lines {
    margin-bottom: 5px; /* 線とハートの間のスペース */
}

/* 3本線のスタイル */
.burger-lines span {
    display: block;
    width: 20px;
    height: 4px;
    background-color: #fff; /* 白色の線 */
    margin-bottom: 5px;
    border-radius: 2px;
}
/* 3本目だけ少し長くする（デザイン再現） */
.burger-lines span:nth-child(3) {
    width: 35px;
}

/* ハートのスタイル */
.burger-heart {
    position: absolute; /* .custom-hamburger を基準に絶対配置 */
    top: -5px; /* .custom-hamburger内の位置を調整 */
    right: 0; /* .custom-hamburger内の右端に寄せる */
        color: #fff;
    font-size: 13px;
}

/* menu文字のスタイル */
.burger-text {
    color: #fff;
    font-family: "M PLUS 1 Code", monospace;
    font-size: 15px;
    font-weight: bold;
    margin-top: -10px;
    letter-spacing: 0.05em;
}






.banner-carousel {
    position: relative;
    width: 100%;
    max-width: 1000px; /* バナーの最大幅 */
    height: 500px; /* バナーの高さ */
    margin: 50px auto; /* 上下左右マージンと中央寄せ */
    overflow: hidden; /* はみ出した画像を隠す */
}
.banner-carousel.is-dragging {
    cursor: grabbing; /* ドラッグ中のカーカーソル */
}
.banner-carousel {
    cursor: grab; /* ドラッグできることを示すカーソル */
}

.carousel-inner {
    display: flex; /* 子要素を横並びに */
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out; /* スライドのアニメーション */
}

.carousel-item {
    min-width: 100%; /* 各アイテムはカルーセルの幅と同じ */
    height: 100%;
    background-size: cover; /* 画像がアイテム全体を覆うように */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat;
    display: flex; /* 画像のみの場合、不要だが残しておいても影響なし */
    align-items: center; /* 画像のみの場合、不要だが残しておいても影響なし */
    justify-content: center; /* 画像のみの場合、不要だが残しておいても影響なし */
    color: white; /* テキストがないので不要だが、もし将来追加するなら */
}

.banner-link-overlay {
    position: absolute; /* 親要素のcarousel-itemを基準に絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* ドットナビゲーションよりは手前、バナー画像より手前 */
    text-decoration: none; /* 下線をなくす */
    color: transparent; /* テキストを透明にする（見えないリンクとして機能） */
    cursor: pointer; /* クリック可能であることを示す */
}

/* ドットナビゲーション */
.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5); /* 薄い白 */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #fff; /* アクティブなドットは濃い白 */
}

/* --- レスポンシブ対応 (バナー部分のみ) --- */
@media (max-width: 768px) {
    .banner-carousel {
        height: 250px; /* タブレットでの高さを調整 */
        margin: 20px auto;
    
    }
}

@media (max-width: 480px) {
    .banner-carousel {
        width: calc(100% - 60px); 
        height: 180px; 
        margin: 5px auto;    }
    .carousel-dots {
        bottom: 10px;
        gap: 8px;
    }
    .dot {
        width: 10px;
        height: 10px;
    }
}





header h1, header h3 {
    margin: 0;
    color: #fff;
    font-family: "DM Serif Text", serif;
}
p{
    font-family: "M PLUS 1 Code", monospace;
}
h3{
    font-family: "M PLUS 1 Code", monospace;
}

h2{
    font-family: "DM Serif Text", serif;
}

.icon{
    display: flex;
    justify-content: center;
    margin-top: 10vh;
}
.icon img{
    width: 20vw;
    height: auto;
    border-radius: 50%;
}
@media (max-width: 768px){
    .icon img{
        width: 40vw;
    }
}

.goods-title{
    text-align: center;
    margin-top: 70px;
    margin-bottom: 20px;
}
.goods-title h2 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 5px;
}
.goods-title h6 {
    font-size: 1.1em;
    color: #666;
    margin-top: 0;
}


/* --- 商品リスト (公開ページ) --- */
#product-list-public {
    list-style: none;
    padding: 0px;
    margin: 0 auto;
    max-width: 1200px; /* 少し広めに設定 */
    display: grid;
    /* 画面幅に合わせて3列〜1列に自動調整 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; /* 商品間の隙間 */
    justify-items: center;
}


/* ... #product-list-public の通常スタイル ... */

@media (max-width: 768px) { 
    #product-list-public {
        padding: 20px 50px;
        gap: 5px; /* アイテム間の隙間をさらに減らす */
        grid-template-columns: repeat(2, 1fr); 
    }
    #product-list-public li {
        padding: 5px; /* アイテムのパディングを維持 */
    }
    #product-list-public li img {
        max-width: 100%; /* 画像を親要素の幅いっぱいに */
        height: auto;
        margin-bottom: 8px; /* サムネイル下のマージンを少し減らす */
    }
    #product-list-public li .product-info-summary h3 {
        font-size: 0.7em; /* フォントサイズをさらに小さく */
    }
    #product-list-public li .product-info-summary p {
        font-size: 0.6em; /* フォントサイズをさらに小さく */
    }
}

@media (max-width: 480px) { /* さらに小さいスマートフォン向けの調整 (必要であれば) */
    #product-list-public {
        padding: 20px 50px;
        gap: 10px;
        /* ここを変更: 1列表示にする場合は以下のように */
        /* grid-template-columns: repeat(1, 1fr); */
        /* 2列のままでもOKです */
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ここまで追加 */


#product-list-public li {
    width: 100%; /* グリッドの幅いっぱいに広げる */
    background-color: transparent; /* 背景は透明にしてスッキリ */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;    
    cursor: pointer;
}

#product-list-public li:hover {
    transform: translateY(-5px); /* 少し上に移動 */
}

#product-list-public li img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1.2; /* 縦横比を固定（アパレルサイト風） */
    object-fit: cover;
    border-radius: 0; /* 角丸をなくすと、よりスクショの雰囲気に近くなります */
    margin-bottom: 15px;
}

#product-list-public li .product-info-summary {
    text-align: center;
    width: 100%;
}

#product-list-public li .product-info-summary h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1    em; /* フォントサイズを調整 */
    color: #333;
}

#product-list-public li .product-info-summary p {
    margin: 0;
    font-size: 0.9em; /* フォントサイズを調整 */
    color: #686868; /* 価格の色 */
    font-family: "M PLUS 1 Code", monospace; 
    font-weight: bold;
}


/* --- メッセージエリア --- */
#message-area {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 30px;
    margin: 40px auto; /* 上下左右のマージンと中央寄せ */
    max-width: 500px; /* 最大幅を設定 */
    font-size: 1em;
    font-weight: 800;
    color: #373737;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 影を追加 */

    position: relative;
}
@media (max-width: 480px){
    #message-area{
        max-width: 300px;
    }
}

#message-area::before {
    content: "";
    position: absolute;
    top: -10px;      /* 吹き出しの枠の上に配置 */
    left: 50%;       /* 横幅の真ん中に配置 */
    transform: translateX(-50%); /* 自身の幅の半分戻して完全中央へ */
    
    /* 三角形の描画：背景色と同じ白にする */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #ffffff; /* 吹き出し本体と同じ色 */
}

.sns{
    text-align: center  ;
}

.sns h2{
    text-align: center;
    margin-top: 10vh;
}

.sns-logo {
    display: flex; /* Flexboxを有効にして子要素を横並びに */
    justify-content: center; /* 子要素を水平方向の中央に配置 */
    align-items: center; /* 子要素を垂直方向の中央に配置 (高さが異なる場合) */
    gap: 20px; /* アイテム間の隙間を20pxに設定 */
    margin-top: 30px; /* 上部に余白 */
    margin-bottom: 50px; /* 下部に余白 */
}

.sns-logo a img {
    width: 40px; /* 画像の固定幅を指定 (例: 40px) */
    height: 40px; /* 画像の固定高さを指定 (例: 40px) */
    object-fit: contain; /* 画像の縦横比を維持しつつ、指定サイズに収める */
    transition: transform 0.2s ease-in-out; /* ホバーエフェクト */
}

.sns-logo a:hover img {
    transform: scale(1.1); /* ホバー時に少し拡大 */
}





footer {
    background-color: #000000;
    color: #fff;
    padding: 60px 20px; /* 上下左右のパディングを少し調整 */
    text-align: center; /* 子要素を中央寄せ */
    margin-top: 50px; /* フッターとコンテンツの間に余白 */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1); /* 上方向に柔らかな影 */
    justify-content: center;
    align-items: center;

    position: relative; 
    z-index: 99999;
}