html{
    font-size: 62.5%;
}
body{
	 font-family: YuGothic,'Yu Gothic',sans-serif; 
    overflow-x: hidden;
    box-sizing: border-box;
    font-size: 1.6rem;
}
body.locked{
	overflow: hidden;
}
img {
    width: 100%;
}
a {
    text-decoration: none;
    color: #000;
}
.dela{
  font-family: 'Dela Gothic One', cursive;
  font-weight: normal!important;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 2px 10px;
    height: auto;
    border: 1px solid var(--black);
    line-height: 1;
    margin: auto 0px;
    cursor: pointer;
}
.btn.arrow{
    position: relative;
    transition: .3s;
}
.btn.arrow:before {
    content: "";
    width: 20px;
    height: 2px;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}
.btn.arrow:after {
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    right: 20px;
    transform: rotate(-45deg);
    top: 0;
    bottom: 0;
    margin: auto;
}
.btn.arrow:before, .btn.arrow:after {
    transition: .3s;
}
.btn.arrow:hover:before, .btn.arrow:hover:after {
    right: 10px;
}

@media screen and (max-width: 810px){
    .btn{
        height: 50px;
        border-radius: 5px;
    }

}

.serif{ font-family: YuMincho,'Yu Mincho',serif; }
.sans-serif{ font-family: YuGothic,'Yu Gothic',sans-serif; }
.en{ font-family: 'Comfortaa', cursive; }
.darkLayer {
    display: block;
    position: fixed;
    height: 100%;
    width: 100%;
    background: #0009;
    top: 0;
    left: 0;
    z-index: 10;
    cursor: pointer;
}
ul{
	-webkit-padding-start:0px;
	-moz-padding-start: 0px;
	padding-start:0px;
	padding:0px;
	margin:0px;
	list-style-type:none;
}
.flex {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
 }
/* body */
main{
    width : -webkit-calc(100% - 80px) ;
    width : calc(100% - 80px) ;
}
@media screen and (max-width: 810px){
main{
    width : 100%;
    padding-top: 60px;
    overflow-x: hidden;
} 
}

.sp{display: none!important;}
.sp-floating{ display: none; }
@media screen and (max-width: 810px){
	.sp{display: block!important;}
	.pc{display: none!important;}
}




.fadeIn,
.fadeIn-pc{
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 1000ms;
}
.slideDown,
.slideDown-pc{
    opacity : 0.1;
    transform : translate(0, -50px);
    transition : all 1000ms;
}
.slideR,
.slideDown-pc{
    opacity : 0.1;
    transform : translate(50px, 0);
    transition : all 1000ms;
}
.slideL,
.slideDown-pc{
    opacity : 0.1;
    transform : translate(-50px, 0);
    transition : all 1000ms;
}
.popup,
.popup-pc{
    opacity : 0.1;
    transform: scale(.95);
    transition : all 2000ms;    
}
.fadeIn.scrollin, .fadeIn-pc.scrollin,
.slideR.scrollin, .slideR-pc.scrollin,
.slideL.scrollin, .slideL-pc.scrollin,
.slideDown.scrollin, .slideDown-pc.scrollin,
.popup.scrollin, .popup-pc.scrollin{
    opacity : 1;
    transform : translate(0, 0);
}

@media screen and (max-width: 810px){
  .fadeIn-pc{
      opacity : 1;
      transform : translate(0, 0);
      transition : all 0ms;
  }
  .slideDown-pc{
      opacity : 1;
      transform : translate(0, 0);
      transition : all 0ms;
  }
  .slideDown-pc{
      opacity : 1;
      transform : translate(0, 0);
      transition : all 0ms;
  }
  .slideDown-pc{
      opacity : 1;
      transform : translate(0, 0);
      transition : all 0ms;
  }
  .popup-pc{
      opacity : 1;
      transform: scale(1);
      transition : all 0ms;    
  }
}