@charset "UTF-8";
/* CSS Document */
.step_in:after, .clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.step_in, .clearfix {
  zoom: 1;
}
body {
  position: fixed;
  width: 100vw;
  height: 100vh;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-weight: bold;
  font-size: 16px;
  overflow: hidden;
  background: #fff;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
.bg {
  display: block;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: url("../img/toplogo5.svg")no-repeat center center;
  background-size: 400px;
  transition: 0.2s;
}

.snsicon{
    display:inline-block;
    width: 30px;
    height: auto;
}

.snsicon:hover{
    opacity:0.8;
}
/*****:::::::::::::::::::::::::::::::::::

バックグラウンド画像

:::::::::::::::::::::::::::::::::::******/
#TopView {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: white;
  overflow: hidden;
  z-index: -100;
  transition: 0.2s;
}
.blur {
  filter: blur(5px);
  transition: 0.5s;
}
#TopView::before {
  content: "";
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 100;
  background: rgba(255, 255, 255, 0.6);
}
.TopVirwImg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: 25s;
  animation-name: slide;
  animation-direction: normal;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
}
.TopVirwImg:nth-of-type(1) {
  background-image: url("../img/photo_20190726184428_6553734_0.jpg");
  animation-delay: 0s;
}
.TopVirwImg:nth-of-type(2) {
  background-image: url("../img/photo_20190726184016_6553731_0.jpg");
  animation-delay: 5s;
}
.TopVirwImg:nth-of-type(3) {
  background-image: url("../img/photo_20190726184238_6553732_0.jpg");
  animation-delay: 10s;
}
.TopVirwImg:nth-of-type(4) {
  background-image: url("../img/photo_20190726184846_6553736_0.jpg");
  animation-delay: 15s;
}
.TopVirwImg:nth-of-type(5) {
  background-image: url("../img/photo_20190726184512_6553735_0.jpg");
  animation-delay: 20s;
}
/*topのスライドアニメーション*/
@keyframes slide {
  0% {
    opacity: 0;
    z-index: 1;
    transform: perspective(500px) translateZ(0px);
  }
  10% {
    opacity: 1;
    z-index: 1;
  }
  20% {
    opacity: 1;
    z-index: 1;
  }
  30% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 0;
    z-index: 0;
    transform: perspective(500px) translateZ(50px);
  }
}
/*****:::::::::::::::::::::::::::::::::::

ローディングアニメーション

:::::::::::::::::::::::::::::::::::******/
.wrap {
  display: none;
}
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 12px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 50px;
  overflow: hidden;
}
.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  display: block;
  position: absolute;
  right: 100%;
  margin-right: -7px;
  width: 93%;
  top: 7px;
  height: 14px;
  font-size: 12px;
  background: #D2A75F;
  color: #D2A75F;
  line-height: 60px;
  font-weight: bold;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-box-shadow: 120px 0 #fff, 240px 0 #fff;
  -ms-box-shadow: 120px 0 #fff, 240px 0 #fff;
  box-shadow: 120px 0 #fff, 240px 0 #fff;
}
.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: inline-block;
  position: fixed;
  width: 45px;
  text-align: right;
  right: 0;
  padding-right: 16px;
  top: 4px;
}
.pace .pace-progress[data-progress-text="0%"]:after {
  right: -200px
}
.pace .pace-progress[data-progress-text="1%"]:after {
  right: -198.14px
}
.pace .pace-progress[data-progress-text="2%"]:after {
  right: -196.28px
}
.pace .pace-progress[data-progress-text="3%"]:after {
  right: -194.42px
}
.pace .pace-progress[data-progress-text="4%"]:after {
  right: -192.56px
}
.pace .pace-progress[data-progress-text="5%"]:after {
  right: -190.7px
}
.pace .pace-progress[data-progress-text="6%"]:after {
  right: -188.84px
}
.pace .pace-progress[data-progress-text="7%"]:after {
  right: -186.98px
}
.pace .pace-progress[data-progress-text="8%"]:after {
  right: -185.12px
}
.pace .pace-progress[data-progress-text="9%"]:after {
  right: -183.26px
}
.pace .pace-progress[data-progress-text="10%"]:after {
  right: -181.4px
}
.pace .pace-progress[data-progress-text="11%"]:after {
  right: -179.54px
}
.pace .pace-progress[data-progress-text="12%"]:after {
  right: -177.68px
}
.pace .pace-progress[data-progress-text="13%"]:after {
  right: -175.82px
}
.pace .pace-progress[data-progress-text="14%"]:after {
  right: -173.96px
}
.pace .pace-progress[data-progress-text="15%"]:after {
  right: -172.1px
}
.pace .pace-progress[data-progress-text="16%"]:after {
  right: -170.24px
}
.pace .pace-progress[data-progress-text="17%"]:after {
  right: -168.38px
}
.pace .pace-progress[data-progress-text="18%"]:after {
  right: -166.52px
}
.pace .pace-progress[data-progress-text="19%"]:after {
  right: -164.66px
}
.pace .pace-progress[data-progress-text="20%"]:after {
  right: -162.8px
}
.pace .pace-progress[data-progress-text="21%"]:after {
  right: -160.94px
}
.pace .pace-progress[data-progress-text="22%"]:after {
  right: -159.08px
}
.pace .pace-progress[data-progress-text="23%"]:after {
  right: -157.22px
}
.pace .pace-progress[data-progress-text="24%"]:after {
  right: -155.36px
}
.pace .pace-progress[data-progress-text="25%"]:after {
  right: -153.5px
}
.pace .pace-progress[data-progress-text="26%"]:after {
  right: -151.64px
}
.pace .pace-progress[data-progress-text="27%"]:after {
  right: -149.78px
}
.pace .pace-progress[data-progress-text="28%"]:after {
  right: -147.92px
}
.pace .pace-progress[data-progress-text="29%"]:after {
  right: -146.06px
}
.pace .pace-progress[data-progress-text="30%"]:after {
  right: -144.2px
}
.pace .pace-progress[data-progress-text="31%"]:after {
  right: -142.34px
}
.pace .pace-progress[data-progress-text="32%"]:after {
  right: -140.48px
}
.pace .pace-progress[data-progress-text="33%"]:after {
  right: -138.62px
}
.pace .pace-progress[data-progress-text="34%"]:after {
  right: -136.76px
}
.pace .pace-progress[data-progress-text="35%"]:after {
  right: -134.9px
}
.pace .pace-progress[data-progress-text="36%"]:after {
  right: -133.04px
}
.pace .pace-progress[data-progress-text="37%"]:after {
  right: -131.18px
}
.pace .pace-progress[data-progress-text="38%"]:after {
  right: -129.32px
}
.pace .pace-progress[data-progress-text="39%"]:after {
  right: -127.46px
}
.pace .pace-progress[data-progress-text="40%"]:after {
  right: -125.6px
}
.pace .pace-progress[data-progress-text="41%"]:after {
  right: -123.74px
}
.pace .pace-progress[data-progress-text="42%"]:after {
  right: -121.88px
}
.pace .pace-progress[data-progress-text="43%"]:after {
  right: -120.02px
}
.pace .pace-progress[data-progress-text="44%"]:after {
  right: -118.16px
}
.pace .pace-progress[data-progress-text="45%"]:after {
  right: -116.3px
}
.pace .pace-progress[data-progress-text="46%"]:after {
  right: -114.44px
}
.pace .pace-progress[data-progress-text="47%"]:after {
  right: -112.58px
}
.pace .pace-progress[data-progress-text="48%"]:after {
  right: -110.72px
}
.pace .pace-progress[data-progress-text="49%"]:after {
  right: -108.86px
}
.pace .pace-progress[data-progress-text="50%"]:after {
  right: -107px
}
.pace .pace-progress[data-progress-text="51%"]:after {
  right: -105.14px
}
.pace .pace-progress[data-progress-text="52%"]:after {
  right: -103.28px
}
.pace .pace-progress[data-progress-text="53%"]:after {
  right: -101.42px
}
.pace .pace-progress[data-progress-text="54%"]:after {
  right: -99.56px
}
.pace .pace-progress[data-progress-text="55%"]:after {
  right: -97.7px
}
.pace .pace-progress[data-progress-text="56%"]:after {
  right: -95.84px
}
.pace .pace-progress[data-progress-text="57%"]:after {
  right: -93.98px
}
.pace .pace-progress[data-progress-text="58%"]:after {
  right: -92.12px
}
.pace .pace-progress[data-progress-text="59%"]:after {
  right: -90.26px
}
.pace .pace-progress[data-progress-text="60%"]:after {
  right: -88.4px
}
.pace .pace-progress[data-progress-text="61%"]:after {
  right: -86.53999999999999px
}
.pace .pace-progress[data-progress-text="62%"]:after {
  right: -84.68px
}
.pace .pace-progress[data-progress-text="63%"]:after {
  right: -82.82px
}
.pace .pace-progress[data-progress-text="64%"]:after {
  right: -80.96000000000001px
}
.pace .pace-progress[data-progress-text="65%"]:after {
  right: -79.1px
}
.pace .pace-progress[data-progress-text="66%"]:after {
  right: -77.24px
}
.pace .pace-progress[data-progress-text="67%"]:after {
  right: -75.38px
}
.pace .pace-progress[data-progress-text="68%"]:after {
  right: -73.52px
}
.pace .pace-progress[data-progress-text="69%"]:after {
  right: -71.66px
}
.pace .pace-progress[data-progress-text="70%"]:after {
  right: -69.8px
}
.pace .pace-progress[data-progress-text="71%"]:after {
  right: -67.94px
}
.pace .pace-progress[data-progress-text="72%"]:after {
  right: -66.08px
}
.pace .pace-progress[data-progress-text="73%"]:after {
  right: -64.22px
}
.pace .pace-progress[data-progress-text="74%"]:after {
  right: -62.36px
}
.pace .pace-progress[data-progress-text="75%"]:after {
  right: -60.5px
}
.pace .pace-progress[data-progress-text="76%"]:after {
  right: -58.64px
}
.pace .pace-progress[data-progress-text="77%"]:after {
  right: -56.78px
}
.pace .pace-progress[data-progress-text="78%"]:after {
  right: -54.92px
}
.pace .pace-progress[data-progress-text="79%"]:after {
  right: -53.06px
}
.pace .pace-progress[data-progress-text="80%"]:after {
  right: -51.2px
}
.pace .pace-progress[data-progress-text="81%"]:after {
  right: -49.34px
}
.pace .pace-progress[data-progress-text="82%"]:after {
  right: -47.480000000000004px
}
.pace .pace-progress[data-progress-text="83%"]:after {
  right: -45.62px
}
.pace .pace-progress[data-progress-text="84%"]:after {
  right: -43.76px
}
.pace .pace-progress[data-progress-text="85%"]:after {
  right: -41.9px
}
.pace .pace-progress[data-progress-text="86%"]:after {
  right: -40.04px
}
.pace .pace-progress[data-progress-text="87%"]:after {
  right: -38.18px
}
.pace .pace-progress[data-progress-text="88%"]:after {
  right: -36.32px
}
.pace .pace-progress[data-progress-text="89%"]:after {
  right: -34.46px
}
.pace .pace-progress[data-progress-text="90%"]:after {
  right: -32.6px
}
.pace .pace-progress[data-progress-text="91%"]:after {
  right: -30.740000000000002px
}
.pace .pace-progress[data-progress-text="92%"]:after {
  right: -28.880000000000003px
}
.pace .pace-progress[data-progress-text="93%"]:after {
  right: -27.02px
}
.pace .pace-progress[data-progress-text="94%"]:after {
  right: -25.16px
}
.pace .pace-progress[data-progress-text="95%"]:after {
  right: -23.3px
}
.pace .pace-progress[data-progress-text="96%"]:after {
  right: -21.439999999999998px
}
.pace .pace-progress[data-progress-text="97%"]:after {
  right: -19.58px
}
.pace .pace-progress[data-progress-text="98%"]:after {
  right: -17.72px
}
.pace .pace-progress[data-progress-text="99%"]:after {
  right: -15.86px
}
.pace .pace-progress[data-progress-text="100%"]:after {
  right: -14px
}
.pace .pace-activity {
  position: absolute;
  width: 100%;
  height: 28px;
  z-index: 2001;
  box-shadow: inset 0 0 0 2px #D2A75F, inset 0 0 0 7px #fff;
  border-radius: 10px;
}
.pace.pace-inactive {
  display: none;
}
/*****:::::::::::::::::::::::::::::::::::

fadein アニメーション

:::::::::::::::::::::::::::::::::::******/
/*ヒストリーテキストボックスのアニメーション*/
/*jsでactiveクラスの付け外し*/
/* 画面外にいる状態 */
.fadein {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 500ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

PCサイズ

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
header {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100vw;
  margin: 10px
}
header a {
  display: flex;
  align-items: center;
  font-family: 'Vibur', cursive;
  font-size: 30px;
  color: #000000;
  transition: 0.2s;
}
header a:hover {
  opacity: 0.5;
  color: rgba(255, 211, 0, 1.00);
}
section {
  position: fixed;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100vw;
  height: 94%;
  bottom: 0;
  border-radius: 25px 25px 0 0;
  flex-flow: column;
  box-sizing: border-box;
  padding: 0 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 1);
  padding-bottom: 130px;
}
.close {
  display: none;
}
.contentswrapper {
  displey: flex;
  width: 100%;
  height: 100%;
  overflow: scroll;
  max-width: 800px;
}
.midashi {
  display: block;
  font-size: 2em;
  font-weight: bold;
  border-bottom: solid 2px;
  padding-bottom: 6px;
  margin: 25px 0;
  font-family: 'DM Serif Display', serif;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

ABOUT

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#ABOUT {}
#ABOUT h1 {
  font-size: 6em;
  font-weight: bold;
  margin-bottom: 50px;
  font-family: 'DM Serif Display', serif;
}

