@charset "UTF-8";

/*
 * tainan-taami.com 移行試作 — 現サイト (EC-CUBE 2.3.4) の見た目を master の default テンプレート上で再現する上書き CSS。
 *
 * 方針:
 *   - master の style.css は無改変。この tainan.css を後から読み込んで上書きする (site_frame.tpl に 1 行追加)。
 *   - 現サイトの CSS (common.css / index.css) から「実際に描画されているルール」だけを持ち込み、
 *     固定 width は max-width か @media (width > 768px) の中に閉じ込める ([A] の 7 件を発生させない)。
 *   - float によるカラム制御は master の flexbox (#main_column_frame / .colnum_order) に委ね、ここでは幅だけ与える。
 *   - id は現サイトのもの (#Header / #Fotter / #Main / #Lineup01 ...) をそのまま使い、master の #header / #footer と衝突させない。
 *   - 記法は master に合わせて CSS ネスト。
 *
 * 現サイトの寸法 (基準):
 *   #content 948px (+1px 枠) / #container 908px / 左 165 + 19 + 中 540 + 19 + 右 165
 */

:root {
    --tainan-frame: 950px;        /* 948px + 枠線 1px × 2 */
    --tainan-gutter: 20px;        /* 948 → 908 の左右余白 */
    --tainan-border: #ccc;
    --tainan-font: 'メイリオ', Meiryo, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Osaka, 'MS UI Gothic', arial, helvetica, clean, sans-serif;
}

/* ==============================================
 全体
=============================================== */
body {
    color: #333;
    font-family: var(--tainan-font);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: normal;
    /* 現サイト: body { background: #73ADD7 url(gradient.gif) repeat-x } + #page { background: url(sky.jpg) no-repeat center top } */
    background: url("img/tainan/common/sky.jpg") no-repeat center top,
                #73add7 url("img/tainan/common/gradient.gif") repeat-x left top;
}

.frame_outer {
    /* 絶対配置のコピーライト (#Copyrights) が #Fotter の下にはみ出す分の余白 */
    padding-bottom: 60px;
}

/* 現サイトの h1#Keyword: 画面最上部の帯 */
h1#Keyword {
    margin: 0;
    padding: 3px 0;
    height: 17px;
    background: #9db5cf;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    line-height: 17px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 948px の白い箱 (#content) は master に対応する要素がないので、
   #Header / #container / #Fotter の 3 つに同じ幅と左右の枠線を与えて 1 つの箱に見せる */
#Header,
#container,
#Fotter {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--tainan-frame);
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid var(--tainan-border);
    border-right: 1px solid var(--tainan-border);
}

/* ==============================================
 ヘッダー (#Header / #Logo / #Toplink / #Mainmenu)
=============================================== */
#Header {
    position: relative;
    margin-top: 91px;                /* 現サイト: #content { margin: 91px auto 0 } */
    height: 106px;
    padding: 0 var(--tainan-gutter);
    border-top: 1px solid var(--tainan-border);
    background: #fff url("img/tainan/header/bg_header.gif") no-repeat 810px 25px;
    text-align: left;

    a {
        text-decoration: none;
    }
}

#Logo {
    a {
        display: block;
        width: 238px;
        height: 61px;
        margin: 20px 0 0;
        background: url("img/tainan/header/logo.gif") no-repeat;
    }

    em {
        display: none;
    }
}

#Toplink {
    position: absolute;
    top: 0;
    right: var(--tainan-gutter);
    width: 400px;
    display: flex;

    div {
        padding: 3px 10px 0;
        border-left: 3px solid #fec232;
    }

    a {
        display: block;
        color: #330000;
        font-size: 14px;

        &:hover {
            color: #663300;
            text-decoration: underline;
        }
    }
}

#Mainmenu {
    position: absolute;
    top: 38px;
    right: calc(var(--tainan-gutter) + 128px);
    width: 490px;
    padding: 4px 0 0 20px;
    background: url("img/tainan/header/bg_menu.jpg") no-repeat;
    font-size: 14px;

    ul {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        margin: 0;
        padding: 0 3px;
        text-align: center;
    }

    a {
        display: block;
        padding: 6px;
        color: #a40000;
        font-weight: bold;

        &:hover {
            color: #cc3300;
        }
    }
}

/* ==============================================
 コンテンツ枠とカラム
=============================================== */
#container {
    padding: 0 var(--tainan-gutter);       /* master: width 980px → 幅は上の共通指定で max-width 950px */
    background: #fff;
}

/* カラム幅は 908px 基準の % で与える (165 / 540 / 165 + 19px × 2)。
   並び順・折り返しは master の flexbox (#main_column_frame, .colnum_order) に任せる */
@media (width > 768px) {
    #main_column.colnum3 {
        width: 59.5%;
        padding: 15px 0 0;
    }

    .side_column {
        padding: 15px 0 0;

        &#leftcolumn,
        &#rightcolumn {
            width: 18.2%;
        }
    }
}

