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

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

   nav

**************************************/
header.is-top {
  transform: translateY(-100%);               /* ← top ではなく transform を使う */
  transition: transform 0.8s ease;            /* ← お好みで 0.6〜1.0s 程度に */
  will-change: transform;  
}
/* トップページ：表示状態のときに付けるクラス */
header.is-top.active {
  transform: translateY(0);
}

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

   header

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

#front_header{
	position: relative;
}


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

  テキスト部分

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

.header_container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 3em auto;	
}
.visuallyHidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.header_text {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-transform: uppercase;
	letter-spacing: 6px;
	color: #000
}
.char {
	overflow: hidden!important;
}
.char-text {
	display: inline-block;
	transform: translateX(var(--x, -101%));
	transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(0.05s * var(--char-index));
	font-size: 3em;
	font-weight: 900;
	line-height: 1;
}
/* is-activeがついたらスライドイン */
.header_text.is-active .char-text {
  --x: 0;
}



@media (min-width:480px){
	.char-text {
		font-size: 4em;
	}
}
@media (min-width:1000px){
	.header_container {
		margin: 5em auto;
	}
	.header_text {
		letter-spacing: 10px;
	}
	.char-text {
		font-size: 5em;
	}
}
@media (min-width:1400px){
	.header_container {
		margin: 8em auto;
	}
	.header_text {
		letter-spacing: 15px;
	}
	.char-text {
		font-size: 6em;
	}
}

/*　改行処理 */
.whitespace {
  display: inline-block;
  width: 3em; /* 通常時はスペース扱い */
}
@media (max-width:1000px) {
  .whitespace {
    display: inline-block;
    width: 100%;   /* 強制的に改行 */
    height: 0;
    content: "";   /* 念のためブロック確保 */
  }
}

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

  header_img

-------------------------*/
/*.parallax {
	border-radius: 1.5em;
	overflow: hidden;
}
.parallax figure{
	width: 100%;
	height: 400px;
}
.parallax figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width:1200px){
	.parallax {
		position: relative;
		height: 100vh;
		max-height: 800px;
	}
	.parallax figure{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}
	.parallax figure img {
		height: 125%;
		transform: translateY(0);
		transition: transform 0.1s linear;
		will-change: transform;
	}
}*/
#front_slide{
	overflow: hidden;
	border-radius: 1em;
}
#front_slide .swiper-slide-active .slide-img,
#front_slide .swiper-slide-duplicate-active .slide-img,
#front_slide .swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@media (max-width:999px){
	.slide_pc{
		display: none
	}
}
@media (min-width:1000px){
	.slide_sp{
		display: none
	}
}


#front{
	overflow: hidden;
}


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

   profile

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

#front_profile{
	border-radius: 1em;
	margin: 10px auto;
	padding: 5em 0;
	overflow: hidden;
}
#front_profile .flex{
	justify-content: center;
	position: relative;
	align-items: center;
}
#front_profile p{
	width: 100%;
	max-width: 250px;
	margin: 1em 0;
	color: #fff;
	font-size: 14px;
	font-weight: lighter;
}
#front_profile figure{
	width:90%;
	margin: 3em auto;
	position: relative;
	text-align: center;
}
#front_profile figure:before,
#front_profile figure:after{
	display: block;
	color: #fff;
	font-family: var(--en-font2);
	font-size: 4em;
	position: absolute;
}
#front_profile figure:before{
	content: 'ABOUT';
}
#front_profile figure:after{
	content: 'KANON';
}
@media (min-width:480px){
	#front_profile figure:before,
	#front_profile figure:after{
		font-size: 5.5em
	}
}
@media (max-width:767px){
	#front_profile figure:before{
		top: 0;
		left: -10%;
	}
	#front_profile figure:after{
		bottom: 0;
		right: -10%;
	}
}
@media (min-width:768px){
	#front_profile p{
		max-width: 400px;
	}
	#front_profile figure:before,
	#front_profile figure:after{
		font-size: 6em
	}
	#front_profile figure:before{
		top: 0;
		right: 100%;
		transform: translateX(100%);
	}
	#front_profile figure:after{
		bottom: 0;
		left: 100%;
		transform: translateX(-100%);
	}
	
}
@media (min-width:1000px){
	#front_profile p{
		max-width: 250px;
	}
	#front_profile figure{
		max-width:450px;
	}
	#front_profile figure:before{
		top: -20px;
		transform: translateX(50%);
	}
	#front_profile figure:after{
		bottom: -20px;
		transform: translateX(-50%);
	}
	
}
@media (min-width:1200px){
	#front_profile p{
		max-width: 330px;
	}
}
@media (min-width:1400px){
	#front_profile{
		margin: 20px auto;
	}
	#front_profile figure{
		margin: 3em 20px
	}
	#front_profile figure:before{
		top: -20px;
		transform: translateX(30%);
	}
	#front_profile figure:after{
		bottom: -20px;
		transform: translateX(-30%);
	}
}