#ABOUT h1:first-letter{
    color: #D8AB60;
}

#ABOUT h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 50px;
  line-height: 30px;
}
#ABOUT .caption {
  display: block;
  width: 100%;
  font-family: 'DM Serif Display', serif;
  padding-bottom: 20px;
}
#ABOUT table {
  width: 100%;
  margin-bottom: 50px;
}
#ABOUT tr {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
  border-bottom: solid 1px grey;
}
#ABOUT th {
  font-weight: bold;
  display: block;
  width: 200px;
  text-align: left;
  color: grey;
}
#ABOUT td {
  display: block;
  width: 100%;
  line-height: 25px;
  color: grey;
}
#ABOUT iframe {
  width: 100%;
  height: 200px;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

NEWS

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#NEWS {}
#NEWS table {
  width: 100%;
  margin-bottom: 50px;
}
#NEWS tr {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
  border-bottom: solid 1px;
}
#NEWS th {
  font-weight: bold;
  display: block;
  width: 200px;
  text-align: left;
}
#NEWS td {
  display: block;
  line-height: 25px;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

SERVICE

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#SERVICE {}
#SERVICE ul {
  display: flex;
  flex-flow: wrap;
  width: 100%;
  justify-content: center;
  align-items: stretch;
  transition: 0.2s;
}
#SERVICE ul li {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 45%;
  margin: 5px;
  padding: 10px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
  border-radius: 5px;
}
#SERVICE ul li .thumbnail {
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
  transition: 0.2s;
  overflow: hidden;
  z-index: 1;
}
#SERVICE ul li .thumbnail img {
  width: 100%;
  height: auto;
  transition: 0.2s;
}
#SERVICE ul li a {
  display: block;
  margin: 10px 0;
  padding: 8px;
  border-radius: 5px;
  background: #D8AB60;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  transition: 0.2s;
}
#SERVICE ul li p {
  line-height: 25px;
}
#SERVICE div:hover > ul:hover > li:hover {
  opacity: 1;
  transform: translatey(-5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
#SERVICE div:hover > ul:hover > li:hover > .thumbnail img {
  transform: perspective(500px) translateZ(50px);
}
#SERVICE ul li a:hover {
  background: red;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