/* サイドブロック: 現サイトは 165px 幅の画像で組まれている */
#container .side_column .block_outer {
    padding: 0 0 15px;                      /* master: 0 7% 10px */
}

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

    /* ブロック全体を画像幅 (165px) に揃える。PC ではカラム幅と同じなので効かず、
       768px 以下でカラムが 100% になったときに中央に寄る */
    #login_area,
    #cart_area {
        max-width: 165px;
        margin: 0 auto;
    }

    /* master のタイトル帯 (オレンジ罫線) を消し、現サイトのタイトル画像をそのまま見せる */
    #login_area h2,
    #cart_area h2 {
        padding: 0;
        border: 0;
        background: none;
        line-height: 0;
    }

    /* 現サイトの #loginarea / #cartarea: cont_side.gif を縦に敷いて btm_side.gif で閉じる */
    #login_area .block_body,
    #cart_area .block_body {
        border: 0;
        padding: 0 10px 10px;
        background: url("img/tainan/side/cont_side.gif") repeat-y;
        font-size: 12px;
    }

    /* ログインボタンの下の 新規会員登録 / パスワードを忘れた方 (旧 div#loginarea .under) */
    #login_area .under {
        padding: 10px 0 0;

        a {
            display: block;
            padding: 5px 10px;
            color: #00e;
            font-size: 12px;
            text-decoration: underline;
        }
    }

    /* ブロックの下端を閉じる画像 (各 bloc テンプレートが出力する) */
    .side_bottom {
        display: block;
        margin: 0;
        line-height: 0;
    }

    #cart_area {
        .information {
            padding: 5px 0 0;

            p {
                margin: 0;
                padding: 5px 0 10px;
                font-size: 12px;
            }

            /* 旧サイトは「商品数」の下に罫線画像が入る */
            .item {
                padding: 0 0 10px;
                background: url("img/tainan/side/line_146.gif") no-repeat bottom;
            }
        }

        .btn {
            padding: 10px 0 0;
            background: none;
            text-align: center;
        }
    }

    .block_outer .block_body dl.formlist dt {
        padding-left: 0;
        background: none;
    }

    .block_body .box140 {
        width: 141px;
    }
}

    /* 商品カテゴリ (旧: div#categoryarea)。cont_side.gif を縦に敷き、
       矢印つきの下線リンクにする。現在のカテゴリは arrow_red + .onlink */
    #category_area {

        .block_body {
            padding: 0;
            border: 0;
            background: none;
        }

        h2 {
            padding: 0;
            border: 0;
            background: none;
            line-height: 0;
        }

        .block_body > ul {
            margin: 0;
            padding: 0 10px 10px;
            background: url("img/tainan/side/cont_side.gif") repeat-y;
            font-size: 10px;          /* 旧サイトの値。165px 幅に「台湾アップルマンゴー(3)」が 1 行で収まる */
            line-height: 1.4;
        }

        li {
            padding: 0 0 0 20px;
            background: url("img/tainan/common/arrow_blue.gif") 0 6px no-repeat;

            /* master は li.level1 に区切り線、その p に独自の矢印アイコンと padding を付ける。
               セレクタの詳細度が高い (#category_area li.level1 p) ので、こちらも .level1 で打ち消す */
            &.level1 {
                border-bottom: 0;

                p {
                    margin: 0;
                    padding-left: 0;
                    background: none;
                }
            }

            &.onmark {
                background-image: url("img/tainan/common/arrow_red.gif");
            }

            a {
                display: block;
                padding: 3px 0;
                text-decoration: underline;

                &.onlink {
                    color: #f00;
                }
            }
        }
    }

    /* 利用ガイド (旧: div#guidearea)。165×34 の画像ボタン 3 本 */
    #guide_area {
        padding: 15px 0 0;
        border: 0;
        background: none;
        line-height: 0;
        text-align: center;

        ul {
            margin: 0;
            padding: 0;
        }

        li {
            margin: 0;
            padding: 0 0 6px;
            border: 0;
            background: none;
        }

        a {
            display: inline-block;
            padding: 0;
            border: 0;
            background: none;
        }
    }

.tainan_side_banner {
    text-align: center;

    a {
        display: block;
    }
}

/* 新着情報 (メインカラム): 現サイトは全件を折り返しなしで縦に並べる */
#main_column #news_area {
    .block_body {
        border: 0;
    }

    h2 {
        padding: 0;
        border: 0;
        background: none;
        line-height: 0;

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

        .rss {
            display: none;
        }
    }

    .news_contents {
        padding: 10px 0;
        max-height: none;
        height: auto !important;
        overflow: visible;
    }

    dl.newslist {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 10px 10px 13px;
        background: url("img/tainan/top/news_line.jpg") 0 100% repeat-x;

        &:last-child {
            background: url("img/tainan/top/news_line.jpg") 0 100% repeat-x;
        }

        dt {
            width: 120px;
            margin: 0 20px 5px 0;
            font-weight: bold;

            &:nth-of-type(2) {
                width: calc(100% - 140px);
                margin-right: 0;
            }
        }

        dd {
            width: calc(100% - 140px);
            margin: 0 0 0 140px;
            padding: 0;
        }
    }
}

