@charset "utf-8";

/* スマートフォン用CSS */
@media screen and (max-width: 414px) {

    /*▼新着レシピページ*/
    /* 黒板風　2 */
    .kokuban-s2 {
        position: relative;
        margin: 2em auto;
        margin-left: auto;
        margin-right: auto;
        padding: 3.2em 1em 1em;
        background: #3CB371;
        color: #fff;
        /* 文章色 */
        border: 8px solid #b2771f;
        /* 枠線 */
        border-radius: 3px;
        /* 角の丸み */
        box-shadow: 0 0 5px #333, 0 0 5px #555 inset;
        width: 74vw;
    }

    .newrecipe {
        font-size: 14pt;
        font-weight: 700;
        position: absolute;
        top: .5em;
        right: 0;
        left: 0;
        text-align: center;
    }

    .picture_area {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        margin-left: 1vw;
        text-align: center;
/*        width: 23vw;*/
    }

    .picture_area img {
        height: 185px;
        width: 300px;
        object-fit: cover;
    }

    .picture_area a:link {
        color: #fff;
    }

    .picture_area a:hover {
        color: #ff0000;
    }

    .kokuban-s2::before,
    .kokuban-s2::after {
        position: absolute;
        content: '';
        bottom: 0;
    }

    .kokuban-s2::before {
        width: 4%;
        right: 2%;
        border: solid 3px #ffff00;
        /*チョーク（黄色）*/
        border-radius: 3px 2px 0 2px;
    }

    .kokuban-s2::after {
        width: 3%;
        right: 10%;
        border: solid 3px #fff;
        /*チョーク（白） */
        border-radius: 8px 5px 2px 5px;
    }

    h3 {
        font-size: 28pt;
        margin-left: 3%;
    }

    h4 {
        font-size: 16pt;
        margin-left: 5%;
    }

    /*▼調味料*/
    .tyoumi {
        margin-top: -85px;
        padding-top: 85px;
    }

    .picture_area_tyoumi {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        margin-left: 1%;
        text-align: center;
    }

    .tyoumi_fg {
        text-align: center;
    }

   

    /*▼ふげん下ごしらえ*/
    .fg_msg {
        margin-left: 3px;
        width: 95%;
    }

    .picture_area_fg {
        text-align: center;
    }

    .picture_area_fg img {
        width: 90%;
    }

    /*▲ふげん下ごしらえ*/
    /*▲調味料*/
    /*▲新着レシピページ*/
    /*▼レシピ詳細*/
    #oe_recipe {
        background: rgba(32, 178, 170, 0.2);
        margin-left: auto;
        margin-right: auto;
        padding-top: 5%;
    }

    .recipeTitle {
        font-size: 16pt;
        font-weight: 700;
        margin-left: 5px;

    }

    #oe_recipe img {
        float: left;
        /*    height: 225px;*/
        margin-left: 5px;
        height: 185px;
        width: 300px;
        object-fit: cover;
    }

    /*▼材料*/
    .ingredientArea {
        float: left;
        padding-left: 20px;
/*        width: 45%;*/
    }

    .ingredientTitle {
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: maroon;
        width: 100%;
    }

    /*グループ*/
    .ingredientArea tr > *:first-child {
        width: 10px;
        padding-left: 10px;
    }

    /*材料名*/
    .ingredientArea tr > *:first-child + * {
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: maroon;
        padding-left: 10px;
        width: 65%;
    }

    .ingredientArea tr > *:first-child + * + * {
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: maroon;
        text-align: right;
        width: 30%;
    }

    /*▲材料*/
    /*▼作り方*/
    .Cookstep {
        clear: both;
        /*画像の回り込み解除*/
    }

    .steptitle {
        padding-top: 4%;
        margin-left: 5%;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: maroon;
        width: 90%;
    }

    .stepArea table {
        width: 95%;
    }

    .stepArea tr > *:first-child {
        width: 10px;
        padding-left: 20px;
    }

    .stepArea tr > *:first-child + * {
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: maroon;
        padding-left: 15px;
        text-align: left;
    }

    /*▲作り方*/

    /*▼ポイント*/
    .pointArea {
        position: relative;
        display: inline-block;
        margin: 5px;
        padding: 7px 10px;
        width: 85%;
        color: #555;
        font-size: 13pt;
        background: #F5DEB3;
    }

    .pointArea:before {
        content: "";
        position: absolute;
        top: -30px;
        left: 30px;
        margin-left: -15px;
        border: 15px solid transparent;
        border-bottom: 15px solid #F5DEB3;
        ;
    }

    /*▲ポイント*/
    /*▲レシピ詳細*/
}