.clearfix:after {
  clear: both;
  content: "";
  display: block; }

@media (max-width: 767px) {
  p {
    font-weight: 300; } }
@media (max-width: 767px) {
  .pc {
    display: none !important; } }
@media (min-width: 768px) {
  .sp {
    display: none !important; } }
@media (min-width: 768px) {
  .fl {
    float: left; } }

@media (min-width: 768px) {
  .fr {
    float: right; } }

.en {
  font-family: "DinPro"; }

@media (min-width: 768px) {
  main {
    overflow-x: hidden; } }

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 99999; }
  #loading .logo {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 216px; }
    #loading .logo p {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
      #loading .logo p:nth-of-type(2) {
        height: 97.22%;
        border-radius: 50%; }
        #loading .logo p:nth-of-type(2) img {
          top: 36px; }
      #loading .logo p:nth-of-type(3) {
        opacity: 0; }
    #loading .logo img {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0; }
  #loading svg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10; }
    #loading svg path {
      fill: none;
      stroke: white;
      stroke-linecap: butt;
      stroke-width: 41;
      stroke-dashoffset: 840;
      stroke-dasharray: 1700; }
  @media (max-width: 767px) {
    #loading .logo {
      width: 100px;
      height: 108px; } }