@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
      font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
      color: #141414;
}

@media screen and (min-width: 768px) {
    body {
        min-width: 1200px;
    }
}
.pane-globalnav{
    color: #000;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
    display: block;
    cursor: pointer;
}

a:focus {
    outline: none;
}

button {
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: none
}

main img {
    vertical-align: bottom;
}

.summer2025-sp {
    display: none;
}

.zen {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
}
.yuu {
    font-family: "游ゴシック体", YuGothic;
    font-weight: 400;
    font-style: normal;
  }

.gab {
    font-family: "Gabriela", serif;
    font-weight: 400;
    font-style: normal;
  }

/* メインビジュアル　*/

#summer2025-mainvisual {
    width: 100%;
}

#summer2025-mainvisual img {
    width: 100%;
    vertical-align: bottom;
}



/* カレンダー */
/* イベントバー内に表示されるイベント名のスタイル */

.event-bar .event-name-in-bar {
    font-size: 1.5rem; /* 小さめのフォントサイズ */
    color: white; /* バーの背景色に合わせて白 */
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* はみ出す部分を隠す */
    padding: 0 4px; /* 左右に少しパディング */
     font-family:"Zen Maru Gothic", sans-serif;
     font-weight: bold;
}
/* イベント画像用のスタイル */
    .event-image {
        position: absolute;
        width: 50px; /* 画像の幅を調整 */
        height: 50px; /* 画像の高さを調整 */
        object-fit: contain; /* 画像が収まるように */
       
        z-index: 2;
        pointer-events: auto;
        cursor: pointer;
       
    padding-bottom: 10px;
    }

  .summer2025-container {
            max-width: 900px; /* ここで最大横幅を900pxに設定 */
            margin-top: 100px;
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr); /* 7日間分の列 */
            gap: 4px; /* セル間の隙間 */
            position: relative; /* イベントバーの絶対配置の基準 */
        }
        .day-header {
            text-align: center;
            font-weight: bold;
            padding: 8px 0;
            background-color: #E7F5FC; /* 薄い青灰色のヘッダー背景 */
            border-radius: 8px; /* 角丸 */
            z-index: 10; /* ヘッダーが他の要素の上に表示されるように */
            font-size: 2rem;
              font-family:"Zen Maru Gothic", sans-serif;
            
        }
        .date-cell {
            min-height: 140px; /* セルの最小高さを増やしてイベントバーが重ならないように調整 */
            background-color: white; /* 白い背景 */
            border-radius: 8px; /* 角丸 */
            padding: 8px;
            text-align: right; /* これ自体は影響しないが、以前の名残で残す */
            position: relative; /* イベント表示のため */
            box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 軽い影 */
            transition: transform 0.2s ease-in-out; /* ホバー時のアニメーション */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-end; /* これ自体は影響しないが、以前の名残で残す */
            cursor: pointer; /* クリック可能であることを示す */
            overflow: hidden; /* イベントテキストがはみ出さないように */
            z-index: 1; /* セル背景のベースレイヤー */
             font-family:"Zen Maru Gothic", sans-serif;
        }
        .date-cell:hover {
            transform: translateY(-3px); /* ホバーで少し浮き上がる */
        }
        .date-number {
            font-size: 2rem; /* 日付の数字を大きく */
            font-weight: 600; /* 太字 */
            color: #334155; /* 濃いグレー */
            position: absolute; /* 左上に配置するため絶対配置 */
            top: 8px; /* 上からの距離 */
            left: 8px; /* 左からの距離 */
            z-index: 3; /* イベントバーより手前に */
             font-family:"Zen Maru Gothic", sans-serif;
        }
        /* 週末の色 */
        .sunday .date-number {
            color: #ef4444; /* 日曜日は赤 */
        }
        .saturday .date-number {
            color: #3b82f6; /* 土曜日は青 */
        }

        /* スライド関連のスタイル */
        .slider-container {
            position: relative;
            overflow: hidden; /* スライドがはみ出さないように隠す */
            margin-top: 40px; /* 月名とナビボタンのためのスペース */
        }

        /* 月名とナビボタンのコンテナスタイル */
        .month-nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding: 0 16px; /* 左右のパディング */
        }

        /* 月名表示のスタイル */
        .month-display-name {
            font-size: 3rem; /* 月の名前を大きく */
            font-weight: 600; /* 太字 */
            color: #1a202c; /* 濃い色 */
            text-align: center;
            flex-grow: 1; /* 中央に配置するために伸縮 */
            background: linear-gradient(to right, #60a5fa, #3b82f6); /* グラデーション背景 */
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
             font-family:"Zen Maru Gothic", sans-serif;
        }

        /* 矢印ボタンのスタイル */
        .arrow-button {
            background-color: transparent; /* 背景を透明に */
            color: #3b82f6; /* 矢印の色 */
            font-size: 2.5rem; /* 矢印を大きく */
            padding: 0; /* パディングを削除 */
            border-radius: 50%; /* 完全な円形 */
            width: 48px; /* 幅と高さを指定 */
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border: 2px solid #3b82f6; /* ボーダーを追加 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 軽い影 */
            transition: all 0.3s ease; /* ホバー時のトランジション */
            position: relative; /* バブル効果のために */
            overflow: hidden;
            line-height: 1; /* 矢印の垂直位置を調整 */
            user-select: none; /* テキスト選択を無効に */
        }
        .arrow-button:hover {
            background-color: #e0f2fe; /* ホバー時の背景色 */
            transform: scale(1.1); /* 少し拡大 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 影を強調 */
        }
        .arrow-button:active {
            transform: scale(0.95);
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        /* バブル効果のための擬似要素 */
        .arrow-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.5); /* よりはっきりしたバブル */
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.4s ease-out, height 0.4s ease-out;
            z-index: 0;
        }
        .arrow-button:hover::before {
            width: 150%;
            height: 150%;
        }

        /* 無効化された矢印ボタンのスタイル */
        .arrow-button:disabled {
            opacity: 0.4; /* 透明度を下げて無効であることを示す */
            cursor: not-allowed; /* カーソルを禁止マークに */
            border-color: #94a3b8; /* ボーダーの色をグレーに */
            color: #94a3b8; /* 矢印の色をグレーに */
            box-shadow: none; /* 影を削除 */
            transform: none; /* ホバー時の変形を無効に */
            background-color: transparent; /* 背景色も透明に */
            /* バブル効果を無効にする */
            pointer-events: none; /* ホバーイベントを無効にする */
        }
        .arrow-button:disabled::before {
            display: none; /* バブル効果を非表示 */
        }

        /* イベントリストコンテナ (使われていないが、構造保持のため残す) */
        .event-list {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 左寄せ */
            width: calc(100% - 16px); /* セル幅から左右のパディングを引く */
            position: absolute; /* 日付番号と重ならないように絶対配置 */
            top: 36px; /* 日付番号の下に配置 */
            left: 8px;
            right: 8px;
            bottom: 8px; /* 下部パディング */
            overflow-y: auto; /* イベントが多い場合にスクロール可能に */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE and Edge */
            z-index: 3; /* 日付番号と同じ階層かやや下 */
        }
        /* Webkitブラウザのスクロールバーを非表示にする */
        .event-list::-webkit-scrollbar {
            display: none;
        }

        /* 複数日イベントを示す連続バー */
        .event-bar {
            position: absolute; /* gridコンテナ内で絶対位置指定 */
            height: 20px; /* バーの高さ */
            border-radius: 4px;
            z-index: 2; /* date-cellの背景より上、日付番号・イベントリストより下 */
            box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 軽い影 */
            opacity: 0.8; /* 少し透明にして日付を見やすく */
            pointer-events: auto; /* バー自体がクリック/ホバー可能になるように */
            cursor: pointer; /* カーソルをポインターに */
            transition: opacity 0.2s ease; /* ホバー時のトランジション */
             display: flex; /* Flexboxを使って内容を中央揃え */
    align-items: center; /* 垂直方向中央 */
    justify-content: center; /* 水平方向中央 */
    overflow: hidden; /* バーからはみ出すテキストを隠す */
        }
        .event-bar:hover {
            opacity: 1; /* ホバーで不透明に */
        }

        /* イベントツールチップのスタイル */
        .event-tooltip {
            position: absolute;
            background-color: rgba(24, 161, 241, 0.9);
            color: #fff;
            padding: 10px 14px; /* パディングを少し増やす */
            border-radius: 12px; /* 角丸を大きく変更 */
            font-size: 1.5rem; /* 小さめのフォント */
            white-space: nowrap; /* テキストを折り返さない */
            z-index: 100; /* 最前面に表示 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            pointer-events: none; /* ツールチップ自体はイベントをブロックしない */
            opacity: 0; /* デフォルトで非表示 */
            transition: opacity 0.2s ease, transform 0.2s ease; /* フェードイン・アウトと位置のトランジション */
            transform: translateY(10px); /* 少し下にずらして隠す */
    font-weight: normal;
        }
        .event-tooltip.active {
            opacity: 1; /* 表示時に不透明に */
            transform: translateY(0); /* 通常の位置に戻す */
        }

        /* イベント詳細セクションのスタイル */
        .event-details-section {
            margin-top: 40px;
            padding: 24px;
        }
        .event-details-section .event-detail-item {
           background-image: url(/img/usr/summer2025/bg.png);
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    width: 600px;
   margin: 40px auto;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            scroll-margin-top: 170px; /* スクロール時に要素の上部に余白を作る */
        }
        .event-detail-item img{
width: 280px;
margin: 0 auto;
        }
        .event-title-wrap{
            display: flex;
        margin: 0 auto;
        margin-top: 30px;
         align-items: center;

        }
         .event-title-wrap img{
            width: 140px;
            height: 140px;
             background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0)50%, #fff 50%, #fff 100%);
         }
         .event-detail-text{
         margin: 0 auto;
    text-align: center;
    color: #141414;
    margin-top: 20px;
    font-size: 1.5rem;
    line-height: 1.8;
     font-family:"Zen Maru Gothic", sans-serif;
     font-weight: bold;
         }
