@charset "utf-8";
/* CSS Document */

/*************************共通*************************/
html {
  font-size: 62.5%;
  /*16px * 62.5% = 10px*/
}


h1,
h2,
h3,
h4,
p,
li,
a {
  color: #000000;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

h1 {}

h2 {
  font-size: 3rem;
  font-weight: bold;
  color: #1AE8C1;
}

h3 {
  font-size: 2.4rem;
}

h4 {
  font-size: 1.8rem;
}

p {
  font-size: 1.6rem;
  /*10px * 1.6 = 16px*/
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

li {
  list-style: none;
}

.bold {
  font-weight: bold;
}

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.sp {
  display: none;
}


/**********section-title**********/
.title {
  margin-bottom: 50px;
}

.title h2,
.title p {
  color: #10897d;
  font-weight: bold;
}

.title p {
  line-height: 0.5rem;
  font-size: 1.3rem;
}


/**********wrapper**********/
body {
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  background-color: #f3f3f3;
  background-color: #f7f3ee;
}

.bg-wrapper {
  width: 100%;
  background: #B2E9DE;
  padding-top: 50px;
  border: 30px solid #B2E9DE;
  position: relative;
}

.main-wrapper {
  background: #f7f3ee;
  border-radius: 50px;
  max-width: 1200px;
  margin: 0 auto;
  /**************** メイン背景 **************** */
  /* background-image: url(../img/top/01_mv/【mv-figure】/kv_bg03.jpg); */
  /* background-image: url(../img/top/bg/bg_white02.png); */
}

/**********footer**********/
#footer {
  padding: 8% 0 0;
  background-color: #B2E9DE;
  /* border: 1px solid #000; */
}

#footer ul {
  list-style: none;
}

/**********/
#footer .container {
  display: flex;
  justify-content: center;
  height: 500px;
  /* border: 1px solid #400da0; */
}

/* 取り出し口 枠*/
#footer .column01 {
  position: relative;
  width: 30%;
  margin-right: 30%;
  text-align: center;
}

#footer .prize {
  position: absolute;
  bottom: 0;
  right: 0;
  /* border: 1px solid #000; */
  max-width: 500px;
}

/* プライズbox */
#footer .prize-box {
  border: 10px solid #c0bfbf;
  border-radius: 1%;
  margin-bottom: 10%;

}

#footer .prize img {
  /* width: 60%; */
}

#footer .logo {}

/* ▼prize▼ */
#footer .text {
  width: 100%;
  margin: 0 auto 5px;
  letter-spacing: 1.5rem;
  text-align: center;
  /* border: 1px solid #000; */
}

#footer .text p {
  font-family: "orbitron";
  font-weight: bold;
  font-size: 1.8rem;
  color: #08ddb6;
  color: #20c7a8;
  text-align: center;
}

#footer .text .n2 {
  font-size: 2rem;
}

/* tori */
#footer .figure {
  position: absolute;
  width: 40%;
  max-width: 170px;
  height: auto;
  bottom: 13%;
  left: 12%;
  /* border: 2px solid #b1c40b; */
}

/* tori-animation */
#footer .figure .footer-bird {
  animation: anime 7s linear infinite;
}

@keyframes anime {

  0%,
  100% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(-5deg);
  }
}

/* menu枠 */
#footer .column02 {
  padding: 2% 3%;
  height: 70%;
  background-color: rgba(113, 218, 198, 0.8);
  border-radius: 3%;
}

/* lower-menu枠 */
#footer .lower-menu {
  padding: 2% 3%;
  height: 60%;
  background-color: rgba(113, 218, 198, 0.8);
  border-radius: 3%;
}




#footer .column02-inner {}

/* コイン */
.coin-slot {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  /* background: rgb(139, 224, 219); */
  background: rgb(167, 227, 223);
  margin-bottom: 50%;
}

/* 投入口 */
.slot {
  position: absolute;
  width: 90%;
  height: 13%;
  top: 50%;
  right: -40%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: #b6b6b6;
  border-radius: 10px 10px;
}

