@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;
    height: 100%;
    font-size: 62.5%;
    width: 60%;
    max-width: 1000px;
    min-width: 700px;
    min-height: 100vh;
    padding: 1em 0;
    margin: 0 auto;
}


body {
    margin: 10vh 0;
    color: #444;
}


a {
    font-family: "Kaisei Decol", serif;
    padding: 0 5px;
    border-bottom: 1px solid #9FCF7B;
    text-decoration: none;
    color: #333;
}

.box1 p{
    padding: 0.4rem;
   font-size: 1.4rem;
   line-height: 1em;

}

.box2 p{
     padding: 0.6rem;
   font-size: 1.4rem;
   line-height: 1em;
 
}

.main {
  display: flex;
  justify-content: center;

}

.box1{
    text-align: center;
    margin: 0 5em 0 0;
}

.listTate {
        columns: 2;
    }

h1 {
    text-align: center;
    padding: 0 10px;
    margin-bottom: 4rem;
    font-family: 'Sacramento', cursive;
    line-height: 25px;
    font-size: 8em;
    color: #9FCF7B;
    font-weight: lighter;
}

.main h1 span {
    font-family: "Kaisei Decol", serif;
    display: block;
    font-size: 1.4rem;
    margin-top: 5px;
    letter-spacing: 3px;
    color: rgba(30,30,30,0.5);
    font-weight: normal;     
}


.line {
    border: none;
}

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




/*変換*/

.form{
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}


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 {
           width: 100%;
       max-width: 600px;
        min-width: 90px;
        text-align: center;
    }

body {
    font-size: 1.5rem;
    padding: 0 0 6rem;
 
}


.main {
display: inline-block;
  justify-content: center;


}

.box2{
     text-align: left;

}

.box1{
    text-align: center;
    margin: 0 0 3rem 0;
}
}

@media (max-width:750px) {

.listTate {
        columns: 1;
    }


h1 {
    font-size: 5.5em;
    
}
}