@charset "UTF-8";
/* ----------------------------------------------------------------
header_logo
---------------------------------------------------------------- */
.header_show, .header_show_mail {
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.header_show.show, .header_show_mail.show {
  opacity: 1;
  pointer-events: auto;
}
/* ----------------------------------------------------------------
FV
---------------------------------------------------------------- */
#fv {
  height: 100vh;
  padding-top: 105px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
#fv .inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#fv .inner .main_txt {
  text-align: center;
  width: 100%;
}
#fv .inner .sub_txt {
  mix-blend-mode: soft-light;
  transform: translate3d(0, 0, 0);
  line-height: 1;
  margin-top: 1.5vh;
}
#fv .kv_tag_area {
  position: absolute;
  bottom: 1.5vh;
  right: 1vw;
  font-size: clamp(1rem, 1vw, 1.5rem);
  opacity: 0;
  animation: cutInAnimation 1s ease forwards 1s;
}
#fv .contact_btn {
  position: absolute;
  width: 15vw;
  max-width: 220px;
  min-width: 150px;
  aspect-ratio: 1;
  left: 3vw;
  top: 4vh;
  opacity: 0;
  animation: cutInAnimation 1s ease forwards 1s;
  z-index: 1000;
}
#fv .contact_btn img.bg {
  width: 100%;
  position: absolute;
  animation: 1s linear infinite rotation;
}
#fv .contact_btn img.txt {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#fv .contact_btn img.txt {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#fv .contact_btn img.txt {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#fv .contact_btn img.txt.tx01{
    width: 72%;
    bottom: auto;
    top: 1%;
}
#fv .contact_btn img.txt.tx02{
      width: 83%;
    top: auto;
    bottom: 18%;
}
#fv .contact_btn a:hover img {
  opacity: 1;
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 1026px) {
  /*PCのみ*/
  #fv .inner .main_txt img {
    height: max(120px, 12vw);
  }
  #fv .inner .main_txt {
    padding: 0 max(45px, 1vw);
    margin-top: -105px;
  }
  #fv .inner .sub_txt {
    font-size: clamp(1rem, 4.4rem, 3.6vw);
  }
}
@media screen and (max-width: 1025px) {
  /*tablet*/
  #fv {
    padding-top: 65px;
    height: calc(var(--vh, 1vh) * 100);
  }
  #fv .inner {
    height: 100%;
    position: relative;
  }
  #fv .inner .main_txt p {
    width: 100%;
  }
  #fv .inner .main_txt {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 max(45px, 1vw);
    margin-top: -65px;
  }
  #fv .contact_btn {
width: 27vw;
        max-width: 150px;
        min-width: 50px;
    top: 1vh;
    right: 5vw;
  }
  #fv .inner .sub_txt {
    font-size: clamp(0.7rem, 4.4rem, 4.5vw);
  }
}
@media screen and (max-width: 767px) {
  /*spのみ*/
  #fv .pc-tablet{
    display: none;
  }
  #fv .inner .main_txt{
    padding:0 20px;
  }
  #fv .inner .main_txt .txt_logo{
            width: 80%;
        max-width: 400px;
  }
  #fv .kv_tag_area {
        font-size: 0.7rem;
        bottom: 1.5vh;
        left: auto;
        color: #9c9c9c;
  }
      #fv .inner .main_txt p {
        width: 100%;
        font-size: 1.3rem;
    }
