/*################################################################# */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import compass
/*	################################################################
	1. GENERAL STRUCTURES
################################################################# */
	* {
		margin: 0px;
		padding: 0px;
	}

	html{
		font-size: 62.5%;
    overflow-x: hidden;
	}
body {
/* 画像ファイルの指定 */
	margin: 0;
	height: 100%;
	color: #222;
  font-size: 1.4rem;
/*	text-align: justify;*/
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	background-color: #F8F8F8;
   overflow-x: hidden;


	}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;}



p {
	padding: 0;
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	color: #222;
	line-height: 2.8rem;

}
img {
	height: auto;

}
a {
	padding: 0;
	margin: 0;
	color: #00A6FF;
}
a:hover,
a:focus {

}
.xs { font-size: xx-small } /* 小2 */
.xm { font-size: x-small }  /* 小1 */
.sm { font-size: small }    /* 小 */
.md { font-size: medium }   /* 標準 */
.la { font-size: large }    /* 大 */
.xr { font-size: x-large; line-height: 3.4rem; }  /* 大1 */
.xl { font-size: xx-large; line-height: 1.0em;  } /* 大2 */
.sr { font-size: smaller }  /* 一段階小さい */
.gray { color:#aaa;}
.red{ color:red;}
.gold{color: #B5883F;}
.org a {color: #e35b00;}
.em { font-weight: bold;}
.op{opacity: 30%;}

::-moz-selection  {
	color: #fff;
	text-shadow:none;
	background:#2B2E31;
}




/*  ################################################################
HEADER
################################################################# */
header{
  background-color: #FED702;
/*  padding: 100px 0;*/
  position: relative;
  height: 100vh

}
header h2{
  font-size: 10vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-align: center;
  line-height:10vw;
  margin-bottom: 60px;
   transform: rotate(-5deg)
}

header h3{
  font-size: 1.0vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: left;
  margin-left: 30px;
  line-height:1.7vw;
}

.header_child{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
}

header a {
  display: inline-block;
  position: absolute;
  right: 20px;
  bottom: 0;
  z-index: 9999999;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #000;
  font-size: 10px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}

header a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #000;
}

.logo_blend{
  position: absolute;
 /*mix-blend-mode:difference ;*/
 z-index: 999999999999;
 padding-top: 15px;
  padding-left: 20px;
}

@media screen and (max-width:768px) {
header h2{
  font-size: 18vw;
  line-height:18vw;
}
.header_child{
  position:absolute;
  top:40%;
}
}
/*	################################################################
	COOKIE
################################################################# */

#gdpr-cookie-message{
  background-color: #FFF;
  padding: 30px;
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 9999;
  border-radius:15px;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
#gdpr-cookie-message h4{
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 15px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;}
}
#gdpr-cookie-message p{
  font-size: 12px;
  line-height: 18px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;}
}

#gdpr-cookie-message input{
  list-style: none;
}


/*  ################################################################
MENU FULL
################################################################# */

.cp_fullscreenmenu input {
  display: none;
}
/*LOGO*/
.pclogo {
  position: fixed;
    z-index: 99999;
  top: 0px;
  left: 0px;
  display: block;
  cursor: pointer;
}
/*menuコンテンツ*/
.cp_fullscreenmenu .menu {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  background-image: linear-gradient(to top, rgba(255,216,0,0.9) 0%, rgba(255,216,0,1) 100%);
  z-index: 9999;
}
.cp_fullscreenmenu .menu ul {
  position: absolute;
  top: 170px;
  left: 50%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.cp_fullscreenmenu .menu ul li {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  opacity: 0;
}
.cp_fullscreenmenu .menu ul li a {
  font-family: 'Montserrat', serif;
  font-size: 1.4em;
  font-weight: 600;
  display: block;
  padding: 10px 0;
  transition: all 0.2s ease-in-out;
  text-align: left;
  text-decoration: none;
  color: #000;
}

.cp_fullscreenmenu .menu ul li a:hover {
  color: rgba(100,100,100 ,1);
}
/*クリックしたらメニューが開閉の動作*/
.cp_fullscreenmenu #toggle:checked ~ .menu {
  visibility: visible;
  opacity: 1;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul {
  top: 70px;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  opacity: 1;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(1) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.05s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(2) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.1s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(3) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.15s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(4) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.2s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(5) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.25s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(6) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.3s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(7) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.35s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(8) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.4s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(9) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.45s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(10) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.5s;
}
.cp_fullscreenmenu #toggle:checked ~ .menu ul li:nth-child(11) {
  transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 1.0) 0.55s;
}