/* menu */
.footer-menu li {
  text-align: center;
  margin-bottom: 10%;
}

.footer-menu a {
  font-size: 2rem;
  position: relative;
  color: #000;
  font-weight: bold;
}

.footer-menu a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #000000;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: center top;
  /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;
  /*変形の時間*/
}

.footer-menu a:hover::after {
  transform: scale(1, 1);
  /*ホバー後、x軸方向に1（相対値）伸長*/
}

/********** copy **********/
footer .copy {
  background-color: #1AE8C1;
  background-color: #20c7a8;
  padding: 1% 0;
}

footer .copy p {
  font-size: 12px;
  text-align: center;
}

/**********header**********/
/* #kv {

.kv-fram01{ */

/***** ハンバーガーメニュー  *****/
.menu-trigger {
  display: inline-block;
  /* 中央線top: 12px */
  /* width: 36px;
  height: 34px; */
  width: 30px;
  height: 28px;

  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  /* ハンバーガーメニュー位置 */
  top: 5%;
  right: 3%;
  z-index: 10000000;
  transform: translateX(0);
  transition: transform .5s;
}

/* 展開時の✖の位置 */
/* .menu-trigger .active {
      transform: translateX(-350px);
    } */
.menu-trigger .active {
  transform: translateX(-500px);
}

.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 4px 4px;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
}

.menu-trigger.active span {
  /* background-color: #fff; */
}

.menu-trigger span:nth-of-type(1) {
  top: 0;
  /* background-color: rgb(231, 228, 14); */
  /* background-color: #000; */
  background-color: #e8652b;
  background-color: #f1c5e0;
}

.menu-trigger span:nth-of-type(2) {
  /* translateYと同じ数値にする */
  top: 12px;
  background-color: #e8652b;
  background-color: #f1c5e0;
}

.menu-trigger span:nth-of-type(3) {
  bottom: 0;
  /* background-color: #000; */
  background-color: #e8652b;
  background-color: #f1c5e0;
}

/* 展開時の✖ */
.menu-trigger.active span:nth-of-type(1) {
  /* translateYは中央線の位置と同じ数値にする */
  transform: translateY(12px) rotate(-45deg);
  background-color: #000;
}

.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-12px) rotate(45deg);
  background-color: #000;
}

.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}

nav {
  width: 350px;
  height: 100%;
  padding-top: 100px;
  /* background-color: #e8652b; */
  background-color: #f1c5e0;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  transform: translate(350px);
  transition: all .5s;
}

nav.open {
  transform: translateZ(0);
}

nav li {
  color: #000;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: center;
  padding: 10px 0;
}

.header-menu a {
  position: relative;
  color: #000;
  font-weight: bold;
  font-size: 2rem;
}

/***** ホバーで下線出現 *****/
.header-menu a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #000000;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: center top;
  /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;
  /*変形の時間*/
}

.header-menu a:hover::after {
  transform: scale(1, 1);
  /*ホバー後、x軸方向に1（相対値）伸長*/
}

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
}

/* }
} */

/*********kv-animation***********/
/* arm */


@keyframes rotation0 {

  0%,
  100% {
    transform: rotate(3deg);
  }

  50% {
    transform: rotate(-3deg);
  }
}

/* figure-animation */
/* 01 */
@keyframes rotation1 {

  0%,
  100% {
    transform: rotate(3deg);
  }

  50% {
    transform: rotate(-3deg);
  }
}

/* 02 */
@keyframes rotation2 {

  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg);
  }
}

/* 03 */
@keyframes rotation3 {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(10deg);
  }
}