#fv .contact_btn img.txt.tx01{
         width: 64%;
        bottom: 0;
        top: -4%;
        right: -3%;
}
#fv .contact_btn img.txt.tx02{
      display: none;
}
}
/* ----------------------------------------------------------------
テキストノイズ
---------------------------------------------------------------- */
#fv .inner .main_txt .txt_logo {
  position: relative;
  display: inline-block;
  animation: fade-in_tl ease 1.5s forwards;
  z-index: 1;
  mix-blend-mode: color-burn;
  transform: translate3d(0, 0, 0)
}
#fv .inner .sub_txt {
  position: relative;
  animation: fade-in_tl ease 1.5s forwards;
}
@keyframes fade-in_tl {
  from {
    opacity: 0;
    filter: blur(100px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
#fv .inner .main_txt .txt_logo:before {
  content: "";
  position: absolute;
  width: 100%;
  clip-path: inset(50% 0 48% 0);
  background: url("../img/fv_adept-uil.svg")0 0 no-repeat;
  animation: noise-animation 2s infinite;
  left: 0.2%;
}
#fv .inner .main_txt .sub_txt:before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  clip-path: inset(50% 0 45% 0);
  animation: noise-animation 2s infinite;
  left: 0.4%;
}
@media screen and (min-width: 1026px) {
  /*pc*/
  #fv .inner .main_txt .txt_logo:before {
    height: max(120px, 12vw);
  }
}
@media screen and (max-width: 1025px) {
  /*tablet*/
  #fv .inner .main_txt .txt_logo:before {
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  /*Spのみ*/
#fv .inner .main_txt .txt_logo:before {
  background: url("../img/fv_adept-uil_sp.svg")0 0 no-repeat;
   clip-path: inset(50% 0 40% 0);
    left: 0.4%;
}
}
/* アニメーション本体 */
@keyframes noise-animation {
  0% {
    clip-path: inset(90% 0 8% 0);
  }
  5% {
    clip-path: inset(91% 0 7% 0);
  }
  10% {
    clip-path: inset(89% 0 9% 0);
  }
  15% {
    clip-path: inset(93% 0 5% 0);
  }
  20% {
    clip-path: inset(60% 0 38% 0);
  }
  25% {
    clip-path: inset(55% 0 43% 0);
  }
  30% {
    clip-path: inset(60% 0 38% 0);
  }
  35% {
    clip-path: inset(55% 0 43% 0);
  }
  40% {
    clip-path: inset(91% 0 7% 0);
  }
  45% {
    clip-path: inset(90% 0 8% 0);
  }
  50% {
    clip-path: inset(89% 0 7% 0);
  }
  55% {
    clip-path: inset(5% 0 90% 0);
  }
  60% {
    clip-path: inset(55% 0 43% 0);
  }
  65% {
    clip-path: inset(25% 0 73% 0);
  }
  70% {
    clip-path: inset(28% 0 60% 0);
  }
  75% {
    clip-path: inset(30% 0 68% 0);
  }
  80% {
    clip-path: inset(35% 0 63% 0);
  }
  85% {
    clip-path: inset(90% 0 5% 0);
  }
  90% {
    clip-path: inset(80% 0 18% 0);
  }
  95% {
    clip-path: inset(82% 0 10% 0);
  }
  100% {
    clip-path: inset(87% 0 11% 0);
  }
}
/* ----------------------------------------------------------------
about
---------------------------------------------------------------- */
#about {
  margin-top: 1vw;
  margin-bottom: 8vh;
  opacity: 0;
}
#about.in-view {
  animation: cutInAnimation 1s ease forwards 0.3s;
}
#about .inner {
  padding: 0 60px;
  width: clamp(680px, 80vw, 1320px);
  margin: 0 auto;
}
#about .inner #about_box {
  width: 100%;
  background: #dedede;
  position: relative;
  text-align: center;
  z-index: 0;
}
#about .inner #about_box:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url("../../common/img/bg_pattern01.png");
  background-size: 25px 25px;
  left: 0;
  top: 0;
  opacity: 0.1;
  z-index: -1;
}
#about .inner #about_box .box_inner02 {
  padding: 6vh 3.5% 30px;
}
#about .inner #about_box .box_inner03 {
  opacity: 0;
}
#about .inner #about_box .box_inner03.in-view {
  animation: fade_in_sub 1s ease forwards 0.3s;
}
#about h2.h2_tl {
  margin-bottom: 10px;
}
#about .tl_sub {
  color: #9b9b9b;
  font-size: clamp(1.2rem, 1.2vw, 1.6rem);
  margin-bottom: 3vh;
}
#about .txt {
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  line-height: 2.3;
  margin-bottom: 3vh;
}
#about .inner #about_box .box_inner01, #about .inner #about_box .box_inner02 {
  position: relative;
}
#about .inner #about_box .box_inner01:before, #about .inner #about_box .box_inner02:before, #about .inner #about_box .box_inner01:after, #about .inner #about_box .box_inner02:after {
  content: "";
  position: absolute;
  background: #8d8d8d;
}
#about .inner #about_box .box_inner01:before {
  height: 1px;
  left: -1vw;
  top: 1vw;
}
#about.in-view .inner #about_box .box_inner01:before {
  animation: line01 1.7s ease forwards 1s;
}
@keyframes line01 {
  0% {
    width: 0;
  }
  100% {
    width: 85%;
  }
}
#about .inner #about_box .box_inner02:before {
  height: 1px;
  right: -1vw;
  bottom: 1vw;
}
#about.in-view .inner #about_box .box_inner02:before {
  animation: line02 1.7s ease forwards 1s;
}
@keyframes line02 {
  0% {
    width: 0;
  }
  100% {
    width: 65%;
  }
}
#about .inner #about_box .box_inner01:after {
  width: 1px;
  top: -1vw;
  left: 1vw;
}
#about.in-view .inner #about_box .box_inner01:after {
  animation: line03 1.7s ease forwards 1s;
}
@keyframes line03 {
  0% {
    height: 0;
  }
  100% {
    height: 40%;
  }
}
#about .inner #about_box .box_inner02:after {
  width: 1px;
  bottom: -1vw;
  right: 1vw;
}
#about.in-view .inner #about_box .box_inner02:after {
  animation: line04 1.7s ease forwards 1s;
}
@keyframes line04 {
  0% {
    height: 0;
  }
  100% {
    height: 20%;
  }
}
#about .inner #about_box .under_con {
  margin-top: 6vh;
  display: flex;
  justify-content: space-between;
  gap: 5%;
}
#about .inner #about_box .under_con .box01 {
  display: flex;
  justify-content: space-between;
}
#about .inner #about_box .under_con .box01 .barcode {
  width: 230px;
}
#about .inner #about_box .under_con .box01 .barcode img {
  width: 100%;
}
#about .inner #about_box .under_con .box01 a {
  width: 40px;
}
#about .inner #about_box .under_con .box01 a img {
  width: 100%;
}
#about .inner #about_box .under_con .box02 {
  font-size: 0.6rem;
  text-align: right;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 1025px) {
  /*tablet*/
  #about {
    margin-top: 50px;
    margin-bottom: 8vh;
  }
  #about .inner {
    padding: 0 5%;
    width: 100%;
  }
  #about .inner #about_box .box_inner02 {
    padding: 30px 7.5% 30px;
  }
}
@media screen and (max-width: 767px) {
  /*Spのみ*/
  #about {
    margin-bottom: 60px;
  }
  #about .txt {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: left;
  }
  #about .txt br {
    display: none;
  }
  #about .tl_sub {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }
  #about .inner #about_box .under_con {
    margin-top: 40px;
    display: block;
  }
  #about .inner #about_box .under_con .box01 {
    justify-content: center;
    margin-bottom: 15px;
            align-items: center;
  }
  #about .inner #about_box .under_con .box02 {
    font-size: 0.5rem;
    text-align: left;
  }
  #about .inner #about_box .box_inner01:before {
    left: -1vw;
    top: 1vw;
  }
  #about .inner #about_box .box_inner02:before {
    right: -1vw;
    bottom: 1vw;
  }
  #about .inner #about_box .box_inner01:after {
    top: -1vw;
    left: 1vw;
  }
  #about .inner #about_box .box_inner02:after {
    bottom: -1vw;
    right: 1vw;
  }
  #about .inner #about_box .under_con .box01 .barcode{
    width: 150px;
  }
}
/* ----------------------------------------------------------------
service
---------------------------------------------------------------- */
#service {
  margin-bottom: 120px;
}
#service .tl_area {
  position: relative;
  text-align: center;
}
#service .tl_area .bg_bigtxt {
  font-size: 25.5vw;
  letter-spacing: 0.03em;
  width: 110%;
  margin-left: -5%;
  color: #d1d1d1;
  line-height: 1;
  opacity: 0;
}
#service .tl_area.in-view .bg_bigtxt {
  animation: cutInAnimation 1s ease forwards 0.1s;
}
#service .tl_area .jp_txt {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 50%;
  opacity: 0;
  margin-top: -1rem;
}
#service .tl_area.in-view .jp_txt {
  animation: fade_in_sub 1s ease forwards 0.3s;
}
#service .tl_area .jp_txt span {
  font-size: clamp(1.3rem, 2.3vw, 2.7rem);
  border: solid 3px #000;
  padding: 1rem 3vw;
}
#service #service_area {
  max-width: 1880px;
  width: 100%;
  padding: 70px 60px 0;
  margin: 0 auto;
}
#service #service_area .area_box {
  margin-bottom: 7vw;
  opacity: 0;
  position: relative;
  mix-blend-mode: darken;
}
#service #service_area .area_box.in-view {
  animation: cutInAnimation 1s ease forwards 0.3s;
}
#service #service_area .area_box .txt_area {
  width: 100%;
}
#service #service_area .area_box .txt_area .txt_sub_area{
  width: 70%;
      margin-left: auto;
}
#service #service_area .area_box.area02 .txt_area .txt_sub_area{
      margin-right: auto;
   margin-left: 0;
}
#service #service_area .area_box .animearea {
width: 38%;
    max-width: 800px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    mix-blend-mode: multiply;
    opacity: 0.3;
}
#service #service_area .area_box.area02 .animearea{
      left: auto;
    right: 0;
}
#service #service_area .area_box.area01 .animearea{
      aspect-ratio: 1 / 0.7;
}
#service #service_area .area_box.area03 .animearea{
      aspect-ratio: 1 / 0.7;
}
#service #service_area .txt_area .tl {
font-size: clamp(3.5rem, 5vw, 7.5rem);
    line-height: 1;
    margin-bottom: 30px;
    text-align: right;
  color: #000;
}
#service #service_area .txt_area .tl span.and{
  padding: 0 1%;
}
#service #service_area .area02 .txt_area .tl{
  text-align: left;
}
#service #service_area .txt_area .tl02{
  font-size: clamp(1.7rem, 1.5vw, 3rem);
    line-height: 1;
    margin-bottom: 20px;
    text-align: right;
  color: #a4a4a4;
}
#service #service_area .area02 .txt_area .tl02{
   text-align: left;
}
#service #service_area .txt_area .sub {
  text-align: left;
  border-bottom: dashed 2px #b1b1b1;
  margin-bottom: 20px;
}
#service #service_area .area02 .txt_area .sub{
   text-align: left;
}
#service #service_area .txt_area .sub p {
  color: #A7A7A7;
  font-size: 0.8rem;
  margin-bottom: 5px;
  text-align: right;
}
#service #service_area .area02 .txt_area .sub p{
  text-align: left;
}
#service #service_area .txt_area .txt {
  font-size: 1rem;
  line-height: 1.8;
}
#service #service_area .area01 .anime{
      margin-top: -20%;
      margin-left: -4%;
}
#service #service_area .area03 .anime{
      margin-top: -24%;
  margin-left: -8%;
}
@media screen and (max-width: 767px) {
  /*Spのみ*/
  #service{
    margin-bottom: 40px;
  }
  #service .tl_area .jp_txt {
            margin-top: -1vw;
  }
  #service .tl_area .jp_txt span {
        font-size: 1.2rem;
        border: solid 1px #000;
        padding: 7px 20px;
        letter-spacing: 0.1rem;
  }
  #service #service_area {
    width: 100%;
    padding: 35px 5% 0;
    margin: 0 auto;
  }
  #service #service_area .area_box {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  
  #service #service_area .area_box .txt_area {
    width: 100%;
    position: relative;
    margin-right: 0 !important;
    margin-left: 0 !important;
     order: 2 !important;
    text-align: left;
    padding-top: 20px;
  }
  #service #service_area .area_box .txt_area .txt_sub_area {
    width: 100%;
    margin: 0 auto;
}
  #service #service_area .txt_area .tl{
        letter-spacing: 0;
        line-height: 14vw;
        font-size: 12vw;
        position: absolute;
        margin: 0;
        color: #adadad;
            mix-blend-mode: soft-light;
      /*text-shadow    : 
       2px  2px 1px #e7e7e7,
      -2px  2px 1px #e7e7e7,
       2px -2px 1px #e7e7e7,
      -2px -2px 1px #e7e7e7,
       2px  0px 1px #e7e7e7,
       0px  2px 1px #e7e7e7,
      -2px  0px 1px #e7e7e7,
       0px -2px 1px #e7e7e7;  */

  }
  #service #service_area .area_box.area01 .tl{
            right: 0;
            top: -44vw;
  }
   #service #service_area .area_box.area02 .tl{
            left: 0;
             top: -30vw;
  }
   #service #service_area .area_box.area03 .tl{
            right: 0;
       top: -30vw;
  }
  #service #service_area .txt_area .tl02 {
    font-size: 1.3rem;
    line-height: 1;
    margin-bottom: 15px;
    text-align: center !important;
    color: #000;
}
  #service #service_area .txt_area .sub p{
    font-size: 0.6rem;
    margin-bottom: 0;
    position: static;
    text-align: left;
  }
  #service #service_area .txt_area .sub{
    margin-bottom: 15px;