/* ==============================================
 トップページ: メインビジュアル + 商品ラインナップ (bloc: top_lineup.tpl)
=============================================== */
#Main {
    box-sizing: content-box;
    width: 418px;
    height: 170px;
    margin: 0 auto 25px;
    padding: 110px 30px 20px 460px;
    background: url("img/tainan/main/bg_mango2026.jpg") no-repeat;
    font-family: var(--tainan-font);
    font-size: 16px;
    line-height: 1.5;

    ul,
    li {
        margin: 0;
        list-style: none;
    }

    li {
        padding: 0 0 5px 18px;
    }

    .j10 {
        font-size: 10px;
    }
}

#Btn_mango {
    display: block;
    width: 274px;
    height: 50px;
    margin: 5px 0 0 85px;
    background: url("img/tainan/main/btn_mango_off.jpg") no-repeat;
    text-indent: -9999px;
    overflow: hidden;

    &:hover {
        background-image: url("img/tainan/main/btn_mango_on.jpg");
    }
}

/* 見出し帯: PC (950px 超) では現サイトの画像 (ttl_spring_products.jpg / ttl_winter_products.jpg, 908×46) をそのまま、
   950px 以下では画像を隠してテキスト版を出す。テキスト版の色は画像から採取し、
   下線の「1px の線 + 2px 空き + 3px の帯」は背景グラデーションで再現 */
.Ttl {
    --ttl-color: #f06600;
    --ttl-line: #ff8434;

    margin: 5px 0 20px;
    line-height: 0;

    h2 {
        margin: 0;
        padding: 0;
    }

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

    .Ttl_text,
    .Ttl_note {
        display: none;
    }

    .Ttl_note {
        margin: 0;
        font-size: 11px;
        text-align: right;

        .caution {
            color: #009944;
        }

        strong {
            font-size: 15px;
        }

        mark {
            background: #ff0;
            color: inherit;
        }
    }

    &.Ttl_spring .Ttl_note {
        color: #0066ff;
    }

    &.Ttl_winter {
        --ttl-color: #3399cc;
        --ttl-line: #62b2d5;

        .Ttl_note {
            color: #333;
        }
    }
}

.Lineup {
    box-sizing: border-box;
    max-width: 908px;
    margin: 0 auto;
    padding: 0 7px 0 6px;

    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        width: 285px;

        &.line {
            width: 100%;
            margin: 0 0 15px;
            line-height: 0;
        }

        /* 右端の飾り画像 (現サイトでは .Lineup の背景)。カードと同じ列に置く */
        &.deco {
            line-height: 0;
        }
    }

    &#Lineup02 li.deco {
        align-self: flex-end;               /* 現サイト: background-position right bottom */
    }

    h3 {
        margin: 0;
        padding: 0;
        line-height: 0;
    }

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

.item_photo {
    vertical-align: bottom;
}

.item_txt {
    box-sizing: border-box;
    width: 285px;
    height: 117px;
    margin-bottom: 10px;
    padding: 10px 13px 20px;
    background: url("img/tainan/top/bg_itemtxt.jpg") no-repeat;

    p {
        margin: 0 0 3px;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
    }
}

.btnbuy,
.btnsoldout {
    display: block;
    margin: 5px auto 0;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
}

.btnbuy {
    width: 258px;
    height: 41px;
    background: url("img/tainan/top/btnu_buy.jpg") no-repeat;

    &:hover {
        background-image: url("img/tainan/top/btno_buy.jpg");
    }
}

.btnsoldout {
    width: 250px;
    height: 43px;
    background: url("img/tainan/top/btn_soldout.gif") no-repeat;
}

/* ==============================================
 トップページ: お支払い/配送/お届け時期 (bloc: top_remark.tpl)
=============================================== */
#Remark {
    max-width: 908px;
    margin: 30px auto 0;

    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0 19px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        width: 290px;
        margin: 0 0 20px;
    }

    h2.ttl_remark {
        margin: 0;
        padding: 0;
        line-height: 0;

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

    .cont_remark {
        box-sizing: border-box;
        width: 290px;
        height: 190px;
        padding: 15px 10px 10px 20px;
        background: url("img/tainan/top/uline_remark.gif") no-repeat bottom center;
    }

    dl {
        margin: 0;
    }

    dt {
        padding: 0 0 5px;
        font-size: 15px;
        line-height: 1.5;
    }

    dd {
        margin: 0;
        padding: 0;
        font-size: 13px;
    }
}

.btnpay,
.btndelivery,
.btnsendtime {
    display: block;
    float: right;
    width: 234px;
    height: 32px;
    margin: 15px 0 0;
    text-indent: -9999px;
    overflow: hidden;
}

.btnpay {
    background: url("img/tainan/top/btnu_pay.gif") no-repeat;

    &:hover {
        background-image: url("img/tainan/top/btno_pay.gif");
    }
}

.btndelivery {
    background: url("img/tainan/top/btnu_delivery.gif") no-repeat;

    &:hover {
        background-image: url("img/tainan/top/btno_delivery.gif");
    }
}