/* 04 */
@keyframes rotation4 {

  0%,
  100% {
    transform: rotate(20deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

/* 05 */
@keyframes rotation5 {

  0%,
  100% {
    transform: rotate(-20deg);
  }

  50% {
    transform: rotate(-5deg);
  }
}






/*********************/
/****************kv***************/
#kv {
  height: 100vh;
  padding-top: 5px;
  /* border: 1px solid #000; */
}

#kv {

  /*上  */
  .kv-fram01 {
    width: 80%;
    height: 13%;
    background-color: #1AE8C1;
    background-color: #20c7a8;
    border-radius: 30px 30px 0 0;
    margin: 0 auto;
    padding: 2% 0;
    position: relative;
    /* border: 1px solid #000; */

    header {
      /* border: 1px solid #2b0ed3; */

      .logo {
        width: 80px;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        position: fixed;
        /* 位置 */
        top: 5%;
        left: 2%;
        z-index: 1000;
        /* border: 2px solid #e81313; */
      }

      .title-wrapper {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px solid #000; */

        .portfolio {
          font-size: 5rem;
          font-weight: bold;
          background: #473c70;
          background: #000;

          color: transparent;
          text-shadow: 5px 5px 5px rgba(19, 179, 149, 0.5);
          background-clip: text;
          -webkit-background-clip: text;
          margin-bottom: 10px;
        }
      }
    }
  }
}


#kv {

  /* 下 */
  .kv-fram02 {
    /* overflow: hidden; */
    width: 80%;
    height: 95vh;
    border-right: 9vw solid #1AE8C1;
    border-left: 9vw solid #1AE8C1;
    border-bottom: 20vh solid #1AE8C1;
    /*  */
    border-right: 9vw solid #20c7a8;
    border-left: 9vw solid #20c7a8;
    border-bottom: 20vh solid #20c7a8;
    margin: 0 auto;
    box-shadow: #10897d;
    position: relative;
    /* background-image: url(../img/top/01_mv/【mv-figure】/kv_bg03.jpg); */

    .figure-wrapper {
      overflow: hidden;

      height: 100%;
      width: 100%;
      /* background-image: url(../img/top/01_mv/【mv-figure】/bg_right-pink-h3000.png); */
      /* background-color: #f1d9c5;
      border: 3px solid #ce1313; */
      z-index: -100;
      position: absolute;
      position: relative;

      /*****imageサイズ*****/
      .figure {
        position: absolute;
      }

      /*********** kv背景 ***********/
      .bg {
        width: 100%;
        height: 100vh;
        top: 0%;
        left: 50%;
        transform: translate(-50%);
        z-index: -1000000;
      }
    }
  }
}

