/*============================================*/
/* 基本設定 */
/*============================================*/
/*body * {box-sizing : border-box;}
p {
	font-size: 0.9em;
    letter-spacing: 0.1em;
    line-height: 180%;
	margin:15px 0 10px 0;
  text-align: justify;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
}
/*/

.bold{font-weight: bold;}


.sub_caption{font-weight:800; font-size:0.7em;}

	
@media screen and (max-width: 640px) {
p{
    font-size: 13px;
    line-height: 2.0em;
    left: 0.5px;
	font-feature-settings: "palt" 1;
}


}



.starter-template h1{
	color:#e94709;
	text-align:center;
    display: block;
    font-size: 3.0rem;
    line-height: 1.2em;
  font-family:  "Roboto", sans-serif;
    font-variation-settings:"wdth" 100;
	font-weight:900;
    margin: 25px auto 25px; /*中央揃えの上下マージン小部宇設定*/
    letter-spacing: 1px;
	}
	
.starter-template h2{
	padding:20px;
	text-align:center;
	font-weight:500;
	font-size:1.0rem;
	letter-spacing:0.1rem;
	line-height:190%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;	
font-feature-settings: "palt" 1;
	}
	
	
@media screen and (max-width: 640px) {
.starter-template h1{
	text-align:center;
    font-size: 2.0rem;
    line-height: 1.2em;
    letter-spacing: 1px;
    margin: 10px auto 10px; /*中央揃えの上下マージン小部宇設定*/
	}
	
.starter-template h2{
	padding:30px;
	text-align:left;
	font-size:.9em;
	letter-spacing:0.1rem;
	line-height:200%;
  text-align: justify;
  text-justify: inter-ideograph;
	}
}



/* ママパンおすすめ============================================*/

.mp_recomend {
    padding: 0.2em 1.0em;
    border-left: 8px solid #e94709;
    color: #e94709;
	font-size:1.0rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
   margin: 10px auto 20px; /*中央揃えの上下マージン小部宇設定*/
	
}

.mp_recomend span{
	font-size:0.9rem;
}

.mp_recomend span::before{
	content:"|";
	padding:1rem;
}

/*-------スマホの時-------------*/
@media screen and (max-width: 768px) {
.mp_recomend span{font-size:0.8rem;}
}





/* イラストとセットの見出し部分============================================*/
.en_title {
    display: block;
    font-size: 2.0rem;
    font-family: 'Roboto', 'Noto Sans Japanese', "sans-serif";
    margin: 0 auto 40px; /*中央揃えの上下マージン小部宇設定*/
    font-weight: normal;
    letter-spacing: 1px;
	text-align:center;
}

.en_title span{
    display: block;
    font-size: 1.4rem;
    font-family: 'Roboto', 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    margin: 0 auto 40px; /*中央揃えの上下マージン小部宇設定*/
    letter-spacing: 1px;
}

/*-------スマホの時-------------*/
@media screen and (max-width: 768px) {
.en_title{margin: 0 auto 4%;font-size: 2.0rem;}
.en_title span{margin: 0 auto 4%;font-size: 1.2rem;}
}







/* リード部分 ============================================*/



  
.lead-sentence {
  width: 100%;
  text-align: justify;
  text-justify: inter-ideograph;
}



.lead-sentence h1 {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  margin: 20px 0px 0px 0px;
  font-weight: 900;
  font-style: normal;
  font-size:3em;
}


.lead-sentence h1 span::before{
    content: "|";
    margin: 0px 10px 0px 10px;
}

.lead-sentence h2  {
  font-family: "Noto Sans JP", sans-serif;
  text-align:center;
  font-weight: 800;
  font-size: 2.0rem;
    margin: 2% auto 6%; /*中央揃えの上下マージン小部宇設定*/

}




.lead-sentence h3 {
  font-family: "Noto Sans JP", sans-serif;
  text-align:left;
  font-weight:400;
  font-size: 1.1rem;
  margin: 20px 0px 20px 0px;
  letter-spacing:0.02em;
  line-height: 190%;
}