border: dashed 1px #b1b1b1;
        padding: 5px 10px;
  }
  #service #service_area .area_box .animearea {
    order: 1 !important;
    width: 80%;
    max-width: 500px;
    position: static;
    opacity: 0.3;
      mix-blend-mode:unset;
  }
  #service #service_area .area_box.area01 .animearea{
            margin-left: 0;
  }
    #service #service_area .area_box.area02 .animearea{
            margin-right: 0;
  }
    #service #service_area .area_box.area03 .animearea{
        margin-left: 0;
  }
  #service #service_area .txt_area .txt{
        font-size: 0.9rem;
  }
  #service .tl_area .bg_bigtxt{
    line-height: 0.8;
  }
  #service .tl_area .jp_txt{
            margin-top: -0.8rem;
  }
}
/* ----------------------------------------------------------------
WORKS
---------------------------------------------------------------- */
#works {
  width: 100%;
  background: #000;
  border-radius: 5vw;
}
#works .inner {
  max-width: 1380px;
  width: 100%;
  padding: 70px 60px 10vh;
  margin: 0 auto;
}
#works .inner h2.h2_tl {
  color: #fff;
  margin-bottom:10px;
  text-align: center;
}
#works .inner .tl_sub{
    color: #9b9b9b;
    font-size: clamp(1.2rem, 1.2vw, 1.6rem);
    margin-bottom: 6vh;
  text-align: center;
}
#works #works_list ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#works #works_list ul li {
  width: 47%;
  margin-bottom: 45px;
  opacity: 0;
}
#works #works_list ul li.in-view {
  animation: cutInAnimation 1s ease forwards 0.3s;
}
#works #works_list ul li img {
  width: 100%;
  height: auto;
}
#works #works_list ul li a {
  color: #c8c8c8;
  font-weight: 100;
  font-style: normal;
  text-decoration: none;
}
#works #works_list ul li a p {
  transition: 0.3s ease;
  position: relative;
  display: inline-block;
}
#works #works_list .tag_area a {
  position: relative;
}
#works #works_list ul li a p::before, #works #works_list .tag_area a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}
#works #works_list ul li .tl {
  font-size: 1.1rem;
  margin: 20px 0 5px;
}
#works #works_list ul li .tag_area {
  font-size: 0.8rem;
  font-family: noto-sans-cjk-jp, sans-serif;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
