/* layout-five-blocks.css */

/* コンテナ設定 */
.layout-five-blocks {
  display: grid;
  /* width: 980px; */
  width: 1000px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
  padding: 8px;
  background-color: var(--layout-five-blocks-bgcolor);
  box-sizing: border-box;

  /* サイドバー重ね表示対応 */
  position: relative;
  z-index: 10;
  margin: 0.5em auto 0.5em 0.5em; /* 左寄せ＋右はみ出し余地 */
}

/* 各ブロックの配置 */
.layout-five-blocks .block-large-a {
  /* これだけ画像の下が広く見えてしまう対策の方法⑤ */
  /* aspect-ratio: unset; */
  height: 100%;

  grid-row: 1 / 7;
  grid-column: 1 / 2;
  box-sizing: border-box;
}

.layout-five-blocks .block-b {
  grid-row: 1 / 4;
  grid-column: 2 / 3;
  box-sizing: border-box;
}

.layout-five-blocks .block-c {
  grid-row: 1 / 4;
  grid-column: 3 / 4;
  box-sizing: border-box;
}

.layout-five-blocks .block-d {
  grid-row: 4 / 7;
  grid-column: 2 / 3;
  box-sizing: border-box;
}

.layout-five-blocks .block-end {
  grid-row: 4 / 7;
  grid-column: 3 / 4;
  box-sizing: border-box;
}

/* テキストブロック */
.layout-five-blocks .block-end .text {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: var(--layout-five-blocks-bgcolor);

  display: flex;
  align-items: strecth;

  /* flex-direction: column;
  justify-content: center; */


}

/* 画像枠の安定化 */
.layout-five-blocks .block {
  position: relative;
  width: 100%;
  aspect-ratio: 0.7072658546829063;
    /* 
      リサイズ候補
      0.71
        1689.8 / 2380 
        1689.09 / 2379
        1704 / 2400★ これを採用
     */
  /* overflow: hidden; */
  overflow: visible;
  background-color: var(--layout-five-blocks-bgcolor);
}

/* 画像の安定表示（原寸暴走防止） */
.layout-five-blocks .block img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* これだけ画像の下が広く見えてしまう対策 */
.layout-five-blocks .block-large-a img {
  /* 現状不要だが、imgのサイズが変わった事態等に備え、念のため残す */
  object-position: top;
  /* 目の錯覚？を利用 */
  top: 0.5px;
  height: calc(100% - 1px);
}
/* このクラスの右下のみで使う特殊クラス */

.fillarea {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 1px 2px 3px 0;  /* gapと同じ */
  background-color: inherit;
}

.inner {
  /* display: flex; */
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  padding: 1em;
  min-height: 100%; /* 高さを親に合わせるが、強制ではない */
  box-sizing: border-box;
  background-color: var(--layout-five-blocks-bgcolor);
  /*  */
  font-size: 0.8em;
  line-height: 1.4em;
}
/* [テキスト部分だけ背景色を変えつつ、微妙に異なるサイズを吸収する面倒くさい処理] 
  [上位をいじると、上手く動かない可能性あるので注意！]

    "これで、中身が短いときは上下に自動で空きができるようになります。
    ただし、親が flex で align-items: stretch になっていることが前提です。"

    だいたい上手く行ってる例の保存(最後に手動調整必要パージョン)

    .text .fillarea {
      flex: 1;
      margin: 8px 3px 11px 0;
      background-color: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .inner {
      padding: 0.5em;  
      background-color: var(--cl-lighter);
      height: 100%;
    }
    
*/

.layout-five-blocks .notes{ 
  /* テスト用コード
  box-sizing: border-box;
  border: 1px solid red;
  margin: 1px 3px 1px 2px; */
  
  width: calc(100%-10px);
  height: calc(100%-10px);
  background-color: var(--layout-five-blocks-bgcolor);
  margin: auto 10px;
  font-size: 0.6rem;
  line-height: 1.3em;
  padding-top: 1em;
  padding-bottom: auto;
 
  /* padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 0.8em;
  padding-right: 0.8em; */
} 

  /* 下空きがlarge-aだけ目立つ誤差の吸収 */
  /* top: -0.5px;
  height: calc(100% + 1px); */