@font-face {
  font-family: blue-archive;
  src: url(/preview/assets/font/ba.ttf);
}

@font-face {
  font-family: urwdin;
  src: url(/preview/assets/font/URWDIN-Thin.ttf);
}

*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}

body {
  line-height: 1.6 !important;
  letter-spacing: .075em;
}

#rin-main {
    width: 600px;
    margin: auto;
    text-align: center;
    margin-top: calc(50vh - 200px);
}
@media (max-width: 600px){
    #rin-main {
        width: 95%;
    }
}
#rin-headimg{
    /* background-image: url('https://cdn.jsdelivr.net/gh/AyagawaSeirin/homepage@latest/assets/img/logo.jpg'); */
    border-radius: 50%;
    height: 150px;
    width:150px;
    margin: auto;
    cursor: pointer;
    /* background-size: cover;
    border: 3px solid #fff;
    background-repeat: no-repeat; */
    box-shadow: 0 0 8px 0 rgba(0,0,0,.55);
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
}

#rin-headimg:hover{
    -webkit-transform: rotateZ(360deg);
    transform: rotate(360deg);
}
.rin-name{
    margin-top: 20px;
    color:white;
    font-size: 26px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,255,255,.55);
}

.rin-name-2{
  color:white;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,255,255,.55);
}

.rin-description{
    color:white;
    text-shadow: 0 0 8px rgba(255,255,255,.55);
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 20px;
    letter-spacing:8px;
}
.rin-btn {
    color:white;
    margin-top: 10px;
}

.r-title{
    margin-top: var(--rTitleMarginTop, 0) !important;
    margin-bottom: var(--rTitleMarginBottom, 0) !important;
}

.screen-reader{
    width: var(--screenReaderWidth, 1px) !important;
    height: var(--screenReaderHeight, 1px) !important;
    padding: var(--screenReaderPadding, 0) !important;
    border: var(--screenReaderBorder, none) !important;
  
    position: var(--screenReaderPosition, absolute) !important;
    clip: var(--screenReaderClip, rect(1px, 1px, 1px, 1px)) !important;
    overflow: var(--screenReaderOverflow, hidden) !important;
}

