@charset "utf-8";


/* clearfix
------------------------------------------------*/
.clearfix { zoom: 1; }
.clearfix:before,
.clearfix:after {
	display: table;
	content:"";
	line-height: 0;
}
.clearfix:after { clear: both; }

/* 全体
------------------------------------------------*/

ul, ol, dl { 
	list-style: none;
}

a{
	text-decoration: none;
  color: #333;
}


/* リセット系 */
body {
  font-family: "Noto Sans JP", sans-serif;
  background: #f8f9fa;
  color: #333;
  overflow-y: scroll;
  height: auto;
  margin: 0;
  width: 100%;
  line-height: 1.7em;
  letter-spacing: 1px;
}


.wrapper {
	width: 100%;
	margin: 0 auto;
  overflow: hidden;
}

.contact_wrapper>header {
  margin-bottom: 10%;
}

section{
  margin: 0 10%;

}
@media screen and (min-width:900px) {
  .wrapper_inner{
		width: 900px;
    margin: 0 auto;
  }

}
@media screen and (max-width:768px) {
  section{
    margin: 0;  
  }
}



header{
  margin: 0 auto;
  width: 100%;
  position: fixed;
  z-index: 10;
}

.header_title img{
  width: 70%;
}

.header_title:hover{
  opacity: 0.7;
  transition: all 0.5s;
}

.header_inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
font-family: "futura-pt", sans-serif;
font-weight: 400;
height: 80px;
margin: 0 10%;
}


nav.pc,
nav.sp {
  display: none;
}

.nav_pc{
  display: flex;
  mix-blend-mode:multiply;
}
.nav_sp{
  display: flex;
}
.nav_sp li{
  margin-left: 10px;
  font-size: 120%;
}

/*nav PC*/
.nav_pc li{
  margin-left: 20px;
  font-size: 120%;
}

.nav_pc li a{
  /*線の基点とするためrelativeを指定*/
position: relative;
}
.nav_pc li.current a,
.nav_pc li a:hover{
color:#0481A2;
}

.nav_pc li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background:#00b3ff;
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.nav_pc li.current a::after,
.nav_pc li a:hover::after {
  transform: scale(1, 1);/*X方向にスケール拡大*/
}


.nav_sp {
  opacity: 0;
  visibility: hidden;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  list-style: none;
  padding-top: 10%;
  z-index: 1000;
}

.nav_sp.active {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s ease;
  background-color: #f8f9fa;
  margin: 0 auto;
  width: 100%;
  height: 200vw;
  z-index: 1000;
  flex-direction: column;
  justify-content: flex-start;
}

.nav_sp.active span {
  color: #0481A2;
  font-size:70%;
  display: inline-block;
  margin-left: 1%;
}

.nav_sp.active li {
  margin-bottom: 10%;
}
.nav_sp li a{
  /*線の基点とするためrelativeを指定*/
position: relative;
}


.nav_sp li.current a,
.nav_sp li a:hover{
color:#0481A2;
}

.nav_sp li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 5%;
  /*線の形状*/
  width: 90%;
  height: 2px;
  background:#00b3ff;
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.nav_sp li.current a::after,
.nav_sp li a:hover::after {
  transform: scale(1, 1);/*X方向にスケール拡大*/
}
/*==================================================
　5-2-1 3本線が×に
===================================*/
/* ハンバーガーボタン */
.openbtn {
      position: relative;
      background:#9bcecb;
      cursor: pointer;
      width: 50px;
      height:50px;
      border-radius: 5px;
      z-index: 1001;
    }
    .openbtn span {
      display: inline-block;
      transition: all .4s;
      position: absolute;
      left: 14px;
      height: 3px;
      border-radius: 2px;
      background: #fff;
      width: 45%;
    }
    .openbtn span:nth-of-type(1) { top:15px; }
    .openbtn span:nth-of-type(2) { top:23px; }
    .openbtn span:nth-of-type(3) { top:31px; }

    .openbtn.active span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%;
    }
    .openbtn.active span:nth-of-type(2) {
      opacity: 0;
    }
    .openbtn.active span:nth-of-type(3) {
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%;
    }

/*==================================================
==================================*/

