@charset "UTF-8";
/*------------------リセットCSS----------------------*/
*{
  margin:0;
  padding:0;
  list-style: none;
  box-sizing: border-box;
}
button,input {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
  img {
    vertical-align: bottom;
}
a {
  color: inherit;
  text-decoration: none;
  transition: 0.5s;
}
/*-------------*/
/*------------------画像を保存させないためのCSS--------------*/
.imgsafe {
  pointer-events: none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-action:none;
  user-select:none;
}
/*-------------*/
html{
  font-size: 62.5%;
}
body {
  color: #333;
  font-size: 1.5em;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-family: 'Cardo', serif;
}
.inner{
  width: 80%;
  max-width: 1280px;
  margin: auto;
}
.ds-f-A{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.ds-f-B{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.overlay::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index:-2;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.full{
  display: none;
  position:fixed;
  top:0;
  left:0;
  z-index:-3;
  width:100%;
  height:200vh;
  background-repeat:no-repeat;
  background-position:50% 85%;
  background-size:cover;
}
.full01{
  background-image: url(../img/18-1.jpg);
}
.full02{
  background-image: url(../img/17-1.jpg);
}
.full03{
  background-image: url(../img/19-1.jpg);
}
.full04{
  background-image: url(../img/21-1.jpg);
}
.full05{
  background-image: url(../img/05-1.jpg);
}
.full06{
  background-image: url(../img/09-1.jpg);
}
.full07{
  background-image: url(../img/15-1.jpg);
}
.full08{
  background-image: url(../img/13-1.jpg);
}
.full09{
  background-image: url(../img/07-1.jpg);
}
.full10{
  background-image: url(../img/10-1.jpg);
}
/*========= 流体シェイプを動かす ===============*/
.hamburger {
  animation: fluidrotate 25s ease 0s infinite;/*アニメーションの設定*/
}
.hamburger-bg {
  animation: fluidrotate 26s ease 0s infinite;/*アニメーションの設定*/
}
@keyframes fluidrotate { 
  0%, 100% {
      border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
      border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
      border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
      border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
      border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
      border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
      border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
/*================*/
/*********** ハンバーガーボタン *************/
.outer-menu {
  position: fixed;
  top: 10vh;
  right: 10vw;
  z-index: 1000;
  color: #fff;
}
.outer-menu .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 80px;
  height: 60px;
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
  transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: 0.75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
.outer-menu .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 80px;
  height: 60px;
  padding: 0.5em 1em;
  background: linear-gradient(45deg, rgba(248, 193, 184, 0.5),rgba(182, 162, 181, 0.5));
  /* background-color:hsla(303, 12%, 67%, 1);
  background-image:
  radial-gradient(at 40% 20%, hsla(8, 82%, 85%, 1) 0px, transparent 50%),
  radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
  radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
  radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
  radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%); */
  border-radius: 0 0.12em 0.12em 0;
  cursor: pointer;
  transition: box-shadow 0.4s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #FEFEFE;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div:before,.outer-menu .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1000;
  top: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
  top: 10px;
}
.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div {
  width: 200vw;
  height: 200vw;
  color: #FEFEFE;
  background:linear-gradient(45deg, rgba(248, 193, 184, 1),rgba(182, 162, 181, 1));
  /* background-color:hsla(303, 12%, 67%, 1);
  background-image:
  radial-gradient(at 40% 20%, hsla(8, 82%, 85%, 1) 0px, transparent 50%),
  radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
  radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
  radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
  radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%); */
  border-radius: 50%;
  transition: all 0.4s ease;
  flex: none;
  transform: scale(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
  padding: 0;
  margin: 1em;
  font-size: 24px;
  display: block;
}
.outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color 0.4s ease;
}
/* .outer-menu .menu > div > div > ul > li > a:hover {
  color: #e5e5e5;
} */
.outer-menu .menu > div > div > ul > li > a:hover:after {
  width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 2px;
  background: #fff/* #e5e5e5 */;
  transition: width 0.4s ease;
}
/****************/
/*--------------------------svgアニメーション-----------------------------*/
#loadingsvg {
  width: 70vw;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}
.mask-path {
  fill:none;
  stroke:#fff;
  stroke-width:3;/*マスクの幅を調整（下の文字が隠れるように）*/
  stroke-miterlimit:10;
}
/*vivus.js無しの場合*/
/* path {
  fill: none;
  stroke: #000;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  stroke-linecap:round;
  animation: write 3s ease-in forwards;
  -webkit-animation: write 3s ease-in forwards;
} 
@keyframes write {
  0% {
  stroke-dashoffset: 2000;
  fill:transparent;
  }
  50% {
  fill:transparent;
  }
  100% {
  stroke-dashoffset: 0;
  fill:#000;
  }
} */
/*--------------------------svgアニメーション02-----------------------------*/
.mini{
  -webkit-animation-name: logo_anime;
  -webkit-animation-duration:2s;
  animation-name:logo_anime;
  animation-duration:2s;
  animation-fill-mode:forwards;/*keyframesのアニメーション終了時の状態を維持する*/
}
@-webkit-keyframes logo_anime{
  from{
      width: 70vw;
      transform: translateX(0) translateY(0) rotate(0deg);
  }
  to {
      width: 30vw;
      transform: translateX(30vw) translateY(22vh) rotate(-5deg);
  }
}
@keyframes logo_anime{
  from{
      width: 70vw;
      transform: translateX(0) translateY(0);
  }
  to{
      width: 30vw;
      transform: translateX(30vw) translateY(20vh) rotate(-5deg);
  }
}
/*-------------------------top画像-------------------------------*/
#mainvisual {
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
}
#mainvisual .bgwrap {
  position: absolute;
  width: 60%;
  height: 100%;
  top: 0;
  left: 0;
  border-top-right-radius: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#mainvisual .bgimage {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/16-1.jpg);
  background-size: cover;
  background-position: center;
  animation: mainvs-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  will-change: animation;
}
/*---------------------------------*/
section{
  margin: 10vw 0;
}
.contentstitle{
  text-align: center;
  font-size: 2.7rem;
  font-weight: normal;
  letter-spacing: 0.7rem;
  padding-top: 7vw;
}
.main-contents{
  margin: 2rem 0;
}
.main-contents li{
  position: relative;
  width: 20vw;
  background-color: #eee;
  margin: 10rem 8rem;
  cursor: pointer;
}
.main-contents li::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background:linear-gradient(45deg, rgba(248, 193, 184, 0.3),rgba(182, 162, 181, 0.3)); */
  backdrop-filter: grayscale(100%);
  -webkit-backdrop-filter: grayscale(100%);
  transition: all 0.3s;
}
.main-contents li:hover::before{
  backdrop-filter: grayscale(0);
  z-index: -1;
}
.recordimg{
  width: 20vw;
}
.Copyright{
  text-align: center;
  display: block;
  margin: 1em 0;
}