WORK WEB

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#WEB {}
#WEB ul {
  display: flex;
  flex-flow: wrap;
  width: 100%;
  justify-content: center;
  align-items: stretch;
  transition: 0.2s;
}
#WEB ul li {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 45%;
  margin: 5px 5px 15px 5px;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
  border-radius: 15px;
}
#WEB ul li .thumbnail {
  border-radius: 15px 15px 0 0;
  box-sizing: border-box;
  width: 100%;
  transition: 0.2s;
  overflow: hidden;
  z-index: 1;
}
#WEB ul li .thumbnail img {
  width: 100%;
  height: auto;
  transition: 0.2s;
}
#WEB ul li a {
  display: block;
  text-align: center;
  width: 90%;
  margin: -20px 0 15px 0;
  padding: 10px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.7);
  color: #FFF;
  font-size: 12px;
  font-weight: bold;
  transition: 0.2s;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  z-index: 99;
}
#WEB ul li p {
  display: block;
  width: 90%;
  margin: 10px;
  line-height: 25px;
    font-size:12px;
}
#WEB div:hover > ul:hover > li:hover {
  opacity: 1;
  transform: translatey(-5px);
  transform: perspective(500px) translateZ(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
#WEB div:hover > ul:hover > li:hover > .thumbnail img {
  transform: perspective(500px) translateZ(50px);
}
#WEB div:hover > ul:hover > li:hover > a {
  background: red;
  transform: perspective(500px) translateZ(50px);
  transform: translatey(-5px);
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.2);
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