.event-detail-textwrap{
    background-color: #fff;
    width: 300px;
     height: 140px;
    text-align: center;
    position: relative;
}
.event-detail-textwrap-c{
    position: absolute;
    top: 13%;
    left: 10%;
}
     
         .event-details-section .event-detail-line .yellowline {
            font-size: 2rem;
            color: #141414;
            margin-bottom: 4px;
            line-height: 1.4;
              background: linear-gradient(#F4DE17 0 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 0.5em;
    padding-bottom: 0.1em;
     font-family:"Zen Maru Gothic", sans-serif;
     font-weight: bold;
        }

        .event-details-section .event-detail-item .event-name-display {
            font-size: 3rem; /* イベント名を少し大きく */
            font-weight: 600;
            color: #18A1F1;
            margin-bottom: 0px;
             font-family:"Zen Maru Gothic", sans-serif;
        }
           .event-details-section .event-detail-item .event-name-display2 {
            font-size: 2rem;
            color: #18A1F1;
             font-family:"Zen Maru Gothic", sans-serif;
               font-weight: 600;
        }
        .event-details-section .event-detail-item .event-name-link {
            text-decoration: none; /* 下線を削除 */
        }
        .event-details-section .event-detail-item .event-name-link:hover .event-name-display {
            text-decoration: underline; /* ホバーで下線を表示 */
        }
        .event-details-placeholder {
            text-align: center;
            color: #64748b; /* グレー */
            font-style: italic;
            padding: 20px;
             font-family:"Zen Maru Gothic", sans-serif;
        }
   /* ここからスライダーコンテナの基本設定 */
        .pslider-container {
            width: 280px; /* スライダー全体の横幅 */
            position: relative; /* 子要素の絶対配置の基準 */
            overflow: hidden; /* はみ出たコンテンツを非表示にする */
            margin: 0 auto;
            margin-top: 20px;
        }

        /* スライドの表示エリア */
        .slider {
            display: flex; /* 画像を横並びにする */
            transition: transform 0.5s ease-in-out; /* スライドのアニメーション */
            margin: 0 auto;
        }

        /* 各画像の設定 */
        .slider img {
            width: 280px; /* 各画像の横幅 */
            height: 280px; /* 各画像の高さ */
            flex-shrink: 0; /* 画像が縮まないようにする */
            object-fit: cover; /* 画像がコンテナに収まるように調整 */
        }

        /* ナビゲーションドットのコンテナ */
        .slider-nav {
            text-align: center; /* ドットを中央に配置 */
            margin-top: 15px; /* 上部とのマージン */
        }

        /* 各ナビゲーションドット */
        .dot {
            display: inline-block; /* インラインブロック要素 */
            width: 10px; /* ドットの幅 */
            height: 10px; /* ドットの高さ */
            background-color: #fff; /* デフォルトの色 (グレー) */
            border-radius: 50%; /* 完全な円形にする */
            margin: 0 6px; /* ドット間のマージン */
            cursor: pointer; /* マウスカーソルをポインターにする */
            transition: background-color 0.3s ease; /* 色変化のアニメーション */
            border: 1px solid #fff; /* ドットの境界線 */
        }

        /* アクティブなドットの色 */
        .dot.active {
            background-color: #18A1F1; /* アクティブな色 (青色) */
            border-color: #18A1F1; /* アクティブな境界線の色 */
        }       

/* リード */



.summer2025-lead {
    text-align: center;
     font-family:"Zen Maru Gothic", sans-serif;
}
.summer2025-leadbox{

    margin: 100px auto 100px;
      position: relative;

}



.summer2025-leadtext {
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    font-weight: bold;
     position: relative;
     color: #18A1F1;
}
.summer2025-leadtext02 {
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: bold;
    position: relative;
    display: block;
    color: #18A1F1;
    line-height: 2;
}
.summer2025-leadtext02 .yellowline {
    background: linear-gradient(#F4DE17 0 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 0.5em;
    padding-bottom: 0.1em;
}

/* トピック */
.summer2025-topic{
   background-image: url(/img/usr/summer2025/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 1080px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    color: #18A1F1;
     font-family:"Zen Maru Gothic", sans-serif;
     font-weight: bold;
}
.summer2025-topic-title{
    font-size: 4rem;
    background-color: #fff;
    text-align: center;
    width: 560px;
    margin: 0 auto;
}
.summer2025-topic-wrap{
    display: flex;
    gap: 40px;
    justify-content: center;
    padding-top: 30px;
}
.summer2025-topic-name{
    color: #fff;
     background-color: #18A1F1;
     font-size: 2.5rem;
    text-align: center;
    margin: 0 auto;
    width: 140px;
}
.summer2025-topic-text{
    font-size: 2rem;
    color: #141414;
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: left;
 display: inline-block
}
.summer2025-topic-img{
    display: flex;
     justify-content: center;
     gap: 15px;
     margin-top: 30px;
}
.summer2025-topic-img img{
    width: 170px;
}
.summer2025-topic-img2{
    display: flex;
    justify-content: center;
    gap: 20px;
}
.summer2025-topic-img2 img{
    width: 170px;
}
.summer2025-topic-img-flex3{
    padding-top: 50px;
}
.summer2025-topic-box{
    background-color: rgba(255, 255, 255, 0.7);
    width: 400px;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    border-radius: 20px;
}
.b2{
    width: 510px;
}

.b3{
    width: 510px;
    margin-top: 20px;
}



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


.summer2025-price {
    font-size: 2.5rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    font-weight: 400;
    color: #141414;
    text-align: center;
    margin-top: 20px;
}

.summer2025-price-en {
    font-size: 1.6rem;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    letter-spacing: 0.1em;
}

.summer2025-cart a {
    transition: .3s;
}

.summer2025-cart a img {
    width: 250px;
}
.summer2025-cart-text{
     font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
     text-decoration: none;
      border-bottom: dashed 1px #141414;
      width: 144px;
      margin: 0 auto 30px;
      font-size: 1.8rem;
      font-weight: bold;
}
.summer2025-product-flex {
    margin-top: 50px;
    display: flex;

    justify-content: center;
}
.summer2025-product-flex-box {
    width: 500px;
}
.summer2025-product-flex-box img {

    width: 100%;
}

@media screen and (min-width:768px) {
    .summer2025-cart a:hover {
        opacity: 0.7;
    }
     .matomegai-cart a:hover {
        opacity: 0.7;
    }
}
/* パン袋記述 */
.pan-flex{
    display: flex;
     align-items: center;

    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
}
.pan-flex img{
    width: 170px;
    height: 170px;
   
}
.pan-text{
    font-size: 1.5rem;
    color: #1889F1;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 30px;
     line-height: 1.8;
      font-family:"Zen Maru Gothic", sans-serif;
      font-weight: bold;
}
/* まとめ買いコンテンツ */
.matomegai-wrap{
    text-align: center;
}
.matomegai-title{
    font-size: 3rem;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
    text-shadow: 0px 4px 4px #fff;
    display: inline-block;
    background-image: url(/img/usr/summer2025/title-line.png);
    background-size: 100% 50%;
    background-position: 0 100%;
background-repeat: no-repeat;
 font-family:"Zen Maru Gothic", sans-serif;
font-weight: bold;
}
.matomegai-box img{
    width: 200px;
}
.matomegai-flex{
    display: flex;
      justify-content: center;
}
.matomegai-price {
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    font-weight: 400;
    color: #141414;
    text-align: center;
    margin-top: 20px;
}
.matomega-torikeshi{
    text-decoration: line-through;
    margin-left: 5px;
}
.matomegai-price-en {
    font-size: 1rem;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    letter-spacing: 0.1em;
}

.matomegai-cart a {
    transition: .3s;
}

.matomegai-cart a img {
    width: 220px;
    margin-left: 15px;
}
.matomegai-cart-text{
     font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
     text-decoration: none;
      border-bottom: dashed 1px #141414;
      width: 128px;
      margin: 0 auto 30px;
      font-size: 1.6rem;
      font-weight: bold;
}

.summer2025-saleprice {
    font-size: 2.3rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    font-weight: 400;
    color: #141414;
    text-align: center;
}

.summer2025-saleprice-en {
    font-size: 1.3rem;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    letter-spacing: 0.1em;
}
.matomegai-arrow{
    font-size: 2rem;
    text-align: center;
}
/* あしらい全体*/
.summer2025-wrap{
    position: relative;
    z-index: 1;
}
.b-img9{
    position: absolute;
    width: 170px;
    height: 250px;
    left: 0;
    top: 45px;
      z-index: -1;
}
.b-img10{
    position: absolute;
    width: 160px;
    height: 160px;
    right: 0;
    top: 10px;
    z-index: -1;
}
.b-img11{
    position: absolute;
    width: 190px;
    height: 280px;
    left: 0;
    top: 1200px;
    z-index: -1;
}
.b-img12{
    position: absolute;
    width: 240px;
    height: 370px;
    right: 0;
    top: 960px;
      z-index: -1;
}

.b-img1{
    position: absolute;
    width: 320px;
    height: 64px;
    left: 0;
    top: 2500px;
      z-index: -1;
}
.b-img2{
    position: absolute;
    width: 260px;
    height: 330px;
    right: 0;
    top: 2000px;
    z-index: -1;
}
.b-img3{
    position: absolute;
    width: 300px;
    height: 420px;
    left: 0;
    top: 4000px;  z-index: -1;
}
.b-img4{
    position: absolute;
    width: 170px;
    height: 210px;
    right: 0;
    top: 3450px;
      z-index: -1;
}
.b-img5{
    position: absolute;
    width: 300px;
    height: 530px;
    left: 0;
    top: 5300px;
      z-index: -1;
}
.b-img6{
    position: absolute;
    width: 180px;
    height: 180px;
    right: 60px;
    top: 4600px;
    z-index: -1;
}
.b-img7{
    position: absolute;
      z-index: -1;
      width: 150px;
      height: 240px;
      left: 0;
      bottom: 30px;
}
.b-img8{
    position: absolute;
      z-index: -1;
      width: 350px;
      height: 410px;
      bottom: 370px;
      right: 0;
}


@media screen and (max-width:767px) {

    .summer2025-sp {
        display: block;
    }

/* リード */

.summer2025-leadbox{
     width: 95%;
       height:auto;
    margin: 50px auto 50px;
}


.summer2025-lead {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;

}


.summer2025-leadtext {
    font-size: 1.6rem;
    margin-bottom: 10px;
    font-weight: lighter;
}
.summer2025-leadtext02 {
    font-size: 1.6rem;
    line-height: 1.5;
    
}
.summer2025-leadtext02 .smalltxt {
    font-size: 1.4rem;
    
}
/* トピック */
.summer2025-topic{
    width: 90%;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    color: #18A1F1;
}
.summer2025-topic-title{
    font-size: 3rem;
    background-color: #fff;
    text-align: center;
    width: 60%;
    margin: 0 auto;
    line-height: 1.2;
}
.summer2025-topic-wrap{
  display: block;
    gap: 40px;
    justify-content: center;
    padding-top: 30px;
}
.summer2025-topic-name{
     font-size: 2rem;
    width: 35%;
}
.summer2025-topic-text{
    font-size: 1.6rem;
     font-weight: lighter;
 display: inline-block
}
.summer2025-topic-img{
     gap: 5px;
     margin-top: 10px;
}
.summer2025-topic-img img{
    width: 150px;
}
.summer2025-topic-img2{
    gap: 5px;
}
.summer2025-topic-img2 img{
    width: 150px;
}
.summer2025-topic-box{
    margin: 0 auto;

    width: 90%;
}
.b2{
    width: 90%;
     margin-top: 20px;
}

.b3{
    width: 90%;
    margin-top: 20px;
}
/* カレンダー */

.day-header {
            border-radius: 4px; /* 角丸 */
        }
        .date-cell {
            border-radius: 4px; /* 角丸 */
            padding: 1px;
        }
/* カレンダー内イベント */
  .event-details-section .event-detail-item {
    width: 90%;
            scroll-margin-top: 100px; /* スクロール時に要素の上部に余白を作る */
        }
        .event-title-wrap{
            display: flex;
        margin: 0 auto;
        margin-top: 30px;
         align-items: center;

        }
         .event-title-wrap img{
            width: 85px;
            height: 85px;
             background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0)50%, #fff 50%, #fff 100%);
         }
           .pslider-container {
            width: 200px; /* スライダー全体の横幅 */
        }
        /* 各画像の設定 */
        .slider img {
            width: 200px; /* 各画像の横幅 */
            height: 200px; /* 各画像の高さ */
        }

         .event-detail-text{
         margin: 0 auto;
    text-align: center;
    color: #141414;
    margin-top: 20px;
    font-size: 1.4rem;
    line-height: 1.8;
    font-weight:lighter;
         }
.event-detail-textwrap{
    width: 180px;
     height: 85px;
     display: inline-block
}
.event-detail-textwrap-c{
    position: absolute;
    top: 6%;
    left: 5%;
}
         .event-details-section .event-detail-line .yellowline {
            font-size: 1.4rem;
            margin-bottom: 4px;
            line-height: 1.4;
        }

        .event-details-section .event-detail-item .event-name-display {
            font-size: 2rem; /* イベント名を少し大きく */
            font-weight: 600;
            color: #18A1F1;
            margin-bottom: 0px;
        }
           .event-details-section .event-detail-item .event-name-display2 {
            font-size: 1.4rem;
            color: #18A1F1;
        }
        .summer2025-cart a img {
    padding-left: 20px;
}
/* パン袋記述 */
.pan-flex{
  display: block;
  width: 90%;
     align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
}
.pan-flex img{
    margin-top: 20px;
    width: 150px;
    height: 150px;
}
.pan-text{
    font-size: 1.5rem;
    color: #1889F1;
    margin: 10px auto 30px;
     line-height: 1.8;
     text-align: center;
     font-weight: lighter;
}

/* まとめ買いコンテンツ */
.matomegai-flex{
    display: block;
      justify-content: center;
}
.matomegai-title{
    font-size: 2.2rem;
    margin-top: 30px;
    margin-bottom: 20px;
}
.matomegai-box img{
    width: 200px;
}

.matomegai-price {
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    font-weight: 400;
    color: #141414;
    text-align: center;
    margin-top: 20px;
    line-height: 1.3;
}

.matomegai-price-en {
    font-size: 1.2rem;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    letter-spacing: 0.1em;
}

.matomegai-cart a {
    transition: .3s;
}

.matomegai-cart a img {
    width: 250px;
   margin: 0 auto;
   padding-left: 20px;

}
.matomegai-cart-text{
     font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
     text-decoration: none;
      border-bottom: dashed 1px #141414;
      width: 128px;
      margin: 0 auto 50px;
      font-size: 1.5rem;
      
}

.summer2025-saleprice {
    font-size: 2.3rem;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    font-weight: 400;
    color: #141414;
    text-align: center;
}

.summer2025-saleprice-en {
    font-size: 1.3rem;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    letter-spacing: 0.1em;
}
.summer2025-price{
    font-size: 2.3rem;
}
.summer2025-price-en{
    font-size: 1.3rem;
}
.matomegai-arrow{
    font-size: 2rem;
    text-align: center;
}
.summer2025-cart-text{
    font-size: 1.5rem;
     width: 128px;
    text-align: center;
}

/* あしらい全体*/
.summer2025-wrap{
    position: relative;
}
.b-img9{
    position: absolute;
    width: 70px;
    height: 150px;
    left: 0;
    top: 45px;
      z-index: -1;
}
.b-img10{
    position: absolute;
    width: 60px;
    height: 60px;
    right: 0;
    top: 10px;
    z-index: -1;
}
.b-img11{
    position: absolute;
    width: 90px;
    height: 180px;
    left: 0;
    top: 1200px;
    z-index: -1;
}
.b-img12{
    position: absolute;
    width: 140px;
    height: 170px;
    right: 0;
    top: 960px;
      z-index: -1;
}

.b-img1{
    position: absolute;
    width: 80px;
    height: 64px;
    left: 0;
    top: 2500px;
      z-index: -1;
}
.b-img2{
    position: absolute;
    width: 160px;
    height: 230px;
    right: 0;
    top: 2000px;
    z-index: -1;
}
.b-img3{
    position: absolute;
    width: 100px;
    height: 20px;
    left: 0;
    top: 4000px;  z-index: -1;
}
.b-img4{
    position: absolute;
    width: 70px;
    height: 110px;
    right: 0;
    top: 3450px;
      z-index: -1;
}
.b-img5{
    position: absolute;
    width: 90px;
    height: 130px;
    left: 0;
    top: 5300px;
      z-index: -1;
}
.b-img6{
    position: absolute;
    width: 80px;
    height: 80px;
    right: 0px;
    top: 4600px;
    z-index: -1;
}
.b-img7{
    position: absolute;
      z-index: -1;
      width: 50px;
      height: 140px;
      left: 0;
      bottom: 30px;
}
.b-img8{
    position: absolute;
      z-index: -1;
      width: 150px;
      height: 110px;
      bottom: 1000px;
      right: 0;
}
}