/* © 岡田商店 binramune
   https://www.dagashiyasan.co.jp/assets/css/top.css
*/

/* =========================================================
   TOP INFO
========================================================= */

.info{
    width:100%;
    max-width:960px;
    min-height:480px;

    background-image:url('/assets/img/binramune_01.png');
    background-repeat:no-repeat;
    background-size:contain;

    display:block;
    position:relative;

    margin:0 auto 20px;
}

.info_text{
    width:470px;
    height:200px;

    overflow-y:auto;
    white-space:normal;
    word-break:break-all;

    font-size:0.93em;

    padding:5px 10px;

    position:absolute;

    margin:70px 445px 20px 35px;

    vertical-align:top;

    scrollbar-arrow-color:#ffffcc;
    scrollbar-face-color:#ffffff;
    scrollbar-3dlight-color:#ffff99;
    scrollbar-darkshadow-color:#ffff99;
    scrollbar-highlight-color:#ffff99;
    scrollbar-shadow-color:#ffff99;
    scrollbar-track-color:#ffffff;
}

.info_text2{
    width:485px;
    height:auto;

    white-space:normal;
    font-size:0.93em;

    padding:5px;

    position:absolute;

    margin:300px 440px 10px 35px;

    display:inline-block;
    vertical-align:top;
}

/* =========================================================
   TOP MENU
========================================================= */

#menu01,
.caution{
    display:block;
    width:100%;
    height:auto;

    margin:1em 0 0.5em;
    padding:0;

    border:none;
}

.menu01_a{
    display:inline-block;

    height:200px;

    border:1px #FAA551 solid;
    border-radius:10px;

    background-color:#fff;

    text-align:center;
}

.menu01_a p{
    margin:3px 10px;

    text-align:right;
    font-size:0.88em;
}

.caution p{
    text-align:right;
}

img.syouhin_binramune{
    max-width:320px;
}

#con1{
    display:inline-block;

    width:calc(100% - 1.6em);
    height:190px;

    margin:0;
    padding:0.8em;

    border:1px #F8E857 solid;
    border-radius:10px;

    background-color:#FFEC64;

    vertical-align:top !important;
}

#con2{
    display:inline-block;

    width:410px;
    height:190px;

    margin:25px 20px 60px 15px;
    padding:15px;

    border:1px #FAA551 solid;
    border-radius:10px;
}

/* 新ビンラムネのお知らせ */

#newbinramune-info{
    background-color:#F9FFCA;
    border-radius:10px;
    padding:0.6em 1em !important;
}

/* =========================================================
   TOP表示補正
========================================================= */

.top-menu-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);

    gap:12px 20px;

    margin:1.5em 0 2em;
}

.top-menu-card{
    min-height:130px;

    padding:0.8em;

    border:1px solid #F8E857;
    border-radius:10px;

    background:#FFEC64;
}

.top-menu-card a{
    display:block;
    color:#68472F;
}

.top-menu-card img{
    width:32px;
    height:auto;

    float:left;

    margin:0 12px 8px 0;
}

.top-menu-title{
    display:block;

    margin-bottom:0.8em;

    font-weight:bold;
    font-size:1.2em;
}

.top-menu-text{
    display:block;
    line-height:1.6;
}

.top-menu-link{
    text-align:right;
    padding-right:0.5em;
}

.footer{
    min-height:42px;
    overflow:visible;
}

/* =========================================================
   TABLET
========================================================= */

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

    .info{
        max-width:100%;
        min-height:auto;

        aspect-ratio:960 / 480;
    }

    .info_text{
        width:48%;
        height:38%;

        margin:7% 46% 0 4%;

        font-size:0.88em;
    }

    .info_text2{
        width:50%;

        margin:30% 44% 0 3%;

        font-size:0.88em;
    }

}

/* =========================================================
   SP
========================================================= */

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

    #con1{
        display:inline-block;

        width:calc(100% - 1.6em);
        height:auto;

        margin:0;
        padding:0.8em;

        border:1px #F8E857 solid;
        border-radius:10px;

        background-color:#FFEC64;

        vertical-align:top !important;
    }

    .menu01_a p{
        margin:5px auto 0.5em;

        text-align:center;
        font-size:0.88em;
    }

    .info{
        width:100%;
        height:auto;
        min-height:auto;

        display:inline-block;

        background-image:url('/assets/img/binramune_01sp1.png');
        background-repeat:no-repeat;
        background-size:contain;

        aspect-ratio:auto;
    }

    .info_text{
        display:inline-block;

        width:calc(100% - 15%);
        height:7.6em;

        margin:10% 5% 0.5em;
        padding:5px 10px;

        position:relative;

        overflow-y:auto;
        white-space:normal;
        word-break:break-all;

        vertical-align:top;

        font-size:0.86em;
    }

    .info_text2{
        display:block;

        width:calc(100% - 15px);
        height:auto;

        margin:1em 0;
        padding:5px;

        position:relative;

        white-space:normal;
        vertical-align:top;

        font-size:0.93em;
    }

    #newbinramune-info{
        background-color:#F9FFCA !important;
        border-radius:0;

        padding:0.6em 1em 1.6em !important;
    }

    img.syouhin_binramune{
        max-width:230px;
    }

    .caution p{
        text-align:left;
    }

    .top-menu-grid{
        grid-template-columns:1fr;
    }

}

/* for tablet */
@media screen and (min-width:689px) and (max-width:1100px){

    html,
    body{
        overflow-x:hidden;
    }

    .inner,
    #main,
    .main,
    .contents,
    #contents{
        width:min(960px, calc(100% - 32px)) !important;
        max-width:calc(100% - 32px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box;
    }

    .info{
        width:100%;
        max-width:960px;
        min-height:0;
        aspect-ratio:960 / 480;
        overflow:hidden;
    }

    .info_text{
        width:48%;
        height:38%;
        margin:7% 46% 0 4%;
    }

    .info_text2{
        width:50%;
        margin:30% 44% 0 3%;
    }

    #newbinramune-info{
        box-sizing:border-box;
        max-width:100%;
        overflow-wrap:break-word;
    }
}