html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box}
article,aside,footer,header,nav,section,textarea{display:block}
body{line-height:1;overflow-wrap:break-word;word-wrap:break-word;overflow:hidden}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle}
a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}
a img{border-style:none}
ul,li{list-style-type:none}
.if-container{display:inline-block;margin:0 auto;height:100%;width:100%;overflow:auto}
.ifrm{border:none;display:block;height:100%;width:100%}
.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}
.eb-garamond-uniquifier {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-style: normal;
}
.noto-serif-jp-uniquifier {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-style: normal;
}
/*--------------------------------------------------------
web
--------------------------------------------------------*/
html{
  font-size:62.5%;
  height:100%
}
body{
  background:url("https://i.pinimg.com/1200x/38/f8/a1/38f8a1d69629e7193b241b442c12939f.jpg") repeat;
  background-size:30%;
  color:#463f3a;
  font-family:"EB Garamond", "Noto Serif JP", serif;
  font-size:1.2em;
  text-align:left;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.3;
  height:100%
}
a{
color:#463f3a;
text-decoration:underline
}
/*--------------------------------------------------------
スクロール
--------------------------------------------------------*/
::-webkit-scrollbar {
  width: 10px;
  height:5px;
}
::-webkit-scrollbar-track {
  background:#d9d0b4;
  border:1px #fff outset
}
::-webkit-scrollbar-thumb {
  background: url("https://i.pinimg.com/736x/7d/a7/f1/7da7f17cdbb5aeabf489171c116aee82.jpg") repeat-y center;
  background-size:50px;
  width:10px;
  border:1px #fff outset
}
::-webkit-scrollbar-thumb:hover {
  background:#666b5e;
  width:10px;
  border:1px #fff outset
}
/*--------------------------------------------------------
container
--------------------------------------------------------*/
.flex-container{
  display:flex;
  height:100%;
  background:transparent;
  flex-flow: row nowrap;
  justify-content:space-between;
}
.flex-container > div {
  height:100%;
  background:transparent;
  width:360px;
}
.side-container{
  display:flex;
  flex-flow:column;
  height:100%;
  width:100%;
}
.side-container > div {
  height:50%;
  background:transparent
}
.TL-container{
  display:flex;
  height:50%;
  flex-flow:row nowrap;
  justify-content:space-between;
  background:transparent
}
.TL-container > div {
  height:100%;
  background:transparent;
  width:49%;
}
/*--------------------------------------------------------
main
--------------------------------------------------------*/
.lib{
  width:230px;
  height:290px;
  background:url("https://www.printablee.com/postpic/2024/09/classic-vintage-library-card-printables_22885.jpg");
  background-size:100%;
  position:relative;
  top:410px;
  left:310px;
  writing-mode:vertical-rl;
  font-weight:800;
  font-size:1.45em;
  padding:10px;
  transform:rotate(12deg);
  text-decoration:none;
  z-index:0
}
.lib:hover{
  transform:rotate(15deg);
  position:relative;
  top:425px;
  left:330px;
}
.main{
  background:url("https://ia801406.us.archive.org/BookReader/BookReaderImages.php?zip=/30/items/astronomyforamat00flam/astronomyforamat00flam_jp2.zip&file=astronomyforamat00flam_jp2/astronomyforamat00flam_0003.jp2&id=astronomyforamat00flam&scale=4&rotate=0");
  background-size:100%;
  padding:20px 25px 15px 25px;
  width:390px; height:610px;
  position:relative;
  bottom:215px; left:85px;
}
.main,.main::before,.main::after{
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.25);
}