/*==================================================
　MV wrapper
=====================================================*/
.mv_wrapper{
  position: relative;
  background-image: url(https://esp.pya.jp/enomotosaya_portfolio/img/mv_bg.jpg);    /* 背景画像指定 */
  background-size: cover;
  height: auto;
  width: 100vw;
  overflow: hidden;
}

.mv_title_text01{
  display: flex;
  flex-direction: column;
  margin-left: 10%;
  padding-top: 10%;
  filter: drop-shadow(2px 2px 0px #fff);
}
.mv_title_text01 h1{
  margin: 0;
  padding-bottom: 2%;

  animation-duration: 1s;
  animation-delay: 0.5s;
  color: #28605c;
}

.mv_title_text01 p{
  color: #fc9604;
}

.mv_title_text02 p{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 130%;
  color: #fff;
  margin-top: -2%;
  margin-bottom: 7%;
  margin-left:50%;
  animation-duration: 2.5s;
  animation-delay: 2s;
}


.mv_hikouki{
  width: 100%;
  margin-top: -10%;
  margin-left:10%;
  animation-duration: 2s;
  animation-delay: 1s;
}
.mv_hikouki img{
  width: 100%;
}

.wave{
  position:relative;
  height:80px;

  }
  canvas{
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
  
  }


@media screen and (max-width: 768px) {
  .mv_wrapper{
    position: relative;
    background-size: cover;
    height: 100%;
    width: 100vw;
  }
  .mv_inner{
    padding-top: 20%;

  }
  .mv_title_text01{
    padding-bottom: 20%;
      }
      .mv_title_text01 h1{
        padding-bottom: 2%;
          }
  .mv_title_text02 p{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 100%;
    color: #fff;
    margin-top: -2%;
    margin-bottom: 7%;
    margin-left:50%;
    animation-duration: 2.5s;
    animation-delay: 2s;
  }
  .mv_hikouki{
    width: 100%;
    margin-top: -10%;
    margin-left:10%;
    animation-duration: 2s;
    animation-delay: 1s;
  }
  .mv_hikouki img{
    width: 140%;
  }
  
  .wave{
    position:relative;
    height:80px;
    }
    canvas{
    position: absolute;
    bottom: -4px;
    left:0;
    width: 100%;
    }
  
}

.fuwa_1 {
	-webkit-animation: fuwafuwa 2.5s infinite;
	        animation: fuwafuwa 2.5s infinite;
 }
 .fuwa_2 {
	-webkit-animation: fuwafuwa 3s infinite;
	        animation: fuwafuwa 3s infinite;
 }
 @-webkit-keyframes fuwafuwa {
   0% {
	 -webkit-transform: translateY(0px);
	         transform: translateY(0px);
   }
   50% {
	 -webkit-transform: translateY(-20px);
	         transform: translateY(-20px);
   }
   100% {
	 -webkit-transform: translateY(0px);
	         transform: translateY(0px);
   }
 }
 @keyframes fuwafuwa {
   0% {
	 -webkit-transform: translateY(0px);
	         transform: translateY(0px);
   }
   50% {
	 -webkit-transform: translateY(-20px);
	         transform: translateY(-20px);
   }
   100% {
	 -webkit-transform: translateY(0px);
	         transform: translateY(0px);
   }
 }
/* ======================================== */

/* ===== section 共通　===== */

/* ======================================== */

.section_title{
  text-align: center;
  font-size: 120%;
  font-family: "futura-pt", sans-serif;
  color: #28605c;

}
.line_tate_blue{
  position: absolute;
   letter-spacing: -3px;
   color: #a6e7e4;
   transform: rotate(90deg);
  }
  
  .line_tate_white{
    position: absolute;
     letter-spacing: -3px;
     color: #ffffff;
     transform: rotate(90deg);
    }
    
.title_tate{
    margin-top: 120px;
    writing-mode: vertical-rl;
    font-size: 70%;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
  }
  .title_tate_w{
    margin-top: 120px;
    writing-mode: vertical-rl;
    font-size: 70%;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    color: #1e8b84;
  }

  @media screen and (max-width: 768px) {
    .section_title{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-family: "futura-pt", sans-serif;
      color: #28605c;
    
    }
    .line_tate_blue{
      display: none;
      }
      
      .line_tate_white{
        display: none;
        }
        
    .title_tate{
        font-weight: 400;
        margin: 0;
        padding-left:5%;
        writing-mode:horizontal-tb;
        font-family: "Noto Sans JP", sans-serif;
        color: #62d2cc;
      }
      .title_tate_w{
        font-weight: 400;
        margin: 0;
        padding-left:5%;
        writing-mode:horizontal-tb;
        font-family: "Noto Sans JP", sans-serif;
        color: #1e8b84;
      }
  }
/* ======================================== */
/* ======================================== */

/* ===== about===== */

/* ======================================== */
/* ======================================== */

  .section01_about{
    display: flex;
    
  }

  .section01_about_right {
    position: relative;
    margin: 0 auto;
    padding: 10% 5%;
    font-family: "Noto Sans JP", sans-serif;
    color: #28605c;
  }
  
  .section01_about_right h4 {
    font-size:  170%;
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 30px;
  }
  
  .section01_about_right p {
    font-size: 16px;
    line-height: 2;
    color: #28605c;
    margin-bottom: 40px;
  }
  
  /* 強調文字 */
  .section01_about_right p strong {
    position: relative;
    background: linear-gradient(transparent 40%, yellow 40%);
  }

  /* about 画像サイズ変更 */
  .about_prof{
    position: absolute;
    top:10%;
    right: -60%;
    z-index: -1;
  }
  
  .about_prof img{
    width: 60%;
  }
  
  .about_kumo01{
    position: absolute;
    top:3%;
    right: -60%;
    z-index: -1;
    opacity: 0.6;
  }
  
  .about_pabout_kumo01 img{
    width: 60%;
  }
  
  .about_kumo02{
    margin-left: -80%;
    width: 70%;
  }
  
  .about_kumo02 img{
    width: 100%;
  }


  /* ボタンの配置 */
  .section01_about_right .btn01 {
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }


/* ボタン共通設定 */
.btn01{
  font-family: "futura-pt", sans-serif;
  position: relative;
  text-decoration: none;
  display: inline-block;
  background:none;
  color:#28605c;
  padding: 10px 40px 10px 30px;
  border-radius:25px;
  border: #28605c solid 1px;
  text-align: center;
  outline: none;
  transition: ease .2s;
}


.btn01:hover {
  background:#626262;
  color: #fff;
}

.btn02{
  font-family: "futura-pt", sans-serif;
  position: relative;
  text-decoration: none;
  display: inline-block;
  background:none;
  color:#28605c;
  padding: 15px 60px 15px 40px;
  margin-bottom: 20%;
  margin-top: -30px;
  border-radius:30px;
  border: #28605c solid 1px;
  text-align: center;
  outline: none;
  transition: ease .2s;
  font-size: large;
}

.btn02:hover {
  background:#626262;
  color: #fff;
}
@media screen and (max-width:768px) {
  .btn02{
    margin-top: 0;
  }
}

/* 矢印が右に移動して現在地に戻る */
.btnarrow2::after {
  content: '';
  position: absolute;
  top: 42%;
  right: 13px;
  width: 5px;
  height: 5px;
  border-top: 2px solid #28605c;     /* ← ホバー前の色 */
  border-right: 2px solid #28605c;    /* ← ホバー前の色 */
  transform: rotate(45deg);
  transition: all 0.3s ease;
}

.btnarrow2:hover::after {
  border-top: 2px solid #fff;         /* ← ホバー後の色 */
  border-right: 2px solid #fff;       /* ← ホバー後の色 */
  animation: arrow .5s;
}

@keyframes arrow {
  50% {
    right: 10px;
  }
  100% {
    right: 13px;
  }
}
/*流体シェイプ*/
  .fluid {
    position: absolute;
    z-index: -2;
    left: 0;
    top: 10%;
    width:40vh;/*横幅*/
    height: 40vh;/*縦幅*/
    background:#fff7d2;/*背景色*/
    animation: fluidrotate 10s 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%;
  }
      
  }


  @media screen and (max-width:768px) {
    .section01_about{
      display: inline;
    }
  
    .section01_about_right {
      position: relative;
      margin: 0 auto;
      padding: 10% 10%;
      font-family: "Noto Sans JP", sans-serif;
      color: #28605c;
    }
    
    .section01_about_right h4 {
      font-size: 4vw;
      font-weight: 600;
      line-height: 1.8;
      margin-bottom: 30px;
    }
    
    .section01_about_right p {
      font-size: 3.5vw;
      line-height: 2;
      color: #28605c;
      margin-bottom: 40px;
    }
    
    /* 強調文字 */
    .section01_about_right p strong {
      position: relative;
      background: linear-gradient(transparent 40%, yellow 40%);
    }
  
    /* about 画像サイズ変更 */
    .about_prof{
      position: absolute;
      right: 0;
      top: 70px;
      z-index: -1;
      width: 30%;
    }
    
    .about_prof img{
      width: 100%;
    }
    
    .about_kumo01{
      position: absolute;
      top:0%;
      right: 0;
      z-index: -2;
      width: 20%;
      opacity: 0.4;
    }
    
    .about_pabout_kumo01 img{
      width: 100%;
    }
    
    .about_kumo02{
      margin-left: -30%;
      margin-top: -10%;
      width: 50%;
    }
    
    .about_kumo02 img{
      width: 100%;
    }

 .sp_btn_center{
   display: flex;
  justify-content: center;
}


    .fluid {
      position: absolute;
      z-index: -2;
      left: -30%;
      top: 10%;
      margin-left: -10%;
      margin-top: 50px;
      width:70vw;/*横幅*/
      height: 70vw;/*縦幅*/
      background:#fff7d2;/*背景色*/
      animation: fluidrotate 10s ease 0s infinite;/*アニメーションの設定*/
    }
  
  }



/* ======================================== */
/* ======================================== */

/* ===== skill===== */

/* ======================================== */
/* ======================================== */
.section02_skill{
  display: flex;
  background:url(../img/02about_bottom_bg.png) no-repeat top/120vw,url(../img/03skill_bottom_bg.png) no-repeat bottom/120vw,url(../img/03_skill_bg.png) repeat center/40px;
  height: auto;
  width: 100vw;
  margin-left: 0;
  padding: 10% 10%;
  overflow: hidden;
  }

  .section02_skill_right_wrapper{
  margin: 0 auto;
  width: 60%;
}
    .section02_skill_right{
      display: flex;
      font-family: "Noto Sans JP", sans-serif;
      color: #28605c;
      background-color: #f8f9fa;
      padding: 8%;
      margin: 0 auto;
      align-items: center;
      filter: drop-shadow(10px 10px 0px rgba(162, 209, 205, 0.2));
    }
    .section02_skill_right:nth-child(1){
      margin: 5% 0;
      margin-left: -20%;
      }
     .section02_skill_right:nth-child(2){
        margin: 5% 0;
        margin-left: -20%;
        }
    .section02_skill_right01_img{
      margin-right: 5%;
    }
  
    .section02_skill_right h4{
      font-family: "futura-pt", sans-serif;
      font-size: 170%; 
      font-weight: 500;  
      margin-bottom: 0;
      margin-top: 2%;
    }
  
    .section02_skill_right01_p1{
      color: #4ad5ce;
      margin-top: 0;
    }
  
    .section02_skill_right01_p2{
      font-size: 100%;
    
    }
    p.section02_skill_right01_p3{
      display: inline;
      font-family: "futura-pt", sans-serif;
      line-height: 10px;      
      font-size: 100%;

    }

    .section02_skill_right_icon{
      display: inline-block;
      width: 13px;
    }
    .section02_skill_right_icon img{
      width: 100%;
    }

    @media screen and (max-width:768px) {
      .section02_skill{
        flex-direction: column;
        padding: 10% 0;
        }
      
        .section02_skill_right_wrapper{
        margin: 0 auto;
        width: 90%;
        margin-bottom: 5%;
      }
      
      .section02_skill_right{
        display: block;
        text-align: center;
        margin: 0
        }
          .section02_skill_right:nth-child(1){
            margin: 0;
            margin-bottom: 5%;
            margin-right: 2.5%;
            }
           .section02_skill_right:nth-child(2){
              margin: 0;
              margin-right: 2.5%;
              }
          .section02_skill_right01_img{
            margin-right: 5%;
          }
        
          .section02_skill_right h4{
            font-family: "futura-pt", sans-serif;
            font-size: 170%; 
            font-weight: 500;  
            margin-bottom: 0;
          }
        
          .section02_skill_right01_p1{
            margin-top: 0;
          }
        
          .section02_skill_right01_p2{
            padding-bottom: 2%;
            font-size: 2.5vw;

          
          }
          .section02_skill_right01_p3{
            display: inline;
            justify-content: center;
            font-size: 2vw;

          }
          
          .section02_skill_right_icon{
            width: 14px;
            padding-top: 7px;
          }
    }
      

/* ======================================== */
/* ======================================== */

/* ===== work ===== */

/* ======================================== */
/* ======================================== */
    .section03_work{
      display: flex;
      margin-bottom: 10%;
    }
      .section03_work_right {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 60px; /* アイテム間の余白調整 */
        padding: 3% 0;
        margin-left:9%;
        list-style: none;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
      }
      .section03_work_item_wrapper {
        width: calc(50% - 60px); /* 2列用（gapを引いた幅） */
        box-sizing: border-box;
      }
      
      .section03_work_item {
        text-align: center;
        background-color: #f3f3f3;

      }
      
      .section03_work_item .mask img {
        width: 100%;
        height: auto;

        transition: transform 0.3s ease;
      }
      
      .section03_work_item .mask img:hover {
        transform: scale(1.03);
      }
      
      .work_text_wrapper{
        background-color: #f3f3f3;
        padding: 0% 1% 1% 1%;
      }
      /* カテゴリテキスト */
      p.work_category {
        font-family: "futura-pt", sans-serif;
        font-size: 150%;
        color: #004e5c;
        margin:0 0 1% 0;
      }
      .work_category_flex{
        display: flex;
        justify-content: center;
      }

      /* 制作区分バッジ：クライアントワーク */
      span.label_client{
        display: inline-block;
        background-color: #004e5c;
        color: #fff;
        font-size: 50%;
        padding: 1% 5% 0 5%;;
        margin-left: 6px;
        margin-bottom: 1px;
      }
            /* 制作区分バッジ：自主制作 */
            span.label_self{
              display: inline-block;
              background-color: #2e94a6;
              border-radius: 20px;
              color: #fff;
              font-size: 50%;
              padding: 1% 5% 0 5%;;
              margin-left: 6px;
              margin-bottom: 1px;
            }
      
      /* サブテキスト */
      .work_sub {
        font-size: 90%;
        color: #96a0a1;
        margin:0 0 1% 0;
      }

      
      @media screen and (max-width: 768px) {
        
        .section03_work{
          display: flex;
          flex-direction: column;
          margin-bottom: 10%;
        }
      .section03_work_right {
        display: flex;
        gap: 0px; /* アイテム間の余白調整 */
        margin-left:0;
        list-style: none;
      }
        .section03_work_item_wrapper {
          width: 120%; /* スマホでは1列表示 */
          padding: 5%;
        }
        .section03_work_item {
          text-align: center;
          background-color: #f3f3f3;
  
        }
        
        .section03_work_item .mask img {
          width: 100%;
          height: auto;
          transition: transform 0.3s ease;
        }
        
        .section03_work_item .mask img:hover {
          transform: scale(1.03);
        }
        
        .work_text_wrapper{
          background-color: #f3f3f3;
          padding: 2% 1% 2% 1%;
        }
        /* カテゴリテキスト */
        .work_category {
          font-family: "futura-pt", sans-serif;
          font-size: 150%;
          color: #004e5c;
          margin:0 0 1% 0;
        }
        .work_category_flex{
          display: flex;
          justify-content: center;
        }
      }
      @media screen and (max-width: 950px) {
        .work_category_flex p{
          font-size: 90%;
        }
      }





/* ======================================== */
/* ======================================== */

/* ===== contact ===== */

/* ======================================== */
/* ======================================== */

#contact{
}

