@charset "utf-8"

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Petrona&family=Raleway&display=swap" rel="stylesheet">

<style type="text/css">

  @import url('https://fonts.googleapis.com/css2?family=Petrona&family=Raleway&display=swap');
  @font-face{
    font-family: 戸越明朝;
    src: url('https://cdn.leafscape.be/togoshi/togoshi-mincho_web.woff2')
      format("woff2");}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  border:none;
  border-radius:0;
  font-variant-ligatures:none;
  font-family: 'Raleway', sans-serif;
  color:#333;
}

body{
  background:#fff;
  color:#333;
  font-size:10px;
  text-align:justify;
  letter-spacing:.1em;
  line-height:2em;
  width:100vw;
}

a{
  text-decoration:none;
  background: linear-gradient(transparent 90%, #ffee6b 90%);
}
a:hover{
  color:#65acd7
}
a:visited{
  color:#90a5d0;
}

header{
  position:fixed;
  pointer-events: none;
  z-index:99;
  top:0;
  left:0;
  width:35vw;
  height:35vw;
  max-width:300px;
  max-height:300px;
  background:url(https://iccaxx.web.fc2.com/icca/topflower.png);
  background-size:cover;
}

header h1{
  position:absolute;
  z-index:999;
  top:50%;
  left:30%;
  font-size:4em;
  font-family: 'Petrona', serif;
  text-shadow:0 0 5px #fff;
  margin:0;
}

nav{
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  padding:0 2em;
  line-height:1em;
  letter-spacing:.2em;
  text-align:center;
}
nav #tate{
  height:100vh;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color:#d1e3ee;
}
nav a{
  color:#3e87a8;
  display:inline-block;
  margin:15px 0;
  background:none;
}
nav span{
  display:inline-block;
  color:#71a983;
  background:rgba(222,238,241,0.8);
  padding:5px 2.5px;
  margin:10px 0;
}

main {
  z-index:10;
  position:relative;
  margin: calc(17vw + 1em) auto 0 auto;
  padding: 3em 3em 5em 6em;
  max-width:600px;
}

h2{
  font-size:1.25em;
  font-family:'戸越明朝','Petrona', serif;
  letter-spacing:2px;
  margin:1.5em 0 1em 0;
}
h2:before{
  content:'// ';
  font-family:serif;
  color:#91bcb2;}

article{
  margin-bottom:3em;
  letter-spacing:0.25em;
  line-height:1.75em;
}
article:last-of-type{
  margin-bottom:0em;
}
article section{
  text-align:right;
  margin-right:2em;
}
article span{
  text-align:left;
  margin:0;
}

div #bottom{
color:#fff;
background:#f2f2f6;
}

p{
  display:inline-block;
  margin:0 auto 1em auto;
  letter-spacing:0.175em;
  font-family:sans-serif;
}

.title a{
  background: linear-gradient(transparent 80%, #fff6cb 80%);
}
.title a:visited{
  color:#cdddd3;
}

footer,input[type=submit]{
  font-size:10px;
}
footer{
  width:100%;
  padding:4em 3em;
  text-align:right;
  color:#d1e3ee;
}

ul li{
  list-style-type:none;
  line-height:2em;
  text-align:left;
}

#list ul{
  letter-spacing:0.12em;
  margin:1em;
}
#list ul li{
  list-style-type:none;
}
#list ul li:nth-of-type(5n):before{
  content:'>>';
  margin-right:0.5em;
  color:#8693c0;
}
#list ul li:nth-of-type(5n+1):before{
  content:'>>';
  margin-right:0.5em;
  color:#ffed39;
}
#list ul li:nth-of-type(5n+2):before{
  content:'>>';
  margin-right:0.5em;
  color:#c1c873;
}
#list ul li:nth-of-type(5n+3):before{
  content:'>>';
  margin-right:0.5em;
  color:#84aa70;
}
#list ul li:nth-of-type(5n+4):before{
  content:'>>';
  margin-right:0.5em;
  color:#75b6de;
}
#list ul li a{
  letter-spacing:0.2em;
  margin-left:1em;
}

ul li:nth-child(10n){
  margin-bottom:1em;
}

ol{
display:inline-block;
list-style-type:decimal-leading-zero;
padding-left:3em;
text-align:left;
}
ol li{
margin:0.3em 0;
line-height:1.5em;
}
ol li:nth-child(10n){margin-bottom:2em;}


.pbox{
  display:inline-block;
  margin:0 1em;
}

.right{
  text-align:right;
  width:100%;
}

input[type=text],textarea,input[type=submit]{
  -webkit-appearance: none;
}
input[type=submit]{
  display:block;
  color:#f3f5f0;
  background:#111;
  border:#333 solid 1px;
  margin-top:.5em;
}
input[type=submit]:hover{
  color:#333;
  background:#fff;
}
input,textarea{
  padding:.4em .8em .35em .95em;
  background:#f3f5f0;
  letter-spacing:.1em;
  line-height:1.5em;
  outline:none;
  vertical-align:middle;
  margin:0 0.8em 0 1em;
}
textarea{
  padding:.8em;
  width:90%;
  max-width:400px;
  height:8em;
}

.usuji{
  color:#a3c2c3;
}
.koiji{
  text-align:left;
  background: linear-gradient(transparent 75%,#ecf5d8 75%,#ecf5d8 85%,transparent 85%,transparent 90%, #ecf5d8 90%);
}

.box{
  width:90%;
  margin:0.5em auto;
  padding:1em;
  background:#fff8da;
}

@media screen and (min-width:800px) {

body{
  font-size:11px;
}

header h1{
  top:35%;
}

nav{
  line-height:2em;
  left:7vw;
  top:25vw;
  font-size:12.5px;
}

nav #tate a{
  display:block;
  height:17.5vw;
}

nav #tate span{
  display:block;
  padding:1em 0;
  height:17.5vw;
}

main{
  max-width:700px;
}

}
</style>
}