/*
Thema Name: とと の にちじょう
Thema URL: http://toto.nanrin.com
Description: とと のテーマ
Version: 1.0
Author: とと の 親
Author URL: http://nanrin.com
*/


/* # ===========================
      smartPhone  */
    @media screen and (max-width: 640px) {

/* # =========================== */


@font-face {
  font-family: "uzupen";
  src: url("uzupen.woff") format("woff");
}
body {
	background: url("back.png") repeat;
	width: 100%;
	margin: auto;
}
h1 {
    font: 3.0em   "uzupen";
    color: sienna;
    text-align: center;
    margin: 80px auto 0;
}
p {
    font: 2.0em   "uzupen";
    color: brown;
    text-align: center;
    background-color: white;
    margin: 0;
    padding:1.0em 2.0em 10.0em 2.0em;
}
section img {
	max-width: 100%;
}
.container {
	position: relative;
}
#center {
	z-index: 1000;
	position: absolute;
	top: 0;
	width: 100%;
}
#center.hidden_img {
	display : none;
}
#center.open_img img {
	display: block;
	margin : 20px auto 0;
	padding: 0;
	max-width : 90%;
	height : 300px;
	filter: drop-shadow(10px 10px 20px #444444);
	animation: fadeIn 1s ease 0s 1 normal;	
	background-color: white;
}
@keyframes fadeIn {
  0% {opacity: 0} 
  100% {opacity: 1} 
}
#piclist.thumb_close {
	display : none;
}
#piclist {
	display: block;
	margin: 0 auto;
	z-index: 100;
	position: absolute;
	top: 30px;
	list-style-type : none;
}
li {
	float :left;
	margin-right : 4px;
}
li:last-of-type {
	margin-right : 0;
}
li img {
	width: auto;
	height: 100px;
}


} /*end for smartphone*/



/* # ===========================
      PC  */
    @media screen and (min-width: 641px) {

/* # =========================== */



@font-face {
  font-family: "uzupen";
  src: url("uzupen.woff") format("woff");
}
body {
	background: url("back.png") repeat;
	width: 700px;
	margin: auto;
}
h1 {
    font: 3.0em   "uzupen";
    color: sienna;
    text-align: center;
    margin-top: 80px;
}
p {
    font: 2.0em   "uzupen";
    color: brown;
    text-align: center;
}
section img {
	max-width: 100%;
}
.container {
	position: relative;
}
#center {
	z-index: 1000;
	position: absolute;
	top: 0;
	width: 100%;
}
#center.hidden_img {
	display : none;
}
#center.open_img img {
	display: block;
	margin : 0 auto 20px;
/*	max-width : 90%;*/
	height : 500px;
	filter: drop-shadow(10px 10px 20px #444444);
	animation: fadeIn 1s ease 0s 1 normal;	
}
@keyframes fadeIn {
  0% {opacity: 0} 
  100% {opacity: 1} 
}
#piclist.thumb_close {
	display : none;
}
#piclist {
	display: block;
	margin: 0 auto;
	z-index: 100;
	position: absolute;
	top: 50px;
	list-style-type : none;
}
li {
	float :left;
	margin-right : 4px;
}
li:last-of-type {
	clear: both;
	float :right;
	display: box;
	margin: 0 auto;
}
li img {
	width: auto;
	height: 100px;
}
li a {
	text-decoration: none;
}

} /*end for PC*/