.section04_contact{
  display: flex;
  margin-bottom: 5%;
}
.confirm_wrapper{
  display: flex;
  margin-bottom: 5%;
  margin-top: 10%;
}
.send_wrapper{
  display: flex;
  margin-bottom: 5%;
  margin-top: 15%;
}
  .section04_contact_right {
    width: 70%;
    padding: 10%;
    margin-left:9%;
  }
  .section04_contact_right h1{

  }

  .section04_contact_right {
    text-align: left;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .contact_title {
    font-size: 1.5em;
    margin-bottom: 1em;
    color: #004e5c;
  }

  .contact_form label {
    display: block;
    margin-bottom: 1.5em;
  }

  .contact_form label span {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  .contact_form input[type="text"],
  .contact_form input[type="email"],
  .contact_form textarea {
    width: 100%;
    padding: 0.8em;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    resize: vertical;
  }

  .contact_button {
    display: inline-block;
    padding: 0.8em 2em;
    font-size: 1em;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .contact_button:hover {
    background-color: #004e5c;
  }


/*== 問い合わせボタン */
.btn03 {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #004e5c;
  padding: 10px 30px;
  text-align: center;
  outline: none;
  transition: ease .2s;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.btn03 span {
position: relative;
z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:#004e5c;
}

.btn03:hover span{
color:#fff;
}

/*== 背景が流れる（下から上） */.bgbottom:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #004e5c;
  width: 100%;
  height: 0;
  opacity: 0;
  transition: height .3s cubic-bezier(0.8, 0, 0.2, 1), opacity .1s;
}

.bgbottom:hover:before {
  height: 100%;
  opacity: 1;
  background-color: #51848d;
}


/*== 問い合わせボタン　sp */
.btn04 {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid #004e5c;
  background-color: rgb(255, 255, 255);
  padding: 10px 30px;
  text-align: center;
  outline: none;
  border-radius: 30px;
  color: #004e5c;
}




@media screen and (max-width: 768px) {
  .section04_contact{
    flex-direction: column;
  }
  .contact_wrapper {
    padding: 1.5em;
  }

  .contact_button {
    width: 100%;
  }
  .section04_contact_right {
    width: 80%;
    padding: 5%;
    margin:0 5% 0 5%;
  }
  .section04_contact_right_inner{
  }

/*== 問い合わせボタン　sp */
.btn04 {
  padding: 15px 40px 15px 40px;
  text-align: center;
  font-weight: 100;
  font-size: 18px!important;
}
}


/* ======================================== */

/* ===== PageTopボタン＆footer ===== */

/* ======================================== */

.page_top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 55px;
  height: 55px;
  background: #a6e7e4;
  color: #fff;
  border: 2px solid #004e5c;
  font-size: 1.5em;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;

  /* 最初は非表示状態 */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    bottom 0.2s ease;
}

.page_top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}




footer{
  position: relative;
  margin: 0 auto;
  width: 100%;
  z-index: 10;
  mix-blend-mode:multiply;
  background-color: #bee3e1;
  z-index: 100;
}

footer p{
  color: #fff;
}
.footer_inner{
  padding: 10px;
}
.footer_nav{
  display: flex;
  color: #fff;
}

.footer_nav li{
margin-left: 20px;
font-size: 120%;
}

.footer_nav li a{
/*線の基点とするためrelativeを指定*/
position: relative;
color: #fff;
}
.footer_nav li.current a,
.footer_nav li a:hover{
color:#fff;
}

.footer_nav li a::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: 0;
left: 10%;
/*線の形状*/
width: 80%;
height: 2px;
background:#ffffff;
/*アニメーションの指定*/
transition: all .3s;
transform: scale(0, 1);/*X方向0、Y方向1*/
transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.footer_nav li.current a::after,
.footer_nav li a:hover::after {
transform: scale(1, 1);/*X方向にスケール拡大*/
}
/*footer_navここまで*/


.footer_title img{
  width: 70%;
}

.footer_title:hover{
  opacity: 0.3;
  transition: all 0.5s;
}

.footer_inner_pc{
  display: flex;
  justify-content: space-between;
  align-items: center;
font-family: "futura-pt", sans-serif;
font-weight: 400;
height: 80px;
margin: 0 10%;
}

.footer_inner_sp{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
font-family: "futura-pt", sans-serif;
font-weight: 400;
margin: 0 10%;
}
.sp .footer_nav {
  display: flex;
  flex-direction: row;
  align-items: center;
font-family: "futura-pt", sans-serif;
font-weight: 400;
margin: 0 10%;
padding: 0;
}

.sp .footer_title {
  width: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
font-family: "futura-pt", sans-serif;
font-weight: 400;
height: 50px;
margin: 10% 0;
padding: 0;
}
.sp .footer_title img{
  width: 100%;
}
/* ======================================== */

/* ===== 子ページ共通 ===== */

/* ======================================== */
.title_wrapper{
  text-align: center;
  margin: 10% 0 0 0;
}
.title_wrapper h1{
  color: #004e5c;
}

.wave_line_white{
  position:relative;
  height:60px;
}

  canvas#waveCanvas_line_white{
  mix-blend-mode:lighten;
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
  opacity: 0.7;
  }

  .wave_line_blue{
    position:relative;
    height:60px;
    }

    canvas#waveCanvas_line_blue{
    mix-blend-mode:darken;
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    }
/* ======================================== */