WORK product
WORK illustration
ギャラリー

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

video {
  width: 100%;
}

/* 以下ただのサンプルのため指定（親要素の幅） */
.width250 { width: 250px; }
.width200 { width: 200px; }
.width150 { width: 150px; }
p { margin-top: 10px; }

/***** lily style *****/
#gallery {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0px;
  -moz-column-count: 3;
  -moz-column-gap: 0px;
  column-count: 3;
  column-gap: 0px;
  background: rgba(231, 231, 231, 1.00);
}
#gallery img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  padding: 10px;
  border-radius: 20px;
  transition: 0.2s;
}
@media (max-width: 1200px) {
  #gallery {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media (max-width: 1000px) {
  #gallery {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media (max-width: 800px) {
  #gallery {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
/***** END lily style *****/
#gallery div {
  position: relative;
  transition: 0.2s;
  cursor: pointer;
}
#gallery div:hover > a:hover > img {
  opacity: 1;
  transform: perspective(500px) translateZ(20px);
}
#gallery div::before {
  content: "Check";
  font-size: 6px;
  position: absolute;
  display: block;
  padding: 12px;
  color: white;
  background: red;
  border-radius: 5px;
  z-index: 10;
  transition: 0.2s;
  opacity: 0;
}
#gallery div:hover:before {
  opacity: 1;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

