@charset "UTF-8";
/* CSS Document */

/* ページタイトルエリア */
.title {
  height: 310px;
  background-image: url("../aboutblast/images/pageTitle_bg.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-shadow: 1px 1px 10px #9d7855;
}

.title h1 {
  font-size: 4.5rem;
  font-weight: bold;
}

.title p {
  font-size: 14px;
  margin-top: 15px;
}

.item-list {
  width: 100%;
  margin-left: auto;
  margin-bottom: 30px;
  margin-top: 20px;
  display: inline-flex;
  grid-template-columns: repeat(auto-fit, 280px);
  column-gap: 16px;
  row-gap: 20px;
  justify-content: center;
}

/* 商品欄テキスト */
.item-list dl {
  margin-top: 16px;
}

/* 商品名 */
.item-list dt {
  font-weight: bold;
}

/* 商品説明文 */
.item-list dd {
  font-size: 13px;
  line-height: 20px;
  margin-top: 10px;
}

/* 商品価格 */
.item-list .price {
  font-weight: bold;
  margin-top: 15px;
}

/* 英語表記 */
.item-list li {
  position: relative;
}

.item-list .item-label {
  position: absolute;
  top: 0;
  left: calc(100% + 20px);
  font-size: 12px;
  white-space: nowrap;/* 【書式】white-space:キーワード 【値】nomal、pre、nowrap、pre-wrap、pre-line */
  transform-origin: top left;/* 要素を回転させる基準点を指定【書式】transform-origin:キーワードまたは数値と単位 【値】top、bottom、left、right、center / (単位) px、%など */
  transform: rotate(90deg);/* 英語表記を90°回転する【書式】transform:キーワード(値) 【値】translate(移動)、rotate(回転)、skew(傾斜)、scale(拡大・縮小) */
  font-weight: 500;
}

.fotter {
  margin-top: 100px;	
}

/* ２カラム */
.twocols {
    padding: 24px 0;
    background-color: #fff;
}

.twocols-container {
  display: grid;
  grid-template-columns: 1fr;
  /*gap: 32px 25px;*/
}

@media (min-width: 1200px) {
  .twocols-container{
    grid-template-columns: 5fr 5fr;
  }
/* ヘッダーナビ、レスポンシブ調整 スマホ(800px以下)*/
@media (max-width: 800px) {
.item-list {
  margin-top: 45px;
  row-gap: 40px; 
}
.item-list {
  width: 100%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  column-gap: 95px;
  row-gap: 20px;
}
}