/* ===== PROFILEページ ===== */

/* ======================================== */
.profile_body{
  background-color: #00E8E5;

}
    .title_profile_wrapper{
      text-align: center;
      margin: 10% 0 0 0;
    }

    .title_profile_wrapper h1{
      color: #004e5c;
    }
    .profile_text_wrapper{
      position: relative;
    }
    .profile_name{
      margin-left: 50%;
      margin-top: 10%;
    }
    .profile_name h1{
      border-bottom: #004e5c 1px solid;
      color: #004e5c;
      display: inline-block;
      font-family: "futura-pt", sans-serif;
      font-size: 200%;


    }
    .profile_name p{
      color: #004e5c;
      margin-top: -20px;
    }    
    .profile_text{
      width: 70%;
      margin-top: 15%;
      margin-left: 15%;
      color: #004e5c;
      font-size: 100%;
      padding: 1% 3%;
      background-color: rgba(255, 255, 255, 1);
      filter: drop-shadow(15px 15px 0 rgba(0, 78, 92, 0.7));
    }

    .profile_img{
      position: absolute;
      top: -30%;
      left: -14%;
      z-index: -1;
      width: 50%;
    }
    .profile_img img{
      width: 100%;
    }

    .profile_history_wrapper{
      margin-top: 10%;
      display: flex;
    }


