*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

/* ↑ reset css from https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Hero image sample 
<a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E8%8C%B6%E8%89%B2%E3%81%AE%E3%82%B9%E3%83%88%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%A9%E3%82%A4%E3%83%88%E4%BB%98%E3%81%8D%E9%80%8F%E6%98%8E%E3%82%AC%E3%83%A9%E3%82%B9%E7%93%B6-S8Vuk4FOK8g?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>の<a href="https://unsplash.com/ja/@miracleday?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Elena Mozhvilo</a>が撮影した写真
   */

@font-face {
    font-family: "Kaisei Decol";
    src: url("./Kaisei_Decol/KaiseiDecol-Regular.ttf") format("truetype");
    font-style: normal;
}

:root {
    /* PC表示のmaxwidth */
    /* 情報量が少ないので、幅、短くします。 */
    --pcwidth: 865px;
    --pcmargin: 1%;
    /* 色設定 */
    --blue-color: rgb(34, 34, 73);
    --water-color: #babaff;
    --brown-color: rgb(44, 23, 23);
    --gold-color: rgb(187, 187, 58);
    --ranp-color: rgb(250, 250, 162);
    --white-color: white;
    --red-color: rgb(211, 44, 44);
    --gray-color: #bac8c6;

  }

html, body {
    background-color: var(--brown-color);
    color:var(--white-color);
    font-size: larger;
    font-family: "Kaisei Decol", sans-serif;
}

header {
    max-width: var(--pcwidth);
    font-size: smaller;
    margin: 2% auto;
    padding: 2%;
}
#wrap1 {
    margin: 14% auto 4% auto;
    max-width: var(--pcwidth);
}
#wrap2 {
    margin: auto var(--pcmargin);
}

#wrap2 #me {
    margin: auto;
    text-align: center;
    font-size: xx-large;
}
#wrap2 #name {
    margin: auto;
    text-align: center;
    font-size: small;
}

#wrap2 #mySelf {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 5% auto;
}
#mySelf div {
    text-align: center;
}
#mySelf div img {
    display: inline-block;
    max-height: 50vh;

}
#mySelf p {
    display: inline-block;
    margin: auto;
}


.lamp img{
    display: inline-block;
    max-width: 8vw;
    margin: 1% auto;
}
.lamp {
    text-align: center;
    font-size: medium;
    margin: 25% auto;
}

#fact .factGrid {
    display: grid;
    grid-template-columns: 50% 50%;
}
#fact div {
    margin: 5% 10%;
}
#fact #factLeft {
    text-align: left;
}
#fact #factCenter {
    text-align: center;
}
#fact #factRight {
    text-align: right;
}


footer {
    margin: auto;
    max-width: var(--pcwidth);
    display: grid;
    grid-template-columns: 50% 50%;
    font-size: small;
    padding: 0.5% 0;
}
footer #shuho {
    text-align: left;
}
footer #used {
    text-align: right;
}
#end {
    font-size: xx-small;
    text-align: center;
    padding: 0 0 1% 0;
}