@charset "utf-8";
/*@import url("×××.css");*/

/*========================================*/
/* common*/
/*========================================*/
/*Section*/
.inner {
	width: 100%;
	padding-inline-start: clamp(20px, 3.90625vw + 2px, 100px); /*w1024 → 左右100px*/
	padding-inline-end: clamp(20px, 3.90625vw + 2px, 100px); /*w1024 → 左右100px*/
}
.row {
  display: flex;
  flex-direction: column;
  align-items: center;
	width: 100%;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
	width: 100%;
}
.sec_ttl {
  margin-block: 0 var(--space-sm);
	line-height: 1;
}
.sec_cont {
  display: flex;
  flex-direction: column;
	width: 100%;
}
@media screen and (min-width: 768px) {
  .row {
    flex-direction: row;
    align-items: flex-start;
  }
	.col {
  align-items: flex-start;
}
  :not(.col) > .sec_ttl {
    flex: 0 1 45%;
  }
  :not(.col) > .sec_cont {
    flex: 0 1 55%;
    display: flex;
    flex-direction: row;
  }
}
@media screen and (min-width: 1440px) {

}



/*========================================*/
/* project*/
/*========================================*/

/* HERO
========================================*/
.tp_hero {
	width: 100%;
  min-height: 100vh;
	/*height: 100svh;*/
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.tp_hero .logo {
	width: 100%;
	padding-inline-start: clamp(20px, 3.90625vw + 2px, 100px); /*w1024 → 左右100px*/
	padding-inline-end: clamp(20px, 3.90625vw + 2px, 100px); /*w1024 → 左右100px*/
}
.tp_hero .logo img {
	width: 100%;
	max-width: 200px;
	height: auto;
}
.hero_top {
	width: 100%;
}
.hero_top .letter {
	width: 100%;
	font-family: "helvetica-neue-lt-pro-cond";
	/*font-size: 10.416666666666668vw;*/
	font-size: calc(50px + 146 * ((100vw - 320px) / 1600));/*w320～w1920は24から32px可変　※1600は最大w1920-最小w320*/
  letter-spacing: -.01em;
	white-space: nowrap;
	text-indent: clamp(20px, 3.90625vw + 2px, 100px); /*w1024 → 左右100px*/
  line-height: 100%;
  /*color: rgb(182, 182, 182, 1);*/
	color: rgb(0, 0, 0, 1);
  background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;
  /*border-bottom: 1px solid #2F2B28;*/
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}
.hero_top span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #4246ce;
  color: #0D0D0D;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(.1,.5,.5,1) 0.4s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero_top .letter:hover > span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.hero_under {
	width: 100%;
	padding-inline-start: clamp(20px, 3.90625vw + 2px, 100px); /*w1024 → 左右100px*/
	padding-inline-end: clamp(20px, 3.90625vw + 2px, 100px); /*w1024 → 左右100px*/
	display: flex;
  flex-direction: column;
}
.hero_under .address {
		order: 2;
	margin-top: var(--space-sm);
	}
	.hero_under .txt {
		order: 1;
	}
.hero_under .address p {
	line-height: 1.5;
}
@media screen and (min-width: 1024px) {
	.tp_hero {
	justify-content: space-between;
}
.hero_under {
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	padding-block-end: 100px;
  }
	.hero_under .address {
		order: 1;
	}
	.hero_under .txt {
		order: 2;
	}
}
/*chrome以外適用*/
@supports (-webkit-touch-callout: none) {
  .tp_hero {
    min-height: -webkit-fill-available;
  }
}

/* MESSAGE
========================================*/
.tp_message {
	padding-block-start: clamp(60px, 9.765625vw + 2px, 150px); /*w1024 → 上下100px*/
}
.tp_message .txt {
	width: 100%;
	max-width: var(--width-sm);
}
.tp_message .txt p {
	line-height: 2.4;
}
.tp_message .txt p:last-child {
	line-height: 2;
	text-align: right;
}
@media screen and (min-width: 768px) {
.tp_message .txt p {
	margin-top: -.3em;
}
}

/* ABOUT
========================================*/
.tp_about {
	max-width: var(--width-lg);
	padding-block-start: clamp(60px, 9.765625vw + 2px, 150px); /*w1024 → 上下100px*/
}
.tp_about .txt h3 {
	font-size: 11.875vw; /*320px →　font-size: 38px;*/
	line-height: 1.1;
  margin-block: 0 var(--space-sm);
}