CONTACT

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
form {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 10px;
}
label {
  display: block;
  padding: 25px 0 10px 0;
  font-size: 16px;
  font-weight: bold;
}
label::after {
  content: "*必須";
  color: red;
  font-size: 10px;
}
label:nth-of-type(1):after {
  display: none;
}
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  padding: 10px;
  font-size: 16px;
  border: none;
  background: rgba(247, 247, 247, 1.00);
}
select {
  cursor: pointer;
}
textarea {
  min-width: 99%;
  max-width: 100%;
  min-height: 100px;
  max-height: 300px;
}
/*placeholderのカラー変更*/
/* Chrome */ ::-webkit-input-placeholder {
  color: #E4E4E4;
}
/* Firefox */ ::-moz-placeholder {
  color: #E4E4E4;
}
/* IE */ :-ms-input-placeholder {
  color: #E4E4E4;
}
input[type="submit"] {
  display: block;
  transition: 0.2s;
  margin-top: 50px;
  width: 100%;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  background: #000;
  color: #FFF;
  border: none;
  cursor: pointer;
}
input[type="submit"]:hover {
  background: #D8AB60;
  border-radius: 50px;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

footer

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
footer {
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  position: fixed;
  bottom: 0;
}
footer nav {
  z-index: 999;
  box-sizing: border-box;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  border-radius: 100px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
  transition: 0.2s;
  background: #FFF;
}
footer nav li {
  position: relative;
  box-sizing: border-box;
  color: #E4E4E4;
  display: flex;
  flex-flow: row;
  margin: 10px 20px;
  border-radius: 100px;
  transition: 0.2s;
  font-family: 'DM Serif Display', serif;
}
footer nav:hover > li {
  opacity: 0.3;
}
footer nav:hover > li:hover {
  opacity: 1;
  color: #D8AB60;
  background: #E4E4E4;
}
footer nav:hover > li:hover > a:hover > .icon {
  background-position: bottom;
}
footer nav li .icon {
  display: block;
  width: 40px;
  height: 40px;
  transition: 0.2s;
}
footer nav li .nav1 {
  background: url("../img/nav1.svg")no-repeat top center /100%;
}
footer nav li .nav2 {
  background: url("../img/nav2.svg")no-repeat top center /100%;
}
footer nav li .nav3 {
  background: url("../img/nav3.svg")no-repeat top center /100%;
}
footer nav li .nav4 {
  background: url("../img/nav4.svg")no-repeat top center /100%;
}
footer nav li .nav5 {
  background: url("../img/nav5.svg")no-repeat top center /100%;
}
footer nav li a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 5px 10px 5px 10px;
  border-radius: 50px;
  color: inherit;
}
footer nav li a + #globalnav {
  background: grey;
}
footer nav li p {
  display: inline-block;
  margin-left: 10px;
}
.categorywrapper {
  display: none;
  width: 140px;
  height: 115px;
  position: absolute;
  top: -100px;
  left: -5px;
  background: #FFF;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  z-index: 2;
}
.categorywrapper ul {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: none;
}
.categorywrapper ul li {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  display: block;
  width: 100%;
  font-size: 16px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  color: black;
}
.categorywrapper ul li:nth-child(1) {
  border-radius: 15px 15px 0 0;
}
.categorywrapper ul li:hover {
  background: #D8AB60;
  color: #FFF;
}
#workbtn {
  position: absolute;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #FFF;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}
