@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Sacramento|Montserrat');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Kiwi+Maru&family=Kosugi+Maru&family=M+PLUS+Rounded+1c&display=swap');

html {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    display: flex;
    justify-content: center;
    height: 100%;
    font-size: 62.5%;
    width: 60%;
    max-width: 1000px;
    min-width: 700px;
    min-height: 100vh;
    margin: 0 auto;
}


body {
    max-width: 800px;
    font-size: 1.7rem;
    margin: 10vh 0;
    color: #444;
}

a {
    padding: 0 5px;
    border-bottom: 1px solid #9FCF7B;
    text-decoration: none;
    color: #333;
}

.main {
    padding: 0 0 5vh;

}

.box1 p{
   line-height: 1em;

}

.box2 p{
   line-height: 1.8em;
   padding: 0 0.8em;

}


.box1{
-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

}


.box2{
    margin: 0 5vh;
    text-align: left;
    min-height: 50vh;

}

span {
    margin: 1em;
}



h2 {  
    position: fixed;
   font-family: "Kaisei Decol", serif;
    line-height: 25px;
    font-size: 2em;
    color: #9FCF7B;
    font-weight: lighter;
}


.line {
    border: none;
}

.line::after {
    content: '●\A●\A●';
    display: block;
    width: 10px;
    margin: -20px auto 0;
    line-height: 2;
    font-size: 10px;
    color: #333;
    opacity: .1;
}



/*変換*/

.form{
  display: flex;
  justify-content: center;
  margin: 0 0 3em 0;
}


input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: transparent;
border-radius: 0;
color: #333;
border:1px #333  solid;
height:2.0em;
width: 6em;
margin: 0 1em 0 0;
padding: 2px 5px 1px;
line-height: normal;
}

input:focus, textarea:focus{
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;
border-radius: 0;

}

button{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
border-radius: 0;
height: 2.4em;
width: 5em;
padding: 2px 5px 1px;
line-height: normal;
border:1px #333  solid;
background-color: transparent;
color: #333;
cursor: pointer;
transition: 0.2s;
padding: 0px 10px;
line-height: normal;
}

/* ◎ボタンのホバー　★background-color: #◯;部分を変更 */
button:hover{
background-color: #9FCF7B;
border:1px #9FCF7B  solid;
color: #fff;

}


@media (max-width:1000px) {

html {
    display: inline-block;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    min-width: 90px;
    margin: 0 auto;
    font-size: 62.5%;
      }

body{
    font-size: 1.5rem;
      margin: 10vh 0 0;
}


span {
    margin: 0;
}

h2 {  
    letter-spacing: -0.6vh;
    position: inherit;
    font-size: 2.5rem;
}


.box1{
    text-align: center;
    -ms-writing-mode: tb-rl;
    writing-mode: horizontal-tb;
   }

.box2 {
    margin: 0;
    padding: 1em 0 0;
}

.box2 p {
       line-height: 1.8em;
      padding: 0 1.5em;

}