@charset "UTF-8";

/* ==========================================================================
   【EP】バケット周り用スタイルシート (c_ep_style004_261119.css)
   ========================================================================== */

/* 全体ラップ */
.wrap-bucket {
    max-width: 900px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    box-sizing: border-box;
}

/* 画像共通設定（重なり・はみ出しを確実に防止） */
.wrap-bucket img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.space-2308 {
    clear: both;
    width: 100%;
}

/* リンク共通設定 */
.wrap-bucket a:link,
.wrap-bucket a:visited {
    color: #333333;
    text-decoration: none;
}

.wrap-bucket a:hover {
    color: #333333;
    text-decoration: underline;
}

.wrap-bucket a:hover img {
    opacity: 0.8;
    transform: translateY(3px);
}

/* ボタン要素 */
.btn_b {
    width: 100%;
    margin: 30px 30px 30px 0px;
    text-align: center;
    box-sizing: border-box;
}

.btn_b img {
    max-width: 100%;
    height: auto;
}

/* タイトルエリア */
.title_b {
    font-size: 18px;
    color: #024990;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
    clear: both;
}

.title-border {
    display: flex;
    width: 100%;
    height: 3px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.title-1b {
    width: 10%;
    height: 3px;
    background-color: #024990;
}

.title-2b {
    width: 90%;
    height: 3px;
    background-image: linear-gradient(-45deg, #fff 25%, #024990 25%, #024990 50%, #fff 50%, #fff 75%, #024990 75%, #024990);
    background-size: 7px 7px;
}

/* テキスト装飾 */
.underline1-2308 {
    background: #bde4f7;
    font-weight: bold;
    padding: 2px 8px;
    display: inline-block;
    margin: 5px 0;
}

.underline2-2308 {
    background: linear-gradient(transparent 80%, #bde4f7 20%);
    font-weight: bold;
    display: inline-block;
}

.line {
    background: #06C755;
    font-weight: bold;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}

/* セクション枠線スタイル */
.page-2-2308 {
    border: solid 3px #0b308a;
    width: 100%;
    padding: 15px 2%;
    margin: 0 0 30px 0;
    background-color: #fffeee;
    border-radius: 0 10px 10px 10px;
    box-sizing: border-box;
}

.page-2-2610 {
    width: 100%;
    padding: 1px 2%;
    margin: 0 0 20px 0;
    background-color: #ffffff;
    border-radius: 0 10px 10px 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; 
}

/* 2列レイアウト用の基本構成 */
.page-l-2610,
.page-r-2610,
.page-2-1-2610,
.page-2-2-2610 {
    width: 49%;
    box-sizing: border-box;
}

.page-r-2610 {
    text-align: center;
    vertical-align: top;
}

.page-2-2-2610 {
    text-align: left;
}

.contents img {
    margin-bottom: 10px;
}

/* アイテムグリッド (上部メニューなど) */
.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    padding: 5px 0;
    margin: 5px 0;
}

.item2 {
    width: calc(33% - 8px); /* 3列配置 */
    box-sizing: border-box;
    text-align: center;
}

.item2 img {
    width: 100%;
    height: auto;
}

.pc-none-2308 {
    display: none;
}

.sp-none-2308 {
    display: block;
}


/* □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
商品ページ分類の装飾
   □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */

    .title {
        font-size: large;
        color: #024990;
        margin-bottom: 5px;
        font-weight: bold;
        margin-top: 25px;
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .title-1 {
        float: left;
        width: 10%;
        height: 3px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 15px 0px;
        background-color: #024990;
    }    
    .title-2 {
        float: left;
        width: 90%;
        height: 3px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 15px 0px;
        background-image: linear-gradient(-45deg, #fff 25%, #024990 25%, #024990 50%, #fff 50%, #fff 75%, #024990 75%, #024990);
        background-size: 7px 7px;
    }   

    .page-l-2509 {
        float: left;
        width: 50%;
        height:auto;
        padding: 0px 0px 0px 0px ;
        margin: 0px 0px 0px 0px;
    }
    
        .page-r-2509 {
        float: left;
        width: 50%;
        height:auto;
        padding: 0px 0px 0px 0px ;
        margin: 0px 0px 0px 0px;
        text-align: center;
        
    }

    .btn {
        clear: both;
        padding: 0 4%;
        margin: 0 0 30px 0;
        width: 92%;
        text-align: center;
        display: block;
        transition: 0.5s;
    } 

        .text01 {
        font-weight:bold;
        text-align:left;
        font-size:xx-large;
        height:50px;
        color: #ffffff;
        background: #00a199;
        margin:1px 0px 0px 0px;
        padding:20px 20px;
    }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start
        margin:5px;
        padding:5px;
        
      }
  
      .item {
        margin: 1px;
        width: 200px;
      }
  
  
    .page-2-2509 {
        float: left;
        width: 100%;
        height:auto;
        padding: 15px 2% 15px 2% ;
        margin: 0px 0px 30px 0px;
        background-color:#ffffff;
        border-radius: 0 10px 10px 10px;        /* CSS3草案 */  
        -webkit-border-radius: 0 10px 10px 10px;      /* Safari,Google Chrome用 */  
        -moz-border-radius: 0 10px 10px 10px;     /* Firefox用 */  
        box-sizing:border-box;
    }
    .page-2-2509 img {
        vertical-align:middle;
        margin-right:3px;
    }

    .page-r-2509 {
        float: left;
        width: 50%;
        height:auto;
        padding: 0px 0px 0px 0px ;
        margin: 0px 0px 0px 0px;
        text-align: center;
        
    }


/* ==========================================================================
   スマートフォン用表示設定 (649px以下)
   ========================================================================== */
@media only screen and (max-width: 649px) {
    .page-l-2610,
    .page-r-2610,
    .page-2-1-2610,
    .page-2-2-2610 {
        width: 100%;
        margin-bottom: 15px;
    }

    .page-r-2610 {
        text-align: center;
    }

    .container2 {
        justify-content: space-between;
        gap: 8px;
    }

    .item2 {
        width: 48%; /* 2列配置 */
    }

    .pc-none-2308 {
        display: block;
    }

    .sp-none-2308 {
        display: none;
    }
/* □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
商品ページ分類の装飾
   □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */
    .page-l-2509 {
        float: left;
        width: 100%;
        height:auto;
        align-items: center;
        vertical-align: middle ;
        padding: 0px 0px 0px 0px ;
        margin: 0px 0px 0px 0px;
    }

    .page-r-2509 {
        float: left;
        width: 100%;
        height:auto;
        padding: 0px 0px 0px 0px ;
        margin: 0px 0px 0px 0px;
        text-align:center; 
    }

    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start
        padding:5px;
        margin:1px;
      }
    .item {
        margin: 1px;
        width: 150px;
      }

}