@media screen and (min-width: 320px) {
	.tp_about .txt h3 {
		font-size: calc(38px + 58 * ((100vw - 320px) / 704));/*w320～w1024は38から96px可変　※704は最大w1024-最小w320*/
	}
}
@media screen and (min-width: 1024px) {
	.tp_about .txt h3 {
		font-size: 6rem;/*96px*/
	}
}
@media screen and (min-width: 1025px) {
	.tp_about .txt h3 {
		font-size: calc(96px + 39 * ((100vw - 1025px) / 415));/*w1025～w1440は96から135px可変　※416は最大w1440-最小w1024*/
	}
}
@media screen and (min-width: 1440px) {
	.tp_about .txt h3 {
		font-size: 8.4375rem;/*135px 135/16=8.4375*/
	}
}

/* GALLERY
========================================*/

  [class*=swiper]:focus {
    outline: none;
  }

  .slide-media,
  .thumb-media {
    position: relative;
    overflow: hidden;
  }
  .slide-media img,
  .thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .swiper-button-prev, .swiper-button-next {
    display: grid;
    place-content: center;
    width: 6.4rem;
    height: 6.4rem;
    cursor: pointer;
    -webkit-transition: all .8s cubic-bezier(.2, 1, .2, 1);
    transition: all .8s cubic-bezier(.2, 1, .2, 1);
  }
  .swiper-button-prev::before, .swiper-button-next::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: 50%;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
  }
  .swiper-button-prev::after, .swiper-button-next::after {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    border: solid var(--color-gray);
    border-width: 3px 3px 0 0;
  }
  .swiper-button-prev::after {
    margin-left: 0.4rem;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  .swiper-button-next::after {
    margin-right: 0.4rem;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
  }

  .gallery {
	  padding-block-start: clamp(30px, 4.8828125vw + 2px, 100px); /*w1024 → 上下50px*/
  }
  .gallery .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
            transition-timing-function: linear !important;
  }
  .gallery .swiper-slide {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  .gallery .slide {
    width: var(--slide-width);
    -webkit-transition: all .8s cubic-bezier(.2, 1, .2, 1);
    transition: all .8s cubic-bezier(.2, 1, .2, 1);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    --slide-width: 200px;
  }
  .gallery .slide-media {
    height: var(--slide-width);
  }
  .gallery .slide-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 3.2rem 1.6rem 1.6rem;
    -webkit-transition: all .8s cubic-bezier(.2, 1, .2, 1);
    transition: all .8s cubic-bezier(.2, 1, .2, 1);
    opacity: 0;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.3)));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%);
  }
  .gallery .slide-title {
    font-size: 1.4rem;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .gallery .slide:hover {
    width: calc(var(--slide-width) * 1.5);
  }
  .gallery .slide:hover .slide-content {
    opacity: 1;
  }

  @media only screen and (max-width: 599px) {
    .gallery {
    }
    .gallery .slide {
      width: var(--slide-width);/*: 120px*/
    }
  }

  @media only screen and (min-width: 1025px) {
    .swiper-button-prev::before, .swiper-button-next::before {
      -webkit-transition: all .8s cubic-bezier(.2, 1, .2, 1);
      transition: all .8s cubic-bezier(.2, 1, .2, 1);
    }
    .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
  }

/* SERVICE
========================================*/
.tp_service {
	padding-block-start: clamp(60px, 9.765625vw + 2px, 150px); /*w1024 → 上下100px*/
}
.service_list {
}
.service_list li {
	display: flex;
	  flex-direction: column;
	width: 100%;
	margin-block: 0 var(--space-md);
}
.service_list li:last-child {
	margin-block: 0 0;
}
.service_list li .ttl {
	container-type: inline-size;
	display: flex;
  align-items: center;
	justify-content: space-around;
	flex-direction: column;
  margin-block: 0 var(--space-sm);
}
.service_list li .ttl img {
	display: inline-block;
	width: 100%;
	max-width: 110px;
	height: auto;
}
.service_list .ttl h2 {
	font-size: 7.5vw;/*24px*/
	font-weight: 500;
	line-height: 1.1;
}
.service_list li .txt h3 {
	 margin-block: 0 10px;
  font-weight: 500;
	line-height: 1.5;
}
.service_list li .txt p > span {
	display: inline-block;/*単語で改行*/
}



@media screen and (min-width: 320px) {
	.service_list .ttl h2 {
		 font-size: calc(24px + 8 * ((100vw - 320px) / 704));/*w320～w1024は24から32px可変　※704は最大w1024-最小w320*/
	}
}
@media screen and (min-width: 768px) {
	.tp_service .sec_ttl {
	flex: 0 1 30%;
}
.tp_service .sec_cont {
	flex: 0 1 70%;
}
  
}
@media screen and (min-width: 1024px) {
	.service_list li {
		display: flex;
	  flex-direction: row;
    justify-content: space-between;
  }
  .service_list li .ttl {
	  width: 30%;
	  container-type: inline-size;
  }
	.service_list .ttl h2 {
	font-size: 10cqw;
}
  .service_list li .txt {
	  flex: 1;
	  margin-left: 2em;
  }
	}
@media screen and (min-width: 1440px) {
	.service_list li .ttl {
		display: flex;
	  flex-direction: row;
	  margin-block: 0 0;
  }
}

/* COMPANY
========================================*/
.tp_company {
	padding-block-start: clamp(60px, 9.765625vw + 2px, 150px); /*w1024 → 上下100px*/
}
.dl_list {
  padding-block: clamp(16px, 0.71428vw + 6.85px, 24px);/*w320 → 上下16px　w1440 → 上下24px*/
  border-top: 1px solid #ccc;
	line-height: 2;
}
.dl_list:last-child {
  border-bottom: 1px solid #ccc;
}
.dl_list dt {
  padding-bottom: 5px;
}
.dl_list dd span {
	display: inline-block;
}
@media screen and (min-width: 768px) {
  .companyList {
    max-width: 800px;
  }
  .dl_list {
    display: flex;
	  justify-content: space-between;
  }
  .dl_list dt {
    flex: 0 1 20%;
  }
  .dl_list dd {
    flex: 1 0 80%;
  }
}





/* マウスストーカーのスタイル */
.mouse-stalker {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

.outer-ring {
  width: 80px;
  height: 80px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.inner-ring {
  width: 10px;
  height: 10px;
  background-color: rgb(155, 189, 4);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
}

/* ==========================
  WEBアイコン
========================== */

/* 外部リンク */
a[href^="http://"]:before
{
  font-family: "";
  content: "";
  color: #3cc;
  margin: 0 3px;
}


/* ダウンロードファイル */
a[href$=".zip"]:before {
  font-family: "";
  content: "";
  color: #f9c;
  margin: 0 3px;
}


a[href$=".pdf"]::before {
  content: "";
  display: inline-block;
  width: 20px; /* アイコンの幅 */
  height: 20px; /* アイコンの高さ */
  background: url('../../images/common/ic_pdf.png') no-repeat; /* アイコン画像 */
  background-size: contain;
  margin-left: 10px; /* テキストとの間隔 */
  vertical-align: middle;
}





/*初回アクセス時ポップアップウィンドウ表示*/
.popup {
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  position:fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transition: .4s ease;
}
 .popup.open {
   opacity: 0;
   visibility: hidden;
   z-index: -1;
 }
.popup_wrap {
  max-width: 680px;
  width:85%;
  padding-block: clamp(20px, 0.35vw + 6.85px, 60px);
　padding-inline: clamp(20px, 0.35vw + 6.85px, 60px);
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background: #fdfdfd;
	border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.popup_wrap h3,
.popup_wrap p {
  /*padding-bottom: 20px;*/
	padding-block-end: clamp(12px, 0.071vw + 6.85px, 20px);
}

.popup_wrap a span {background:linear-gradient(transparent 60%, #ff6 60%);}
.popup_wrap img {
	display: inline-block;
	max-width: 180px;
	width: 100%;
	height: auto;
	padding-block: clamp(12px, 0.071vw + 6.85px, 20px);
}

/*ボタン*/
a.btn,
.btn {
	margin-block: clamp(15px, 0.13vw + 6.85px, 30px)　0;/*w320 → 15px　w1440 → 30px*/
	padding-block: clamp(10px, 0.44vw + 6.85px, 15px);/*w320 → 上下10px　w1440 → 上下15px*/
	padding-inline: clamp(50px, 4.46vw + 6.85px, 100px);/*w320 → 左右50px　w1440 → 左右100px*/
  font-size: inherit;
  line-height: 1;
  transition: all 0.3s;
  cursor: pointer;
	white-space: nowrap;
}
a.btn,
.btn {
  color: #fff;
  background: #000;
  border-radius: 999px;
}
a.btn:hover,
.btn:hover {
  background: #777;
}

/* ホバー可能なデバイスでのみ適用される */
@media (any-hover: hover) {
  a.btn:hover,
.btn:hover {
    background: #555;
  }
}


/* リンクスタイル　テキスト先頭にビュレット */
.linkTxt a:link {
  color: inherit;
}
.linkTxt a:hover {
color: inherit;
}
.linkTxt .txt {
  display: flex; /* テキストと疑似要素を横並びにする */
  align-items: center; /* 上下中央に揃える */
}
.linkTxt .txt::before {
  width: 0; /* 初期表示は表示しないようにする */
  height: 0;
  content: "";
  background-color: transparent;
  border-radius: 50%;
  transition: 0.3s;
}
.linkTxt .txt:hover::before {
  width: 0.5em; /* ホバー時に表示 */
  height: 0.5em;
  margin-right: 10px;
  background: #000;
}