#workbtn span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 0.2s;
  font-weight: bold;
}
#workbtn span:hover {
  transform: rotate(180deg);
  color: red;
}

small{
    display: block;
    position: absolute;
    z-index: 999;
    color:#E4E4E4;
    bottom: 10px;
    width: 100%;
    padding: 5px;
    text-align: center;
    font-size: 5px;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

レスポンシブ対応

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media screen and (max-width:800px) {
  body {
    width: 100vw;
    height: 100vh;
    font-weight: bold;
    font-size: 16px;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .bg {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-size: 50%;
    transition: 0.2s;
    background-position: center 40%;
  }
  header {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100vw;
    margin: 5px;
  }
  header a {
    display: flex;
    align-items: center;
  }
  header a:hover {
    opacity: 0.5;
  }
  header img {
    display: block;
    margin-right: 5px;
    width: 30px;
    height: auto;
  }
  section {
    position: fixed;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100vw;
    height: 93%;
    bottom: 0;
    border-radius: 25px 25px 0 0;
    flex-flow: column;
    box-sizing: border-box;
    padding: 0 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #FFF;
    padding-bottom: 0px;
  }
  .close {
    display: none;
  }
  .contentswrapper {
    displey: flex;
    width: 100%;
    height: 100%;
    overflow: scroll;
    max-width: 800px;
  }
  .midashi {
    display: block;
    font-size: 1em;
    font-weight: bold;
    border-bottom: solid 2px;
    padding-bottom: 5px;
    margin: 15px 0;
  }

.snsicon{
    display:inline-block;
    width: 20px;
    height: auto;
}
  /*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

ABOUT

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
  #ABOUT {}
  #ABOUT h1 {
    font-size: 2.7em;
    margin-bottom: 35px;
  }
  #ABOUT h2 {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 35px;
    line-height: 30px;
  }
  #ABOUT table {
    width: 100%;
    margin-bottom: 100px;
  }
  #ABOUT tr {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0;
    border-bottom: solid 1px grey;
  }
  #ABOUT th {
    font-weight: bold;
    display: block;
    width: 100px;
    text-align: left;
    font-size: 10px;
    margin-right: 10px;
  }
  #ABOUT td {
    font-size: 10px;
    display: block;
    line-height: 14px;
    width: 100%;
  }
  /*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

NEWS

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
  #NEWS {}
  #NEWS table {
    width: 100%;
    margin-bottom: 100px;
  }
  #NEWS tr {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    border-bottom: solid 1px;
  }
  #NEWS th {
    font-weight: bold;
    display: block;
    width: 150px;
    text-align: left;
    font-size: 10px;
    margin-right: 10px;
  }
  #NEWS td {
    display: block;
    width: 100%;
    font-size: 10px;
    line-height: 14px;
  }
  /*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

SERVICE

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
  

  #SERVICE {}
  #SERVICE ul {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    transition: 0.2s;
    margin-bottom: 100px;
  }
  #SERVICE ul li {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 5px;
    padding: 10px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
  }
  #SERVICE ul li .thumbnail {
    border-radius: 5px;
    box-sizing: border-box;
    width: 100%;
    transition: 0.2s;
    overflow: hidden;
    z-index: 1;
  }
  #SERVICE ul li .thumbnail img {
    width: 100%;
    height: auto;
  }
  #SERVICE ul li a {
    display: block;
    margin: 10px 0;
    padding: 8px;
    border-radius: 5px;
    background: #D8AB60;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
  }
  #SERVICE ul li p {
    font-size: 10px;
    line-height: 15px;
  }
  #SERVICE div:hover > ul:hover > li:hover {
    opacity: 1;
    transform: translatey(-5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  #SERVICE div:hover > ul:hover > li:hover > .thumbnail img {
    transform: perspective(500px) translateZ(50px);
  }
  #SERVICE ul li a:hover {
    background: red;
  }
  /*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

WORK WEB

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
  #WEB ul {
    display: flex;
    flex-flow: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    margin-bottom: 100px;
  }
  #WEB ul li {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 95%;
    margin: 5px 5px 15px 5px;
    padding: 0px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
    border-radius: 10px;
  }
  #WEB ul li .thumbnail {
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    width: 100%;
    transition: 0.2s;
    overflow: hidden;
    z-index: 1;
  }
  #WEB ul li .thumbnail img {
    width: 100%;
    border-radius: 10px 10px 0 0;
    height: auto;
    transition: 0.2s;
  }
  #WEB ul li a {
    display: block;
    text-align: center;
    width: 90%;
    margin: -20px 0 10px 0;
    padding: 10px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.7);
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    z-index: 99;
  }
  #WEB ul li p {
    display: block;
    width: 90%;
    margin: 10px;
    font-size: 10px;
    line-height: 15px;
  }
  #WEB div:hover > ul:hover > li:hover {
    opacity: 1;
    transform: translatey(-5px);
    transform: perspective(500px) translateZ(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
  }
  #WEB div:hover > ul:hover > li:hover > .thumbnail img {
    transform: perspective(500px) translateZ(25px);
  }
  #WEB div:hover > ul:hover > li:hover > a {
    background: red;
    transform: perspective(500px) translateZ(50px);
    transform: translatey(-5px);
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.2);
  }
  #WEB ul li a :active {
    background: blue;
  }
  /*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

CONTACT

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
  form {
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 10px;
  }
  label {
    display: block;
    padding: 20px 0 10px 0;
    font-size: 12px;
    font-weight: bold;
  }
  label::after {
    content: "*必須";
    color: red;
    font-size: 10px;
  }
  label:nth-of-type(1):after {
    display: none;
  }
  input[type="text"], input[type="tel"], input[type="email"], select, textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: auto;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    padding: 10px;
    font-size: 16px;
    border: none;
    background: rgba(247, 247, 247, 1.00);
  }
  select {
    cursor: pointer;
  }
  textarea {
    min-width: 99%;
    max-width: 100%;
    min-height: 100px;
    max-height: 300px;
  }
  /*placeholderのカラー変更*/
  /* Chrome */ ::-webkit-input-placeholder {
    color: #E4E4E4;
  }
  /* Firefox */ ::-moz-placeholder {
    color: #E4E4E4;
  }
  /* IE */ :-ms-input-placeholder {
    color: #E4E4E4;
  }
  input[type="submit"] {
    display: block;
    transition: 0.2s;
    margin-top: 40px;
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    background: #000;
    color: #FFF;
    border: none;
    cursor: pointer;
    margin-bottom: 100px;
  }
  input[type="submit"]:hover {
    background: #D8AB60;
    border-radius: 50px;
  }
  /*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

WORK product
WORK illustration
ギャラリー

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
  /***** lily style *****/
  #gallery {
    padding-bottom: 100px;
  }
  #gallery img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
    padding: 5px;
    border-radius: 10px;
    transition: 0.2s;
  }
  /***** END lily style *****/
  #gallery div {
    position: relative;
    transition: 0.2s;
    cursor: pointer;
  }
  #gallery div:hover > a:hover > img {
    opacity: 1;
    transform: perspective(500px) translateZ(20px);
  }
  #gallery div::before {
    content: "Check";
    font-size: 6px;
    position: absolute;
    display: block;
    padding: 12px;
    color: white;
    background: red;
    border-radius: 5px;
    z-index: 10;
    transition: 0.2s;
    opacity: 0;
  }
  #gallery div:hover:before {
    opacity: 1;
  }
  /*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

footer  800px以下

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: auto;
    position: fixed;
    bottom: 0;
  }
  footer nav {
    box-sizing: border-box;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    border-radius: 100px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 22px;
    transition: 0.2s;
  }
  footer nav li {
    box-sizing: border-box;
    color: #E4E4E4;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    margin: 15px 10px;
    border-radius: 100px;
    transition: 0.2s;
    border: solid 1px #FFF;
  }
  footer nav:hover > li {
    opacity: 0.3;
  }
  footer nav:hover > li:hover {
    opacity: 1;
    color: #D8AB60;
    border: solid 1px #FFF;
  }
  footer nav:hover > li:hover > a:hover > .icon {
    background-position: bottom;
  }
  footer nav li .icon {
    display: block;
    width: 25px;
    height: 25px;
    transition: 0.2s;
  }
  footer nav li .nav1 {
    background: url("../img/nav1.svg")no-repeat top center /100%;
  }
  footer nav li .nav2 {
    background: url("../img/nav2.svg")no-repeat top center /100%;
  }
  footer nav li .nav3 {
    background: url("../img/nav3.svg")no-repeat top center /100%;
  }
  footer nav li .nav4 {
    background: url("../img/nav4.svg")no-repeat top center /100%;
  }
  footer nav li .nav5 {
    background: url("../img/nav5.svg")no-repeat top center /100%;
  }
  footer nav li a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 0px;
    border-radius: 50px;
    color: inherit;
  }
  footer nav li a + #globalnav {
    background: grey;
  }
  footer nav li p {
    display: none;
    margin-left: 0px;
  }
  .categorywrapper {
    display: none;
    width: 100px;
    height: 96px;
    position: absolute;
    top: -120px;
    left: -55px;
    background: #FFF;
    border-radius: 15px 15px 0 15px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    z-index: 2;
  }
  .categorywrapper ul {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: none;
  }
  .categorywrapper ul li {
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    display: block;
    width: 100%;
    font-size: 12px;
    border-radius: 0;
    border: none;
    cursor: pointer;
  }
  .categorywrapper ul li:nth-child(1) {
    border-radius: 15px 15px 0 0;
  }
  .categorywrapper ul li:nth-child(3) {
    border-radius: 0 0 0 15px;
  }
  .categorywrapper ul li:hover {
    background: #D8AB60;
    color: #FFF;
  }
  #workbtn {
    position: absolute;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    right: 0;
  }
  #workbtn span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: 0.2s;
    font-weight: bold;
  }
  #workbtn span:hover {}

    small{
    display: block;
    position: absolute;
    z-index: 999;
    color:#E4E4E4;
    bottom: 3px;
    width: 100%;
    padding: 3px;
    text-align: center;
    font-size: 5px;
}
    
}