body{margin-right: 2em; margin-left: 2em; margin-top: 4em;
}


#item1{
    width: fit-content;
    margin-left:auto;
    margin-right:auto;  }

#item2{
  padding-left: 30pt;
  padding-right: 30pt;
 margin:3em;
 border:2px solid  pink;}

p.panda{text-align: right; }

#item3{
  padding-left: 30pt;
  padding-right: 30pt;
  margin:3em;
  border:2px solid  pink;}
  em{font-weight: bold;color: crimson;}

.pasokon{
  width: fit-content;
  margin-left:auto;
  margin-right:auto; 
}

.sumaho,.sumaho1,.sumaho2{
  display:none;}

h1{
  text-shadow: rgb(70, 45, 1) 2px 2px 3px;
  text-align: center;   vertical-align: baseline;
  font-size: 40px;
   border-radius: 15px; padding: auto;  
  box-shadow: black 3px 3px 1px;
  margin-left: auto; margin-right: auto;
  width: fit-content;
  padding-left: 10pt;
  padding-right: 10pt;
  background: radial-gradient(ellipse farthest-side at center,white, rgb(247, 233, 208));
  border-color: orange;
  border-style:double;
  }
h1 img{padding-left:1ex;padding-right:1ex;vertical-align: middle;
margin-left: 2px;}
h1::before{  content: url(画像3-2.png);}
h1::after{  content: url(画像3-2.png); }

.flex{width: 100%; overflow: auto;}
main{float: left; width: 68%;}
nav{float:right; width: 31%;}

h2{
  margin-left: 1em ;
  margin-right: 3em ;
  list-style-type: none;
  letter-spacing:0.1em;
  padding-left: 20pt;
  padding-right: 20pt;
  text-shadow: grey 2px 2px 2px;
  line-height: 2.5em;
  background: orange; color: white; font-size: 1.5em;
  border-radius: 10px 10px; 
  box-shadow: gray 3px 3px 3px;  }


h2.greeting{
  width: fit-content;
  margin: 2em auto 2em auto;
  font-size: 1.5em;
  border-radius: 30px 30px;
  letter-spacing:0.5em; 
  text-shadow: rgb(61, 61, 61) 2px 2px 2px;
  background: radial-gradient(ellipse farthest-side at center,white, pink);}

h2#mokuji{
  width: fit-content;
  margin: 2em auto 2em auto;
  font-size: 1.5em;
  border-radius: 60px 30px;
  letter-spacing:0.5em; 
  text-shadow: rgb(61, 61, 61) 2px 2px 2px;
  background: radial-gradient(ellipse farthest-side at center, 
  rgb(18, 109, 212),lightsteelblue);}

nav {background-color: rgb(219, 238, 245);
  	border-radius: 120px 30px;
	padding-bottom: 4em}
nav a:link{ color: black;}
nav a {text-decoration: none;}
nav a:hover { color: rgb(39, 12, 196); text-decoration: underline;}
nav a:visited { color: rgb(145, 7, 99); }

.folder{
   padding-left: 10px; padding-right: 10px;
  font-weight: bold;color: rgb(61, 61, 61);
  border: solid 3px orange;
  border-radius: 10px;
  box-shadow: gray 2px 2px 3px;}


.folder2{
  font-weight: bold;color: rgb(94, 93, 93);
  border-bottom: double 3px orange; 
  border-left: solid 8px orange;
  padding-left: 3px;
  border-top-left-radius: 5pt;}

h4{ margin-left: 0em;}
li{
  margin: 0.5em 2em;
  padding: 0.2em.1em; 
  list-style-type: none;}
  
main>li{
margin:  0em ;
margin-top: 1.5em;
padding: 0.5em 1em;
background: rgb(247, 233, 208);
border-radius: 5px 40px; 
/*font-size: 1em;*/}

main>li::before{ content: url("panda5-1.png") ; }

ul.files{ list-style: disc url("PDF_24.png" ) outside;}

.modoru{
  text-align: right;
  width: fit-content;
  margin-left: auto; 
  margin-right: 2px;
  padding-right: 1em;padding-left: 1em;
  filter: opacity(85%); 
}

.modorumoji{color: rgb(114, 86, 35);}
.modoru:hover{ 
 filter: opacity(60%);
}


@media(max-width:576px)
{
  body{ margin-left: 0px; margin-right: 10px; }
  #item1 img{width: 300px;}
  ul{margin-left: 0em;}
  li{margin-right: 0.2em ; margin-left: 0em;
    padding-top: 0;padding-bottom: 0;}
  .pasokon{ display:none;}
  .sumaho1,.sumaho2{ display: unset;}
  .sumaho1 img{width: 170px; padding-left: 2em; padding-right: auto;}
  .sumaho2 img{width: 150px; padding-left: 2.5em; padding-right: auto;}

   h1{font-size: 24px;}      
    h1::before{ content: none; }
    h1::after{ content: none;  }
  h1 img{width:200px; padding: 1px;margin: 2px;}
  
  h2{margin-left: 0em;
    border-radius: 0px 30px 30px 0px;
    letter-spacing:0em;line-height: 1.2em;}
  h2.greeting{ letter-spacing:0em; }
  h3{margin-left: 0;  }
  #item2, #item3{
    padding-left: 0pt;
    padding-right: 0pt;
   margin:0em; }
  nav{display: none;}
  main{width: 100%;}
}