.btnsendtime {
    background: url("img/tainan/top/btnu_sendtime.gif") no-repeat;

    &:hover {
        background-image: url("img/tainan/top/btno_sendtime.gif");
    }
}

/* ==============================================
 商品詳細ページ
   旧サイト (products.css) の見た目を master の markup に寄せる。
   markup の違い: 旧 #detailphotoblock / #detailrightblock → master は #detailphotobloc /
   #detailrightbloc (末尾の k が無い)。旧 table.products は master では dl に分かれている。
=============================================== */

/* タイトル帯 (旧: div#detailtitle h2 + ttl_h2.jpg の下線) */
#detailtitle {
    margin: 0 0 15px;

    h2 {
        margin: 0;
        padding: 10px 5px 8px;
        background: url("img/tainan/title/ttl_h2.jpg") 0 100% repeat-x;
        color: #33210d;
        font-size: 125%;
        font-weight: bold;
        line-height: 1.4;
    }
}

/* 詳細メインコメント。716px のバナー画像が入るのでメインカラム全幅で見せる
   (master は #detailrightbloc の中にあるが、detail.tpl で外に出している) */
#main_column .main_comment {
    margin: 0 0 25px;

    img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    .productname {
        margin: 12px 0 0;
        color: #c30;
        font-size: 140%;
        font-weight: bold;
    }

    .productlead {
        margin: 0;
        color: #330;
        font-size: 15px;
        line-height: 1.6;
    }

    .attention {
        margin: 12px 0 0;
        color: #f00;
        font-weight: bold;
        line-height: 1.5;
    }
}

/* 写真 + 商品情報 (旧: 写真 292px + 表 424px。サブコメントの後に出す。detail.tpl で並べ替えている) */
#detailarea {
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
    margin: 30px 0 0;
}

@media (width > 768px) {
    #main_column.colnum2 #detailarea {
        #detailphotobloc {
            width: 40.8%;                   /* 292 / 716 */
        }

        #detailrightbloc {
            width: 59.2%;                   /* 424 / 716 */
        }
    }
}

#detailphotobloc {
    /* 旧サイトは「画像を拡大する」が写真の上 */
    display: flex;
    flex-direction: column;

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

    /* 「画像を拡大する」は旧サイトの画像 (b_expansion.gif 85×13、虫眼鏡+文字) に置き換える */
    .mini {
        order: -1;
        display: block;
        margin: 0 0 3px;

        a {
            display: block;
            width: 85px;
            height: 13px;
            background: url("img/tainan/products/b_expansion.gif") no-repeat left top;
            text-indent: -9999px;
            overflow: hidden;
        }
    }
}

/* 商品情報を旧サイトの表組み (ベージュ #fed98e のラベル列) に寄せる */
#detailrightbloc {
    padding: 20px 0 0;

    /* 旧サイトの表に無いもの */
    ul.status_icon,
    dl.relative_cat {
        display: none;
    }

    dl.product_name,
    dl.product_code,
    dl.normal_price,
    dl.sale_price {
        display: flex;
        margin: 0;
        border-bottom: 1px solid #fed98e;

        dt {
            box-sizing: border-box;
            display: block;
            width: 40%;
            padding: 8px 10px;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            margin-bottom: -1px;
            background: #fed98e;
            color: #33210d;
            font-weight: normal;
        }

        dd {
            display: block;
            margin: 0;
            padding: 8px 10px;
        }
    }

    dl.sale_price dd {
        color: #f00;
        font-weight: bold;
    }

    /* 品切れ表示: 旧サイトは枠の無い赤字 */
    .cart_area {
        margin: 20px 0 0;
        padding: 0;
        border: 0;
        background: none;
        width: auto;

        .attention {
            color: #f00;
            font-weight: bold;
        }
    }
}

/* サブコメント (旧 div.subarea) */
#main_column .sub_area {
    padding: 30px 0 0;

    h3 {
        margin: 0 0 10px;
        padding: 5px 10px;
        border: 0;
        background: url("img/tainan/products/bg_subh3.gif") repeat-x;
        color: #600;
        font-size: 120%;
    }

    /* 旧サイトは 本文 450px + 写真 260px。master は写真欄を 25% (179px) にするので、
       max-width: 100% で幅だけ縮み、height 属性 (260) のまま縦長に歪む */
    div.subtext {
        flex: 1 1 0;
        width: auto;
        margin-bottom: 20px;
    }

    div.subphotoimg {
        flex: 0 0 36.3%;                    /* 260 / 716 */
        width: auto;
        max-width: 260px;
        text-align: right;

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

@media screen and (width <= 768px) {
    #main_column .sub_area div.subphotoimg {
        flex-basis: 100%;
        max-width: none;
        text-align: center;
    }
}

/* お客様のお声 (サブコメント内の p.dot2): 1 行ごとに点線の下線。
   master の .sub_area は flex なので、子の inline が block 化されて最終行にしか線が出ない */
#main_column .sub_area:has(> p.dot2) {
    display: block;
}