.lead-sentence h4 {
  font-family: "Noto Sans JP", sans-serif;
  text-align:center;
  font-size: 1.2rem;
  margin: 20px 0px 25px 0px;
  letter-spacing:0.05em;
  line-height: 180%;
  font-optical-sizing: auto;	
}





.end-sentence h3 {
  font-family: "Noto Sans JP", sans-serif;
  text-align:left;
  font-weight:400;
  font-size: 1.0em;
  margin: 0px 10px 0px 10px;
  letter-spacing:0.02em;
  line-height: 190%;
  color:#FFF;
}

.lead-sentence p {
  font-size: 1.3rem;
  line-height: 180%;
}


/*-------スマホの時-------------*/
@media screen and (max-width: 768px) {
.lead-sentence {width: 94%;}

.lead-sentence h1 { margin:0;}
.lead-sentence h2 {
  text-align:center;
  font-size: 1.7rem;
  font-weight:800;
  margin-bottom:8%;
}

.lead-sentence h3 {
  text-align:left;
   font-size: .9rem;
  margin: 4% 0 2% 0;
}

.lead-sentence h4 {
font-feature-settings: "palt" 1;
text-align:left;
font-size:1.0rem;
}
.lead-sentence p {font-size:1.2rem;}


.intro{
	text-align:left;
  font-size: 0.8rem;
  line-height: 1.8rem;
	}

}




/* 商品紹介部分 ============================================*/

.item{display:;
  text-align: justify;
  text-justify: inter-ideograph;
  font-family: "Noto Sans JP", sans-serif;

}

.item h1{ font-weight:800; font-size:1.0rem; margin:20px 0px 15px 0px;}

.item h2{
	font-size:1.0rem;
	text-align:center;
  color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 2px #364e96;/*上線*/
  border-bottom: solid 2px #364e96;/*下線*/
  margin:4% auto 2%;
}


.item h4 {
  font-family: "Noto Sans JP", sans-serif;
  text-align:center;
  font-size: 1.0em;
  margin: 20px 0px 40px 0px;
  letter-spacing:0.1em;
  line-height: 180%;
}


.item p{
	font-size:0.9em;
	margin:10% 0 8% 0;
	letter-spacing:0.05em;
  line-height: 190%;
	}

@media screen and (max-width: 768px) {
.item p{
	font-size:.7rem;
  line-height: 170%;
	}
.item h1{ font-size:.8rem; margin:20px 0px 15px 0px;}
.item h2{ font-size:.7rem}
}


/* ママパンチョイス部分 ============================================*/
                .mpch_box{
                    background-color: #fff;	/* 背景色 */
                    border: 2px solid #f0ede0;	/* 線の太さ・種類・色 */
                    border-radius: 8px;
                    margin: 40px 5px 30px 5px;	/* 外側の余白 上・右・左・下 */
                    padding: 20px 30px 10px 30px;	/* 内側の余白 上・右・左・下 */
                    position: relative;
                }
                .mpch_box img.imagup{
                max-width: 90px;
                  position: absolute;
                  top:0%;
                  left: 0%;
                  transform: translate(0%,-50%);
                  color: #fff;	
                    }
.mpch_box h1{ font-weight:900; font-size:1.4rem; margin:20px 0px 15px 0px;font-family:  "Roboto", sans-serif;}
.mpch_box h3{ font-size:1.0rem;
	font-weight:500;
	margin:20px 0px 15px 0px;
	letter-spacing:0.05em;
  line-height: 190%;
  font-family:  "Roboto", sans-serif;
}

				
				.mp_midashi{
				color:#FFF;
  				font-family:  "Roboto", sans-serif;
				font-weight:500;
				font-size:1.4rem;
				transform: translate(10%,100%);
					}


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

 .mpch_box{margin: 40px 5px 5px 5px; padding: 0 10% 0 10%;}
 
 .mpch_box img.imagup{
                max-width: 70px;
                  top:0%;
                  left: 0%;
                  transform: translate(0%,-50%);
                  color: #fff;	
                    }

