@import url('https://file003.shop-pro.jp/PA01159/472/css/common.css?2302');

/* PC向け（画面幅が601px以上） */
@media (min-width: 601px) {
.flex-container {
    display: flex;
    flex-wrap: wrap;　/* 複数行に折り返す */
    text-align: center;
    background-color: #fff;
    line-height: 25px;/* 25px */
   margin-bottom: 15px;
}
.flex-item {
    width: calc((100% - 18%) / 10);　/* calc((100% - 14%) / 8) */
    height: auto;
    margin-right: 2%;
    font-size: 12px;
    color: #000;
    background-color: #fff;
    margin-bottom: 0px;
  text-align: center;
}


.flex-img {
   width: 10px;   /* 横幅を限界まで広げる */
   height: 10px;  /* 縦横比を維持する高さにする */
}

.flex-item:nth-child(10n) { /* nth-child(8n) */
    margin-right: 0;
}

.flex-item:nth-last-child(-n+10) {/* nth-last-child(-n+8) */
    margin-bottom: 0;
}
}

@media screen and (max-width:600px) {
	/*　画面サイズが600px以下の場合ここの記述が適用される　*/

.flex-container {
    display: flex;
    flex-wrap: wrap;　/* 複数行に折り返す */
    text-align: center;
    background-color: #fff;
    line-height: 30px;
   margin-bottom: 15px;
}
.flex-item {
    width: calc((100% - 20%) / 5);/* calc((100% - 15%) / 4) */
    height: auto;
    margin-right: 5%;
    font-size: 11px;
    color: #000;
    background-color: #fff;
    margin-bottom: 0px;
  text-align: center;
}


.flex-img {
   width: 10px;   /* 横幅を限界まで広げる */
   height: 10px;  /* 縦横比を維持する高さにする */
}

.flex-item:nth-child(5n) {/* nth-child(4n) */
    margin-right: 0;
}

.flex-item:nth-last-child(-n+5) {/* nth-last-child(-n+4) */
    margin-bottom: 0;
}

}
/* フリーページ用 */
.free_b {
  font-weight:bold;
  line-height:140%;
  margin-bottom:15px;
}

.free_l a {
  color:#999;
text-decoration:underline;
}
  

/* 著作者 */
.Author {
  display: grid;
  grid-template:
    "img name" auto
    "img title" auto
    /100px 1fr
  ;
  gap: 0 10px;
  padding: 10px;
  border-radius: 8px;
  background-color: #f0f1f1;
}

.Author_Img {
  grid-area: img;
  border-radius: 100%;
  background-color: #ccc;
}

.Author_Name {
  grid-area: name;
  align-self: end;
}

.Author_Title {
  grid-area: title;
  align-self: start;
  font-size: 0.8em;
}
/*分類枠*/

.box_bg_A {
  border: 2px;
  padding: 2em;
  border-radius: 15px;
  background-color:#b88a21;
  width:100%;
  height:auto;
  margin-bottom:20px;
  font-weight:bold;
  color:#fff;
  font-family: "メイリオ" ;

}

.box_bg_B {
  border: 2px;
  padding: 1em;
  border-radius: 15px;
  background-color:#b55197;
  width:100%;
  height:auto;
    margin-bottom:20px;
  font-weight:bold;
  color:#fff;
  font-family: "メイリオ" ;

}

.box_a, .box_b, .box_c, .box_d {
  float: left;
  border-radius: 15px;
  padding:20px 0px;
  background-color:#edb75a;
  width: 48%;
  margin:10px 5px;
  text-align:center;
  font-size:20px;
}

.box_e, .box_f, .box_g, .box_h {
  float: left;
  border-radius: 15px;
  padding:20px 0px;
  background-color:#70265c;
  width: 48%;
  margin:10px 5px;
  text-align:center;
  font-size:20px;
}

.box_bun {
  border: none;
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

@media screen and (max-width:600px) {
	/*　画面サイズが600px以下の場合ここの記述が適用される　*/
  .box_a, .box_b, .box_c, .box_d, .box_e, .box_f, .box_g, .box_h  {
  width: 95%;
}
}

/*分類見出しB*/
h1.miryoku_midashi01
 {
  padding: 0.5em 1.0em;/*文字周りの余白*/
  color: #ffffff;/*文字色*/
  background: #b55197;/*背景色*/
  border-bottom: solid 3px #70265c;/*下線*/
   margin-bottom:20px;
   font-size:20px;
}
/*分類見出しA*/
h1.miryoku_midashi02
 {
  padding: 0.5em 1.0em;/*文字周りの余白*/
  color: #ffffff;/*文字色*/
  background: #edb75a;/*背景色*/
  border-bottom: solid 3px #b88a21;/*下線*/
   margin-bottom:20px;
   font-size:20px;
}
/*分類個別ボックス*/
.box1, .box2, .box3, .box4 {
  float: left;
  border-color: yellow;
  width: 50%;
  padding:5px;
}
/*お客様の声分類個別ボックス*/
.box_bg_C {
  width:100%;
  height:auto;
}

.box_ca, .box_cb {
  float: left;
  width: 48%;
  margin-right:5px;
  text-align:center;
}

.box_bun_c {
  border: none;
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

@media screen and (max-width:600px) {
	/*　画面サイズが600px以下の場合ここの記述が適用される　*/
  .box_ca, .box_cb {
  width: 95%;
}
}