#main_column p.dot2 {
    display: inline;
    padding-bottom: 0.3em;
    border-bottom: 1px dotted #999;
    color: #333;
    font-size: 1.2em;
    line-height: 2;
}

/* お客様の声 */
#customervoice_area {

    /* master は h2 にオレンジの罫線 + bg_tit_sub_01.jpg の帯を付けるが、旧サイトは
       title_voice.gif だけ (罫線も画像に含まれる)。重なって二重線になるので打ち消す */
    h2 {
        margin-bottom: 10px;
        padding: 0;
        border: 0;
        background: none;
        line-height: 0;

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

/* その他のおすすめ商品 (旧 div#whoboughtarea)。
   2 列、各商品は 65px の写真を左に浮かせて 商品名 → 価格 → 説明 を回り込ませる */
#main_column #whobought_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    padding: 35px 0 0;

    /* master は h2 にオレンジの罫線 + 帯を付けるが、旧サイトは title_recommend.gif だけ */
    h2 {
        grid-column: 1 / -1;
        margin: 0 0 10px;
        padding: 0;
        border: 0;
        background: none;
        line-height: 0;

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

    .product_item {
        float: none;
        width: auto;
        padding: 10px;
        border-bottom: 1px dotted #ccc;
        background: none;
        display: flow-root;

        .productImage {
            width: auto;
            margin: 0 5px 0 0;
        }

        .productContents {
            float: none;
            width: auto;
        }

        h3 {
            font-weight: bold;

            a {
                color: #00e;
                text-decoration: underline;
            }
        }

        .sale_price {
            color: #333;
        }

        .sale_price .price {
            color: #f00;
            font-weight: bold;
        }
    }
}

@media screen and (width <= 768px) {
    #main_column #whobought_area {
        grid-template-columns: 1fr;
    }
}

/* 旧サイトの商品写真に枠線は無い (master は img.picture に 1px の枠を付ける) */
#detailphotobloc img.picture {
    border: 0;
}

#main_column {

    /* 旧サイトはリード文も灰色の箱も無く、ボタンだけが左に出る */
    .review_bloc {
        margin-bottom: 10px;
        padding: 0;
        background: none;

        .review_btn {
            margin: 0;
            width: auto;
        }
    }

    /* 旧サイトは 日付/投稿者 → タイトル → 本文 の順。master は タイトルが先なので入れ替える */
    #undercolumn ul li:has(> .voicetitle) {
        display: flex;
        flex-direction: column;
    }

    .voicedate {
        order: -1;
        margin: 12px 0 0;
        font-weight: bold;
    }

    .voicetitle {
        padding: 5px 0;
        font-size: 120%;
        font-weight: bold;
    }

    /* 区切り線は master が li の背景 (line_dot) で引いているので、こちらでは引かない。
       border-bottom を足すと 1 件につき罫線が 2 本出る */
    .voicecomment {
        margin: 0;
        padding: 0;
        line-height: 1.6;
    }

    .recommend_level {
        color: #f00;
    }
}

/* ==============================================
 下層ページ共通 (旧 common.css / under.css / under02.css / mypage.css)
   旧サイトの下層は 2 種類:
     - 2 カラム (#two_maincolumn): 左 165px + 本文 716px。見出しは ttl_h2.jpg の二重線
     - 1 カラム (#under02column / #mypagecolumn): カート・購入フロー・MYページ。幅 908px、見出しは茶色の細線
   1 カラムのページは dtb_blocposition で左カラムを外している (TainanDataMigration::design())
=============================================== */
@media (width > 768px) {
    #main_column.colnum2 {
        width: 78.9%;                       /* 716 / 908 */
        padding-top: 15px;

        &.right {
            padding-right: 0;
        }
    }

    #main_column.colnum1 {
        width: 100%;
        padding-top: 15px;
    }
}

#main_column {
    h2.title {
        margin: 0 0 15px;
        padding: 10px 5px 8px;
        border: 0;
        background: url("img/tainan/title/ttl_h2.jpg") 0 100% repeat-x;
        color: #33210d;
        font-size: 150%;
        line-height: 1.4;
    }

    &.colnum1 h2.title {
        margin: 0 20px 15px;
        padding: 5px 10px;
        border-bottom: 1px solid #ac976a;
        background: none;
        color: #ac976a;
        font-size: 14px;
    }
}

.attention {
    font-weight: bold;
}

/* 旧サイトの表は幅なり・中央寄せ。フォームの表 (#undercolumn_xxx の中) は 2.25 のまま全幅 */
#undercolumn table {
    width: auto;
    margin: 15px auto 0;
}

#undercolumn [id^="undercolumn_"] table,
#mypagecolumn table {
    width: 100%;
    margin: 15px auto 20px;
}

/* ==============================================
 ユーザー定義ページ (data/Smarty/templates/default/user_data/*.tpl)
   tpl は旧サイトの markup のままなので、旧 CSS のルールをほぼそのまま当てる。
   #undercolumn で囲んでいないページ (mangomania 等) もあるので #main_column を起点にする
=============================================== */
/* 旧 CSS は dl / dd / blockquote をリセットしていない (ブラウザ既定の字下げで組まれている) */
body.LC_Page_User #main_column {
    dl {
        margin: 13px 0;
    }

    dd {
        margin-left: 40px;
    }

    blockquote {
        margin: 13px 40px;
    }
}

