/*
Theme Name:
Theme URI:
Description:
Author:PLUSIDEA
Author URI:http://plusidea.co.jp/
Version:7.7
*/


@charset "utf-8";

/*----------------------------------------------------------------------
base
----------------------------------------------------------------------*/

html {
  min-width: 320px;
  font-size: 62.5%;
  height: 100%;
}

.col1{
  width:5.9829%;
}
.col2{
  width:14.5299%;
}
.col3{
  width:23.0769%;
}
.col4{
  width:31.6239%;
}
.col5{
  width:40.1709%;
}
.col6{
  width:48.7179%;
}
.col7{
  width:57.2649%;
}
.col8{
  width:65.8119%;
}
.col9{
  width:74.3589%;
}
.col10{
  width:82.9059%;
}
.col11{
  width:91.4529%;
}
.col12{
  width:100%;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-60 {
    margin-bottom: 60px;
}
.mb-80 {
    margin-bottom: 80px;
}
.mb-100 {
    margin-bottom: 100px;
}
.xsmall {
	font-size: 8px;
}
.small {
	font-size: 12px;
}
.large {
	font-size: 20px;
}
.xlarge {
	font-size: 24px;
}
img {
	max-width: 100%;
  display: block;
  margin: auto;
}
.tac {
    text-align: center;
}
.tar {
    text-align:right;
}
.tal {
    text-align:left;
}
a{
  text-decoration: none;
  color: #000;
}
a:hover{
  opacity: 0.7;
}
span.big {
  font-size: 30px;
}
span.red{
  color: #ff3333;
  font-weight: bold;
}
table{
  border-collapse: collapse;
}
dh{
  color: #555;
  font-size: 20px;
  font-weight: bold;
}
.flr{
  float: right;
}
.fll{
  float: left;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
 content:"";
 display:block;
 overflow:hidden;
}
.clearfix:after {
 clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
 zoom:1;
}
.br-pc { display:block; }
.br-sp { display:none; }

/*------------------パンくずリスト------------*/

.breadcrumg-area ul{
  padding-left: 0;
  margin-bottom: 30px;
}

.breadcrumg-area ul li{
  display: inline-block;
  padding-left: 15px;
  position: relative;
}

.breadcrumg-area ul li::before{
  position: absolute;
  left: 0;
  content:">";
  color: #333;
}

.breadcrumg-area ul li:first-child{
  padding-left: 5px;
}

.breadcrumg-area ul li:first-child::before{
  display: none;
}



/*----------------------------------------------------------------------
main
----------------------------------------------------------------------*/
#page-animate::before {
  content: '';
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ff5033;
  z-index: 9999;
  pointer-events: none;
  right: 100%;
  -webkit-transition: right 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: right 1.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #page-animate::after {
  content: '';
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ff5033;
  z-index: 9999;
  pointer-events: none;
  left: 100%;
  -webkit-transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #page-animate.is-slide-in::before {
  right: 0;
 }
 
 #page-animate.is-slide::after {
  left: 0;
 }

nav {
  text-align: center;
}

#navArea {
  position: relative;
  z-index: 100;
}

.logoimg {
  position: absolute;
  z-index: 3;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
}

.logoimg img{
  width: 45%;
}

.fade1 {
  animation: fadeIn 5s ease .3s normal;
  -webkit-animation: fadeIn 5s ease .3s 1 normal;
}

@font-face {
	font-family: 'Oasis';
	src: url(./font/CapitalisTypOasis.ttf);
}