.main::before,.main::after{
  content: "";
  position: absolute;
  height: 610px;width: 390px;
  background: url("https://ia801406.us.archive.org/BookReader/BookReaderImages.php?zip=/30/items/astronomyforamat00flam/astronomyforamat00flam_jp2.zip&file=astronomyforamat00flam_jp2/astronomyforamat00flam_0003.jp2&id=astronomyforamat00flam&scale=4&rotate=0")
}
.main::before{
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
}
.main::after{
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
}
/*--------------------------------------------------------
reflections
--------------------------------------------------------*/
.ref-container{
  width:200px;height:300px;
  transform:rotate(200deg);
  position:absolute;
  top:-130px;
  left:-20px
}
.ref-container:hover{
  transform:rotate(190deg);
  position:absolute;
  top:-80px;
  left:-15px
}
.ref{
  background:url("https://i.pinimg.com/736x/1c/54/2e/1c542e5866c53ae86e019423d5d76f25.jpg");
  background-size:100%;
  width:190px; height:270px;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.25);
  position:relative;
  writing-mode:vertical-lr;
  color:#f0ead2;
  font-weight:800;
  font-size:1.45em;
  padding:10px
}
.ref::before,.ref::after{
  content: "";
  position: absolute;
  width:190px; height:270px;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.25);
  background: url("https://ia801406.us.archive.org/BookReader/BookReaderImages.php?zip=/30/items/astronomyforamat00flam/astronomyforamat00flam_jp2.zip&file=astronomyforamat00flam_jp2/astronomyforamat00flam_0003.jp2&id=astronomyforamat00flam&scale=4&rotate=0");
}
.ref::before{
  right: 4px;
  bottom: 5px;
  transform: rotate(-2deg);
  z-index: -1;
}
.ref::after{
  bottom: 7px;
  right: -5px;
  transform: rotate(3deg);
  z-index: -2;
}
/*--------------------------------------------------------
links
--------------------------------------------------------*/
.link-container{
  position:relative;
  top:70px;
  float:right;
  text-align:right;
  line-height:1.7;
  font-weight:800;
  font-size:1.2em;
}
.link-container a{
  color:#f0ead2;
  text-decoration:underline
}
.link-container a:hover{
  color:#f0ead2;
  position:relative;
  top:1pt;left:1pt
}
/*--------------------------------------------------------
astro
--------------------------------------------------------*/
.astro{
  width:330px;
  background:transparent;
  position:absolute;
  bottom:-25px;
  left:-20px;
  transform:rotate(35deg);
}
.sundial{
  position:absolute;
  bottom:55px;
  right:-65px;
  transform:rotate(-15deg)
}
.tusi{
  position:absolute;
  bottom:65px;
  right:35px;
  transform:rotate(-25deg);
  z-index:-1
}
.astro:hover{
  position:absolute;
  bottom:-25px;
  left:-14px;
  transform:rotate(25deg)
}
.astro:hover .sundial{
  transform:rotate(0deg);
  position:absolute;
  bottom:70px;
  right:-85px
}
.astro:hover .tusi{
  transform:rotate(-25deg);
  position:absolute;
  bottom:95px;
  right:15px
}
/*--------------------------------------------------------
mem
--------------------------------------------------------*/
.mem{
  width:230px;
  height:375px;
  position:absolute;
  top:-115px;
  right:45px;
  padding:10px;
  background:url("https://i.pinimg.com/736x/3e/0d/7a/3e0d7ae186b9bcb435272ebbfffaee36.jpg");
  background-size:100%;
  transform:rotate(-100deg);
  color:#f0ead2;
  font-size:1.45em;
  writing-mode:vertical-lr;
}
.membox{
  width:375px;
  height:230px;
  position:absolute;
  top:-50px;
  right:-40px;
  z-index:-1;
  background:url("https://i.pinimg.com/1200x/2c/3d/0c/2c3d0c1da8be628ce44703f967e575a4.jpg");
  background-position: 71% 23%;
  background-size:340%;
  transform:rotate(-10deg);
  box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.mem:hover, .membox:hover .mem{
  position:absolute;
  top:-190px;
  transform:rotate(-90deg)
}
/*--------------------------------------------------------
bib
--------------------------------------------------------*/
.bib-container{
  width:330px;
  height:310px;
  background:transparent;
  position:absolute;
  bottom:0px;
  right:-20px;
  z-index:0
}
.bib1{
  width:220px;
  height:310px;
  background:url("https://i.pinimg.com/736x/60/2a/18/602a18906796c79e3fa4bfec80996077.jpg");
  background-size:275%;
  background-position:70% 40%;
  position:absolute;
  right:-50px;
  padding:10px 0 0 75px;
  color:#f0ead2;
  font-size:1.45em;
  writing-mode:vertical-lr;
  
}
.bib1:hover{
  transform:rotate(-8deg);
  bottom:-5px;
  right:-20px
}
.bib2{
  width:190px;
  height:290px;
  background:url("https://i.pinimg.com/736x/9a/60/3f/9a603fe6c274b057119915e52965a472.jpg");
  background-size:240%;
  background-position:75% 20%;
  position:absolute;
  right:30px;
  bottom:0;
  padding:10px 0 0 55px;
  color:#f0ead2;
  font-size:1.45em;
  writing-mode:vertical-lr;
  z-index:-1
}
.bib2:hover{
  transform:rotate(-8deg);
  bottom:-5px;
  right:50px
}
.bib3{
  width:190px;
  height:310px;
  background:url("https://i.pinimg.com/1200x/93/54/8a/93548af1dd9bdb2e6a63f75ef394539a.jpg");
  background-size:265%;
  background-position:69% 50%;
  position:absolute;
  right:95px;
  padding:10px 0 0 60px;
  color:#f0ead2;
  font-size:1.45em;
  writing-mode:vertical-lr;
  z-index:-2
}
.bib3:hover{
  transform:rotate(-8deg);
  bottom:-5px;
  right:115px
}
/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
p a:hover,h2 a:hover{
  color:#f0ead2;
}
h1{
font-size:1.3em;
padding:.5em 0 .5em 0;
text-align:center;
color:#463f3a;
letter-spacing:.1em;
font-weight:600
}
h2,.h2{
color:#463f3a;
font-size:1.2em;
font-weight:800;
letter-spacing:.1em;
text-align:left
}
h3,.h3{
color:#463f3a;
font-size:1.2em;
font-weight:800;
letter-spacing:.1em;
text-align:left;
font-style:italic;
margin: 0 0 0 5px
}
input,textarea{
background:#fff;
border:1px #000 dotted;
color:#000;
margin:3px 0;
width:100%
}
textarea{
height:50px
}
hr{
display:block;
border:0;  
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
height:1px
}
.marker{
background:#ffb4a2; /* Ie9 */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.49, #fff), color-stop(0.5, #abf2fe), color-stop(1, #abf2fe));
background:-webkit-linear-gradient(transparent 50%, #ffb4a2 0%);
background:linear-gradient(transparent 50%, #ffb4a2 0%)
}
.txt{
border-left:1px dotted #000;
color:#343a40;
margin:1em;
padding:0 0 0 1em
}
/*--------------------------------------------------------
スマホ、タブレット用
横幅600pxで切り替え
--------------------------------------------------------*/
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
  body{
    overflow:scroll
  }
  .flex-container {
    flex-direction: column;
    justify-content:center;
  }
  .flex-container > div {
    width:100%
  }
}