.cp_fullscreenmenu #toggle:checked + label.hamburger .bar {
  background-color: rgba(0,0,0 ,1);
}
.cp_fullscreenmenu #toggle:checked + label.hamburger .bar:nth-child(2) {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
  opacity: 0;
}
.cp_fullscreenmenu #toggle:checked + label.hamburger .bar:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(45deg);
          transform: translateY(10px) rotate(45deg);
}
.cp_fullscreenmenu #toggle:checked + label.hamburger .bar:nth-child(3) {
  -webkit-transform: translateY(-5px) rotate(-45deg);
          transform: translateY(-5px) rotate(-45deg);
}

/*ハンバーガー*/
.cp_fullscreenmenu .hamburger {
  position: fixed;
    z-index: 99999;
  top: 10px;
  right: 15px;
  display: block;
  cursor: pointer;
  mix-blend-mode: difference;
}
.cp_fullscreenmenu .hamburger .bar {
  width: 25px;
  height: 2px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: #FFF;

}

.cp_fullscreenmenu .hamburger .bar2 {
  width: 40px;
  height: 1px;
  margin: 8px auto;
  transition: all 0.3s ease-in-out;
  background-color: rgba(0,0,0 ,1);
}
/*.cp_fullscreenmenu .hamburger .bar:nth-child(2) {
  width: 40px;
}*/


.wds{
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 99999;
  /*mix-blend-mode: difference;*/
}

.envelope{
  position: fixed;
  right: 45px;
  top: 1px;
  z-index: 99999;
  mix-blend-mode: difference;
}

.textop{
  position: absolute;
  left: 0px;
  top: 45%;
  z-index: 9999;
  transform: rotate(90deg)
}

.textop h3{
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-bottom: 15px;
}
.textop p{
  font-size: 10px;
  line-height: 20px;
}

@media screen and (max-width:768px) {
  .textop{
  left: 30px;
  top: 65%;
  transform: rotate(0deg)
  }
  .textop p{
  line-height: 15px;
}
}
/*  ################################################################
  WORKS
################################################################# */
.works{
  /*margin: 0 30px;*/
  background: #F8F8F8;
  color: #FFF;
  padding: 60px 120px;
}

.works h2{
    font-size: 3vw;
  margin-right: 15px;
  color: #222;
  text-align: right;
  font-weight: 600;
font-family: 'Montserrat', sans-serif;
}


.works h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
  color: #333;
}


.works p{
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: #aaa;
}

.works_thum {
  padding-bottom: 60px;
  min-height: 350px;
}

@media screen and (max-width:1200px) {
    .works{
  padding: 60px 30px;
}
.works_thum {
  min-height: 300px;
}
}

@media screen and (max-width:992px) {
  .works{
  padding: 60px 30px;
}
  .works h3{
 font-size: 15px;
}
  .works h2{
 font-size: 8vw;
}
}

@media screen and (max-width:768px) {
.works{
  padding: 60px 15px;
}
}
/*  ################################################################
PHILOSOPHY
################################################################# */
.philoso_container{
  padding: 0 120px;
}
.philoso{
  background: #000;
  color: #FFF;
  height: 100vh;
   position: relative;
}
.philoso p{
  color: #FFF;
  text-align: left;
  line-height: 24px;
}
.philoso a{
  color: #FFF;
}
.philoso h3{
  color: #FFF;
  font-size: 3vw;
  font-weight: 600;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 30px;
}

.philoso h4{
  color: #FFF;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 30px;
  font-weight: 600;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
}

@media screen and (max-width:768px) {
  .philoso{
  height: 100vh;
}
  .philoso_container{
  padding: 0 30px;
  margin-top: 80px;
}
  .philoso h3{
  font-size: 8vw;
}
  .philoso h4{
  font-size: 4vw;
  line-height: 6vw;
}
}

/*  ################################################################
CASESTADY
################################################################# */
.casestudy{
  background: #FED702;
  color: #000;
}

.casestudy h3{
  color: #000;
  font-size: 3vw;
  text-align: left;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;

}

.casestudy_left{
  background: url(../../assets/img/bg_hp.png);
  position: relative;
  height: 100vh;

}

.casestudy_right{
margin: 0 15px;
  position: relative;
  height: 100vh;
  }



@media screen and (max-width:768px) {
.casestudy h3{
  font-size: 10vw;
}
.casestudy_left{
  height: 50vh;

}

.casestudy_right{
  margin-top: 60px;
  height: 50vh;
  }
}


/*  ################################################################
COMPANY
################################################################# */

.company{
  background: #000;
  color: #FFF;
  padding: 100px 0;
}
.company p{
  color: #FFF;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
}
.company h2{
  color: #FFF;
  font-size: 3vw;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 100px;
}

.company h3{
  color: #FFF;
  font-size: 1vw;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 30px;
}

