@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Zen+Kaku+Gothic+New&display=swap');

body {
    background: #2C2C2C;
    color: #D3D3D3;
    font: normal normal 16px/1.7em 'Zen Kaku Gothic New', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* リンク */
a {
  position: relative;
  display: inline-block;
  transition: .3s;
  color:#E8D3E0;
}
a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: #6B5B7F;
transition: .3s;
}
a:hover::after {
width: 100%;
}
a:visited {
border-bottom:1px solid #6B5B7F;
}
mark {
background: #D1C4E9;
}


.h1 {
  color: #674EA7;
  background-image: linear-gradient(
    45deg,
    #674EA7 ,
    #9D69AC 25%,
    #C1A6D1 50%,
    #F2E3F5 75%,
    #E5549E 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
width: 200px;
margin-bottom: 6px;
border:1px solid #000;
background: #000;
color: #fff;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.8em;
}
h3 {
width: 200px;
margin: 4rem 0 2rem 0;
border: 1px solid transparent;
color: #000;
background: #f5ebdc;
text-align: center;
text-transform: uppercase;
letter-spacing:2px;
font-size:0.8em;
}
h4 {
display: inline-block;
padding-bottom: 2px;
margin-bottom: 8px;
border-bottom: 2px solid #000;
letter-spacing: 1px;
}

/* フォーム */
input, input:focus, input[type="text"], input[type="submit"], textarea {
width: 100px;
height: 1.7em;
margin: 4px;
padding: 4px;
font-size: 0.8em;
text-transform: uppercase;
border: 1px solid #D3D3D3;
border-radius: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline: none;
vertical-align: middle;
position: relative;
top: -2px;
}
textarea {
display: block;
min-width: 300px;
min-height: 88px;
line-height: 20px;
margin: 4px 4px 4px 0;
color:#000;
}
input[type="submit"] {
padding:0;
line-height:1em;
word-break: break-all;
text-align: center;
}
input::-webkit-input-placeholder { color: #D3D3D3; }
input::-moz-placeholder { color: #D3D3D3; }
input:-moz-placeholder { color: #D3D3D3; }
input:-ms-placeholder { color: #D3D3D3; }
input::placeholder { color: #D3D3D3; }
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color: transparent; }

/* メイン */
main {
width: 90%;
max-width: 600px;
margin: 1em auto;
}

section {
margin: 20vh auto;
}

#main p {
margin:0 0 4rem 0;
}