.profile_history_right {
  margin: 0 0 20% 10%;
  padding: 10%;
  background-color: #f8f9fa;
}
.profile_history_right h3 {
  color: #00a29f;
}

.profile_history_right p {
  font-size: 95%;
  margin-bottom: 10%;
  color: #333;
}
.profile_history_right p span {
  background: linear-gradient(transparent 60%, #fff5b4 60%);
}

.scroll_line_local {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #004e5c;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.1s linear;
  z-index: 1;
}

.fa{
  padding-right: 2%;
  color: #00a29f;
}
@media screen and (max-width:768px) {
  .profile_body{
    background-color: #00E8E5;
  
  }
      .title_profile_wrapper{
        text-align: center;
        margin: 10% 0 0 0;
      }
  
      .title_profile_wrapper h1{
        color: #004e5c;
      }
      .profile_text_wrapper{
        position: relative;
      }
      .profile_name{
        margin-left: 50%;
        margin-top: 5%;
      }
      .profile_name h1{
        border-bottom: #004e5c 1px solid;
        color: #004e5c;
        display: inline-block;
        font-family: "futura-pt", sans-serif;
        font-size: 200%;
  
  
      }
      .profile_name p{
        color: #004e5c;
        margin-top: -20px;
      }    
      .profile_text{
        width: 80%;
        margin-top: 10%;
        margin-left: 5%;
        color: #004e5c;
        font-size: 3.5vw;
        padding: 5%;
        background-color: rgba(255, 255, 255, 1);
        filter: drop-shadow(15px 15px 0 rgba(0, 78, 92, 0.7));
      }
      .profile_text p{
        padding: 0 1%;

      }
  
      .profile_img{
        position: absolute;
        top: -10%;
        left: 0;
        z-index: -1;
        width: 50%;
      }
      .profile_img img{
        width: 100%;
      }
  
      .profile_history_wrapper{
        flex-direction: column;
        margin-top: 10%;
        display: flex;
      }
      .profile_history_wrapper .title_tate{
        color: #fff;
      }
  
  
  .profile_history_right {
    margin: 0 4% 20% 4%;
    padding: 10%;
    background-color: #f8f9fa;
  }
  .profile_history_right h3 {
    color: #00a29f;
  }
  
  .profile_history_right p {
    font-size: 3.5vw;
    margin-bottom: 10%;
    color: #333;
  }
  .profile_history_right p span {
    background: linear-gradient(transparent 60%, #fff5b4 60%);
  }
  
  .scroll_line_local {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #004e5c;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.1s linear;
    z-index: 1;
  }
  
  .fa{
    padding-right: 2%;
    color: #00a29f;
  }
}


/* ======================================== */

/* ===== WORKS一覧ページ ===== */

/* ======================================== */


.works_wrapper01{
  background-color: none;
}
.works_wrapper_inner{
  padding:0;
  margin:0;
  list-style: none;
  background-color: #fff;
}

  .works_item_wrapper {
    width: calc(50% - 10px); /* 2列用（gapを引いた幅） */
    box-sizing: border-box;
  }
  
  .works_item {
    text-align: center;
  }
        .works_text_wrapper{
        padding: 0% 1% 1% 1%;
      }
  .works_item .mask img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
  }
  
  .works_item .mask img:hover {
    /*transform: scale(1.03);*/
  }
  
  .works_text_wrapper{
    padding: 0% 1% 1% 1%;
  }
  /* カテゴリテキスト */
  .work_category {
    font-family: "futura-pt", sans-serif;
    font-size: 150%;
    color: #004e5c;
    margin:0 0 1% 0;
  }
  .work_category_flex{
    display: flex;
    justify-content: center;
  }
  /* 制作区分バッジ：クライアントワーク */
  .label_client{
    background-color: #004e5c;
    color: #fff;
    font-size: 50%;
    padding: 6px 10px 4px 10px;
    border-radius: 20px;
    margin-left: 6px;
    margin-bottom: 1px;
  }
  
  /* サブテキスト */
  .work_sub {
    font-size: 90%;
    color: #96a0a1;
    margin:0 0 1% 0;
  }

  @media screen and (max-width: 768px) {
    .works_wrapper01{
      background-color: none;
    }

    .works_wrapper_inner {
      display: flex;
      gap: 0px; /* アイテム間の余白調整 */
      margin:0;
      list-style: none;
    }
      .works_item_wrapper {
        width: 120%; /* スマホでは1列表示 */
        padding: 5%;
      }
      .works_item {
        text-align: center;
      }
            .works_text_wrapper{
            padding: 0% 1% 1% 1%;
          }
      .works_item .mask img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
      }
      
      .works_item .mask img:hover {
        /*transform: scale(1.03);*/
      }
      
      .works_text_wrapper{
        padding: 0% 1% 1% 1%;
      }
      /* カテゴリテキスト */
      p.work_category {
        font-family: "futura-pt", sans-serif;
        font-size: 130%;
        color: #004e5c;
        margin:0 0 1% 0;
      }
      .work_category_flex{
        display: flex;
        justify-content: center;
      }
        /* 制作区分バッジ：クライアントワーク */
  span.label_client{
    display: inline-block;
    background-color: #004e5c;
    color: #fff;
    font-size: 60%;
    padding: 1% 4% 0 4%;
    border-radius: 20px;
    margin-left: 6px;
    margin-bottom: 1px;
  }
        /* サブテキスト */
  .work_sub {
    font-size: 90%;
    color: #96a0a1;
    margin:0 0 1% 0;
  }
    }