.company a{
  color: #FFF;
}

@media screen and (max-width:768px) {
.company h2{
  font-size: 10vw;
}
.company h3{
  font-size: 5vw;
}
}


/*  ################################################################
PARTNER
################################################################# */
.partner{
  background: #FFF;
  color: #000;
  padding: 100px 0;
}

.partner h3{
  color: #000;
  font-size: 3vw;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 30px;
}

.col-5ths {
  width: 20%;
  float: left;
  padding: 15px;
}

.col-5ths img {
  text-align: center;
}
@media (max-width: 768px) {
  .col-5ths {
    width: 100%; /* スマホでは2列にする */
  }
  .partner h3{
  font-size: 10vw;
}
}

/*  ################################################################
Contact
################################################################# */
.contact{
  background: #FFF;
  color: #000;
  padding: 100px 0;
}

.contact h2{
  color: #000;
  font-size: 3vw;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .contact h2{
  font-size: 10vw;
}
}


/*-------------------------------------
+TITLE ANIMATION
 -------------------------------------*/

:root {
  --delay: 1;
  --duration: 800ms;
  --iterations: 1;
}
/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */


.reveal-text,
.reveal-text::after {
  -webkit-animation-delay: var(--animation-delay, 2s);
          animation-delay: var(--animation-delay, 2s);
  -webkit-animation-iteration-count: var(--iterations, 1);
          animation-iteration-count: var(--iterations, 1);
  -webkit-animation-duration: var(--duration, 800ms);
          animation-duration: var(--duration, 800ms);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  -webkit-animation-name: clip-text;
          animation-name: clip-text;
  color: #000;
  white-space: nowrap;
  cursor: default

}

.reveal-text::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFF;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    -webkit-animation-name: text-revealer;
            animation-name: text-revealer;
  }


@-webkit-keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}


@keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}


@-webkit-keyframes text-revealer {

  0%, 50% {
    transform-origin: 0 50%;
  }

  60%, 100% {
    transform-origin: 100% 50%;
  }


  60% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}


@keyframes text-revealer {

  0%, 50% {
    transform-origin: 0 50%;
  }

  60%, 100% {
    transform-origin: 100% 50%;
  }


  60% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

/*	################################################################
TOP
################################################################# */

/* IE6 */
ul.center li {
  _display: inline; /* IE6がdisplay: inline-block;に対応していないので */
}

/* IE7 */
*:first-child+html ul.center li {
  display: inline; /* IE7がdisplay: inline-block;に対応していないので */
}

/*  ################################################################
ページトップ
################################################################# */
.pagetop {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
}
.pagetop a {
    display: block;
    background-color: #222;

    text-align: center;
    color: #FFF;
    font-size: 14px;
    text-decoration: none;
    padding: 7px 16px;
  filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border-radius: 50%;
}
.pagetop a:hover {
    display: block;
    background-color: #555;
    text-align: center;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    padding: 7px 16px;
  filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
@media only screen and (max-width:767px){
  .pagetop {
    bottom: 15px;
}
}

/*  ################################################################
NODE
################################################################# */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.gradient {
  --size: 800px;
  --speed: 5s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 5));
  background-image: linear-gradient(rgba(55, 235, 169, 0.85), #5b37eb);
  animation: rotate var(--speed) var(--easing) alternate infinite;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}

@media (min-width: 720px) {
  .gradient {
    --size: 800px;
  }
}
.node_body {
  background-color: #000;
  position: absolute;
  inset: 0;
  display: flex;
  place-content: center;
  align-items: center;
  overflow: hidden;
}

/* This is just to transition when you change the viewport size. */
* {
  transition: all 0.25s ease-out;
}

/*  ################################################################
  GOOGLE FORM
################################################################# */
 .form-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 100%;
  }
  .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

/*	################################################################
	FOOTER SECTION
################################################################# */
/* Footer */
footer{
	background-color: #FED702;
	color: white;
  padding: 100px 0;
}
footer p{
	color: #000;
  font-size: 11px;
}

footer a{
  color: #FFF;

}

/*  ################################################################
  RESPONSIVE adjustment
################################################################# */
@media screen and (min-width:991px) {
  .sp{display: none;}
}
@media screen and (max-width:992px) {
  .pc {display: none;}
  .bg_g2 h3{
  font-size: 10vw;
}
}

@media screen and (min-width:767px) {

}
@media screen and (max-width:768px) {
header h3{
  font-size: 3vw;
  line-height:3vw;
}
.bg_g2 h3{
  font-size: 13vw;
}
.bg_g3_left{
  height: 50vh;
}

.bg_g3_right{
  height: 50vh;
  }
}