#main_column {
    .bg_gold {
        margin: 15px 0 0;
        padding: 3px 6px;
        background: #d7c796;
        color: #442308;
        font-size: 117%;
    }

    /* プライバシーポリシー・サイトポリシー */
    .title2 {
        margin: 10px 0;
        padding: 5px 10px;
        background: url("img/tainan/title/bg_rglh2.gif") repeat-x;
        color: #333;
        font-size: 120%;
    }

    /* クロネコ@ペイメント */
    .kuro {
        dt {
            margin-top: 1em;
            color: #c00;
            font-size: 16px;
            font-weight: bold;
            line-height: 1.5;
        }

        dd {
            margin: 0.5em 0 0;
            padding: 0 1em 1em;
        }
    }
}

/* よくある質問 */
#Qanda {
    h3 {
        padding: 10px 0 5px;
    }

    dl,
    dt,
    dd {
        margin: 0;
        padding: 0;
    }

    dt {
        padding: 10px 0 10px 30px;
        border-bottom: 1px dotted #ccc;
        background: url("img/tainan/contents/icn_q.gif") no-repeat left center;
        font-size: 16px;
    }

    dd {
        margin: 15px 0 20px;
        padding-left: 30px;
        background: url("img/tainan/contents/icn_a.gif") no-repeat left top;
        font-size: 13px;
        line-height: 1.8;
    }
}

/* FAX 注文 */
#Fax_sample {
    max-width: 517px;
    margin: 0 auto;

    img {
        vertical-align: bottom;
    }
}

#Fax_attention {
    margin: 10px 0 20px;
    padding: 10px 20px;
    border: 1px solid #f60;
}

/* 台湾アップルマンゴーマニア / ドラゴンフルーツ (旧 products.css) */
#AppleMangotitle,
#Dragonfruitstitle {
    margin: 0 0 10px;

    h2 {
        margin: 20px 0 0;
        text-align: center;
    }
}

#AppleMangoarea {
    clear: both;
    padding: 20px 0 0;

    h3 {
        clear: both;
        margin: 10px 0;
        padding: 5px 10px;
        background: url("img/tainan/mango/bg_apph3.gif") repeat-x;
        color: #600;
        font-size: 120%;
    }

    h4 {
        margin: 0;
        padding: 10px 5px;
        color: #32b16c;
        font-size: 16px;
    }
}

#main_column {
    p.normal,
    #wrapmemo p {
        margin: 0;
        padding: 0 10px 10px;
        color: #333;
        font-size: 14px;
        line-height: 1.5;
    }

    p.dot {
        display: inline;
        padding-bottom: 0.3em;
        border-bottom: 1px dotted #999;
        color: #333;
        font-size: 0.9em;
        line-height: 2;
    }

    .side_a {
        float: right;
        width: 310px;
        margin: 0 0 10px 10px;

        table {
            width: 100%;
            margin: 0 0 10px;
        }
    }

    .lgtb_img {
        float: left;
        margin: 16px 16px 0 0;
    }
}

/* 旧 common.css の汎用クラス */
.j10 { font-size: 10px; line-height: 0.8; }
.fRight { float: right; margin-left: 10px; }
.fLeft { float: left; margin-right: 10px; }
.FRight { float: right; }
.FLeft { float: left; }
.Imgleft { float: left; margin: 0 10px 10px 0; }
.Imgright { float: right; margin: 0 0 10px 10px; }
.centering { margin: 20px 0; text-align: center; }
.reset,
.clear {
    display: block;
    clear: both;
    height: 1px;
    margin: 0;
    font-size: 1px;
    line-height: 1px;
}

/* 会員登録の規約 (entry/kiyaku.tpl。前置きは旧サイトの文言を移植したもの) */
#undercolumn_entry {
    .message {
        font-weight: normal;
        font-style: italic;
    }

    .kiyaku_text {
        width: 549px;
        max-width: 100%;
        height: 576px;
    }
}

/* ==============================================
 商品一覧 (旧 products.css)
   旧: 商品名 → コメント → 価格(税込) と「詳細をみる」を 1 行 → 品切れ表示。ステータスアイコンは出していない
=============================================== */
#undercolumn {
    /* 件数と並び替え: 旧サイトは灰色の帯 1 本 (ul.pagenumberarea) */
    > div:has(> span.attention) {
        margin: 20px 0 0;
        padding: 10px;
        background: #f3f3f3;

        .attention {
            color: #f00;
        }
    }

    .pagenumber_area {
        background: none;

        .navi {
            margin: 0;
        }

        .navi:not(:has(a, strong)) {
            display: none;
        }
    }

    #page_navi_top .pagenumber_area {
        margin: -38px 0 0;
        padding: 10px;

        .change a {
            color: #00e;
            text-decoration: underline;
        }

        .change {
            font-size: 0;                   /* 「表示件数」とセレクトは旧サイトに無い */

            a {
                margin-left: 0.7em;             /* font-size 0 で &nbsp; が潰れるので間隔は margin で */
                font-size: 13px;
            }

            select {
                display: none;
            }
        }
    }

    #page_navi_bottom .change {
        display: none;
    }
}