#kv {

  /* 下 */
  .kv-fram02 {
    .figure-wrapper {

      /* arm */
      .n0 {
        width: 20%;
        min-width: 100px;
        max-width: 150px;
        top: -3px;
        right: 30%;
        z-index: -1;
        transform-origin: center top;
        animation: rotation0 7s linear infinite;
      }

      /* piyo */
      .n1 {
        width: 10%;
        min-width: 90px;
        bottom: -8%;
        left: -4%;
        z-index: -2;
        animation: rotation1 5s linear infinite;
        /* transform: rotate(40deg); */
      }

      /* cow */
      .n2 {
        width: 21%;
        min-width: 160px;
        bottom: 15%;
        left: -3%;
        z-index: -2;
        animation: rotation3 10s linear infinite;
      }

      /* bort-blue */
      .n3 {
        width: 23%;
        min-width: 160px;
        bottom: 33%;
        left: -5%;
        z-index: -2;
        animation: rotation2 10s linear infinite;
      }

      /* creemsoda-green*/
      .n4 {
        width: 13%;
        min-width: 90px;
        bottom: 0%;
        left: 5%;
        z-index: -2;
        animation: rotation4 10s linear infinite;
      }

      /* rabbit*/
      .n5 {
        width: 18%;
        min-width: 160px;
        bottom: 27%;
        left: 15%;
        z-index: -2;
        animation: rotation4 10s linear infinite;
      }

      /* like*/
      .n6 {
        width: 25%;
        min-width: 170px;
        bottom: 12%;
        left: 10%;
        z-index: -2;
        transform: rotate(-5deg);
      }

      /* torii */
      .n7 {
        width: 18%;
        min-width: 140px;
        bottom: -6%;
        left: 16%;
        z-index: -2;
        transform: rotate(10deg);
      }

      /* comedian-blue*/
      .n8 {
        width: 13%;
        min-width: 70px;
        bottom: 3%;
        left: 33%;
        z-index: -2;
        transform: rotate(-20deg);
      }

      /* cafe*/
      .n9 {
        width: 16%;
        min-width: 120px;
        bottom: 22%;
        left: 38%;
        z-index: -3;
        transform: rotate(20deg);
      }

      /* capseltoy-beige*/
      /* capseltoy-purple*/
      .n10 {
        width: 13%;
        min-width: 90px;
        bottom: 18%;
        left: 53%;
        z-index: -2;
        animation: rotation5 12s linear infinite;
      }

      /* airplain-puple */
      .n11 {
        width: 20%;
        min-width: 110px;
        bottom: -8%;
        left: 48%;
        z-index: -2;
        animation: rotation2 10s linear infinite;
      }

      /* bort-green*/
      .n12 {
        width: 20%;
        min-width: 120px;
        bottom: -5%;
        left: 64%;
        z-index: -2;
        animation: rotation2 10s linear infinite;
      }

      /* creemsoda-pink*/
      .n13 {
        width: 11%;
        /* min-width: 100px; */
        bottom: 22%;
        left: 73%;
        z-index: -2;
        animation: rotation3 10s linear infinite;
      }

      /* comedian-brown*/
      .n14 {
        width: 13%;
        /* min-width: 100px; */
        bottom: 20%;
        left: 84%;
        z-index: -2;
        animation: rotation1 10s linear infinite;
      }

      /* capseltoy-green*/
      .n15 {
        width: 18%;
        /* min-width: 100px; */
        bottom: -1%;
        left: 90%;
        /* left: 710px; */
        z-index: -2;
        transform: rotate(-20deg);
      }

      /*like*/
      .n16 {
        width: 25%;
        /* min-width: 100px; */
        bottom: -5%;
        left: 75%;
        z-index: -2;
        transform: rotate(20deg);
      }

      /* airplain-blue */
      .n17 {
        width: 23%;
        /* min-width: 100px; */
        bottom: 30%;
        left: 86%;
        /* left: 650px; */
        z-index: -2;
        /* transform: rotate(10deg); */
      }

      /* icecreem-blue */
      .n18 {
        width: 11%;
        bottom: 22%;
        left: 30%;
        /* left: 650px; */
        z-index: -2;
        transform: rotate(-15deg);
      }

      /* icecreem-white */
      .n19 {
        width: 11%;
        bottom: 10%;
        left: 83%;
        z-index: -2;
        transform: rotate(15deg);
      }

      /* hamburger */
      .n20 {
        width: 12%;
        bottom: 18%;
        left: 64%;
        z-index: -2;
        transform: rotate(-15deg);
      }



    }
  }
}


/********** 台形 **********/
.pc {
  .trapezoid-wrapper {}

  /* 背景 */
  .trapezoid {
    position: relative;
    width: 100%;
    height: 200px;
    background: #C2F2E9;
    clip-path: polygon(0% 100%, 10% 0%, 90% 0%, 100% 100%);
    overflow: visible;
  }

  /*  コントローラー*/
  .controller-box {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 60px;

    position: absolute;
    width: 80%;
    height: 1px;
    /* bottom: 200px; */
    bottom: 200px;

    left: 50%;
    /* z-index: 1; */
    transform: translate(-50%, -50%);
  }

  .lever {
    width: 13%;
    max-width: 150px;
  }

  .button {
    width: 13%;
    max-width: 150px;
  }

}

/****************policy***************/

