.wrapper {
max-width: 982px;
margin: 0 auto;
}
.header,.main,footer{
max-width: 920px;
padding: 10px 30px 5px 30px;
}

body{
margin:0;
font-family: Meiryo, sans-serif;
background-image: repeating-linear-gradient(188deg, hsla(171,0%,87%,0.12) 0px, hsla(171,0%,87%,0.12) 2px,transparent 2px, transparent 5px,hsla(171,0%,87%,0.12) 5px, hsla(171,0%,87%,0.12) 7px,transparent 7px, transparent 9px,hsla(171,0%,87%,0.12) 9px, hsla(171,0%,87%,0.12) 11px),repeating-linear-gradient(162deg, hsla(171,0%,87%,0.12) 0px, hsla(171,0%,87%,0.12) 2px,transparent 2px, transparent 5px,hsla(171,0%,87%,0.12) 5px, hsla(171,0%,87%,0.12) 7px,transparent 7px, transparent 14px,hsla(171,0%,87%,0.12) 14px, hsla(171,0%,87%,0.12) 16px),repeating-linear-gradient(0deg, hsla(171,0%,87%,0.15) 0px, hsla(171,0%,87%,0.15) 0px,transparent 0px, transparent 1px,hsla(171,0%,87%,0.15) 1px, hsla(171,0%,87%,0.15) 4px,transparent 4px, transparent 5px,hsla(171,0%,87%,0.15) 5px, hsla(171,0%,87%,0.15) 8px),repeating-linear-gradient(90deg, hsla(171,0%,87%,0.15) 0px, hsla(171,0%,87%,0.15) 0px,transparent 0px, transparent 1px,hsla(171,0%,87%,0.15) 1px, hsla(171,0%,87%,0.15) 4px,transparent 4px, transparent 5px,hsla(171,0%,87%,0.15) 5px, hsla(171,0%,87%,0.15) 8px),linear-gradient(90deg, rgb(251,251,251),rgb(251,251,251));
background-attachment: fixed;
}

a:hover { color: #00bbb1;
}

H1 {margin-top: 0; margin-bottom: 0; font-weight: 100; font-size: 2rem;
color: #777788;
background: -webkit-linear-gradient(0deg, #464646, #777777, #dddde2, #88889a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

a{ text-decoration-thickness: 1px; text-decoration-skip-ink: none; text-underline-offset: 1.8px; }

::selection{
color: #fefefe;
background: #c0c0c7;
}

html{
scroll-behavior: smooth;
}

/* Browsers without `::-webkit-scrollbar-*` support */
@supports (not selector(::-webkit-scrollbar)) {
html {
scrollbar-color: #d8d8d8 #f5f5f5;
scrollbar-width: auto;
}
}

body::-webkit-scrollbar {
width: 16px;
height: 16px;
}
body::-webkit-scrollbar-track {
background: rgba(200, 200, 200, 0.3);
box-shadow:0 0 5px inset rgba(150, 150, 150, 0.1);
}
body::-webkit-scrollbar-thumb {
background: rgba(100, 100, 100, 0.2);
border-radius: 20px;
box-shadow:0 0 5px inset rgba(150, 150, 150, 0.1);
min-height: 100px;
}
body::-webkit-scrollbar-thumb:hover {
background: rgba(50, 50, 50, 0.23);
}

.pic-exd{
width: 268px;
margin:0 auto;
overflow: hidden;
outline: 8px ridge rgba(125, 125, 128, 0.1);
}
.pic-exd img{
transition:0.5s all;
}
.pic-exd img:hover{
transform: scale(1.2);
transition: 0.5s all;
filter: brightness(85%);
}

.sp{
margin-bottom: 13px;
}

.n-wd{
display: inline-block;
position: relative;
font-size: 1rem;
margin-left: 1.05rem; margin-right: 0.15rem;
transform: scale(-1, 1);
}
.n-wd::before,
.n-wd::after{
content: "";
position: absolute;
width: 0.6rem;
height: 0.5rem;
border-style: solid;
border-color: #777;
}
.n-wd::before{
top: -0.57rem;
right: -0.625rem;
border-width: 0.0625rem;
transform: translateY(-50%);
}
.n-wd::after{
top: -0.52rem;
right: -0.8125rem;
border-width: 0 0.0625rem 0.0625rem 0;
transform: translateY(-0.125rem);
}

.face-l2{
display: inline-block;
position: relative;
margin: 0 -0.375rem 0 0.1875rem;
padding: 0;
width: 2.375rem; height: 1rem;
}
.face-l2::before{
content: '(^^;';
position: absolute;
top: 0;
left: 0;
padding: 0;
font-size: 0.95rem;
color: #414141;
font-family: Georgia, sans-serif;
}

.face-l-sml{
display: inline-block;
position: relative;
margin: 0 0 0 0.1rem;
padding: 0;
width: 2.1rem; height: 0.9rem;
}
.face-l-sml::before{
content: '(^^)';
position: absolute;
top: -0.15rem;
left: 0;
padding: 0;
font-size: 0.9rem;
color: #414141;
}

a:focus-visible{
outline: rgba(187, 187, 187, 0.75) ridge 2px;
outline-offset: 1px;
}