/* ===== フィルター全体 ===== */
#filter {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 4px;
  background-color: #fff;
  padding-top: 2%;
}

/* チェックボックス自体は非表示 */
#filter input[type="checkbox"] {
  display: none;
}

/* ラベル構造 */
#filter label {
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.2s ease;
  user-select: none;
}
#filter label input + .filter_text {
  font-size: 16px !important; 
}

/* ラベル内の見た目は span に集約 */
#filter span {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 14px;
  transition: 0.2s;
}

/* 選択されたチェックボックスに対応するspanだけ黒背景 */
#filter input[type="checkbox"]:checked + span {
  background: #004e5c;
  color: #fff;
  border-color: #004e5c;
}

#sort {
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
}

#sort button {
  padding: 8px 16px;
  background: #f1f1f1;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.2s ease;
}

#sort button:hover {
  background: #e0e0e0;
}

/* 押されているボタンには濃いグレー */
#sort button.active {
  background: #bbb;
  color: #004e5c;
  font-weight: bold;
}

/* 作品カード */
.portfolio {
  display: flex;
  padding-left: 0;
  flex-wrap: wrap;
  justify-content: center;
}

ul.portfolio li {
  width: 40%;
}


.item {
  display: none;
  background: #fff;
  padding: 5px;
  margin: 10px;

  transition: transform 0.2s ease;
}

.item:hover {
  transform: translateY(-4px);
}

.item.show {
  display: block;
}


.item img{
  width: 100%;
  border-radius: 30px;
}

.item_tag{
  display: inline-block;
  padding: 0 5px;
  border-radius: 20px;
  color: #fff;
  font-size: 80%;
}

.item_title{
  font-size: 120%;
  font-weight: 500;
}
.item_work01{
  display: inline-block;
  padding: 0 3%;
  font-size: 80%;
  background-color: #626262;
  color: #f7f7f7;
}
.item_work02{
  display: inline-block;
  padding: 0 3%;
  font-size: 80%;
  background-color: #c9c9c9;
  color: #f7f7f7;
}

.item_day{
  display: inline-block;
  border-radius: 20px;
  padding: 0 3%;
  font-size: 80%;
  background-color: #f7f7f7;
  color: #878787;
}

.tag_dtp{
  border: solid 4px #ff8383;
  background-color: #ff8383;
}

.tag_web{
  border: solid 4px #83c9ff;
  background-color: #83c9ff;
}

.tag_logo{
  border: solid 4px #91d400;
  background-color: #91d400;
}

.tag_banner{
  border: solid 4px #b583ff;
  background-color: #b583ff;
}




