@charset "utf-8";
/* CSS Document */

/* =================================================
   Reset / Base
================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}
img {
    width: 100%;
    height: auto;
    display: block;
}
ul {
    list-style: none;
}
/* =================================================
   Layout
================================================= */

main {
    width: 100%;
    margin: auto;
    max-width: 550px;
    background-color: #fff;
}

@media (max-width:768px) {
main {
    padding: 0;
}
}
/* =================================================
   Utility
================================================= */

.strong {
    font-weight: 600;
}
.small {
    font-size: .75rem;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb40 {
    margin-bottom: 40px;
}
.mb50 {
    margin-bottom: 50px;
}
.mb60 {
    margin-bottom: 60px;
}
.view_pc {
    display: none;
}
.view_sp {
    display: block;
}

@media (min-width:769px) {
.view_pc {
    display: block;
}
.view_sp {
    display: none;
}
}
/* =================================================
   Headline
================================================= */

.content-box h1 {
    font-feature-settings: "salt" on, "palt" on;
    font-family: "Shippori Mincho";
    margin: 0 0 5px;
    text-align: center;
    line-height: 1.2;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
}
.content-box h2 {
    font-family: "Zen Kaku Gothic New", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic Pro", sans-serif;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 20px auto 25px;
}
.sec-01 h2 {
    font-feature-settings: "salt" on, "palt" on;
    font-family: "Shippori Mincho";
    white-space: nowrap;
    word-break: keep-all;
    font-size: clamp(1.15rem, 4vw, 1.7rem);
}

@media (min-width:769px) {
}
.sec-01 h3 {
    padding: 3px 5%;
    margin: 0 0 20px;
    text-align: center;
    background-color: #E4F1E8;
    font-size: 1rem;
}
.point_title {
    font-family: "Zen Kaku Gothic New", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic Pro", sans-serif;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 20px 0;
}
/* =================================================
   sec-01
================================================= */
.content-box section, .point, .prof, .content-box .section {
    padding: 0 3% 40px;
}
.sec-01 .lead {
    padding: 0 3%;
}
/* =================================================
   main-image
================================================= */
.main-image {
    padding: 25px 0;
    background: url(https://img.dinos.co.jp/images/imini/campaign/iminist_recipe_01/img/iminist_room_01_bg.webp) no-repeat center / 100%;
}
.main-image p {
    padding: 0 5%;
    text-align: center;
    line-height: 1.3;
}
/* =================================================
   nutrition
================================================= */
.nutrition {
    margin-top: 20px;
}
.nutrition_item {
    padding: 5px 10px;
    background-color: #EFF1F0;
    text-align: center;
    border-radius: 5px;
}
.nutrition_area ul.nutrition_2col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul.nutrition_2col .nutrition_item {
    width: 49.5%;
    margin-top: 5px;
}
/* =================================================
   ingredients
================================================= */
	
li.ingredients_item {
    padding: 8px 5%;
    border-bottom: 1px solid #f0f2f1;
}
li.ingredients_item:nth-of-type(1) {
    border-top: 1px solid #f0f2f1;
}
li.ingredients_item dl {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

@media (min-width:769px) {
ul.ingredients_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
li.ingredients_item {
    width: 49.5%;
    padding: 8px 5%;
    border-bottom: 1px solid #f0f2f1;
}
}
	.ingredients_area .ingredients_item dt.group_A,
	.ingredients_area .ingredients_item dt.group_B {
		position: relative;
		padding-left: 20px;
	}
.ingredients_area .ingredients_item dt.group_A:before {
    position: absolute;
    content: "A.";
    display: inline-block;
    color: #ce930a;
    font-weight: bold;
    font-size: 16px;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 17px;
    text-align: center;
    top: 3px;
}
.ingredients_area .ingredients_item dt.group_B:before {
    position: absolute;
    content: "B.";
    display: inline-block;
    color: #0a9cce;
    font-weight: bold;
    font-size: 16px;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 17px;
    text-align: center;
    top: 3px;
}
.ingredients_area .ingredients_item dd {
	text-align: right;
}
/* =================================================
   howto
================================================= */
	
.howto_area ol {
    list-style: none;
    counter-reset: number;
    list-style-type: none !important;
}
.howto_area ol li {
    list-style: none;
    margin: 25px 0 0;
    position: relative;
    padding: 0 0.5em 0 24px;
}
.howto_area ol li:before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    background: #DBF1E4;
    color: #165B2F;
    font-weight: bold;
    font-size: 14px;
    border-radius: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 17px;
    text-align: center;
    top: 3px;
}
/* =================================================
   point
================================================= */

.point_title p {
    display: inline;
    position: relative;
    padding-left: 43px;
}
.point_title p:before {
    position: absolute;
    content: "";
    background: url(https://img.dinos.co.jp/images/imini/campaign/iminist_recipe_01/img/icon-memo.webp) no-repeat center / 100%;
    width: 34px;
    height: 34px;
    top: 53%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.point_area {
    margin-bottom: 20px;
}
.point_area .point_box {
    margin-bottom: 20px;
    padding: 15px;
    background: #F9F3E7;
}
/* =================================================
   prof
================================================= */
.prof .prof_area {
    padding: 16px 20px 25px;
    border: 1px solid #b8b8b8;
}
.prof .prof_img {
    width: 20vw;
    max-width: 100px;
}
.prof dl.prof_col {
    display: flex;
    align-items: center;
}
.prof dt {
    margin-right: 15px;
    margin-bottom: 15px;
}
/* =================================================
   foodstuff
================================================= */
.section h2 p {
    display: inline;
    position: relative;
    padding-left: 43px;
}
.section h2 p:before {
    position: absolute;
    content: "";
    background: url(https://img.dinos.co.jp/images/imini/campaign/iminist_recipe_01/img/icon-yasai.webp) no-repeat center / 29px 34px;
    width: 34px;
    height: 34px;
    top: 53%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.box.foodstuff {
    border: 1px solid #e5e5e5;
    margin: 10px 0 0;
    padding: 15px 15px 10px;
}

@media screen and (min-width: 769px) {
.box.foodstuff {
    margin: 18px 0 0;
    padding: 30px 30px 27px;
}
}
.box.foodstuff > ul {
    display: flex;
    justify-content: space-between;
    margin: -9px 0 0;
}

@media screen and (min-width: 769px) {
.box.foodstuff > ul {
    margin: -23px 0 0;
}
}
.box.foodstuff > ul > li {
    width: calc((100% - 30px) / 3);
}

@media screen and (min-width: 769px) {
.box.foodstuff > ul > li {
    width: calc((100% - 60px) / 3);
}
}
.box.foodstuff > ul > li > dl dt {
    font-size: 12px;
    font-weight: bold;
    margin: 9px 0 6px;
    width: 100%;
    height: 32px;
    letter-spacing: 0.025em;
    line-height: 32px;
    padding: 0 9px;
    background-color: #f9f9f9;
}

@media screen and (min-width: 769px) {
.box.foodstuff > ul > li > dl dt {
    font-size: 16px;
    margin: 23px 0 12px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding: 0 14px;
}
}
.box.foodstuff > ul > li > dl dd {
    font-size: 12px;
    letter-spacing: 0.025em;
    line-height: 1.5;
}

@media screen and (min-width: 769px) {
.box.foodstuff > ul > li > dl dd {
    font-size: 14px;
    line-height: 1.72;
}
}
/* =================================================
   PageTop
================================================= */

.pagetop {
    text-align: center;
    padding: 30px 0;
}
.pagetop a {
    font-size: .8rem;
    text-decoration: none;
    border-bottom: 1px solid #333;
    color: #333;
}
.pagetop a:hover {
    border: none;
}
/* =================================================
   Copy
================================================= */

copy {
    display: block;
    text-align: center;
    font-size: .7rem;
    padding-bottom: 10px;
}