/*
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;
}

/*ここからもともと*/
.komoku h4{
	padding:8px;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:2px solid #ccc;
	border-left:4px solid #ccc;
	color:#693;
	background:#efe;
	font-size:1.4em;
}

.komoku h5{
	margin-bottom:6px;
	padding:4px;
	color:#030;
	font-size:1.2em;
	background:#ededed;
	border:2px solid #ccc;
}



/*↓会話セット*/
.kaiwa_waku p{
	margin:0;
	padding:0;
color:#000;/*追加*/
}
.kaiwa_hito{
	color:#666;
	text-shadow:1px 1px 0px #000;
}

.kaiwa_naiyo_yellow{background-color:#ff0;}/*女性１*/
.kaiwa_naiyo_green{background-color:#cf0;}/*男性１*/
.kaiwa_naiyo_red{background-color:#f9c;}/*女性２*/
.kaiwa_naiyo_blue{background-color:#9ff;}/*男性２*/
.kaiwa_naiyo_gray{background-color:#eee;}/*解説など*/
.kaiwa_naiyo_colors{
	background:linear-gradient(
	#ff0,
	#f9c,
	#cf0,
	#9ff
	);/*全員*/
}



/*↑会話セット*/

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

/*↑文字装飾*/


/*以下　表*/

.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;
    }
}

/*以上　表*/