#policy {
  padding: 5% 5% 0;
  margin-bottom: 5%;

  .container {
    display: flex;
    justify-content: center;
    overflow: hidden;
    /* border: 1px solid #000; */

    .figure {
      width: 35%;
      margin: 0;
      /* border: 1px solid #e4e709; */
    }

    .text-wrap {
      writing-mode: vertical-rl;
      /* border: 1px solid #150aad; */
      /* border: 2px solid #15b407; */

      /* text-orientation: upright; */
      h3 {
        font-size: 2rem;
        line-height: 6rem;
        font-weight: bold;
        display: inline;
        color: #000;
        background-color: #f7f7f7;
        border-top: 10px solid #f7f7f7;
        border-bottom: 10px solid #f7f7f7;
        border-left: 5px solid #f7f7f7;
        border-right: 5px solid #f7f7f7;
      }

      p {
        color: #000;
        display: inline;
        font-size: 1.8rem;
        line-height: 6.5rem;
        background-color: #f7f7f7;
        border-top: 10px solid #f7f7f7;
        border-bottom: 10px solid #f7f7f7;
        border-left: 5px solid #f7f7f7;
        border-right: 5px solid #f7f7f7;
      }
    }
  }
}

/* 右から左に移動しながらフェードイン */
.fadeInLeft {
  opacity: 0;
  transform: translateX(500px);
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {}

  100% {
    opacity: 1;
    transform: translateY(100px);
    transform: rotate(20deg);
  }
}


#policy .text-wrap {
  overflow: hidden;
  position: relative;
  opacity: 0;
  /* border: 1px solid #000; */
}

#policy .text-wrap.active {
  opacity: 1;
}

#policy .text-wrap.active::before {
  animation: displayImg .7s linear forwards;
  background: #f7f7f7;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes displayImg {
  100% {
    transform: translateY(100%);
  }
}

/*----------------------------
【JS】scroll_right ｜右から出現
----------------------------*/
.scroll_right {
  -webkit-transition: 1.5s ease-in-out;
  -moz-transition: 1.5s ease-in-out;
  -o-transition: 1.5s ease-in-out;
  transition: 1.5s ease-in-out;
  transform: translateX(300px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}

.scroll_right.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}

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


/****************top_works***************/
#top_works {
  padding: 5%;
  margin-bottom: 5%;
  /* border: 2px solid #e68312; */

  .title {
    margin-bottom: 80px;
  }

  .container {

    .column-wrapper {
      margin-bottom: 10%;
      /* border: 1px solid #e30d0d;       */

      .column {
        width: 47%;
        overflow: hidden;
        /* border: 1px solid #000; */

        img {
          /* width: 90%; */
          transition: all 0.5s ease-in-out;
          margin-bottom: 20px;
          /* border: 1px solid #000; */
        }

        .wine {
          display: block;
          margin: 0 auto;
          margin-bottom: 20px;
          width: 90%;
        }

        .poster {
          display: block;
          margin: 0 auto;
          margin-bottom: 20px;
          width: 70%;
        }

        .flex {
          display: flex;
          margin-bottom: 5%;
          /* border: 1px solid #000; */

          .banner {
            width: 49%;
            margin-bottom: 0px;
          }

        }

        img:hover {
          transform: scale(1.1);
          transition: 0.5s all;
        }

        .category {
          margin-bottom: 2%;
        }


        span {
          /* p : 1.6rem; */
          font-size: 1.5rem;
          font-weight: bold;
          margin-left: 1%;
          color: #fff;
          background-color: #16afc7;
          background-color: #b4b4b4;
          background-color: #b1b1b1;
          border-radius: 30px;
          padding: 1% 3%;
        }
      }

      .n1 {
        margin-right: 5%;
      }
    }
  }
}

/****************about***************/

#about {
  padding: 5%;
  margin-bottom: 5%;

  /* border: 2px solid #e68312; */
}

#about .column {
  display: flex;
  justify-content: center;
}

#about .title {
  margin-bottom: 50px;
}

#about .box01 {
  width: 30%;
  min-width: 200px;
  padding: 20px;
  /* border: 1px solid #000; */
}


#about .box02 {
  width: 50%;
}

#about .more_btn {
  margin: 0 250px;
  text-align: center;
}



/*************************skills*************************/

