@font-face {
font-family: "kiru";
  src: url("./Dup/kiru.ttf") format("ttf"),url("./Dup/kiru.woff") format("woff");
}

body{
font-weight:bold;
}

h2, h3{
font-family: "kiru";
    font-weight: normal;
}

#page9 h3{
font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

header{
    position: relative;
    overflow: hidden;
}

/*header:before{
content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/role.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 200%;
    pointer-events: none;
    z-index: 99;
 animation:3s linear infinite rotation1;
}*/

.kore{
        position: absolute;
    width: 200%;
    height: 200%;
    transform: scale(70.5) translate(-50%, -50%);
    animation: 100s linear infinite rotation1;
    top: -50%;
    left: -50%;
    transform-origin: 50% 50%;
    z-index: 0;
}

.kore img{
width:100% !important;
height:100% !important;
}


#top_header, #top_link, #pc_tel {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
}

.links_bt{
position:relative;
}

#top_link:before{
    content: "";
    display: block;
    width: 20%;
    height: 60%;
    position: absolute;
    top: 5%;
    left: 40%;
    background-image: url(./Dup/boss.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%) rotate(-20deg);
    background-size: contain;
    pointer-events: none;
animation: 0.5s linear 1 test;
}

@keyframes test{
  0%{ top:50%;left:50%;}
10%{ top:50%;left:50%;}
  100%{ top:5%;left:40%; }
}


@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.bg_color2 {
    background-color: #ffffff;
}

#pc_intro{
    background-image: url(./Dup/intro_back.jpg);
}

.bg_color3 {
    background-color: #0c0c0c;
}

#main_right header{
padding-right:0;
}

#contents:before{
    content: "";
    position: absolute;
    background-image: url(./Dup/pic.png);
    background-size: 100%;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 1;
    pointer-events: none;
}

#contents h3, #contents figure {
    margin-bottom: 30px !important;
}

.opacity07 {
    opacity: 1;
}

.txt_color3 {
    color: #cf3b1e;
}

#left_bar div {
    z-index: 99;
}

#page_container {
    background-image: url(./Dup/foot.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 41%;
}

#top_link{
animation: furu 2.2s infinite;
}

@keyframes furu {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    2% {
        transform: translate(2px, 2px) rotateZ(2deg)
    }
    4% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }
    6% {
        transform: translate(2px, 0px) rotateZ(-2deg)
    }
    8% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    10% {
        transform: translate(2px, 2px) rotateZ(2deg)
    }
    12% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    14% {
        transform: translate(2px, 0px) rotateZ(-2deg)
    }
    16% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }
    18% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    100% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
}

.fs_wrap figure{
border: 10px solid white;
    transform: rotate(-6deg);
}

#contents .box_txt {
    background-color: rgba(255,255,255,1) !important;
}

.henko{
padding-bottom:100px;
}

.youtube{
  position: relative;
	/*max-width: 780px;*/
	width: 70%;
	text-align: center;
	margin: 4% auto 4%;
}
.youtube:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 56.25%;
  }
.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#top_link:before {
    top: 120px;
}

#top_header{
    background-color: rgba(22, 10, 10, 0.7) !important;
}

#contents:before {
    background-size: cover;
}

#top_link:before{
animation: 0.5s linear 1 test2;
}

@keyframes test2{
  0%{ top:200px;left:50%;}
10%{ top:200px;left:50%;}
  100%{ top:120px;left:40%; }
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#intro.on .bg_wrap{
height:90vh;
padding-bottom:100px;
box-sizing:border-box;
}

#intro h2 img {
    width: 150px;
}

.youtube{
  position: relative;
	/*max-width: 780px;*/
	width: 100%;
}

}