html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  box-sizing:border-box;
}
article,aside,footer,header,nav,section{display:block}
body{line-height:1;overflow-wrap:break-word;word-wrap:break-word}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle;box-sizing:border-box}
a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}
a img{border-style:none}
ul,li{list-style-type:none}
.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}

html,body{
  min-height:100%;
  width:100%;
}
html{
  font-size:62.5%;
}
body{
  background:linear-gradient(180deg, #ffffff 0%, #dbc7ff 100%);
  color:#1d007d;
  font-size:1.4em;
  font-family:'Inter', 'Segoe UI', sans-serif;
  letter-spacing:.02em;
  line-height:1.75;
  text-align:center;
  min-height:100vh;
  transition: background-color .3s ease;
}
a{color:#5a00e0;transition:color .25s ease}
a:hover{color:#1b3e5b}
#contents a{text-decoration:underline}

#wrapper{
  margin:0 auto;
  width:min(92%, 640px);
  padding:24px;
}
.header-inner{padding:16px 0}
#contents{padding:24px 0;text-align:left}
footer{border-top:1px solid rgba(76,92,110,.12);padding:16px 10px;text-align:left}
footer .sub{text-align:right}

#menu{padding:14px 0;text-align:left}
nav li{display:inline}
nav li + li:before{content:"｜";color:rgba(76,92,110,.35);padding:0 10px}
nav li a{
  color:#1d007d;
  display:inline-block;
  padding:0 10px;
  transition: color .25s ease, transform .2s ease;
}
nav li a:hover{color:#1b3e5b;transform:translateY(-1px)}
#open{display:none}

h1{
  font-size:2.6rem;
  margin:12px 0;
  text-align:left;
  letter-spacing:0;
}
h2{
  border-left:5px solid #7c9abe;
  font-size:1.8rem;
  margin:24px 0;
  padding-left:14px;
  color:#263544;
}
h3{
  border-bottom:1px dotted rgba(76,92,110,.35);
  font-size:1.55rem;
  margin:22px 0;
  color:#344154;
}
h2:first-letter,h3:first-letter{font-size:2.4rem;margin-right:.1em}
dt{clear:both;font-weight:700;float:left;margin:0 0 8px;width:160px;color:#3c4650}
dd{margin:0 0 8px 170px;color:#4f5f72}
em{font-style:normal;font-weight:700}
input,textarea{
  background:#fff;
  border:1px solid rgba(76,92,110,.16);
  border-radius:8px;
  color:#344154;
  margin:6px 0;
  padding:10px 12px;
  width:100%;
  max-width:280px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,textarea:focus{border-color:#7c9abe;box-shadow:0 0 0 3px rgba(124,154,190,.12);outline:none}
textarea{height:80px}
hr{border:0;border-top:1px solid rgba(76,92,110,.12);display:block;margin:1.8em 0;padding:0;height:1px}
.marker{background:rgba(124,154,190,.16);color:#2d3d50;padding:3px 7px;border-radius:4px}
.dcline{border-left:6px solid #d4e2f2;margin:10px 0;padding:10px 12px;background:#fbfdff;border-radius:8px}
.textbox{border:1px solid rgba(76,92,110,.16);margin:16px 0;padding:14px;text-align:center;border-radius:12px;background:#fff}
.title{color:#5e7a9d;font-size:2.2rem;font-weight:700;margin:2.2em 0;text-align:right}
.txt{border-left:3px solid rgba(124,154,190,.5);margin:1.2em;padding:0 0 0 1em;color:#4a5765}
.frame{background:#fff;padding:16px;border-radius:18px;box-shadow:0 18px 34px rgba(18,36,63,.08);transition:transform .25s ease,box-shadow .25s ease}
.frame:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(18,36,63,.12)}

@media screen and (max-width: 600px){
  body{font-size:1.45em}
  #wrapper{width:100%;padding:18px}
  #contents{padding:14px 0}
  img{height:auto;max-width:100%}
  dt{float:none;clear:none;width:auto}
  dd{margin-left:20px}

  #menu{margin-bottom:52px;padding:0;border:0;position:relative}
  nav{background:rgba(255,255,255,.95);position:absolute;width:100%;left:0;top:0;backdrop-filter:blur(10px)}
  nav ul{display:none;width:100%}
  nav li + li:before{content:""}
  nav li{display:inline-block;text-align:left;width:50%}
  nav li a{border-bottom:1px solid rgba(76,92,110,.08);border-left:1px solid rgba(76,92,110,.08);margin:0 0 -1px -1px;padding:12px 10px;display:block;background:#fff}
  nav li a:hover{background:rgba(124,154,190,.08)}
  #open{background:#f8fafc;display:block;position:relative;text-align:center;height:42px;line-height:42px;width:100%;border-radius:12px;border:1px solid rgba(76,92,110,.1)}
  #open:after{background:url(image/nav-icon.png) no-repeat 12px 50%;content:"";display:inline-block;position:absolute;right:0;top:0;height:42px;width:100%}
}
@media screen and (max-width: 480px){
  nav li{width:100%}
}