/* =========================================================
   chipper.jp Smartphone Responsive
   PCデザインには影響させない
   ========================================================= */

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

    /* -----------------------------------------
       基本
    ----------------------------------------- */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

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

    body {
        font-size: 14px;
        line-height: 1.7;
    }

    #wrapper,
    #container,
    #header,
    #contents,
    #main,
    #wp_contents,
    #sideber,
    #footer,
    #footer_btm {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto;
        float: none !important;
        box-sizing: border-box;
    }


    /* -----------------------------------------
       ヘッダー
    ----------------------------------------- */

    #header {
        position: relative;
        padding: 12px 15px 10px;
        height: auto !important;
    }

    #header h1 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 8px !important;
        padding: 0 !important;
        text-align: center;
    }

    #header h1 a {
        display: inline-block;
    }

    #header h1 img {
        display: block;
        width: auto !important;
        max-width: 230px !important;
        height: auto !important;
        margin: 0 auto;
    }

    #h_main {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* PC用上部メニュー */
    #h_menu {
        display: none !important;
    }

    /* スマホでは長いサイトタイトルを省略 */
    #header_title {
        display: none !important;
    }

    /* 電話番号 */
    .h_tel {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 8px auto 0 !important;
        text-align: center;
    }

    .h_tel img {
        width: auto !important;
        max-width: 260px !important;
        height: auto !important;
        margin: 0 auto;
    }


    /* -----------------------------------------
       MeanMenu
    ----------------------------------------- */

    .mean-container {
        width: 100% !important;
    }

    .mean-container .mean-bar {
        width: 100% !important;
        min-height: 48px;
        box-sizing: border-box;
        position: relative;
        z-index: 9999;
    }

    .mean-container .mean-nav {
        width: 100% !important;
        margin-top: 48px;
    }

    .mean-container .mean-nav ul li a {
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.5;
    }

    .mean-container a.meanmenu-reveal {
        box-sizing: content-box;
    }


    /* -----------------------------------------
       コンテンツ全体
    ----------------------------------------- */

    #contents {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 15px 12px 30px !important;
        margin: 0 !important;
    }

    #main {
        order: 1;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wp_contents {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #sideber {
        order: 2;
        width: 100% !important;
        margin: 35px 0 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------
       全画像
    ----------------------------------------- */

    #contents img,
    #wp_contents img,
    #sideber img {
        max-width: 100% !important;
        height: auto !important;
    }


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

    #mv {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 25px !important;
        padding: 0 !important;
        overflow: hidden;
    }

    #mv .mv01 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 12px;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mv .mv01 a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    #mv .mv01 img {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
    }


    /* -----------------------------------------
       安心して選ばれる理由
    ----------------------------------------- */

    .reason-container {
        width: 100% !important;
        max-width: none !important;
        margin: 30px 0 !important;
        padding: 0 !important;
    }

    .reason-container h2 {
        width: 100% !important;
        margin: 0 0 20px !important;
        padding: 0 !important;
        font-size: 22px !important;
        line-height: 1.45;
        text-align: center;
    }

    .reason-container ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .reason-container ul li {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 15px 10px !important;
        box-sizing: border-box;
    }

    .reason-container figure {
        margin: 0 auto 10px !important;
        text-align: center;
    }

    .reason-container figure img {
        width: auto !important;
        max-width: 75px !important;
        height: auto !important;
    }

    .reason-container dl {
        width: 100% !important;
        margin: 0 !important;
    }

    .reason-container dt {
        font-size: 15px !important;
        line-height: 1.5;
        text-align: center;
    }

    .reason-container dd {
        font-size: 12px !important;
        line-height: 1.65;
        margin: 7px 0 0 !important;
    }


    /* -----------------------------------------
       40周年セールバナー
    ----------------------------------------- */

    #wp_contents img[src*="2026sale"] {
        display: block !important;
        width: 100% !important;
        max-width: 470px !important;
        height: auto !important;
        margin: 0 auto !important;
    }


    /* -----------------------------------------
       商品一覧・本文
    ----------------------------------------- */

    #wp_contents p,
    #wp_contents div,
    #wp_contents dl,
    #wp_contents ul,
    #wp_contents ol {
        max-width: 100%;
    }

    #wp_contents img {
        height: auto !important;
    }

    #wp_contents .alignleft,
    #wp_contents .alignright {
        float: none !important;
        display: block;
        max-width: 100% !important;
        margin: 15px auto !important;
    }


    /* -----------------------------------------
       YouTube・動画
    ----------------------------------------- */

    #wp_contents iframe,
    #wp_contents video,
    #wp_contents embed,
    #wp_contents object {
        max-width: 100% !important;
    }

    #wp_contents iframe {
        width: 100% !important;
    }


    /* -----------------------------------------
       表
    ----------------------------------------- */

    #wp_contents table {
        max-width: 100% !important;
    }

    #wp_contents table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* -----------------------------------------
       フォーム
    ----------------------------------------- */

    #wp_contents input[type="text"],
    #wp_contents input[type="email"],
    #wp_contents input[type="tel"],
    #wp_contents input[type="url"],
    #wp_contents input[type="number"],
    #wp_contents input[type="password"],
    #wp_contents select,
    #wp_contents textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #wp_contents textarea {
        min-height: 150px;
    }

    #wp_contents input[type="submit"],
    #wp_contents input[type="button"],
    #wp_contents button {
        max-width: 100%;
    }


    /* -----------------------------------------
       サイドバー
    ----------------------------------------- */

    #inq_box,
    #inq_box_inner {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    #inq_box_inner {
        padding: 15px !important;
    }

    .inq_logo {
        text-align: center;
    }

    .inq_logo img {
        max-width: 230px !important;
    }

    #inq_box dl {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    #inq_box .btn {
        width: 100% !important;
    }

    #inq_box .btn a {
        display: block;
        width: 100%;
        margin-bottom: 8px;
        text-align: center;
    }

    #inq_box .btn img {
        width: 100% !important;
        max-width: 350px !important;
    }

    .s_btn {
        width: 100% !important;
        margin: 20px 0 0 !important;
        padding: 0 !important;
    }

    .s_btn li {
        float: none !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        text-align: center;
    }

    .s_btn li img {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
    }


    /* -----------------------------------------
       フッター
    ----------------------------------------- */

    #footer {
        width: 100% !important;
        height: auto !important;
        padding: 20px 15px !important;
        box-sizing: border-box;
    }

    #footer_menu {
        width: 100% !important;
        line-height: 2 !important;
        text-align: center;
    }

    #footer_menu a {
        display: inline-block;
    }

    .pagetop {
        position: static !important;
        width: 100% !important;
        margin: 15px 0 0 !important;
        text-align: center;
    }

    #footer_btm {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    #copy,
    #itri {
        float: none !important;
        width: 100% !important;
        margin: 5px 0 !important;
        text-align: center;
        line-height: 1.7;
    }


    /* -----------------------------------------
       横スクロール防止
    ----------------------------------------- */

    #wp_contents pre {
        max-width: 100%;
        overflow-x: auto;
    }

}