#front_profile .btn1{
	background: #000;
}
#front_profile .btn1:after{
	background: var(--main-color);
}


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

   works

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

.works_grid_wrap{
	display: grid;
	gap:8px;
}
@media (min-width:1000px){
	.works_grid_wrap{
		gap:20px;
	}
}
.works_grid_wrap li{
	border-radius: 10px;
	overflow: hidden;
}
.works_grid_wrap li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

/* Lightbox2の画像を中央配置 */
#lightbox{
	top: 0!important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.lb-outerContainer {
  display: flex !important;
  justify-content: center;
  align-items: center;
  
}

/* Lightboxの全体ラッパーを固定表示に */
#lightboxOverlay, #lightbox {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 背景を固定（スクロール禁止） */
body.lb-disable-scrolling {
  overflow: hidden;
}

/* 背景の色や透明度調整（任意） */
#lightboxOverlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

.lightbox .lb-image{
	
}


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

  works_grid1

-------------------------*/
#works_grid1 li:nth-of-type(5){
		grid-column: 1 / 3;
	}

@media (max-width: 767px) {
	#works_grid1 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
	
}
@media (min-width: 768px) {
	#works_grid1 {
	  grid-template-columns: repeat(3, 1fr);
	  grid-template-rows:  repeat(2, 1fr);
	}
	#works_grid1 li:nth-of-type(4){
		order: 5
	}
	#works_grid1 li:nth-of-type(5){
		order: 4
	}
}

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

  works_grid2

-------------------------*/
#works_grid2 li:nth-of-type(1){
	grid-column: 1 / 3;
}


@media (max-width: 767px) {
	#works_grid2{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
	}
	#works_grid2 li:nth-of-type(8){
		grid-column: 1 / 3;
		grid-row:5 / 8
	}
	
}
@media (min-width: 768px) {
	#works_grid2  {
	  grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}
	#works_grid2 li:nth-of-type(8){
		grid-column: 3 / 5;
		grid-row:2 / 4
	}
	
}


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

  works_grid3

-------------------------*/
#works_grid3{
	margin: 8px 0
}

@media (min-width:1000px){
	#works_grid3{
		margin:20px 0;
	}
}


@media (max-width: 767px) {
	#works_grid3{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr 1fr 2fr
	}
	#works_grid3 li:nth-of-type(3){
		grid-column: 1 / 3;
		grid-row:2 / 3
	}
	#works_grid3 li:nth-of-type(4){
		grid-column: 1 / 3;
		grid-row:3 / 4
	}
	
}
@media (min-width: 768px) {
	#works_grid3  {
	  grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	#works_grid3 li:nth-of-type(3){
		grid-column: 3 / 5;
		grid-row:2 / 3
	}
	#works_grid3 li:nth-of-type(4){
		grid-column: 1 / 3;
		grid-row:1 / 3
	}
	
}


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

   text-slide

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

.text_bg{
	background: #000;
	overflow: hidden;
}
.loop-wrap{
	display: flex;
	align-items: center;
}
.loop-area,
.loop-area2{
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1;
}
.loop-area{
	animation: loop-slide 40s infinite linear 1s both;
}
.loop-area2{
	animation: loop-slide2 40s infinite linear 1s both;
}

.loop-wrap .content{
	font-size: 3em;
	font-family: var(--en-font2);
	color: #fff;
	margin-right:20px;
	line-height: 1
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide2 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@media (min-width:768px){
	.loop-area .content {
		font-size: 4em;
	}
}
@media (min-width:1400px){
	.loop-area .content {
		font-size: 5em;
	}
}

#works_obi{
	margin: 1em 0;
}


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

   more_btn

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

#more{
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	padding-top: 1em;
}

.more_btn_wrap{
	justify-content: center;
	margin: 5em auto 2em;
}
.more_btn{
	margin: 1em;
	text-align: center;
}
.more_text{
	position: relative;
	margin-bottom: 50px;
}
.more_text *{
	color: #fff;
}
.more_text span{
	font-size: 1.5em;
	font-weight: bold;
	display: block;
	line-height: 1.3;
	letter-spacing: .5px;
}
.more_text:after{
	content: '';
    background: #fff;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    display: block;
    width: 15px;
    height: 13px;
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
}

#more_make .btn1:after{
	background: #ca00ff
}

#more_prosthetic .btn1{
	background: var(--green);
}
#more_prosthetic .btn1:after{
	background: #b5ce02
}

#more_video .btn1{
	background: var(--pink);
}
#more_video .btn1:after{
	background: var(--main-color)
}



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

   footer

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


#footer_img img{
	min-height: 250px;
}
#contact_area{
	position: relative;
	top: -30px;
}