/*
Theme Name:My Twenty Seventeen
Template:twentyseventeen
*/

@import url(../twentyseventeen/style.css);

/*ここから上書きスタイル記述*/
/*参考：class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」をつけて一意に表すために使う。つまり1ページ中に同じid名は1度しか使えない。*/

/*〓ここからサイトマップ*/
.wsp-pages-title{
    border-top:2px solid #f00;
    border-bottom:2px solid #f00;
	border-left:4px solid #ccc;
	border-right:4px solid #666;
}
/*〓ここまでサイトマップ*/

/*↓〓文字装飾*/
.red{
color:#f00;
}

/*↑〓文字装飾*/


/*〓↓ここから会話*/

/* 全体 */
.sb-box {
  position: relative;
  overflow: hidden;
}
/* アイコン画像 */
.icon-img {
  position: absolute;
  overflow: hidden;
  top: 0; /* 画像の位置を上から0に */
  width: 60px; /* 画像の幅 */
  height: 60px; /* 画像の高さ */
}
/* アイコン画像（左） */
.icon-img-left {
  left: 0; /* 画像の位置を左から0に */
}
/* アイコン画像（右） */
.icon-img-right {
  right: 0; /* 画像の位置を右から0に */
}
/* アイコン画像 */
.icon-img img {
  border-radius: 50%; /* 画像を丸く表示する */
  border: 2px solid #eee; /* 画像の縁取りの太さとカラー */
}
/* アイコンネーム */
.icon-name {
  position: absolute;
  width: 60px; /* ネームの最大幅を画像と同じに */
  text-align: center; /* ネームの位置をセンターに */
  top: 62px; /* ネームの位置を上から83に */
  color: #777; /* ネームのカラー */
  font-size: 9px; /* ネームのフォントサイズ */
}
/* アイコンネーム（左） */
.icon-name-left {
  left: 0; /* ネームの位置を左から0に */
}
/* アイコンネーム（右） */
.icon-name-right {
  right: 0; /* ネームの位置を右から0に */
}
/* 吹き出し */
.sb-side {
  position: relative;
  float: left;
  margin: 0 0 30px 78px; /* 吹き出しの上下左右の余白 */
}
.sb-side-right {
 margin: 0 78px 30px 0;
  float: right;
}
/* 吹き出し内のテキスト */
.sb-txt {
  position: relative;
  border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 6px; /* 吹き出しを角丸に */
  background: #fff; /* 吹き出しの背景色 */
  color: #333; /* 吹き出し内のテキストのカラー */
  font-size: 15px; /* 吹き出し内のフォントサイズ */
  line-height: 1.7; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 12px; /* 吹き出し内の上下左右の余白 */
}
.sb-txt > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出しの三角 */
.sb-txt:before {
  content: "";
  position: absolute;
  border-style: solid;
  top: 16px; /* 吹き出し内の三角の位置 */
  z-index: 3;
}
.sb-txt:after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 15px; /* beforeより-1px */
  z-index: 2; /* beforeより-1 */
}
/* 吹き出しの三角（左） */
.sb-txt-left:before {
  left: -7px;
  border-width: 7px 10px 7px 0;
  border-color: transparent #fff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右） */
.sb-txt-right:before {
  right: -7px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent #fff; /* 背景色と同じカラーに */
}
.sb-txt-right:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}




/*〓↑ここまで会話*/

/*〓ここから　表*/

.container {
    max-width: 1000px;
    margin: 0 auto;
}

/* リスト全体の枠組み */
.product-list {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden; /* 角丸を効かせるため */
}

/* PC向けグリッドレイアウト設定 */
.list-row {
    display: grid;
    /* 列の幅を指定：属性(50px) 施設(120px) 名称(150px) 素材(自動) 時間(80px) */
    grid-template-columns: 60px 140px 160px 1fr 90px;
    border-bottom: 1px solid #eee;
    align-items: center; /* 垂直方向の中央揃え */
}

.list-row:last-child {
    border-bottom: none;
}

/* ヘッダー行のスタイル */
.list-row.header {
    background-color: #2c3e50;
    color: #fff;
    font-weight: bold;
}

/* 各セルの基本スタイル */
.cell {
    padding: 12px 15px;
    font-size: 0.95rem;
}

/* 属性ごとの色分け */.attr-fire { color: #e74c3c; font-weight: bold; }
.attr-wood { color: #27ae60; font-weight: bold; }
.attr-water { color: #3498db; font-weight: bold; }
.attr-dark { color: #8e44ad; font-weight: bold; }
.attr-light { color: #7f8c8d; font-weight: bold; } 
.attr-rock { color: #f1c40f; font-weight: bold; }
.attr-thunder { color: #0066ff; font-weight: bold; }

/* --- レスポンシブ対応（スマホ向け：768px以下） --- */
@media screen and (max-width: 768px) {
    
    /* PC用のヘッダー行を非表示 */
    .list-row.header {
        display: none;
    }

    /* 各行をカード化 */
    .list-row {
        display: flex; /* グリッドからフレックスに変更 */
        flex-direction: column; /* 縦並び */
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px; /* カード間の余白 */
        background-color: #fff;
        padding: 0; /* paddingは内部のcellで調整 */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    /* カード内の各行（セル）のスタイル */
    .cell {
        display: flex;
        justify-content: space-between; /* 項目名と値を左右に配置 */
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 15px;
        text-align: right; /* 値を右寄せ */
    }

    .cell:last-child {
        border-bottom: none;
    }

    /* HTMLの data-label 属性を使って項目名を表示 */
    .cell::before {
        content: attr(data-label);
        font-weight: bold;
        color: #777;
        text-align: left;
        flex-shrink: 0; /* ラベルが潰れないように */
    }

    /* スマホ表示時の属性欄の特別デザイン */
    .cell.col-attr {
        background-color: #f9f9f9;
        border-radius: 8px 8px 0 0;
        justify-content: flex-start; /* 左寄せに戻す */
        font-weight: bold;
    }
    
    .cell.col-attr::before {
        margin-right: 15px;
    }
}

/*〓ここまで　表*/