/*-------------------------works画像-------------------------------*/
#worksvisual {
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
#worksvisual .bgwrap {
  position: absolute;
  width: 60%;
  height: 100%;
  top: 0;
  left: 0;
  border-top-right-radius: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#worksvisual .bgimage {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/mv.jpg);
  background-size: cover;
  background-position: center;
  animation: mainvs-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  will-change: animation;
}
/*---------------------------------*/

/*---------------------------------------------*/
/*------------ここからレスポンシブ----------------*/
/*---------------------------------------------*/
@media (max-width:768px) {
  .textnewline{/*テキストの改行制御*/
    display: inline-block;
  }
  .ds-f{
    display: block;
  }
  img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .inner{
    width: 100%;
    max-width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
  }
  .full01{
    background-image: url(../img/sp/sp18-1.jpg);
  }
  .full02{
    background-image: url(../img/sp/sp17-1.jpg);
  }
  .full03{
    background-image: url(../img/sp/sp19-1.jpg);
  }
  .full04{
    background-image: url(../img/sp/sp21-1.jpg);
  }
  .full05{
    background-image: url(../img/sp/sp05-1.jpg);
  }
  .full06{
    background-image: url(../img/sp/sp09-1.jpg);
  }
  .full07{
    background-image: url(../img/sp/sp15-1.jpg);
  }
  .full08{
    background-image: url(../img/sp/sp13-1.jpg);
  }
  .full09{
    background-image: url(../img/sp/sp07-1.jpg);
  }
  .full10{
    background-image: url(../img/sp/sp10-1.jpg);
  }
  /*********** ハンバーガーボタン *************/
  .outer-menu {
    top: 10vh;
    right: 25vw;
  }
  /*--------------------------svgアニメーション-----------------------------*/
  #loadingsvg {
    width: 95vw;
    top: 45%;
    transform: rotate(-15deg);
  }
  /*--------------------------svgアニメーション02-----------------------------*/
  @-webkit-keyframes logo_anime{
    from{
        width: 95vw;
    }
    to {
        width: 60vw;
        transform: translateX(-15vw) translateY(-33vh) rotate(0deg);
    }
  }
  @keyframes logo_anime{
    from{
        width: 95vw;
    }
    to{
        width: 60vw;
        transform: translateX(-15vw) translateY(-33vh) rotate(0deg);
    }
  }
  #mainvisual .bgwrap {
    background-image: url(../img/sp/sp16-1.jpg);
    width: 90%;
    height: 75%;
    top: 25%;
  }
  section {
    margin: 20vw 0;
  }
  .contentstitle{
    padding-top: 20vw;
  }
  .main-contents li {
    margin: 10rem 6rem;
  }
  .main-contents li,.recordimg{
    width: 100%;
  }
}