<style type="text/css">
@import 'https://fonts.googleapis.com/css?family=Arizonia|Qwigley|Mukta|Noto Sans JP&display=swap';

*{
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}

*:before,
*:after{
content:'';
box-sizing:border-box;
}

body{
background:#fff;
font-family:'Mukta', 'Noto Sans JP', '游ゴシック', 'Yu Gothic', 'YuGothic', メイリオ, Meiryo, sans-serif;
font-size:11px;
font-weight:400;
letter-spacing:1.3px;
line-height:1.95;
text-align:center;
word-break:break-all;
color:#444;
overflow-x:hidden;
}

a{
text-decoration:none;
color:#afaed7;
border-bottom:#f1ead1 dotted 1px;
}

img{
max-width:100%;
}

mark{
background:
    linear-gradient(
    transparent 55%,
    #dfd5e6 55%);
color:#444;
}

header{
margin:10vh auto;
}

footer{
margin:0 auto;
padding:.95em;
width:100%;
background:#afaed7;
color:#fff;
}

footer a{
color:#f1ead1;
}

main{
max-width:500px;
margin:0 auto;
padding:0 2.85em;
}

section{
margin:10vh auto 20vh;
text-align:justify;
}

section:last-child{
margin:10vh auto;
}

article{
margin:5vh auto .95em;
text-align:left;
}

.pg li{
margin:0 .6em;
display:inline-block;
color:#fff;
}

.list dt img{
display:block;
border:#fff solid 4px;
box-shadow:#dfd5e6 0 0 0 1px;
}

.list dd{
margin:.45em 0 .95em .45em;
padding:.45em 0 .45em .6em;
border-left:#dfd5e6 dotted 1px;
}

.list2{
display: -webkit-flex;
display:flex;
 -webkit-flex-flow:row wrap;
flex-flow:row wrap;
 -webkit-justify-content:center;
justify-content:center;
text-align:center;
}

.list2 li{
margin:.95em 0;
width:140px;
}

.list2 li img{
margin:.7em auto;
width:70px;
height:70px;
display:block;
object-fit:cover;
border:#fff solid 4px;
box-shadow:#dfd5e6 0 0 0 1px;
vertical-align:middle;
}

.btn{
text-align:center;
}

.btn a{
padding:.3em 1.4em;
background:#b9bde4;
color:#f1ead1;
text-transform:uppercase;
border:#b9bde4 solid 2px;
}

.btn a:hover{
background:#afaed7;
}

h1{
font-family:'Arizonia';
font-size:24px;
color:#afaed7;
text-transform:capitalize;
}

h1 img{
margin:0 auto;
width:120px;
height:120px;
display:block;
border:#fff solid 4px;
box-shadow:#dfd5e6 0 0 0 1px;
border-radius:50%;
object-fit:cover;
}

h2{
margin:1.35em 0;
font-size:13px;
color:#bbb;
text-align:center;
}

h2 img{
margin:0 auto;
width:50px;
height:50px;
display:block;
border-radius:50%;
object-fit:cover;
}

h3{
margin:.7em .95em .7em 0;
padding:0 .4em;
display:inline-block;
background:#f1ead1;
}

input[type],
textarea,
select{
background:#f1ead1;
font-family:'Mukta', 'Noto Sans JP', '游ゴシック', 'Yu Gothic', 'YuGothic', メイリオ, Meiryo, sans-serif;
font-size:11px;
font-weight:400;
letter-spacing:1.3px;
line-height:1.95;
text-align:justify;
word-break:break-all;
color:#444;
margin:5px 0;
padding:3px 6px;
width:auto;
height:auto;
border:none;
border-radius:4px;
text-shadow:none;
box-shadow:none;
resize:vertical;
outline:none;
vertical-align:middle;
}

input[type]{
margin:5px 4px;
}

select{
padding:0 6px;
}

input[type=text]{
width:70px;
}

input[type=submit]{
cursor:pointer;
background:#cfcbe4;
text-transform:lowcase;
}

input[type=submit]:hover{
background:#afaed7;
}

textarea{
width:80%;
height:10ch;
}

textarea:focus{
height:28ch;
}

::selection{
background:rgba(175, 174, 215, .7);
color:#f1ead1;
}
</style>