#works #works_list .btn {
  margin: 0;
}
#works #works_list .btn a {
  color: #fff;
  border: solid 1px #fff;
  margin-bottom: 40px;
}
#works #works_list .btn a:before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
@media screen and (min-width: 1026px) {
  /*PCのみ*/
#works #works_list ul li a:hover p::before, #works #works_list .tag_area a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}
#works #works_list .btn a:hover {
  background: #fff;
  color: #000;
}
#works #works_list .btn a:hover:before {
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
}
#works .under_txt {
  color: #fff;
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  /*spのみ*/
  #works {
  border-radius: 10px;
}
  #works #works_list ul li {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 30px;
    font-size: 0.9rem;
  }
  #works .inner .tl_sub{
        font-size: 0.9rem;
        margin-bottom: 30px;
}
  #works #works_list ul li .tl {
    margin-top: 13px;
            margin-bottom: 0;
            font-size: 0.9rem;
  }
  #works .inner {
    padding: 35px 5% 10vh;
  }
  #works .under_txt{
    font-size: 0.9rem;
  }
}
/* ----------------------------------------------------------------
contact
---------------------------------------------------------------- */
#contact {
  margin-top: -5vh;
  padding: 0 60px;
}
#contact .inner {
  /*font-family: noto-sans-cjk-jp, sans-serif;*/
  font-weight: 400;
  font-style: normal;
  max-width: 1000px;
  background: #FFFF3C;
  margin: 0 auto 0;
  padding: 60px 60px 80px;
  position: relative;
  margin-bottom: 10vh;
}
#contact .inner:before {
  content: "";
  position: absolute;
  background: url("../img/contact_tl.svg")0 0 no-repeat;
  height: 26vw;
  width: 5vw;
  background-size: contain;
  right: -2vw;
  bottom: 20px;
}
#contact .inner .contact_area {
  max-width: 590px;
  margin: 0 auto;
  width: 100%;
}
#contact .inner .donnuy {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.8;
  /*font-family: "Shuei Nijimi Go Gin B", "noto-sans-cjk-jp", sans-serif;*/
  position: relative;
  padding-top: 75px;
  margin-bottom: 40px;
  text-align: center;
}
#contact .inner .donnuy:before {
  position: absolute;
  content: "";
  width: 115px;
  height: 49px;
  top: 0;
  margin: 0 auto 0;
  left: 0;
  right: 0;
  background: url("../../common/img/icon_mail.svg")0 0 no-repeat;
  background-size: contain;
}
#contact .mailform dl {
  margin-bottom: 30px;
}
#contact .mailform dt {
  font-size: 1rem;
  margin-bottom: 10px;
}
#contact .mailform dt span {
  color: #C10000;
}
#contact .mailform dd input, #contact .mailform dd textarea {
  background: #fff;
  border: solid 1px #CBCBCB;
  width: 100%;
  padding: 15px 10px;
  font-size: 1rem;
}
#contact .mailform dd textarea {
  height: 200px;
}
#contact ::placeholder {
  color: #d1d1d1;
  font-weight: 300;
}
#contact .mailform dl#contacttype dd .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
  align-content: center;
}
#contact .mailform dl#contacttype dd > p{
  width: 100%;
  display: block;
}
#contact .mailform dl#contacttype dd span label{
  display: flex;
  align-items: center;
}
#contact .mailform dd input[type=checkbox] {
  width: auto;
  margin-right: 5px;
}
#contact .mailform dl#contacttype dd span label span {
  font-size: 0.8rem;
}
#contact .btn_submit {
  display: block;
  width: 400px;
  letter-spacing: 0.2rem;
  margin: 50px auto 0;
  font-size: 1.2rem;
  color: #000;
  position: relative;
  border: solid 1px #000;
  border-radius: 30px;
  cursor: pointer;
  padding: 0;
}
#contact .btn_submit p{
  text-align: center;
}
#contact .btn_submit input[type=submit]{
 transition: 0.2s ease-out;
  letter-spacing: 0.2rem;
      width: 100%;
    height: 100%;
    display: block;
    padding: 15px 40px;
}
#contact .btn_submit:before {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (min-width: 1026px) {
  /*PCのみ*/