div.list_area {
    padding: 20px 0 30px;
    border-bottom: 1px dotted #ccc;
    gap: 10px;

    .listphoto {
        width: 130px;
        flex-shrink: 0;

        img.picture {
            width: 130px;
            height: auto;
            border: 0;
        }
    }
}

#main_column.colnum2 .listrightbloc,
#main_column.colnum1 .listrightbloc {
    width: auto;
    flex: 1;
}

.listrightbloc {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name    name"
        "comment comment"
        "price   button"
        "cart    cart";
    align-items: center;

    ul.status_icon {
        display: none;
    }

    h3 {
        grid-area: name;
        padding: 0 10px 5px;
        font-size: 120%;

        a {
            color: #e60012;
            text-decoration: underline;
        }
    }

    .listcomment {
        grid-area: comment;
        margin: 0;
        padding: 0 10px;
        line-height: 1.5;
    }

    .pricebox {
        grid-area: price;
        margin: 10px 0 0;
        padding: 0 10px;
        font-size: 14px;
        font-weight: bold;

        .price {
            color: #f00;
        }
    }

    .detail_btn {
        grid-area: button;
        margin: 10px 10px 0 0;
    }

    .cart_area {
        grid-area: cart;
        width: auto;
        margin: 13px 0 0;
        padding: 0;
        border: 0;
        background: none;

        .cartbtn.attention {
            color: #333;
            font-style: italic;
            font-weight: normal;
        }
    }
}

/* ==============================================
 カート・購入フロー・MYページ (旧 under02.css / mypage.css)
=============================================== */
#undercolumn_cart,
#undercolumn_shopping,
#mypagecolumn {
    margin: 0 20px;
}

/* ログイン (MYページ・購入手続き): 旧サイトはベージュの太枠の箱 2 つ */
#undercolumn_login {
    .login_area {
        box-sizing: border-box;
        max-width: 760px;
        margin: 0 auto 20px;
        padding: 20px 15px;
        border: 5px solid #c5b498;

        h3 {
            margin: 0 0 13px;
            padding: 0 0 0 22px;
            background: url("img/tainan/login/icn_arrow.gif") no-repeat left center;
            color: #333;
            font-size: 13px;
        }

        > p,
        .inputtext,
        .inputtext02 {
            padding: 0 0 0 55px;
        }

        .inputbox {
            box-sizing: border-box;
            max-width: 500px;
            margin: 15px auto 0;
            padding: 15px 20px;
            background: #f7f2e7;

            /* 「会員登録をする」ボタンだけの箱は旧サイトでは地色なし */
            &:not(:has(input[type="text"], input[type="email"], input[type="password"])) {
                background: none;
            }
        }

        .btn_area {
            background: none;
        }
    }
}

#undercolumn_cart {
    .empty .attention {
        color: #333;
        font-weight: normal;
    }

    .point_announce {
        display: none;                      /* ポイントは使っていない (USE_POINT = false でも枠だけ残る) */
    }

    .empty {
        text-align: center;
    }
}

/* ==============================================
 フッター (#Fotter — 現サイトの綴りのまま)
=============================================== */
#Fotter {
    position: relative;
    clear: both;
    height: 358px;
    margin-top: 0;
    border-bottom: 1px solid var(--tainan-border);
    background: #3b0819 url("img/tainan/common/bg_footer.jpg") no-repeat center top;
    text-align: left;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
    }
}

#Fottermenu {
    position: absolute;
    top: 180px;
    left: 130px;
    width: 680px;

    ul {
        display: flex;
        flex-wrap: wrap;
    }

    li {
        margin: 0 30px 8px 0;
        padding: 0 0 0 10px;
        background: url("img/tainan/common/arrow01.jpg") 0 50% no-repeat;
    }

    a {
        color: #7f2a2d;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;

        &:hover {
            color: #cc3300;
        }
    }
}

/* 背景画像に描かれた「TOPへ」「トップページへ」に重ねる透明リンク */
#Backtop {
    position: absolute;
    top: 0;
    right: 20px;
    display: flex;
    flex-direction: row-reverse;

    a {
        display: block;
        width: 130px;
        height: 20px;
        text-indent: -9999px;
        overflow: hidden;
    }
}

#Underlinks {
    position: absolute;
    top: 325px;
    left: 90px;
    width: 850px;
    height: 40px;
    color: #fff;
    font-size: 12px;
    line-height: 1;

    ul {
        display: flex;
        flex-wrap: wrap;
    }

    li {
        margin: 0 30px 0 0;
        padding: 0 0 0 10px;
        background: url("img/tainan/common/arrow02.jpg") 0 50% no-repeat;
    }

    a {
        color: #fff;

        &:hover {
            text-decoration: underline;
        }
    }
}