#skills {
  margin-bottom: 5%;
  /* background: rgb(247, 124, 53); */
  background: #59a789;

  background: linear-gradient(#59a789, #9db9af);
  background: radial-gradient(#99d1bc, #59a789);
}

#skills .skills-inner {
  padding: 5% 5% 10%;
  /* border: 1px solid #000; */
}

#skills .container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#skills .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* width: 20%; */
  /* border: 1px solid #7005f3; */
}

#skills .content:not(:last-child) {
  /* margin-right: 5%; */
}

/* 内容box */
#skills .colmun01 {
  width: 80%;
  padding: 10%;
  height: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px 10px;
  background-color: #fff;
  /* border: 1px solid #000; */
}

#skills .box {
  margin-bottom: 10px;
}

#skills .skills-figuer {
  width: 40%;
}

/* タイトル */
#skills h3 {
  line-height: 5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0px;
  color: #fff;
}

/* 種類 */
#skills .box h4 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

/* no1 */
#skills .n1 h4 {
  color: #6996f7;
}

#skills .no1 {
  /* border: 2px solid #000; */
}

/* no2 */
#skills .n2 h4 {
  color: #f04c0c;
}

#skills .no2 {
  /* border: 2px solid #f04c0c; */
}

/* no3 */
#skills .n3 h4 {
  color: #4ae68b;
}

#skills .no3 {
  /* border: 2px solid #4ae68b; */

}

/**********strengths**********/

#strengths {
  padding: 5%;
  margin-bottom: 5%;
  /* border: 2px solid #e68312; */
}

#strengths .colmun01 {
  border-radius: 10px;
  width: 30%;
  height: 350px;
  padding: 20px 30px;
  text-align: center;
  margin-bottom: 10px;
}

#strengths .colmun01 .box01 {
  width: 70%;
  height: 150px;
  margin: 0 auto 20%;
  /* border: 1px solid #000; */
}

#strengths .colmun01 .box01 .up {
  /* width: 90%; */
}

#strengths .colmun01 .box01 .team {
  /* width: 90%; */
}

#strengths .colmun01 .sub-title {
  font-weight: bold;
  margin-bottom: 20px;
}


#strengths .colmun01 p {
  display: inline-block;
  text-align: left;
  z-index: 1;
}

/*************** biography ***************/
#biography {
  padding: 5% 5% 15%;
  margin-bottom: 19%;
}

/* 1-外枠 */
#biography .cp_timeline01 {
  position: relative;
  width: 100%;
  list-style-type: none;
  /* border: 1px solid #000; */
}

/*2-コンテンツ枠*/
#biography .cp_timeline01 li {
  padding: 3% 0 0;
  /* border: 1px solid #c20d0d; */
}

/* 🔶ひし形 */
#biography .flag_cont:before {
  /*ひし形位置  */
  top: -30px;
  left: calc(50% - 13px);

  position: absolute;
  content: ' ';
  display: block;
  width: 10px;
  height: 10px;
  /* ひし形余白*/
  margin-top: -3px;
  padding: 4px;
  /* ひし形枠カラー */
  border: 3px solid #1AE8C1;
  border: 3px solid #2e3977;
  z-index: 10;
  transform: rotate(45deg);
  background: #f7f3ee;
  background: #2e3977;
}

/* 縦棒 */
.cp_timeline01:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: '';
  display: block;
  width: 4px;
  z-index: 1;
  /* 縦棒長さ */
  height: 100%;
  margin-left: -3px;
  background: #f77c35;
  background: #2e3977;
  background: rgb(116, 177, 159, .5);
}

/***** 職種タイトル枠 *****/
#biography .flag_cont {
  position: relative;
  display: inline-block;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#biography .flag_cont:not(:last-child) {
  /* タイトルと作品枠の余白 */
  /* margin-bottom: 0%; */
}

/* 職業タイトル*/
#biography .flag {
  width: 30%;
  z-index: 15;
  padding: 10px 13px;
  background-color: rgb(255, 255, 255, .8);
  background-color: rgb(239, 239, 239);
  border-radius: 5px 5px;
  position: relative;
  display: inline;

  font-weight: bold;
  text-align: left;
  font-size: 18px;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 職業icon-img */