@media screen and (max-width: 768px) {
  /* ===== フィルター全体 ===== */

#filter {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 4px;
  background-color: #fff;
  padding-top: 2%;
}
#filter.filter_text{
  font-size: 2vw;
}

/* チェックボックス自体は非表示 */
#filter input[type="checkbox"] {
  display: none;
}

/* ラベル構造 */
#filter label {
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.2s ease;
  user-select: none;
}

#filter label input + .filter_text {
  font-size: 12px !important;
}

/* ラベル内の見た目は span に集約 */
#filter span {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 14px;
  transition: 0.2s;
}

/* 選択されたチェックボックスに対応するspanだけ黒背景 */
#filter input[type="checkbox"]:checked + span {
  background: #004e5c;
  color: #fff;
  border-color: #004e5c;
}

#sort {
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
}

#sort button {
  padding: 8px 16px;
  background: #f1f1f1;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.2s ease;
}

#sort button:hover {
  background: #e0e0e0;
}

/* 押されているボタンには濃いグレー */
#sort button.active {
  background: #bbb;
  color: #004e5c;
  font-weight: bold;
}

  
/* 作品カード */
.portfolio {
  display: flex;
  padding-left: 0;
  flex-wrap: wrap;
  justify-content: center;
}

ul.portfolio li {
  width: 90%;
}


.item {
  display: none;
  background: #fff;
  padding: 20px;
  margin: 10px;

  transition: transform 0.2s ease;
}

.item:hover {
  transform: translateY(-4px);
}

.item.show {
  display: block;
}


.item img{
  width: 100%;
  border-radius: 30px;
}

.item_tag{
  display: inline-block;
  padding: 0 5px;
  border-radius: 20px;
  color: #fff;
  font-size: 80%;
}

.item_title{
  font-size: 120%;
  font-weight: 500;
}
.item_work01{
  display: inline-block;
  padding: 0 3%;
  font-size: 80%;
  background-color: #626262;
  color: #f7f7f7;
}
.item_work02{
  display: inline-block;
  padding: 0 3%;
  font-size: 80%;
  background-color: #c9c9c9;
  color: #f7f7f7;
}

.item_day{
  display: inline-block;
  border-radius: 20px;
  padding: 0 3%;
  font-size: 80%;
  background-color: #f7f7f7;
  color: #878787;
}

.tag_dtp{
  border: solid 4px #ff8383;
  background-color: #ff8383;
}

.tag_web{
  border: solid 4px #83c9ff;
  background-color: #83c9ff;
}

.tag_logo{
  border: solid 4px #91d400;
  background-color: #91d400;
}

.tag_banner{
  border: solid 4px #b583ff;
  background-color: #b583ff;
}

}

/*----------------------------------------------*/
/*--pager
------------------------------------------------*/

 .pager{
   margin: 0 auto;
    text-align: center;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    padding: 0;
    padding-bottom: 10%;
    z-index: 1;
    margin-bottom: 10%;
    background-color: #fff;
}
 .pager:before {
    content: "";
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background:none;
    background:none;
}
 .pager span{
    margin:2px;
    padding:5px;
    color:#444;
    background:#f1f1f1;
	border-radius: 4px;
	font-size: 14px;
}
 .pager span:hover{
    cursor:pointer;
    background:#f1f1f1;
	color:#444;
    text-decoration: underline;
}
/* 開いているページ（current）*/
 .pager span.current{
    color:#ffffff;
    background:#444;
    border: 1px solid #444;
}
 .pager span.current:hover{
    cursor:default;
    text-decoration: none;
}
/* 前へ　次へ（invalid）*/
 .pager span.invalid{
    background: #eee;
    border: solid 1px #eee;
    color: #aaa;
}
 .pager span.invalid:hover{
    cursor:default;
    text-decoration: none;
}
/* …点々（ellipsis）*/
 .pager span.ellipsis{
    color:#C8C8C8;
    background:none;
    border: none;
}
 .pager span.ellipsis:hover{
    cursor:default;
    text-decoration: none;
}

/*--pagerここまで
---------------------------------------------*/



/* ======================================== */

/* ===== WORKS一覧ページ ===== */

/* ======================================== */

.works_wrapper{
  background-color: #a6edeb;
  font-family: "Noto Sans JP", sans-serif;

}
.works_page_wrapper{
  font-family: "Noto Sans JP", sans-serif;
  background-color: #f8f9fa;
}
.works_page_MV{
  position: relative;
  width: 100vw;
  margin-left: -10vw;
}
.works_page_MV img{
  width: 140vw;
  margin-left: -20vw;
}

.works_title_tate{
  position: absolute;
  top: 10vw;
  left: 15vw;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 140%;
  padding: 5% 2% 1% 2%;
  background-color: #fff;
  color: #13dcd4;
  filter: drop-shadow(10px 10px 0 rgba(255, 255, 255, 0.5));
}


.works_about {
  display: flex;
  padding-left: 0;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  padding-bottom: 5%;
  border-bottom: solid 20px #a6edeb;
  margin-bottom: 5%;
}

.works_about h3,.color_skyblue{
  color: #36e1db;
}

.works_about h3{
  margin-top: 10%;
  margin-bottom: -1%;
}

.works_about_p_l{
  color: #464646;
  font-size: 110%;

}
.works_about_p_s{
  text-align: center;
  color: #464646;
  font-size: 100%;
}
.works_about_p_s span{
  background-color: #36e1db;
  font-size: 80%;
  margin-right: 3%;
  color: #fff;
  padding: 0 2%;
  display: inline-block;
}
.works_about_p_s_midashi{
  margin: 10% 0 5% 0;

}
.works_about_url{
  background-color: #36e1db;
  padding: 5% 10%;
  color: #fff;
  display: inline-block;
  border-radius: 60px;

}
.works_about_url:hover{
  transform: translateY(-6px);
  transition: all 0.2s ease;
  filter: drop-shadow(0 6px 0 rgba(54, 225, 219, 0.3));
  
}
.works_about_url a{
  color: #fff;
  
}
.works_about_sub_wraper{
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-top: 5%;
}

