@charset "UTF-8";

body	{margin: 0;
	font-family: 'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

/* サイト名 */
.site	{background-color: #444444;
	padding: 10px;
	text-align: left}

.site p1	{color: #ffffff;
	font-size: 20px;
	font-family: 'Paytone One', sans-serif;
	text-decoration: none}

/* Link */
.link	{background-color: #444444;
	padding: 0 10px;
	text-align: right}

.link a	{color: #ffffff;
	font-size: 15px;
	font-family: 'Paytone One', sans-serif;
	text-decoration: none}

.link a:hover	{background-color: #eeeeee;
	color: red}

/*ファイル選択欄*/
.select	{background-color: ivory;
	padding: 20px}

.select p1 {text-align: left;
	font-size: 10px;
	padding-top: 0;
	padding-bottom: 0;
	color: midnightblue}

.select p2	{text-align: right;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 14px}
	

/* 画像 */
.picts	{padding: 15px}

.picts img	{max-width: 100%;
	height: auto}

.picts p	{margin-top: 0;
	margin-bottom: 20px;
	line-height: 1.5;
	text-align: justify}

/* 画像情報 */
.pinfo	{padding: 10px 10px;
	font-size: 11px;
	background-color: lightsteelblue}

.pinfo table	{width:100%;
	border-width: 1px;
	border-color: navy}

.pinfo th	{background-color: lightskyblue;
	color: darkblue;
	padding: 5px 5px 5px 5xp;
	font-size: 9px;
}

.pinfo tr	{background-color: white;
	color: black;
	padding: 5px 5px 5px 5xp;
	font-size: 9px;
}

.pinfo ul	{margin: 0;
	padding: 0;
	list-style: none}

.pinfo li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.pinfo li a:hover	{background-color: #eeeeee}

.pinfo img	{max-width: 100%;
	height: auto}


/* Grid */
body	{display: grid;
	grid-template-areas: 
		"head1 head2"
		"act1 act1"
		"pict1 pict2";
	grid-template-columns: auto 420px }

.site	{grid-area: head1}
.link	{grid-area: head2}
.select	{grid-area: act1}
.picts	{grid-area: pict1}
.pinfo	{grid-area: pict2}

@media (max-width: 839px) {
	body{grid-template-areas:
		"head1"
		"head2"
		"act1"
		"pict1"
		"pict2";
	grid-template-columns: 1fr}
}