*{
    padding: 0;
    margin: 0;
}
:root{
    --text: #252525;
    --black: #1b1b1b;
    --gray: #eee;
    --white: #fbfbfb;
    --main: #3F3C5E;
    --link: #235fd6;
}

body{
    color: var(--text);
    background: var(--gray);
    text-align: center;
    line-height: 1.7;
    font: 16px;
    font-family: 'Noto Sans JP', 'sans-serif';
}
main{
    margin: auto;
    padding: 0 5px;
    width: 100%;
    max-width: 700px;
}
footer{
  position: sticky;/*ここから二行で内容が少なければfooterを下に*/
  top: 100vh;
  padding: 5px 0;
  background: var(--main);
  color: var(--gray);
}
h1{
    padding: 5px 0;
    background: var(--white);
    border-bottom: solid 2px var(--main);
}
h1 {
	/* SP:2rem | TB:2.5rem | PC:3rem */
	font-size: calc(1.25vw + 1.0rem);
}
p {
	 /* SP:1.4rem | TB:1.5rem | PC:??rem */
	font-size: calc(0.25vw + 0.9rem);
}
#randomWords, #randomSentence{
    background: var(--white);
    margin: 15px auto;
    border: 2px solid var(--main);
    padding: 10px 0;
}
#reload-button{
    background: var(--white);
    padding: 5px 0;
    margin-top: 5px;
    width: 100%;
    border: solid 2px var(--main);
    transition: .3s;
}
#reload-button:hover{
    background: var(--main);
    color: var(--white);
    border-color: var(--main);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .3);
}
#sentenceCount, #wordCount{
    background: var(--white);
    padding: 3px 15px;
    border: solid 2px var(--main);
}
select {
    appearance: auto;
  }

.blank{
    margin-top: 15px;
}
.shadow{
    box-shadow: 0 7px 10px 0 rgba(0, 0, 0, .3);
}