body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
h1,p,span{
     font-family: "Jun 501" , "メイリオ" , Meiryo , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐゴシック" , sans-serif;
     font-size:14px;
}
.fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/back.png') no-repeat center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*.poyoyon2{
    animation: poyoyon2 1s ease-in-out forwards;
    padding:10% 0;
    display: grid;
    place-content: center;
    height: 100%;
    width: auto;
}*/
h1.poyoyon2{
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding:calc(30px + 5%) 0;
    box-sizing: border-box;
}
h1.is-active{
    animation: poyoyon2 1s ease-in-out forwards;
}
.fullscreen .maroimg{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit: contain;
}
figure{
    display: flex;
    position:absolute;
    left:20%;
    top:10%;
    width:20%;
    height:auto;
    opacity: 0;
    margin:0;
}
figure.is-active{
    animation: poyoyon3 0.7s ease-in-out forwards;
}
figure img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit: contain;
}
@media screen and (max-width:1920px){
    figure{
        left:35%;
        top:10%;
        width:20%;
        max-width:120px;
    }
}
@media screen and (max-width:1300px){
    figure{
        left:28%;
        top:10%;
        width:20%;
    }
}
@media screen and (max-width:980px){
    figure{
        left:20%;
        top:10%;
        width:20%;
    }
}
@media screen and (max-width:768px){
    figure{
        left:11%;
        top:10%;
        width:22%;
    }
}
@media screen and (max-width:430px){
    figure{
        left:5%;
        top:12%;
        width:25%;
    }
}
@media screen and (max-width:376px){
    figure{
        left:5%;
        top:10%;
        width:25%;
    }
}

  @keyframes poyoyon2 {
    0%  {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
      transform: scale(0.98, 0.9) translate(0, 5px);
    }
    30% {
      transform: scale(1.02, 1.0) translate(0, 8px);
    }
    50% {transform: scale(0.98, 1.05) translate(0, -8px);
    }
    70% {
      transform: scale(1.0, 0.9) translate(0, 5px);
    }
    100% {
      transform: scale(1.0, 1.0) translate(0, 0);
      animation: poyoyon3 1s ease-in-out forwards;
    }
    0%, 100% {
      opacity: 1;
    }
  }
  @keyframes poyoyon3 {
    0%  {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
      transform: scale(0.98, 0.9) translate(0, 5px);
    }
    30% {
      transform: scale(1.02, 1.0) translate(0, 8px);
    }
    50% {transform: scale(0.98, 1.05) translate(0, -8px);
    }
    70% {
      transform: scale(1.0, 0.9) translate(0, 5px);
    }
    100% {
      transform: scale(1.0, 1.0) translate(0, 0);
      animation: poyoyon3 1s ease-in-out forwards;
    }
    0%, 100% {
      opacity: 1;
    }
  }

  hr{
    border-color: #fff;
  }
  .loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 555;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loader .txt {
    font-size: 14px;
    color: #3b3436;
    display: none;
  }
  .loader .txt span{
    background:url(images/cau.png) no-repeat left;
    background-size:16px;
    padding-left:18px;
    display: block;
    margin-bottom:12px;
  }
  .loader .txt2 {
    display: none;
  }
  .circles-to-rhombuses-spinner, .circles-to-rhombuses-spinner * {
    box-sizing: border-box;
  }

  .circles-to-rhombuses-spinner {
    height: 15px;
    width: calc( (15px + 15px * 1.125) * 3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin:auto;
  }

  .circles-to-rhombuses-spinner .circle {
    height: 15px;
    width: 15px;
    margin-left: calc(15px * 1.125);
    transform: rotate(45deg);
    border-radius: 10%;
    border: 3px solid #a31a41;
    overflow: hidden;
    background: transparent;

    animation: circles-to-rhombuses-animation 1200ms linear infinite;
  }

  .circles-to-rhombuses-spinner .circle:nth-child(1) {
    animation-delay: calc(150ms * 1);
    margin-left: 0
  }

  .circles-to-rhombuses-spinner .circle:nth-child(2) {
    animation-delay: calc(150ms * 2);
  }

  .circles-to-rhombuses-spinner .circle:nth-child(3) {
    animation-delay: calc(150ms * 3);
  }

  @keyframes circles-to-rhombuses-animation {
    0% {
      border-radius: 10%;
    }

    17.5% {
      border-radius: 10%;
    }

    50% {
      border-radius: 100%;
    }


    93.5% {
      border-radius: 10%;
    }

    100% {
      border-radius: 10%;
    }
  }

  @keyframes circles-to-rhombuses-background-animation {
    50% {
      opacity: 0.4;
    }
  }


  #g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background-color: rgba(255, 255, 255, 0.8);
    /*動き*/
	transition: all 0.3s;
    padding:16px;
    display: grid;
    place-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1;
	z-index:999;
    position: relative;
}
#g-nav .close{
    font-size:60px;
    position:absolute;
    top:32px;
    right:16px;
    text-align:center;
    line-height:15px;
    font-family: "Jun 501" , "メイリオ" , Meiryo , "ヒラギノ角ゴPro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐゴシック" , sans-serif;
}
#g-nav .close span{
    font-size:12px;

}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #666;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}