#Copyrights {
    position: absolute;
    top: 380px;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}

/* ==============================================
 950px 以下: 948px 固定で組まれていたヘッダー/メインビジュアル/フッターを流動化する
   (カラム落ちは master と同じ 768px だが、固定幅パーツはそれより早く崩れるので別のブレークポイントを設ける)
=============================================== */
@media screen and (width <= 950px) {
    h1#Keyword {
        height: auto;
        padding: 3px 8px;
        white-space: normal;
        line-height: 1.4;
    }

    #Header {
        height: auto;
        margin-top: 20px;
        padding: 10px;
        background-position: right 10px top 10px;
        text-align: center;
    }

    #Logo a {
        margin: 0 auto 8px;
    }

    #Toplink,
    #Mainmenu {
        position: static;
        width: auto;
    }

    #Toplink {
        justify-content: center;
        flex-wrap: wrap;
    }

    #Mainmenu {
        margin: 8px 0 0;
        padding: 0;
        background: none;

        ul {
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    /* メインビジュアル: 背景画像を幅いっぱいに縮めて上に、文言はその下に流す */
    #Main {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 34% 10px 10px;
        background-size: 100% auto;
        font-size: 14px;
    }

    #Btn_mango {
        margin: 10px auto 0;
        max-width: 100%;
        background-size: contain;
    }

    /* 商品詳細: 写真と商品情報を縦積みに (master も #detailarea を block にする) */
    #detailarea {
        gap: 0;
    }

    #detailphotobloc {
        margin-bottom: 15px;
        text-align: center;
    }

    #detailrightbloc dl {

        &.product_name,
        &.product_code,
        &.normal_price,
        &.sale_price {

            dt {
                width: 45%;
            }
        }
    }

    /* 見出し帯: 画像をやめてテキスト版に切り替える */
    .Ttl {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        gap: 0 20px;
        padding: 0 0 8px;
        background: linear-gradient(to bottom, var(--ttl-line) 0 1px, transparent 1px 3px, var(--ttl-line) 3px 6px) no-repeat left bottom / 100% 6px;
        line-height: 1.3;

        h2 {
            padding: 0 0 2px;
            color: var(--ttl-color);
            font-size: 16px;
            font-weight: bold;
        }

        .Ttl_img {
            display: none;
        }

        .Ttl_text,
        .Ttl_note {
            display: block;
        }
    }

    .Lineup {
        padding: 0;

        /* カードは 285px を基準に、入る分だけ横に並べて中央寄せ (908 → 3 列、820 → 2 列、390 → 1 列) */
        ul {
            justify-content: center;
            gap: 5px 20px;
        }

        li {
            flex: 0 1 285px;
            width: auto;
            text-align: center;
        }

        li.line {
            display: none;
        }
    }

    .item_txt {
        width: 100%;
        height: auto;
        padding: 10px 8px 15px;
        background-size: 100% 100%;
        text-align: left;
    }

    .btnbuy,
    .btnsoldout {
        max-width: 100%;
        background-size: contain;
    }

    #Remark {
        padding: 0 10px;

        ul {
            gap: 0 2%;
        }

        h2.ttl_remark {
            text-align: center;              /* 見出し画像 (290px) は列幅より狭いので中央に */
        }

        li {
            flex: 1 1 250px;
            width: auto;
        }

        .cont_remark {
            width: auto;
            height: auto;
            padding: 10px;
        }
    }

    .btnpay,
    .btndelivery,
    .btnsendtime {
        float: none;
        margin: 10px auto 0;
    }

    /* フッター: 背景画像の上に絶対配置していた要素を通常フローに戻す */
    #Fotter {
        height: auto;
        padding: 34% 10px 10px;                  /* bg_footer.jpg (948×303) を幅いっぱいに縮めた高さ分 */
        background-size: 100% auto;
    }

    #Fottermenu,
    #Backtop,
    #Underlinks,
    #Copyrights {
        position: static;
        width: auto;
        height: auto;
    }

    #Fottermenu {
        margin-bottom: 10px;

        a {
            color: #fff;
        }
    }

    #Backtop {
        display: none;
    }

    #Underlinks {
        margin-bottom: 10px;
        line-height: 1.6;
    }

    #Copyrights {
        padding: 10px 0;
    }
}

/* ==============================================
 768px 以下: 1 カラム化 (master の @media と同じブレークポイント)
=============================================== */
@media screen and (width <= 768px) {
    body {
        background-size: auto 300px, auto;
    }

    #container {
        padding: 0 10px;
    }

    /* サイドブロックは 165px 幅の画像で組まれているので、縦に積まずに横に並べて幅を使う。
       左右カラムの箱 (.side_column) は display: contents で消し、中のブロックを #main_column_frame に直接並べる。
       390px なら 2 列、768px なら 4 列になる */
    #main_column_frame {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        padding: 0;                              /* master: 0 4% */
    }

    #main_column {
        flex: 0 0 100%;
    }

    .side_column {
        display: contents;
    }

    #container .side_column .block_outer {
        flex: 0 0 auto;
        padding: 0;
    }
}