@charset "utf-8";

/******************************************************************************
/* 枠付きテーブル
*******************************************************************************/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.b-wrap {
  position: relative;
width: calc(100% + 20px);
	margin-top: 20px;
	margin-left: -10px;
}

.b-wrap2 {
  position: relative;
width: calc(100% + 20px);
	margin-top: 30px;
	margin-left: -10px;
	margin-bottom: 100px;

}


.b-container {
  display: grid;
  padding: 10px;
  height: 500px;
  /* background: #f8cab4; */
  grid-template:
  "b-item1 ....... b-item2 ....... b-item3 ....... b-item4"
  "b-item1 ....... b-item5 ....... b-item6 ....... b-item7"
  /23.1% 12px 22.4% 12px 1fr 12px 13.5%;
}

.b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {
  /* border: 1px solid red; */
  font-size: 20px;
}

.b-item1 {
  grid-area: b-item1;
}

.b-item2 {
  grid-area: b-item2;
  height: 280px;
}

.b-item3 {
  grid-area: b-item3;
  height: 200px;
}

.b-item4 {
  grid-area: b-item4;
  height: 199px;
}

.b-item5 {
  grid-area: b-item5;
  height: 189px;
  margin-top: 12px;
}

.b-item6 {
  grid-area: b-item6;
  width: 67.2%;
  height: 268px;
  margin-top: -67px;
}

.b-item7 {
  position: absolute;
  grid-area: b-item7;
  height: 268px;
  width: 25.5%;
  bottom: 9px;
  right: 10px;

}



.imagbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}


.imagbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

@media screen and (max-width: 900px) {
  .b-container {
    height: auto;
    grid-template:
    "b-item1 b-item2" 150px
    "b-item1 b-item5" 200px
    "b-item3 b-item4" 250px
    "b-item6 b-item7" 200px
    / 1fr 1fr;
    gap: 12px;
  }

  .b-item1, .b-item2, .b-item3, .b-item4, .b-item5, .b-item6, .b-item7 {
    height: auto;
  }

.b-item5 {
  margin-top: 0px;
}


  .b-item7 {
    position: static;
    width: auto;
  }

  .b-item6 {
    width: 100%;
    margin-top: 0;
  }

}









/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/* 100 - 768用（タブレット用）の記述 */
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/


@media screen and (min-width: 100px) and (max-width: 979px)  {






}