body{font-size:74%;
text-align:center;
font-family:'Quattrocento',Meiryo,Osaka;
line-height:1.9;
 background: #ffffff;
letter-spacing:2.5px;
overflow-y: scroll; 
}

a {
font-size:15px;
color: #000000;
border-bottom: dashed 1px #cccccc;
text-decoration: none;
}

#content a{
position: relative;
padding:3px;
font-size:15px;
background: -webkit-linear-gradient(0deg, #E8CBC0, #636FA4 );
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
border: 0;
}

#content a:hover {
	border-bottom: 1px #cccccc dashed;
}


#wrp{max-width:600px;
  margin:0 auto;
  padding-top:20px;
}

header{
margin:0 auto;
text-align:center;
}

#nav{
margin:0 auto;
text-align:center;
width: 600px;
height: 35px;
border-radius: 10px;
letter-spacing: 0.5em;
background: linear-gradient(90deg, #E8CBC0, #636FA4 ) ;
}

#nav a{
font-size:15px;
color: #ffffff;
border: 0;
text-decoration: none;
}

#nav a:hover {
	border-bottom: 1px #ffffff dashed;
}

ul {
	list-style: none;
	font-size: 15px;
	line-height: 1.4;
}

ul:before {
  content: "-";
  color: #ffffff;
  padding-right: 15px;
}

ul:after {
  content: "-";
  color: #ffffff;
  padding-left: 15px;
}

li {
        display: inline-block;
       	position: relative;
        padding: 10px;
}

#content{
height:auto;
border:0px;
}h1 {
font-family: 'Josefin Sans', sans-serif;
font-size:45px;
margin-left:20px;
letter-spacing: 5px;
}

h2{
	position: relative;
	overflow: hidden;
	padding-bottom: 5px;
	font-size:20px;
        width: 100%;
}
h2::before,
h2::after{
	content: "";
	position: absolute;
	bottom: 0;
}
h2:before{
	border-bottom: 3px solid #000000;
	width: 100%;
}
h2:after{
	border-bottom: 3px solid #cccccc;
	width: 100%;
}

p {
  color: #000;
  font-size:14px;
  text-align: justify;
  text-justify: inter-ideograph;
  margin:0;
padding-top:10px;
}

.box{
width:450px;
 margin: 0px auto;
padding: 20px;
 color:#000;
text-align:left;
border-bottom: 1px dashed #cccccc;
}strong {
background: linear-gradient(transparent 75%,#E8CBC0 75% ) ;
}

.box2{
width:580px;
margin:2em 0;
padding:10px;
border-radius: 10px;
background: linear-gradient(90deg, #E8CBC0 , #636FA4) ;
color:#ffffff;
  text-align: justify;
  text-justify: inter-ideograph;
}.sam1{
margin:0 auto;
text-align:center;
vertical-align: middle;
width: 550px;
height: 35px;
color:#ffffff;
border-radius: 10px;
letter-spacing: 0.5em;
background: linear-gradient(90deg, #36D1DC, #5B86E5 ) ;
}

.sam2{
margin:0 auto;
text-align:center;
vertical-align: middle;
width: 550px;
height: 35px;
color:#ffffff;
border-radius: 10px;
letter-spacing: 0.5em;
background: linear-gradient(90deg, #3A1C71 0%, #D76D77 50%, #FFAF7B 100% ) ;
}

.sam3{
margin:0 auto;
text-align:center;
vertical-align: middle;
width: 550px;
height: 35px;
border-radius: 10px;
letter-spacing: 0.5em;
color:#ffffff;
background: linear-gradient(90deg, #43C6AC, #F8FFAE ) ;
}