#biography .flag_cont .job-img {
  width: 20%;
  margin-right: 5px;
}

/*****作品box枠 *****/
#biography .desc {
  position: relative;
  z-index: 15;
  width: 80%;
  border-radius: 6px;
  padding: 5% 6%;
  /* background: rgb(255, 255, 255, 0.95); */
  /* 作品枠 */
  margin: 0 auto 2%;
  /* border: 1px solid #000; */
}

/* 作品box */
#biography .box {
  display: flex;

  margin-bottom: 3%;
  background: rgb(255, 255, 255, 0.95);
  /* border: 1px solid #000; */
}

#biography .box02 {
  background: rgb(255, 255, 255, 0.95);
}

/*  */
#biography .office-leaflet {
  margin-bottom: 3%;
}


/* 過去作品枠 */
#biography .item {
  margin: 0 auto;
  text-align: center;
  padding: 5% 5% 8%;
  border-radius: 10px;
  /* background: rgb(255, 255, 255, 0.95); */
  /* border: 1px solid #d30606; */
}
/* salon-pop */
#biography .salon-pop {
  display: flex;
}
#biography .item-inner {
}

#biography .box .item:not(:last-child) {
  margin-right: 3%;
  /* border: 1px solid #d30606; */
}

/* 制作物詳細 */
#biography .item-explain {
  font-size: 14px;
  text-align: center;
}
#biography .salon-pop-explain{
  margin-top: 4%;
}
#biography .office-poster-explain{
  margin-top: 5%;
}

#biography .item-explain .explain-text {
  color: #f5cad8;
}

/* 過去作品img */
#biography .item .item-figuer {
  margin-bottom: 3%;
}
#biography .box .event-character img{
  width: 95%;
}


#biography .item-title {
  font-weight: bold;
  margin-bottom: 3%;
  text-align: center;
}


/************** lower *************/
.lower-logo {
  vertical-align: top;
  position: fixed;
  top: 30px;
  left: 30px;
  /* border: 1px solid #000; */
}

.lower-main-wrapper {
  background: #f7f3ee;
  border-radius: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5% 5% 10%;
}

/*************works************/
/*******************************/
.works {
  margin-bottom: 100px;
  /* border: 1px solid #000; */
}

/* ウェブサイト */
.works .type {
  display: flex;
  /* border: 1px solid #ad1111; */
}

.works .type01 {
  /* color: #16afc7; */
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #16afc7;
  background-color: #b1b1b1;
  border-radius: 30px;
  padding: 5px 14px;
  margin-bottom: 10px;
}

/* コーポレートサイト h3: 2.4rem; */
.works .sub-title {
  margin-bottom: 8%;
}


/* 制作期間 */
.works .box01 p {
  font-size: 1.2rem;
}

.works .box01 span {
  color: #0ba29a;
  margin-right: 10px;
  font-weight: bold;
}

/* 説明タイトル */
.works .box02 span {
  font-size: 15px;
  padding: 2px 8px;
  border-radius: 2px;
  background-color: #000000;
  color: #ffffff;
}

.works .box02 p {
  margin-bottom: 2%;
}

/* 説明下余白 */
.works .box02 .explan_bottom {
  margin-bottom: 5%;
  /* border: 1px solid #000; */
}

.works .item-title-box {
  margin-bottom: 50px;
}

.works .container02 {
  width: 80%;
  margin: 0 auto;
  /* border: 1px solid #000; */
}

/* サイトを見るボタン */
.view-button {
  padding: 10px 40px;
  background: #fff;
  border: 2px solid #000;
  font-size: 1.4rem;
  font-weight: bold;
}


/***** 制作物 *****/
.works .item-box {
  width: 95%;
  margin: 0 auto;
  /* border: 1px solid #000; */
}

.works .wine-design {
  margin: 0 auto 5%;
  /* border: 1px solid #000; */
}