#contact .btn_submit:hover:before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
  #contact .btn_submit:hover input[type=submit]{
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
  /*spのみ*/
  #contact {
    padding: 0 5%;
  }
  #contact .inner {
    padding: 30px 7.5% 35px;
    position: relative;
    margin-bottom: 50px;
  }
  #contact .inner .donnuy:before {
    width: 100px;
    height: 45px;
  }
  #contact .inner .donnuy {
    padding-top: 55px;
    margin-bottom: 30px;
            font-size: 0.9rem;
  }
  #contact .mailform dt{
     font-size: 0.9rem;
  }
#contact .btn_submit {
    width: 100%;
    max-width: 450px;
    margin-top: 0;
    font-size: 1rem;
  }
  #contact .btn_submit input[type=submit]{
        padding: 12px 40px;
    color: #000;
  }
  #contact .mailform dl#contacttype dd .wpcf7-checkbox{
    display: block;
  }
  #contact .mailform dl#contacttype dd .wpcf7-checkbox > span{
    margin-bottom: 5px;
    display: block;
  }
  #contact .inner:before {
    content: none;
  }
}
/* ----------------------------------------------------------------
contactエラー
---------------------------------------------------------------- */
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output{
  display: none;
}
.wpcf7-response-output{
color: #fff;
    margin-bottom: 20px;
    text-align: center;
    background: #C10000;
    padding: 10px;
}
.screen-reader-response{
  display: none;
}
.wpcf7-not-valid-tip{
      color: #C10000;
    margin-top: 5px;
    display: block;
}
@media screen and (max-width: 767px) {
  /*Spのみ*/
  .screen-reader-response,
  .wpcf7-not-valid-tip{
    font-size: 0.9rem;
  }
}
/* ----------------------------------------------------------------
profile
---------------------------------------------------------------- */
#profile {
  max-width: 1120px;
  width: 100%;
  padding: 0 60px;
  margin: 0 auto 7VH;
}
#profile .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
#profile .inner .pro_ime {
  width: 200px;
  mix-blend-mode: darken;
  opacity: 0.9;
}
#profile .inner .pro_ime img {
  width: 100%;
}
#profile .inner .pro_txt {
  width: 670px;
}
#profile .inner .pro_txt dl {
  border-top: dashed 2px #b1b1b1;
  padding: 20px 15px;
  display: flex;
  font-size: 1.1rem;
}
#profile .inner .pro_txt dl.last {
  padding-bottom: 0;
}
#profile .inner .pro_txt dt {
  margin-right: 15px;
  width: 5em;
}
#profile .inner .pro_txt dd {
  display: flex;
}
#profile .inner .pro_txt dd span {
  font-size: 0.9rem;
}
#profile .inner .pro_txt dd img {
  width: 27px;
}
#profile .inner .pro_messeage {
  border-bottom: dashed 2px #b1b1b1;
  padding: 20px 15px 30px;
  font-size: 1rem;
  line-height: 1.8;
}
#profile .inner .pro_messeage p {
  margin-bottom: 30px;
}
#profile .inner .pro_messeage .btn {
  margin-bottom: 0;
}
#profile .inner .pro_messeage .btn a {
  background: #000;
  border: none;
  color: #fff;
  border-radius: 30px;
  font-size: 1rem;
  padding: 15px 40px;
}
#profile .inner .pro_messeage .btn a:before {
  content: "";
  border: none;
  transform: none;
  background: url("../../common/img/icon_tg_blank.png")0 0 no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  right: 15px;
}
@media screen and (min-width: 1026px) {
  /*PCのみ*/
#profile .inner .pro_messeage .btn a:hover {
  background: #fff;
  color: #000;
}
#profile .inner .pro_messeage .btn a:hover:before {
  content: "";
  border: none;
  transform: none;
  background: url("../../common/img/icon_tg_blank_b.png")0 0 no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  right: 15px;
}
}
@media screen and (max-width: 767px) {
  /*Spのみ*/
  #profile {
    max-width: 1120px;
    padding: 0 5%;
    margin: 0 auto 0;
  }
  #profile .inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }
  #profile .inner .pro_ime {
    margin-bottom: 30px;
    width: 40%;
    max-width: 200px;
  }
  #profile .inner .pro_ime img {
    width: 100%;
  }
  #profile .inner .pro_txt {
    width: 100%;
  }
  #profile .inner .pro_txt dl, #profile .inner .pro_messeage {
    padding: 15px 5%;
  }
  #profile .inner .pro_txt dt {
    width: 4em;
  }
  #profile .inner .pro_txt dt, #profile .inner .pro_txt dd {
    font-size: 1rem;
  }
  #profile .inner .pro_messeage {
    font-size: 0.9rem;
    padding-bottom: 30px;
  }
  #profile .inner .pro_messeage .btn a {
    border-radius: 45px;
    font-size: 1rem;
    padding: 10px 30px;
    line-height: 1.4;
    width: 100%;
    max-width: 450px;
  }
}

/* ----------------------------------------------------------------
汎用性アニメーション
---------------------------------------------------------------- */
@keyframes fade_in_sub {
  from {
    opacity: 0;
    filter: blur(100px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes cutInAnimation {
  0% {
    transform: translateY(20%);
    /* 要素を下から完全に非表示の位置に移動 */
    opacity: 0;
    /* 不透明度を0に設定 */
  }
  100% {
    transform: translateY(0);
    /* 要素を下から元の位置に移動 */
    opacity: 1;
    /* 不透明度を1に設定 */
  }
}