/* =========================================================
   小さいスマホ
   ========================================================= */

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

    #contents {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #header h1 img {
        max-width: 210px !important;
    }

    .h_tel img {
        max-width: 235px !important;
    }

    .reason-container h2 {
        font-size: 20px !important;
    }

    .reason-container ul {
        gap: 8px !important;
    }

    .reason-container ul li {
        padding: 12px 7px !important;
    }

    .reason-container dt {
        font-size: 14px !important;
    }

    .reason-container dd {
        font-size: 11px !important;
    }

}



/* =========================================================
   CHIPPER SP MENU + SALE BANNER FIX
   ========================================================= */

/* PCではスマホ専用メニューを非表示 */
.chipper-sp-menu {
    display: none;
}


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

    /* ========================================
       既存MeanMenuをスマホでは非表示
    ======================================== */

    .mean-container .mean-bar,
    .mean-container .mean-nav,
    .mean-container .mean-push {
        display: none !important;
    }

    /* 元のPCナビも非表示 */
    #container > nav {
        display: none !important;
    }


    /* ========================================
       新スマホメニュー
    ======================================== */

    .chipper-sp-menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        position: relative;
        z-index: 9999;
    }

    .chipper-sp-menu summary {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 54px;
        padding: 0 18px;
        margin: 0;
        cursor: pointer;
        list-style: none;
        background: #333;
        color: #fff;
        font-size: 15px;
        font-weight: bold;
        box-sizing: border-box;
    }

    .chipper-sp-menu summary::-webkit-details-marker {
        display: none;
    }

    .chipper-sp-menu-label {
        letter-spacing: 0.12em;
    }

    /* ハンバーガー */
    .chipper-sp-menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 18px;
    }

    .chipper-sp-menu-icon i {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        transition: 0.3s;
        transform-origin: center;
    }

    /* 開いたとき × にする */
    .chipper-sp-menu[open] .chipper-sp-menu-icon i:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .chipper-sp-menu[open] .chipper-sp-menu-icon i:nth-child(2) {
        opacity: 0;
    }

    .chipper-sp-menu[open] .chipper-sp-menu-icon i:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    .chipper-sp-menu-body {
        width: 100%;
        padding: 0;
        margin: 0;
        background: #fff;
    }

    .chipper-sp-menu-body > a,
    .chipper-sp-menu-group > a {
        display: block !important;
        width: 100% !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        border-bottom: 1px solid #e5e5e5;
        box-sizing: border-box;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 14px;
        line-height: 1.5;
        background: #fff;
    }

    .chipper-sp-menu-body a:hover {
        background: #f5f5f5;
    }

    .chipper-sp-menu-group {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .chipper-sp-menu-title {
        padding: 10px 18px;
        background: #eee;
        color: #333;
        font-size: 13px;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
    }

    .chipper-sp-menu-group > a {
        padding-left: 30px !important;
    }

    .chipper-sp-menu small {
        font-size: 11px;
    }

    .chipper-sp-contact {
        background: #e85b27 !important;
        color: #fff !important;
        font-weight: bold;
        text-align: center;
    }

}


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

    .chipper-sp-menu summary {
        height: 52px;
        padding-left: 15px;
        padding-right: 15px;
    }

}