body {
  font-family: "Oasis","Sawarabi Mincho","Noto Sans JP", sans-serif;
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@keyframes scrollDown {
  0% { height:50px;}
  /* 50% { height: 100px;} */
  100% { height: 130px;}
}

video {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  filter:brightness(90%);
}

.scroll_down p::before{
  content: '';
    width: 2px;
    height: 90px;
    background: #fff;
    position: absolute;
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollDown 1s cubic-bezier(0.25, 1, 0.5, 1) .3s alternate none running;
    animation-iteration-count: infinite;
}

.wrapper {
  min-height: 100vh;
  width: 100%;
}

.img_wrap {
  width: 60%;
}

.works {
  margin: 0 auto;
}

.half_wrapper_right {
  width: 35%;
  margin-left: auto;
  margin-right: 5%;
  z-index: 12;
  position: fixed;
  top:25%;
  right:0%;
}


.about_wrapper{
  width: 100%;
  text-align: center;
  margin:0 auto;
  z-index: 12;
  position: fixed;
 
}

.title {
  color: #fff;
  font-size: 6.5rem;
  /* text-align: center; */
  padding-bottom: 30px;
  font-weight: bold;
  letter-spacing: 0.8rem;
  text-shadow: 1px 1px 1px #666;
}

.desc {
  color: #fff;
  font-size: 1.9rem;
  line-height: 3.6;
  text-shadow: 1px 1px 1px #666;
}



.detail {
  color:#fff;
  font-size:1.9rem;
  text-shadow: 1px 1px 1px #666;
  line-height: 2.5;
}

.fix {
  position: fixed;
}

.location {
  z-index: 10;
  left:0%;
  top:0%;
  display:flex;
}

.wk {
  z-index: 10;
}

.location::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: brightness(70%);
  z-index: -200;
  }

.location {
  display: flex;
  justify-content: space-between;
}

.number {
  font-family:serif;
  font-size: 1.9rem;
}

.play {
  color:#eee;
  margin-left: 50px;
  width: 100px;
  height: 100px;
  border-radius: 80px;
  background-color: #ff5033;
  text-align: center;
  line-height:100px;
  Font-weight: bold;
  font-size: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.play::after {
  content:" >";
}

.play:hover {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}



.desc_sm {
  color: #fff;
  font-size: 1.2rem;
  line-height: 3.6;
}


.sns_feed ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2.5rem;
  margin-top:10px;
  width:70%;
}

.fab {
  color:#ff5033;
  opacity:0.8;
}


#gl {
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	position: absolute;
}

.frame {
  left:0%;
  top:0%;
}

.top {
  background:url(./img/hachinohe.jpg);
  z-index: 10;
  left:0%;
  top:0%;
  display:flex;
}

.japan {
  width:20%;
}

.japan img {
  width: 100%;
}

.point_wrapper {
  z-index: 500;
  position: relative;
  width: 100%;
  height: 100%;
 
}

.point {
   width: 40%;
   z-index: 100;
}

.p1 {
  position:absolute;
  top: 68%;
  left:-10%;
}

.locate_link a{
  color:#eee;
  display: inline-block;
  font-size: 1.3rem;
  border-bottom: 1px solid #eee;
  transition: all .3s;
}

.locate_link a:hover {
  letter-spacing: 2px;
}

.ok {
  position:absolute;
  top:64%;
  left: -48%;
}

.p2 {
  position:absolute;
  top: 68%;
  left: 64%;
}

.sg {
  position:absolute;
  top: 72%;
  left: 100%;
  white-space: nowrap;
}

.p3 {
  position:absolute;
  top: 28%;
  left: 75%;
}

.hn {
  position:absolute;
  top:25%;
  left:100%;
  white-space: nowrap;
}

.st0 {
  fill:none;
  stroke: #ff5033;
  stroke-width: 3px;
  animation: svg 5s ease-in;
}

@keyframes svg {
  0% {
    stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
  }

  50% {
    stroke-dashoffset: 0;
  }
}

.foot_link {
  display: flex;
  justify-content: space-between;
  z-index: 10;
  position: fixed;
  top:90%;
  left:50%;
  transform: translateY(-50%) translateX(-50%);
  width: 60%;
}

.foot_link a{
  color: #eee;
  font-size: 1.3rem;
  transition: all .3s;
}

.foot_link a:hover{
  letter-spacing: 2px;
}

/*----------------------------------------------------------------------
footer
----------------------------------------------------------------------*/


/*----------------------------------------------------------------------
下層ページ
----------------------------------------------------------------------*/


/*----------------------------------------------------------------------

media query

----------------------------------------------------------------------*/

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .pc-only {
        display: none;
    }
    .br-pc { display:none; }
    .br-sp { display:block; }
    .sp-only {
        display: block;
    }
    .mmb-10 {
        margin-bottom: 10px;
    }
    .mmb-20 {
        margin-bottom: 20px;
    }
    .mmb-30 {
        margin-bottom: 30px;
    }
    .mmb-40 {
        margin-bottom: 40px;
    }
    .splogo {
        display: inline-block;
    }





}

@media screen and (max-width: 425px) {




}

/*media queryここまで*/