.works_about_sub{
  color: #36e1db;
}


.works_mission_right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  gap: 60px; /* アイテム間の余白調整 */
  padding: 3% 0;
  margin-left:9%;
  list-style: none;
  color: #464646;
}




.works_mission_right h3{
  color: #36e1db;
  margin: 0;  
}
.works_mission_p_l{
  font-size: 130%;
  margin: 0;  
  position: relative;
}
.works_mission_p_s{
  font-size: 90%;
  margin: 0;  
  position: relative;
}
.works_mission_sub_yellow{
  background: linear-gradient(transparent 60%, #fff5b4 60%);
}

.works_mission_sub{
  display: flex;
  margin-top: -5%;  
  gap: 10px;
}

.works_Design_right{
  margin: 0 auto;
  margin-top: 10%;
}

.lp_scroll_container {
  width: 100%;
  max-width: 500px; /* スマホ幅想定 */
  height: 800px;     /* 表示エリアの高さ */
  overflow-y: auto;
  border: 1px solid #ccc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 0 auto;
  border-radius: 10px;
}

.lp_scroll_img {
  width: 100%;
  height: auto;
  display: block;
}
.other{
  border-top: solid 2px #a6edeb;
  margin-top: 20%;
  padding-top: 20%;
}

.main-gallery img {
  width: 100%;
  max-height: 100vw;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.main-gallery img .dtp_tirashi{
  margin: 0 30%;
  max-height: 100vw;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.choice-btn {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
  list-style: none;
}

.choice-btn li {
  flex: 0 0 auto;
  cursor: pointer;
}

.choice-btn img {
  height: 60px;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.choice-btn img:hover {
  transform: scale(1.05);
}

.choice-btn img.active {
  outline: 3px solid #28605c;
  border-radius: 6px;
}

.main-gallery_p{
  text-align: center;
  font-size: 90%;
  color: #57939e;
  border-radius: 20px;
}

@media screen and (max-width: 768px) {
.works_wrapper{
  background-color: #a6edeb;
  font-family: "Noto Sans JP", sans-serif;

}
.works_page_wrapper{
  font-family: "Noto Sans JP", sans-serif;
  background-color: #f8f9fa;
}
.works_page_MV{
  position: relative;
  width: 100vw;
  margin-left: 0;
}
.works_page_MV img{
  width: 140vw;
  margin-left: -20vw;
}

.works_title_tate{
  position: absolute;
  top: 16vw;
  left:2vw;
  writing-mode: vertical-rl;
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.5vw;
  padding: 5% 2% 5% 2%;
  background-color: #fff;
  color: #13dcd4;

}


.works_about {
  display: flex;
  padding-left: 0;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  border-bottom: solid 20px #a6edeb;
  padding: 0 10% 10% 10%;
  border-left: solid 40px #a6edeb;
  border-right: solid 40px #a6edeb;
  margin-top: -10px;
}

.works_about h3,.color_skyblue{
  color: #36e1db;
}

.works_about h3{
  margin-top: 10%;
  margin-bottom: -1%;
}

.works_about_p_l{
  color: #464646;
  font-size: 110%;

}
.works_about_p_s{
  color: #464646;
  font-size: 100%;
}
.works_about_p_s span{
  background-color: #36e1db;
  font-size: 80%;
  margin-right: 3%;
  color: #fff;
  padding: 0 2%;
  display: inline-block;

}
.works_about_url{
  text-align: center;
  width: 100%;
  margin: 15% 0 5% 0;
  padding: 5% 0;
  color: #fff;
  display: inline-block;
  border-radius: 40px;
  line-height: 20px;
}

.works_about_url:hover{
  transform: translateY(-6px);
  transition: all 0.2s ease;
  filter: drop-shadow(0 6px 0 rgba(54, 225, 219, 0.3));
  
}
.works_about_url a{
  color: #fff;
  background-color: #36e1db;
}

.works_about_sub{
  color: #36e1db;
  margin: 0;
  text-align: center;
  font-size: 90%;
  line-height: 120%;

}


.works_mission_right {
  display: flex;
  margin-left:0%;
  list-style: none;
  border-left: solid 60px #f8f9fa;
  border-right: solid 60px #f8f9fa;
  }

.works_mission_right h3{
  color: #36e1db;
  margin: 0;  
}
.works_mission_p_l{
    display: inline;
    text-align: center;
    font-size: 130%;
    background-size: 100% 0.9em;
    background-repeat: no-repeat;
    background-position: 0 100%;
    line-height: 2;
}
.works_mission_p_l span{
  background: linear-gradient(transparent 60%, #fff5b4 60%);
}


.works_mission_p_s{
  font-size: 90%;
  margin: 0;  
  position: relative;
}
.works_mission_sub_yellow{
  background: linear-gradient(transparent 60%, #fff5b4 60%);
}

.works_mission_sub{
  display: flex;
  margin-top: -5%;  
  gap: 10px;
}

.works_Design_right{
  margin: 0 auto;
  margin-top: 10%;
}
.lp_scroll_container {
  width: 80%;
  max-width: 500px; /* スマホ幅想定 */
  height: 600px;     /* 表示エリアの高さ */
  overflow-y: auto;
  border: 1px solid #ccc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 0 auto;
  border-radius: 10px;
}

.lp_scroll_img {
  width: 100%;
  height: auto;
  display: block;
}
.other{
  border-top: solid 40px #a6edeb;
  border-left: solid 40px #a6edeb;
  border-right: solid 40px #a6edeb;
  padding-top: 30px;
}
}



/* ======================================== */

/* ===== contactページ ===== */

/* ======================================== */


.contact_inner {
  margin: 0 auto;
  width: 70%;
  padding: 10%;
  margin-bottom: 10%;
}
.contact_inner h1{

}

.contact_inner {
  text-align: left;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}