/* =========================================================
   CHIPPER SP HEADER / SALE BANNER FINAL FIX
   ========================================================= */

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

    /* -----------------------------------------
       ヘッダー
       logo.png ＋ h_tel_2.jpg を横並び
    ----------------------------------------- */

    #header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 10px !important;

        width: 100% !important;
        height: auto !important;

        padding: 10px 12px !important;
        margin: 0 !important;
    }

    /* PC用タイトル等はスマホでは非表示 */
    #h_main {
        display: none !important;
    }

    /* 左：ロゴ */
    #header h1 {
        display: block !important;
        grid-column: 1 !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        text-align: left !important;
    }

    #header h1 a {
        display: block !important;
        width: 100% !important;
    }

    #header h1 img {
        display: block !important;

        width: 100% !important;
        max-width: 210px !important;
        height: auto !important;

        margin: 0 !important;
    }

    /* 右：電話 */
    #header .h_tel {
        display: block !important;
        grid-column: 2 !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        text-align: right !important;
    }

    #header .h_tel img {
        display: block !important;

        width: 100% !important;
        max-width: 230px !important;
        height: auto !important;

        margin: 0 0 0 auto !important;
    }


    /* -----------------------------------------
       SALEバナー
       JSで付与した親クラスを必ず1カラム化
    ----------------------------------------- */

    #wp_contents .chipper-sale-onecol {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 14px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #wp_contents .chipper-sale-onecol > * {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        float: none !important;
    }

    #wp_contents .chipper-sale-banner {
        display: block !important;

        width: 100% !important;
        max-width: 470px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        float: none !important;
        clear: both !important;
    }

    #wp_contents .chipper-sale-banner img {
        display: block !important;

        width: 100% !important;
        max-width: 470px !important;
        height: auto !important;

        margin: 0 auto !important;

        float: none !important;
    }

}

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

    #header {
        column-gap: 8px !important;
        padding: 9px 10px !important;
    }

    #header h1 img {
        max-width: 190px !important;
    }

    #header .h_tel img {
        max-width: 210px !important;
    }

}



/* =========================================================
   商品詳細ページ スマホ対応
   メイン画像＋商品情報を縦積みにする
   ========================================================= */

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

    /*
     * 以前設定した横スクロールを解除
     */
    #wp_contents table {
        max-width: 100% !important;
    }

    /*
     * 商品詳細上部の最初のテーブル
     */
    #wp_contents table:first-of-type {
        display: table !important;

        width: 100% !important;
        max-width: 100% !important;

        table-layout: fixed !important;

        overflow: visible !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #wp_contents table:first-of-type tbody {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    #wp_contents table:first-of-type tr {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * PCでは
     * 左：画像
     * 右：商品情報
     *
     * スマホでは上下にする
     */
    #wp_contents table:first-of-type td,
    #wp_contents table:first-of-type th {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        float: none !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * メイン画像
     */
    #wp_contents table:first-of-type img {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto 15px !important;

        float: none !important;
    }

    /*
     * 商品情報テキスト
     */
    #wp_contents table:first-of-type p,
    #wp_contents table:first-of-type div,
    #wp_contents table:first-of-type span,
    #wp_contents table:first-of-type strong,
    #wp_contents table:first-of-type a {
        max-width: 100% !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * 商品番号～価格部分
     */
    #wp_contents table:first-of-type td {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    /*
     * 一覧へ戻るリンク
     */
    #wp_contents table:first-of-type a {
        display: inline-block;
        max-width: 100%;
    }

}


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

    #wp_contents table:first-of-type td {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

}