@import url('https://fonts.googleapis.com/css2?family=Yomogi&family=Yusei+Magic&display=swap');

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

:root{
--main-color: #f5ecf4; /* アクセントカラー */
}

body{
font-size: 0.9em;
font-family: 'Yomogi';
line-height: 1.5;
background-color: var(--main-color);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
}

a{
text-decoration: none;
color: #333;
border-bottom: dotted 2px var(--main-color);
}

.wrp{
position: relative;
background: #fff;
width:90%;
max-width:600px;
margin: 30px auto;
padding: 10px 15px 5px 50px;
}
.wrp::before{
display: block;
content: "";
background: #fff;
width: 25px;
height: 99%;
left: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
border-right: dotted #ccc 20px;
}

header{
font-size:1.1em;
text-align: center ;
margin: 50px auto 50px;
display: table;
table-layout: fixed;
}

header p{
margin:0;
line-height: 1.5;
}

h1 {
font-family: 'Yusei Magic';
font-size: 1.8em;
}

h2 {
font-family: 'Yusei Magic';
font-size: 1.2em;
}
h2 span{
padding: 2px 5px;
color: #fff;
background: var(--main-color);
}

hr {
border-style: solid #ccc 1px;
}
.icon{
background-color: #fcfcfc;
width:120px;
height:130px;
border: 1px solid #000;
margin: 10px auto;
position:relative;
display: table-cell;
vertical-align: middle;
}
.icon::before{
content: "";
display: inline-block;
background-image: url(icon.png);
background-size: contain;
top: 5px;
left: 10px;
width: 100px;
height: 100px;
position:absolute;
}
.icon::after{
content:"";
background-color: rgba(255,255,255,.5);
top:-8px;
left: 35px;
transform:rotate(-5deg);
transform-origin:bottom left;
width:50px;
height:20px;
border-left: 2px dotted rgba(0,0,0,.1);
border-right: 2px dotted rgba(0,0,0,.1);
box-shadow: 0 0 3px rgba(0,0,0,0.3);
position:absolute;
}

.name{
display: table-cell;
vertical-align: middle;
}

table{
width: 80%;
margin: 0 auto;
text-align: center;
border-collapse: collapse;
border: solid 1px var(--main-color);
}

table th{
width: 40%;
background: var(--main-color);
color: #fff;
padding: 10px 0;
border: dashed 1px #fff;
}

table td{
width: 60%;
padding: 10px 0;
border: dashed 1px var(--main-color);
}

section{
margin: 20px 0;
}

.text{
width: 90%;
margin: 0 auto;
padding: 5px 1em;
}

footer{
font-family: 'Yusei Magic';
text-align: center ;
margin: 50px auto 20px;
}