/* .popup:not(:target){
    display: none;
  } */

  #popup-article:not(:target) {
    display: none;
  }
  
  .popup:target{
    width: 100%;
    height: 100vh;
    
    display: flex;
   
    position: fixed;
    top: 0;
    right: 0;  
  }
  
  .popup::before{
    content: "";
    box-sizing: border-box;
    width: 100%;
    background-color: #ffffff;
    /* background-image: url('/preview/assets/img/wall.png'); */
    background-repeat: no-repeat;
    position: fixed;
    left: 0%;
    top: 50%;
  }
  
  .popup::after{
    content: "";
    width: 0;
    height: 2px;
    background-color: #ffffff;
    /* background-image: url('/preview/assets/img/wall.png'); */
  
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
  }
  
  .popup__container{
    box-sizing: border-box;  
    padding: 5% 15%;
  
    height: calc(100vh - 40px); /*1*/
    margin: auto; /* 1 */
    overflow: auto; /* 1 */
    overscroll-behavior: contain; /* 1 */
  }
  
  .popup__title{
    --rTitleMarginBottom: 1.5rem;
    font-size: 1.5rem;
  }
  
  .popup__close{
    width: 2rem;
    height: 2rem;
  
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
  
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==);
  }
  
  /*
  animation
  */
  
  .popup::before{
    will-change: height, top;
    animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
  }
  
  .popup::after{
    will-change: width, opacity;
    animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;
  }
  
  @keyframes line-animation{
  
    0%{
      width: 0;
      opacity: 1;
    }
  
    99%{
      width: 100%;
      opacity: 1;
    }
  
    100%{
      width: 100%;
      opacity: 0;
    }  
  }
  
  @keyframes open-animation{
  
    0%{
      height: 0;
      top: 50%;
    }
  
    100%{
      height: 100vh;
      top: 0;
    }
  }
  
  .popup__container{
    animation: fade .5s ease-out 1.3s both;
  }
  
  @keyframes fade{
  
    0%{
      opacity: 0;
    }
  
    100%{
      opacity: 1;
    }
  }
  
  /*
  =====
  DEMO
  =====
  */
  
  /* body{
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
    font-size: 1rem;
    color: #222;
    background-color: #512da8;
    margin: 0;
  }
   */
  /* p{
    margin: 0;
    line-height: 1.5;
  }
  
  p:nth-child(n+2){
    margin-top: 1rem;
  } */
  
  /* .open-popup{
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    padding: .75rem 1.25rem;
    border: 1px solid;
  } */
  
  .page{
    min-height: 100vh;
    display: flex;
  }
  
  .page__container{
    max-width: 1200px;
    padding-left: .75rem;
    padding-right: .75rem;  
    margin: auto;
  }

  .section {
    display: block;
  }

  .section {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: no-repeat 50%;
    background-size: cover;
    text-decoration: none;
  }

  .section__container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  }
  
  .section{
    transition:all 1s;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    will-change:opacity,transform;
  }

  #credit {
    background-image: url('/preview/assets/img/wall.png');
    z-index: 1;
    color: rgb(0, 0, 0);
    text-decoration: none;
  }
  #credit .credit {
    width: 660px;
    font-family: urwdin;
    color: rgb(0, 0, 0);
    text-decoration: none;
  }
  #credit .credit:after {
    display: block;
    clear: both;
    content: "";
  }
  #credit .credit {
    margin-bottom: 30px;
  }
  #credit .credit__head {
    width: 150px;
    clear: both;
    float: left;
    margin-bottom: 15px;
  }
  #credit .credit__body {
    width: 490px;
    float: right;
    margin-bottom: 15px;
  }
  #credit .credit__body__link {
    display: inline-block;
    color: rgb(0, 0, 0);
    text-decoration: none;
  }
  #credit .credit__body__list {
    display: flex;
    margin-bottom: -20px;
  }
  #credit .credit__body__list__item:first-child:after {
    content: "/";
    padding: 0 10px;
  }
  #credit .button {
    width: 660px;
    display: flex;
    justify-content: space-between;
  }
  #credit .button__item {
    width: 320px;
    height: 60px;
    line-height: 60px;
    margin-bottom: 15px;
  }
  #credit .button__item__link {
    display: inline-block;
    width: inherit;
    height: inherit;
    line-height: inherit;
    text-align: center;
    font-family: urwdin;
    border: 1px solid #000000;
    color: rgb(0, 0, 0);
    text-decoration: none;
  }
  @media (max-width: 768px) {
    #credit .credit {
      width: 320px;
      padding: 0 10px;
      margin-bottom: 20px;
    }
    #credit .credit__head {
      width: 107.5px;
      margin-bottom: 10px;
    }
    #credit .credit__body {
      width: 192.5px;
      margin-bottom: 10px;
    }
    #credit .credit__body__list {
      margin-top: 10px;
    }
    #credit .credit__body__list__item {
      width: 100%;
      margin-bottom: -5px;
    }
    #credit .credit__body__list__item:first-child:after {
      margin: -6px;
    }
    #credit .button {
      width: 320px;
      padding: 0 10px;
      flex-wrap: wrap;
    }
    #credit .button__item {
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
    }
  }

ul {
  list-style-type: none;
  padding-left: 0rem !important;
}

dt {
  font-weight: bold;
}

a {
  font-weight: bold;
}

@media (max-width: 320px){
  .rin-description {
    font-size: 10px;
  }

  #credit .button {
    margin-left: 10px;
  }

  #credit__head {
    align-items: center;
  }

  .credit__body__link {
    padding-right: 15px;
  }

  #credit .credit__body__list__item:first-child:after {
    margin: -20px;
  }
}

@media (min-width: 401px){
  .toggle-btn {
    display: none;
  }
}

