/* 大見出し */
h3{
  padding-top: 2em; /* 上に余白 */
  padding-bottom: 1em;/* 下に余白 */
}
/* 小見出し */
h4{
  text-align: center;  /* 中央寄せ */
  padding-top: 1em;  /* 上に余白 */
  padding-bottom: 1em;   /* 下に余白 */
}
/* 改行 */
.w-600{
  display: none;
}
/* 記事の幅 */
.container{
  padding-left: 1rem;  /* 左に余白 */
  padding-right: 1rem;  /* 右に余白 */
}
/* 記事部分 */
.text-area{
  text-align: justify;  /* 両端揃え */
  line-height: 2;  /* 行間 */
  margin: 0 auto;
}
/* 記事１の記事部分 */
.wrapper1 .text-area{
  padding-top: 2em;  /* 上に余白 */
  padding-bottom: 3em;  /* 下に余白 */
  background-image: url(../img/wagara1.svg);
  background-position: center;
  background-repeat: no-repeat;
}
/* 記事1の画像部分 */
.wrapper1 img{
  display: block;
  margin: 0 auto;
}
/* 記事2 */
.wrapper2{
  padding-bottom: 2em;  /* 下に余白 */
}
/* 記事2の記事部分 */
.wrapper2 .text-area{
  padding-top: 2em;  /* 上に余白 */
  background-image: url(../img/wagara1.svg);
  background-position: center;
  background-repeat: no-repeat;
}
/* 記事2の画像部分 */
.wrapper2 img{
  display: block;
  margin: 0 auto;
}
/* PC画像非表示 */
.pc-img{
  display: none!important;
}
/* 記事3 */
.wrapper3{
 text-align: center;   /* 中央揃え */
 background-color: #fff; /* 背景色を白色に */
 padding-top: 4em;
 padding-bottom: 4em;
}
/* 商品一覧のコンテナ */
.box-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 340px;
  margin: 0 auto; 
}
/* 商品一覧のアイテム */
.item-box1,.item-box2,.item-box3,.item-box4,.item-box5,.item-box6{
  width: 150px;  /* アイテムの幅 */
}
.item-box1,.item-box3,.item-box5{
	margin-right: 10px;
}
.item-box2,.item-box4,.item-box6{
	margin-left: 10px;
}
	
.item-box4 img{
	width: 80px;
	display: block;
	padding-top: 30px;
	margin: auto;
}
.item-box4 span{
	display: block;
	padding-top: 12px;
}

/* タブレット版 */
@media(min-width:600px) {
  /* 大見出し横向き */
  .h3_yoko{
    writing-mode:horizontal-tb;    /* 縦→横 */
  }
 
 /* タブレット版　記事の幅 */
  .container{
    width: 580px;   
    margin: 0 auto;/* 中央寄せ */
  }

  .text-area{
    padding: 0;
    margin-top: 10px;
  }
	.wrapper2 img{
		width: 70%;
	}
	 .wrapper3 .text-area{
    text-align: center;
  }
  .w-600{
    display: block;
  }
  .box-container{
    width: 600px;
    margin: 0 auto;
  }
  .item-box1,.item-box2,.item-box3,.item-box4,.item-box5,.item-box6{
    width: 160px;
  }
	
	.item-box2,.item-box5{
		margin-left: 20px;
		margin-right: 20px;
	}
	.item-box4 span{
	padding-top: 22px;
}
 
}
@media (min-width:1025px) {
  h3{
    padding: 0;
  }
  .wrapper1,.wrapper2{
    padding-top: 7em;
  }
  .container{
    width: 60em;
    padding: 0;
  }
  .text-area{
    padding: 0;
  }
  .pc-img{
    display: inline!important;
  }
  .sp-img{
    display: none!important;
  }
  /* 記事1 */
  .wrapper1 .container{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: flex-start;
  }

  .wrapper1 .text-area{
    order: 2;
    height: 300px;
    writing-mode: vertical-rl;
    padding: 0;
    background-image: url(../img/wagara1.svg);
    background-position: center;
    background-repeat: no-repeat;
  }
  .wrapper1 img{
    order: 3;
    width: 60%;
    margin-right: 2em;
  }
  /* 記事2 */
  .wrapper2 .container{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
  }

  .wrapper2 .text-area{
    width: 500px;
    background-image: url(../img/wagara1.svg);
    background-position: center;
    background-repeat: no-repeat;
  }
  .wrapper2 img{
    width: 40%;
    margin: 0;
    margin-left: auto;
  }
  .wrapper2 .text-area{
    background-image: url(../img/wagara1.svg);
    background-position: center;
    background-repeat: no-repeat;
  }
  .wrapper2 img{
    width: 40%;
  }
  .box-container{
    width:1000px;
    margin: 0 auto;
  }
  .item-box1,.item-box2,.item-box3,.item-box4,.item-box5,.item-box6{
    width: 300px;
  }
  .item-box4 img{
    display: block;
    width: 180px;
    margin: 0 auto;
  }
	.item-box4 span{
	padding-top: 30px;
}
}