@import url('https://fonts.googleapis.com/css2?family=Gabriela&family=Noto+Serif+JP&family=Noto+Sans+JP&display=swap');

*{margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;}

body{
font-family:'Gabriela', 'Noto Sans JP', 'Yu Gothic', 'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
font-size:14px;
color:#383838;
letter-spacing:1.2px;
line-height:1.8;
background:#FFFFFF;
-webkit-text-size-adjust:100%;}

a{
border:none;
color:#0A0A02;
padding:0 0.5em;
text-decoration:none;
border-bottom:1px solid #AAAAAA;}

a:hover{
color:#383838;
text-decoration:none;
border-bottom:solid 1px #AAAAAA;}

header{
width:80%;
height:100px;
margin:0 auto;
padding:1em;}

h1{
font-family:'Gabriela', 'Noto Serif JP', 'Yu Gothic', 'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
font-size:20px;
text-align:center;
margin:1em auto;
padding:0 auto;}

h2{
font-family:'Gabriela', 'Noto Serif JP', 'Yu Gothic', 'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
font-size:14px;
text-align:center;
margin:1em auto 2em;
padding-bottom:0.2em;
border-bottom: 1px dashed #383838;}

h2 span {
display:block;
margin-top:0.1em;
color:#0A0A02;
font-size:0.9em;
text-align:center;}

h3{
position:relative;
font-family:'Gabriela', 'Noto Serif JP', 'Yu Gothic', 'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
font-size:14px;
text-align:left;
margin:0.2em auto 2em;}

h3 span{
position: relative;
z-index: 2;
display:inline-block;
padding-right:0.5em;
background:#FFFFFF;}

h3::before {
position:absolute;
display:block;
content:"";
z-index:1;
top:50%;
left:0;
width:100%;
height:1px;
border-bottom:1px dashed #000000;}

nav{
font-size:15px;
text-align:center;
margin:1em auto;}

nav li{
list-style-type:none;
display:inline-block;
padding:0.3em 0.5em;}

nav li a{border:none;}

main{
max-width:600px;
margin:3em auto 0;
padding:0.2em auto;}

section{
width:90%;
font-size:14px;
text-align:left;
margin:1em auto;
padding:0.5em;
background:#FFFFFF;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0 2px 5px #CCC;}

section:nth-child(2n){background:#ECECEC;}

section:last-child{margin-bottom:0;}

.more{
text-align:left;
font-size:16px;
margin:1em auto;
padding:0;}

#wrp{
width:90%;
margin:2em auto 0;
padding:0.5em;}

article {
width:340px;
text-align:left;
font-size:14px;
margin:2em auto 0;
padding:0.5em;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0 2px 5px #AAAAAA;}

article:last-child{margin-bottom:0;}

footer{
font-size:15px;
width:100%;
margin:1em auto;
padding:auto;
text-align:center;}

textarea,input[type] {
color:#0A0A02;
text-align:center;
margin:0.5em 0.2em;
padding:0.5em;
width:auto;
height:auto;
background:#FFFFFF;
border:1px solid #000;
box-shadow:none;
border-radius:0;
-webkit-border-radius:0;
-webkit-appearance:none;}

@media screen and (min-width:768px){
main{
margin:2em auto;
padding:0 auto;
max-width:760px;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
justify-content:space-around;}

section{
flex-basis:45%;
margin:2em 0.5em 1em;}

section:last-child{margin-bottom:0;}}

@media screen and (min-width:1024px){
main{
margin:2em auto;
padding:0 auto;
max-width:1024px;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
justify-content:space-around;}

section{
flex-basis:30%;
margin:2em 0.5em 1em;}

section:last-child{margin-bottom:0;}}