@charset "Shift_JIS";

/* --- でじかめ・ダイアリー　当日記事設定 --- */
/* --- 全体の背景・テキスト --- */
body {
margin: 0;
padding: 0;
background-color: #ffffff; /* ページの背景色 */
color:#000000; /* 全体の文字色 */
font-size: 112%;
font-family: 'メイリオ' , '游ゴシック medium','ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
}

/* --- 別の文字指定 --- */
p.moji01 { font-size: 90%;  }/* --- 日付用 --- */
p.moji02 { font-size: 130%; }/* --- 記事タイトル用 --- */

/* --- 写真（画像）の角丸 (停止中)
img { border-radius: 10px;} --- */

/* --- 写真（画像）サイズ設定 （この設定はすべての画像には適用できない）--- */
img {
  max-width: 900px;  /* 横長画像の幅の上限 */
  max-height: 900px; /* 縦長画像の高さ上限 */
  width: auto;　/* 高さが決まれば自動で幅が決まる */
  height: auto;　/* 幅が決まれば自動で高さが決まる */
  aspect-ratio: auto; /* 画像本来の比率を維持 */
}

/* --- 別の文字指定 --- */
/* --- テーブル（外枠・表内に影響）--- */
table.hyou00 {
width: 90%;
text-align: center;
letter-spacing: 0.06em; 
line-height: 1.3em;
}

td, th {
padding: 12px;
}

/* --- テーブル（記事文用）--- */
table.hyou01 {
padding: 13px;
filter: drop-shadow(4px 4px 3px rgba(0,0,0,0.6)); /* --- テーブルに影をつける --- */
width: 80%;
letter-spacing: 0.06em; /* --- 記事の文字間隔を少し広げる--- */
text-align: left;
line-height: 1.8em;
background-color: #dfdfdf;
border-collapse: separate;  margin: 1px; border: solid 1px #777; border-radius: 10px; /* --- テーブルを角丸にする --- */
}

/* --- テーブル（日付・タイトル用）--- */
table.hyou02 {
width: 100%; height: 52px;
line-height: 0%;
text-align: left;
background-color: #e8e7e7;
box-shadow: -5px -5px 10px 0px rgba(255, 255, 255, 1.0), 5px 5px 10px 0px rgba(0, 0, 0, 0.5); /* --- テーブルの影の指定--- */
border-collapse: separate;  margin: 1px; border-radius: 5px;
}

/* --- セル（日付・タイトル用）の指定--- */
td.cell01 { width: 15%; padding: 10px; /* --- セル（日付）の幅15%で指定--- */
font-size: clamp(12px, 1.5vw, 18px); /* 最小12px、画面幅に応じて変化、最大18px */
white-space: nowrap; /* 日付が途中で改行されないようにする */
} 
td.cell02 { width: 30px; padding: 0px; background-image: url(pointA.png); background-position: center center; transform: scale(1.3);
background-repeat: no-repeat;} /* --- セル（画像）の指定--- */
td.cell03 { width: 380px; padding: 0px;} /* --- セル（タイトル）の指定--- */
td.cell04 {padding: 0px 20px 0px 0px; } /* --- セル（図形(平行四辺形)の挿入場所）の指定--- */

/* --- リスト（INDEX戻り用）--- */
/* --- カーソル接触前 --- */
.modori li {
	display: inline-block;
height:40px;line-height: 40px;
width:86px; text-shadow:1px 1px 0px #fff; text-align:center;/* --- 文字に白い影をつけ立体的にする --- */
border:1px #c0c0c0 solid; 
border-radius: 5px / 5px;
  background: linear-gradient(to bottom, #fff 0%, #cccccc 100%);/*グラデーション*/
}
/* --- リンクの下線消去 --- */
.modori li a{
	display:block;text-decoration: none;
}
/* --- カーソル接触時 --- */
.modori li a:hover {
	color: #016917; text-shadow:1px 1px 0px #fff; text-decoration: none; border-radius: 5px / 5px;
  background: linear-gradient(to bottom, #fff 0%, #4ee76e 100%);/*グラデーション*/
}
/* --- （INDEX戻り用を中央に配置）--- */
.modori{
  display: table;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  padding: 0;
}

/* --- INDEXのリンク色をすべて黒にする--- */
a.kuro:link{ color:#000;}
a.kuro:visited{ color:#000;}
a.kuro:hover{ color:#000;}
a.kuro:active{ color:#000;}

/* --- 画像の下に余白を入れる --- */
img.yohaku01{margin-bottom:10px;}

/* --- 罫線 --- */
hr {
width: 50%;
border-width : 1px 1px 1px 1px ;
border-style : #009999 solid ;
}

/* --- 平行四辺形(グラデーション) --- */
.parallel-quadrangle-A{
	width: 150px;
	height: 52px;
	transform: skewX(-40deg);
	background: linear-gradient(90deg, #e8e7e7,#ffffff, #e8e7e7); 
}