/* ポスターページ */
.works .poster_design {
  margin: 0 auto 5%;
  width: 60%;
}

/* バナーページ */
.works .banner_design {
  margin: 0 auto 5%;
}

.works .banner-container:not(:last-child) {
  margin-bottom: 10%;
}



.works .banner-box {
  width: 80%;
  /* border: 2px solid #c00bae; */
}

.works .banner-box:not(:last-child) {
  margin-right: 10%;
  /* border: 2px solid #c00bae; */
}



.works .item-box .banner_design .banner-container {
  display: flex;
  /* border: 2px solid #1ac00b; */
}

.works .item-box .banner_design .banner-container img {
  /* width: 45%; */
}


.works .item-explain {
  /* width: 70%; */
  width: 95%;
  margin: 0 auto 100px;
}

/* 制作期間 */
.works .colmun02 {
  margin-bottom: 10%;
}

/* 説明 */
.works .colmun03 {
  /* margin-top: 20px; */
}

.works .box01 {
  /* border: 1px solid #000; */
}


/*************design************/
/*******************************/
.design {
  margin-bottom: 100px;
}

.design .column {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* border: 1px solid #000; */
}




.design .column .box01 {
  width: 50%;
  margin: 0 auto;
}

.design .column .box02 {
  width: 30%;
  margin: 0 auto;
}


.design .column .box h3 {
  font-weight: 500;
}

.design .column .box img {
  box-shadow: 3px 5px 3px rgb(213, 213, 213);
}

@media screen and (max-width:768px) {
  .design .column {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */

  }

  .design .column .box {
    width: 90%;
  }

  .design .column .box:not(:last-child) {
    margin: 0 auto 30%;
  }
}

/* works06 */
.other-design .title {
  margin-bottom: 50px;
}

.other-design .title02 {
  margin-bottom: 50px;
}

.other-design .box {
  width: 80%;
  margin: 0 auto;
}



/**********/

/**********other works**********/
/*******************************/
.otherworks {
  max-width: 1200px;
  margin: 15% auto 10%;
  padding: 0;
  /* border: 1px solid #000; */
}

.otherworks .title {
  font-size: 20px;
  margin-bottom: 30px;
}

.otherworks .container {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 30% 45% 35%;
  gap: 0 3%;

}

.otherworks .container .n6 {
  width: 90%;
}

.otherworks .container .n7,
.otherworks .container .n8,
.otherworks .container .n9 {
  width: 50%;
  /* border: 3px solid #04dc6c; */
}

/* バナー */
.otherworks .container .n10 {
  width: 75%;
  /* border: 3px solid #04dc6c; */
}

.otherworks .box01 {
  overflow: hidden;
}

.otherworks .n1 img,
.otherworks .n2 img,
.otherworks .n3 img,
.otherworks .n4 img,
.otherworks .n5 img,
.otherworks .n6 img,
.otherworks .n7 img,
.otherworks .n8 img,
.otherworks .n9 img {
  transition: all 0.5s ease-in-out;
}

.otherworks .n1 img:hover,
.otherworks .n2 img:hover,
.otherworks .n3 img:hover,
.otherworks .n4 img:hover,
.otherworks .n5 img:hover,
.otherworks .n6 img:hover,
.otherworks .n7 img:hover,
.otherworks .n8 img:hover,
.otherworks .n9 img:hover {
  transform: scale(1.2);
  transition: 0.5s all;
}

/* バナー */
.otherworks .n10 .other_banner_inner {
  transition: all 0.5s ease-in-out;
}

.otherworks .n10 .other_banner_inner:hover {
  transform: scale(1.2);
  transition: 0.5s all;
}




/***** バナー *****/
.otherworks .flex {
  justify-content: center;
}

.otherworks .flex .other_banner {
  width: 45%;

}

.otherworks .other_banner {
  padding: 0;
}

.otherworks .flex:not(:last-child) {
  margin-bottom: 3%;
}

.otherworks .flex .other_banner:not(:last-child) {
  margin-right: 3%;
}