.mpch_box h1{font-size:1.2rem; margin:5% 0 2% 0;}
.mp_midashi{font-size:1.0rem;transform: translate(33%,140%);}
.mpch_box h3{ font-size:0.8em;margin:5% 0 0 0;letter-spacing:0.05em;line-height: 170%;}
                }



/* athome　背面フレーム ============================================*/

                .athome_box{
                    background-color: #fff;	/* 背景色 */
                    border: 2px solid #f0ede0;	/* 線の太さ・種類・色 */
                    border-radius: 8px;
                    margin: 40px 5px 5px 5px;	/* 外側の余白 上・右・左・下 */
                    padding: 40px;	/* 内側の余白 上・右・左・下 */
                    position: relative;
                }


			   .athome_box h3{ 
			   font-size:1.2rem;
			   font-weight:500;
			   letter-spacing:0.05em;
			   line-height: 190%;
			   text-align:center;
			   margin-bottom:2%;
			   font-family:  "Roboto", sans-serif;
			   margin-bottom:3%;
			   }

@media screen and (max-width: 768px){
.athome_box{margin:;padding: 2%;}
.athome_box h3{ font-size:.9rem;line-height: 160%; margin:6% auto 6%;}
}
/*============================================*/
/* コンテンツ周り　*/
/*============================================*/
.cnt{   font-family: "Noto Sans JP", sans-serif; }
.cnt h1{ font-size:1rem; font-weight:bold; margin-bottom:2%; margin-left:6%;letter-spacing: 1px; position: relative;}

.cnt h1::before{
	  content: url(img/good.svg); vertical-align: middle;
  transform: scale(0.5) ; position: absolute;
  top: -32px;
  left: -60px;
	}

.cnt h2{ font-size:.9rem; margin-top:2%; margin-left:2%;}

@media screen and (max-width: 768px){
.cnt h1{margin-left:10%;}
.cnt h2{ font-size:.9rem; margin-top:2%; margin-left:2%;}
}

/*============================================*/
/* バッジグループ*/
/*============================================*/

.badge-group{
  width: 280px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.badge-group2{width: 200px;  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.badge-item{
  margin-right: 2px;
   border: 2px solid #e94709;
  background: #fff;
  padding: 4px 8px;
  overflow: hidden;
  color: #e94709;
  font-size: 0.8rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
.badge-group{
  width: 140px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.badge-group2{width: 140px;  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.badge-item{
  margin-right: 1.5%;
  margin-top:1%;
  padding: 1% 2%;
  font-size: .7rem;
}
}

/*============================================*/
/* 見出し等
/*============================================*/

.both-sides {
    display: flex;
	text-align:center;
    justify-content:center;
    color: #333333;
	font-size:1.6rem;
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom:2%;
}

.both-sides::before,
.both-sides::after {
    width:6px;
    height: 36px;
    background-color: #333333;
    content: '';
}

.both-sides::before {
    transform: rotate(0deg);
    margin-right: 30px;
}

.both-sides::after {
    transform: rotate(0deg);
    margin-left: 30px;
}

@media screen and (max-width: 768px) {
.both-sides {
	margin-top:8%;font-size:1.2rem;
}

.both-sides::before,
.both-sides::after {
    height: 50px;}
	
	
	}



/*リボン*/

.ribbon {
  display:flex;
  justify-content: center;
  position: relative;
  height: 40px;/*リボンの高さ*/
  line-height: 40px;/*リボンの高さ*/
  text-align: center;
  padding: 0 80px;/*横の大きさ*/
  font-size: 1.2rem;/*文字の大きさ*/
  background: #422817;/*塗りつぶし色*/
  color: #FFF;/*文字色*/
  font-family:  "Roboto", sans-serif;
  box-sizing: border-box;
  font-weight:500;
}

.ribbon:before, .ribbon:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon::before {
  top: 0;
  left: 0;
  border-width: 20px 0px 20px 10px;
  border-color: transparent transparent transparent #f0ede0;
  border-style: solid;
}

.ribbon::after {
  top: 0;
  right: 0;
  border-width: 20px 10px 20px 0px;
  border-color: transparent #f0ede0 transparent transparent;
  border-style: solid;
}