/* html{box-sizing:border-box;-webkit-text-size-adjust:100%;-webkit-user-select:none;-ms-user-select:none;user-select:none;}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{touch-action:manipulation}html{font-size:62.5%}body{font-size:1.4rem;font-family:AxisStd-Regular,yu-gothic,-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;line-height:1.6;letter-spacing:.075em;-webkit-font-feature-settings:"palt";font-feature-settings:"palt";-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:unset}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),only screen and (-webkit-min-device-pixel-ratio:2){body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (max-width:420px){body{font-size:1rem}}@font-face{font-weight:100;font-family:yu-gothic;src:local("YuGothic-Light"),local("Yu Gothic Light")}@font-face{font-weight:200;font-family:yu-gothic;src:local("YuGothic-Light"),local("Yu Gothic Light")}@font-face{font-weight:300;font-family:yu-gothic;src:local("YuGothic-Regular"),local("Yu Gothic")}@font-face{font-weight:400;font-family:yu-gothic;src:local("YuGothic-Medium"),local("Yu Gothic Medium"),local("YuGothic-Regular")}@font-face{font-weight:500;font-family:yu-gothic;src:local("YuGothic-Medium"),local("Yu Gothic Medium"),local("YuGothic-Regular")}@font-face{font-weight:600;font-family:yu-gothic;src:local("YuGothic-Bold"),local("Yu Gothic")}@font-face{font-weight:700;font-family:yu-gothic;src:local("YuGothic-Bold"),local("Yu Gothic")}@font-face{font-weight:800;font-family:yu-gothic;src:local("YuGothic-Bold"),local("Yu Gothic")}@font-face{font-weight:900;font-family:yu-gothic;src:local("YuGothic-Bold"),local("Yu Gothic")}body,html{height:100vh;width:100%;min-width:1280px;color:#e6e6e6;background-color:#000}#main{position:relative;width:inherit;height:inherit}*,:after,:before{box-sizing:border-box}a{color:#e6e6e6;text-decoration:none;transition:all .2s}a:hover{opacity:.8;-webkit-transform:scale(1.05);transform:scale(1.05)}ul{list-style-type:none}@media (max-width:420px){body,html{min-width:100vw}}.section{position:fixed;top:0;right:0;bottom:0;left:0;height:100vh;width:100vw;background:no-repeat 50%;background-size:cover}.section__container{position:relative;display:flex;justify-content:center;align-items:center;height:100vh;width:100vw}.dive{opacity:0;pointer-events:none;-webkit-transform:scale(1.2);transform:scale(1.2);//filter:blur(10px);transition:all .3s}.section{transition:all 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:opacity,transform}#cover{background-image:url(../img/winter.png);}#cover .logo{position:relative}#cover .logo__main{height:15px}#cover .logo__main__image{position:absolute;top:50%;left:49%;margin: -75px 0 0 -200px;width:400px;height:150px;vertical-align:top;}#cover .logo__sub{position:absolute;top:3px;right:25vw;height:10px}#cover .logo__sub__image{width:181px;height:10px;vertical-align:top}#cover .section__container:after,#cover .section__container:before{opacity:.75;content:"";position:absolute;display:block;width:15px;height:15px;border-right:3px solid #e6e6e6;border-bottom:3px solid #e6e6e6;-webkit-transform:rotate(35deg) skewX(-20deg);transform:rotate(35deg) skewX(-20deg)}#cover .section__container:before{bottom:50px}#cover .section__container:after{bottom:43px}#cover .arrow{opacity:.75;position:absolute;bottom:70px;font-size:1.2rem;font-family:GenshinFont;}@media (max-width:420px){#cover .logo__sub{top:-50px;right:0;left:0;height:5px;text-align:center}#cover .logo__sub__image{width:90px;height:5px}#cover .section__container:after,#cover .section__container:before{border-right:2px solid #e6e6e6;border-bottom:2px solid #e6e6e6}#cover .section__container:before{bottom:80px}#cover .section__container:after{bottom:73px}#cover .arrow{bottom:100px;font-size:1rem}}#credit{z-index:1;background-image:url("../img/wall.png");color:rgb(0, 0, 0);}#credit .credit{width:660px;font-family:GenshinFont;color:rgb(0, 0, 0);}#credit .credit:after{display:block;clear:both;content:""}#credit .credit{margin-bottom:30px}#credit .credit__head{width:150px;clear:both;float:left;margin-bottom:15px}#credit .credit__body{width:490px;float:right;margin-bottom:15px}#credit .credit__body__link{display:inline-block;color:rgb(0, 0, 0);}#credit .credit__body__list{display:flex}#credit .credit__body__list__item:first-child:after{content:"/";padding:0 10px}#credit .button{width:660px;display:flex;justify-content:space-between}#credit .button__item{width:320px;height:60px;line-height:60px;margin-bottom:15px}#credit .button__item__link{display:inline-block;width:inherit;height:inherit;line-height:inherit;text-align:center;font-family:GenshinFont;border:1px solid #000000;color:rgb(0, 0, 0);}@media (max-width:420px){#credit .credit{width:320px;padding:0 10px;margin-bottom:20px}#credit .credit__head{width:107.5px;margin-bottom:10px}#credit .credit__body{width:192.5px;margin-bottom:10px}#credit .credit__body__list{flex-wrap:wrap}#credit .credit__body__list__item{width:100%;margin-bottom:10px}#credit .credit__body__list__item:first-child:after{display:none}#credit .button{width:320px;padding:0 10px;flex-wrap:wrap}#credit .button__item{width:100%;height:40px;line-height:40px;margin-bottom:10px}}.fingerprint{opacity:.5;z-index:2;position:fixed;top:0;right:0;bottom:0;left:0;display:block;width:100vw;height:100vh;background-size:cover;pointer-events:none;mix-blend-mode:exclusion;filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2"/><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter');-webkit-filter:brightness(200%);filter:brightness(200%)} */