#commonFooter{
	display: none;
}
/*---------------
mv
---------------*/
#mv {
  width: 100%;
  min-height: 1391px;
  position: relative;
  overflow: visible !important;
}

.mv {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 1391px;
}

.mv-inner {
  position: relative;
  height: 100vh;
  opacity: 1 !important; /* 暫定対策 */
  transition: none !important;
}

.mv-inner img {
  opacity: 0;
  transition: opacity 0.6s;
}

.mv-inner img.loaded {
  opacity: 1;
}

/* 各レイヤー共通設定 */
.layer6,
.layer4,
.layer3,
.layer2,
.layer5,
.layer1 {
  --scale: 1;
  --blur: 0;
  will-change: transform, filter;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              filter 0.8s ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateY(0);
}

/* 個別レイヤー設定 */
.layer6 {
  position: absolute;
  top: 20%;
  right: 19%;
  z-index: 10;
  width: 53px;
  transform: scale(var(--scale));
  filter: blur(var(--blur));
}

.layer6 img {
  width: 100%;
  max-width: initial;
  height: auto;
  display: block;
}
.layer4 {
  position: absolute;
  top: 250px;
  right: 0%;
  z-index: 5;
  transform: scale(var(--scale));
  filter: blur(var(--blur));
  width: 70%;
}

.layer4 img {
  width: 100%;
  max-width: initial;
  height: auto;
  display: block;
}

.layer3 {
  position: absolute;
  top: 250px;
  right: 0%;
  z-index: 4;
  transform: scale(var(--scale));
  filter: blur(var(--blur));
  width: 70%;
}

.layer3 img {
  width: 100%;
  max-width: initial;
  height: auto;
  display: block;
}

.layer2 {
  position: absolute;
  top: 200px;
  right: 0%;
  z-index: 3;
  transform: scale(var(--scale));
  filter: blur(var(--blur));
  width: 70%;
}

.layer2 img {
  width: 100%;
  max-width: initial;
  height: auto;
  display: block;
}

.layer5 {
  position: absolute;
  top: -80px;
  right: 18%;
  z-index: 1;
  transform: scale(var(--scale));
  filter: blur(var(--blur));
}

.layer5 img {
  max-width: 500px;
  height: auto;
  display: block;
}

.layer1 {
  position: absolute;
  top: 40%;
  right: 5%;
  width: 50%;
  z-index: 1;
  transform: scale(var(--scale));
  filter: blur(var(--blur));
}

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

.mv > img {
  margin: 0 auto;
  max-width: 1440px;
}
.mv .head-wrap{
	position: absolute;
	top: 396px;
	left: 122px;
	z-index: 8;
}
/*
.mv .head-wrap h1 img{
	height: 89px;
	width: 275px;
}
*/
.mv .head-wrap h1{
	font-weight: 300;
	letter-spacing: 0.2em;
	margin-bottom: 20px;
}
.mv .head-wrap h2{
	font-weight: 300;
	letter-spacing: 0.04em;
}
/*.mv:hover .mv-filter{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 7;
	height: 897px;
	width: 100%;
	margin-bottom: 640px;
	background: rgba(255, 255, 255, 0.25);
	-webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.25);
}*/

@media all and (max-width: 786px){
	#mv{
		min-height: calc(650px + 173vw + 58px + 162px);
		max-width: 100%;
		overflow: hidden;
	}
	.mv{
		max-width: 786px;
		width: 100%;
		overflow: hidden;
	}
	.mv-inner{
		margin-top: -100px;
		width: 100%;
    height: auto;
	}
	.mv > img{
		margin: 0 auto;
		max-width: 100%;
		width: 100%;
	}
	.mv-inner > div {
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
	.layer6 {
		position: absolute;
		width: 53px!important;
		top: 20%;
	  right: 19%;
	  z-index: 10;
	  width: 53px;
	  transform: translateY(var(--translateY)) scale(var(--scale)) !important;
	  filter: blur(var(--blur));
	}

	.layer6 img {
		width: 100%;
	  max-width: initial;
	  height: auto;
	  display: block;
	}
	.layer4{
		position: absolute;
		top: 300px;
		left: auto;
		right: auto;
		z-index: 5;
		width: 110%;
    margin-left: -5%;
	}
	.layer4 img{
		width: 100%;
		max-width: initial;
	  height: auto;
	  display: block;
	}
	.layer3{
		position: absolute;
		top: 315px;
    left: 50% !important;
		z-index: 4;
		width: 110%;
    margin-left: -5%;
	}
	.layer3 img{
		width: 100% !important;
    max-width: initial;
    margin: 0 auto;
	  display: block;
	}
	.layer2{
		position: absolute;
		top: 271px;
		left: 50%;
		z-index: 3;
    width: 110%;
    margin-left: -5%;
	}
	.layer2 img{
		width: 100%;
		max-width: initial;
	  height: auto;
	  display: block;
	}
	.layer5{
		position: absolute;
		top: 55px;
		left: 50%;
		right: auto;
		max-width: 100%;
		z-index: 1;
		width: 80%;
	}
	.layer5 img{
		max-width: initial;
	  height: auto;
	  display: block;
	  width: 100%;
	}
	.layer1{
		position: absolute;
		top: 350px;
		left: 0;
		z-index: 1;
		right: auto;
    width: 100% !important;
    max-width: 100%;
	}
	.layer1 img{
		width: 100%;
		max-width: initial;
	  height: auto;
	}
	.mv .head-wrap{
		position: absolute;
		top: 463px;
		left: 25px;
		right: auto;
		margin:auto;
		width: 90%;
		text-align: left;
		letter-spacing: 0.2em;
	}
	.mv .head-wrap h1{
		margin-bottom: 11px;
	}
	.mv .head-wrap h2{
	}
	.mv:hover{
		pointer-events: none;
		height: 728px;
	}
	.mv .mv-filter{
		display: none;
	}
}

/*---------------
top-about
---------------*/
.top-about{
	position: absolute;
	width: 100%;
	top: 897px;
	margin-bottom: 5px;
	display: flex;
	flex-flow: column;
	z-index: 10;
}
.brandname{
	position: absolute;
	left: 80px;
	z-index: 10;
	width: 443px;
}
.about-ex{
	display: flex;
	margin-top: 96px;
	padding: 29px 0 0 80px;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.about-ex .about-a{
	width: calc(100% - 416px);
	margin-bottom: 66px;
}
.about-ex .about-a h2, .about-ex .about-a p{
	width: calc(100% - 54px);
}
.about-ex .about-a h2{
	font-weight: 700;
	margin-bottom: 19px;
}
.about-ex .about-b{
	position: relative;
	width: 416px;
}
.about-b01{
	position: relative;
	height: 100%;
}
.about-b01 img{
	position: absolute;
	top: 50%;
	left: 0;
	transform: rotate(-4deg);
	width: 118px;
}
.about-b02{
	position: absolute;
	bottom: 0;
	left: 0;
	justify-content: space-between;
	height: 344px;
	width: 100%;
	/*padding: 234px 40px 0 178px;*/
	background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.about-b02 .about-b02-inner{
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.about-b02 .about-b02-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: -1;
}

.about-b02 .about-b02-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.about-b02 .about-b02-inner:hover::after {
  opacity: 1;
}

.about-b02 .about-b02-inner .link-block-img {
  position: relative;
  display: inline-block;
  height: 88px;
  width: 88px;
}

.about-b02 .about-b02-inner .link-block-img img {
  transition: opacity 0.5s ease;
  position: absolute;
  top: 217px;
  left: 289px;
  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
}

.about-b02 .about-b02-inner .link-block-img::after {
  content: '';
  position: absolute;
  top: 217px;
  left: 289px;
  width: 100%;
  height: 100%;
  background-image: url('https://highlite.jp/wp-content/themes/jinr-child/images/common/btn_b.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.about-b02 .about-b02-inner:hover .link-block-img img {
  opacity: 0;
}

.about-b02 .about-b02-inner:hover .link-block-img::after {
  opacity: 1;
}
.about-b02 .sub-head{
	position: absolute;
	top: 234px;
	left: 178px;
}
.about-b02 .sub-head h4{
	margin-left: 16px;
}
.about-link{
	display: flex;
	width: 100%;
}

.about-link .link-block {
  height: 100px;
  width: 50%;
  position: relative;
  overflow: hidden;
}

.about-link .link-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: -1;
}

.about-link .link-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.about-link .link-block:hover::after {
  opacity: 1;
}

.about-link .link-block .link-block-img {
  position: relative;
  display: inline-block;
  height: 88px;
  width: 88px;
}

.about-link .link-block .link-block-img img {
  transition: opacity 0.5s ease;
  height: 88px;
  width: 88px;
  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
}

.about-link .link-block .link-block-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://highlite.jp/wp-content/themes/jinr-child/images/common/btn_b.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.about-link .link-block:hover .link-block-img img {
  opacity: 0;
}

.about-link .link-block:hover .link-block-img::after {
  opacity: 1;
}

.about-link .sub-head{
}
.about-link .sub-head h3{
	margin-bottom: 5px;
}

@media all and (max-width: 786px){
	.top-about{
		top: 650px;
	}
	.brandname{
		position: absolute;
		left: 6px;
		width: 225px;
	}
	.brandname img{
		width: 225px;
	}
	.about-ex{
		display: flex;
		margin-top: 58px;
		padding: 38px 0 0 24px;
		height: 174vw;
		width: 100%;
	}
	.about-ex .about-a h2{
		width: 336px;
		margin-bottom: 16px;
		letter-spacing: 0.06em;
	}
	.about-ex .about-a p{
		width: 309px;
		letter-spacing: 0.06em;
	}
	.about-ex .about-b{
		position: relative;
		width: 100%;
	}
	.about-b01{
		display: none;
	}
	.about-b01 img{
	}
	.about-b02{
		position: absolute;
		bottom: 0;
		left: auto;
		right: 0;
		display: flex;
		justify-content: right;
		height: 269px;
		width: 325px;
	}
	.about-b02 .about-b02-inner{
	}

	.about-b02 .about-b02-inner::before {
	}

	.about-b02 .about-b02-inner::after {
	}

	.about-b02 .about-b02-inner:hover::after {
	  pointer-events: none;
	}

	.about-b02 .about-b02-inner .link-block-img {
	  position: relative;
	  display: inline-block;
	  height: 49px;
	  width: 49px;
	}

	.about-b02 .about-b02-inner .link-block-img img {
	  transition: unset;
	  position: absolute;
	  top: 194px;
	  left: 260px;
	  height: 49px;
	}

	.about-b02 .about-b02-inner .link-block-img::after {
		transition: unset;
		position: absolute;
	  top: 194px;
	  left: 260px;
	  height: 49px;
	}

	.about-b02 .about-b02-inner:hover .link-block-img img {
	  pointer-events: none;
	}

	.about-b02 .about-b02-inner:hover .link-block-img::after {
	  pointer-events: none;
	}
	.about-b02 .sub-head{
		position: absolute;
		top: 196px;
		left: 141px;
	}
	.about-b02 .head-wrap h4{
		margin-left: 0;
	}
	.about-link{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.about-link .link-block{
		height: 80px;
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 1px;
	}
	.about-link .link-block::before {
	}
	.about-link .link-block::after {
	}
	.about-link .link-block:hover::after {
		pointer-events: none;
	}
	.about-link .link-block .link-block-img {
		height: 49px;
	  width: 49px;
	}
	.about-link .link-block .link-block-img img {
	  transition: unset;
	  height: 49px;
	  width: 49px;
	}
	.about-link .link-block .link-block-img::after {
	}
	.about-link .link-block:hover .link-block-img img {
		pointer-events: none;
	}
	.about-link .link-block:hover .link-block-img::after {
		pointer-events: none;
	}
	.about-link .sub-head{
		margin: 0;
	}
	.about-link .sub-head h3{
	}
}

/*---------------
top-works
---------------*/
#top-works{
	position: relative;
	height: 1000px;
	margin: 226px auto 0;
	width: 100%;
}
.top-works-wrap{
	padding: 0 80px;
	margin: 0 auto 70px;
	max-width: 1440px;
}
.top-works-wrap h2{
	margin-bottom: 8px;
}
.top-works-wrap h3{
	margin-bottom: 13px;
}
.top-works-wrap p{
	letter-spacing: 0.08em;
}
#top-works .top-works-list{
	position: absolute;
	top: 248px;
	left: 0;
	z-index: 10;
}
.slide-arrow{
  width: 60px;
  z-index: 300;
  display: block;
}
.container {
  position: relative;
  width: 100%;
  height: 716px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.realice-slider {
  width: 50%;
  margin-left: 11.1%;
}
.slick-slide{
	height: auto!important;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform: scale(.755); 
	transition: transform .5s;
	height: 200px!important;
  width: 100%;
}
.slide {
  border: none!important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.slick-center{
  transform: scale(1); 
  transition: transform .5s;
  margin-left: 0;
}
.slide-content {
  position: relative;
  transition: left 0.3s ease;
  transition: background 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 1;
  display: flex!important;
}
.slide .slide-content .slide-image{
	width: 50%;
}
.slide .slide-content .slide-image img{
	object-fit: cover;
	height: 200px;
	width: 100%;
}
.slide.slick-center .slide-content .slide-image img{
	object-fit: cover;
	height: 200px;
	width: 100%;
}
.slide .slide-content .slide-text{
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 32px;
	height: 200px;
	justify-content: center;
}
.slide .slide-content .slide-text h3{
	margin-bottom: 12px;
}
.slide.slick-center .slide-content .slide-text{
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-left: 14px;
	height: 200px;
	justify-content: center;
}
.slide.slick-center .slide-content .slide-text h3{
	margin-bottom: 16px;
}
.slide-content:hover .slide-image{
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.slide-content:hover .slide-text{
  background: rgba(161, 161, 161, 0.6);
  transition: background 0.3s ease;
}
.slick-current .slide {
  left: 0;
}
.slick-current + .slick-slide .slide,
.slick-current ~ .slick-slide:not(.slick-current + .slick-slide) .slide {
  left: 100px;
}
.slide-image {
  width: 100px;
  background: #eee;
}
.content-tag{
	display: flex;
	height: 24px;
}
.content-tag span{
	display: flex;
	align-items: center;
	font-weight: bold;
}
.content-tag span:first-child{
	margin-right: 8px;
}
.circle-nav {
  position: absolute;
  right: -136px;
  top: 50%;
  transform: translateY(-50%);
  width: 710px;
  height: 710px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.dot {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.prev-arrow, .next-arrow {
  position: absolute;
  z-index: 1;
}
.prev-arrow{
  top: 170px;
  left: 340px;
}
.next-arrow {
  bottom: 165px;
  left: 340px;
}
.works-list {
  position: absolute;
  right: 0;
  top: 50%;
  width: 385px;
  transform: translateY(-50%);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.works-list .link-block{
	display: flex;
	height: 100px;
	align-items: center;
	position: relative;
  overflow: hidden;
}
.works-list .link-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: -1;
}
.works-list .link-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}
.works-list .link-block:hover::after {
  opacity: 1;
}
.works-list .link-block .link-block-img {
  position: relative;
  display: inline-block;
  height: 88px;
  width: 88px;
  display: none;
}
.works-list .link-block .link-block-img img {
  transition: opacity 0.5s ease;
  height: 88px;
  width: 88px;
}
.works-list .link-block .link-block-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://highlite.jp/wp-content/themes/jinr-child/images/common/btn_b.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.works-list .link-block:hover .link-block-img img {
  opacity: 0;
}
.works-list .link-block:hover .link-block-img::after {
  opacity: 1;
}
.works-symbol {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 115px;
  opacity: 0;
}
.works-symbol img{
  width: 327px;
}
.works-bird {
  position: absolute;
  right: 35%;
  bottom: 0;
}
.works-bird img{
  width: 110px;
}
@media all and (max-width: 786px){
	#top-works{
		position: relative;
		height: 935px;
		max-width: 786px;
		margin:0 0 -50px;
		padding-top: 107px;
	}
	.top-works-wrap{
		margin-bottom: 39px;
		padding: 0 28px 0 20px;
	}
	.top-works-wrap h2{
	}
	.top-works-wrap h3{
		margin-bottom: 16px;
	}
	.top-works-wrap p{
	}
	#top-works .top-works-list{
		position: initial;
	}
	.slide-arrow{
	  width: 60px;
	  z-index: 300;
	  display: block;
	}
	.container {
	  position: initial;
	  height: auto;
	  display: flex;
	  align-items: center;
	  flex-direction: column;
	}
	.realice-slider {
	  width: 100%;
	  margin-left: auto;
	}
	.slick-slide{
		height: auto!important;
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		transform: scale(1); 
		transition: unset;
		height: auto!important;
	  width: auto;
	  margin: 20px 15px;
	}
	.slide {
	  height: 253px!important;
	}
	.slide-content {
	  position: relative;
	  transition: left 0.3s ease;
	  display: flex!important;
	  flex-direction: column;
	}
	.slide .slide-content .slide-image{
		width: 100%;
	  height: 160px!important;
	  background: #eee;
	}
	.slide .slide-content .slide-image img{
		height: 160px!important;
	}
	.slide .slide-content .slide-text{
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 14px;
		height: 92px!important;
		justify-content: center;
	}
	.slick-current .slide {
	  left: 0;
	}
	.slick-current + .slick-slide .slide,
	.slick-current ~ .slick-slide:not(.slick-current + .slick-slide) .slide {
	  left: 100px;
	}
	.slide-text h3{
		margin-bottom: 12px;
	}
	.circle-nav {
	  display: none;
	}
	.dot {
	  width: 14px;
	  height: 14px;
	  background: #fff;
	  transform: rotate(45deg);
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform-origin: center;
	  transition: transform 0.3s ease;
	}
	.prev-arrow, .next-arrow {
	  position: absolute;
	  z-index: 5;
	}
	.prev-arrow{
	  top: 0;
	  bottom: 0;
	  margin: auto 0;
	  left: 7px;
	  transform: rotate(-90deg);
	}
	.next-arrow {
	  top: 0;
	  bottom: 0;
	  margin: auto 0;
	  right: 7px;
	  left: auto;
	  transform: rotate(-90deg);
	}
	.works-list {
	  position: initial;
	  width: 100%;
	  transform: unset;
	  padding: 0;
	}
	.works-link .link-block{
		display: flex;
		align-items: center;
		height: 80px;
		width: 100%;
	}
	.works-link .link-block::before {
	}
	.works-link .link-block::after {
	}
	.works-link .link-block:hover::after {
		pointer-events: none;
	}
	.works-list .link-block .link-block-img {
		height: 49px;
	  width: 49px;
	  display: block;
	}
	.works-list .link-block .link-block-img img {
	  transition: unset;
	  height: 49px;
	  width: 49px;
	}
	.works-link .link-block .link-block-img::after {
	}
	.works-link .link-block:hover .link-block-img img {
		pointer-events: none;
	}
	.works-link .link-block:hover .link-block-img::after {
		pointer-events: none;
	}
	.works-symbol {
	  position: absolute;
	  right: 0;
	  top: 60px;
	  transform: unset;
	  margin-top: 0
	}
	.works-symbol img{
	  width: 156px;
	}
	.works-bird {
	  position: absolute;
	  right: 20%;
	  bottom: 0;
	}
	.works-bird img{
	  width: 110px;
	}
}
/*---------------
journal
---------------*/
#top-journal{
	position: relative;
	width: 100%;
	height: calc(913px + 124px + 33vw);
}
.top-jn-bg-l{
	position: absolute;
	top: -410px;
	left: 0;
	opacity: 0;
	will-change: transform;
	overflow-y: hidden;
	height: 950px;
}
.top-jn-bg-r{
	position: absolute;
	top: -510px;
	right: -5%;
	opacity: 0;
	will-change: transform;
	overflow-y: hidden;
	height: 1200px;
	width: 120%;
}
.top-jn-bg img{
	width: 100%;
	object-fit: cover;
}
.top-jn-wrap{
	position: absolute;
	top: 124px;
	left: 0;
	width: 100%;
	padding: 33vw 0 0;
}
.top-jn-wrap-bg{
	position: absolute;
	top: 200px;
	width: 100%;
	height: calc(913px - 76px + 33vw);
	background: linear-gradient(to bottom, transparent 50%, #d9d9d9 50%);
}
.top-jn-wrap-bg img{
	width: 100%;
}
.top-jn-wrap > .head-wrap{
	margin: 100px auto 40px;
	padding-left: 80px;
	width: calc(100% - 80px);
	max-width: 1440px;
}
.top-jn-wrap .head-wrap h3{
	margin-bottom: 16px;
}
.top-jn-cts{
	width: calc(100% - 80px);
    max-width: 1440px;
	overflow-x: scroll;
	padding-left: 80px;
	margin: 0 auto;
}
.top-jn-cts ul{
	display: -webkit-flex;
	display: flex;
	overflow-x: scroll;
	width: 100%;
}
.top-jn-cts ul li {
    width: 300px;
    height: 356px;
    margin: 0 32px 40px 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.top-jn-cts ul li .cts-thum {
    width: 100%;
    height: 170px;
    overflow: hidden;
}

.top-jn-cts ul li .cts-thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.top-jn-cts ul li:hover .cts-thum img {
    transform: scale(1.1);
}

.top-jn-cts ul li .cts-ct,
.top-jn-cts ul li .cts-title,
.top-jn-cts ul li .cts-des {
    position: relative;
    z-index: 1;
}
.top-jn-li {
  margin-top: 80px;
  height: 160px;
  width: 100%;
  padding-left: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.top-jn-li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 1;
}

.top-jn-li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
}

.top-jn-li:hover::after {
  opacity: 1;
}

.top-jn-li .top-jn-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  justify-content: left;
  display: flex;
  position: relative;
  z-index: 3;
}
.top-jn-li .top-jn-inner .link-block-img {
  position: relative;
  display: inline-block;
  margin-left: auto;
  height: 88px;
  width: 88px;
}
.top-jn-li .top-jn-inner .link-block-img img {
  transition: opacity 0.5s ease;
  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
}
.top-jn-li .top-jn-inner .link-block-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://highlite.jp/wp-content/themes/jinr-child/images/common/btn_b.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.top-jn-li .top-jn-inner:hover .link-block-img img {
  opacity: 0;
}
.top-jn-li .top-jn-inner:hover .link-block-img::after {
  opacity: 1;
}

.top-jn-li .head-wrap{
	margin: 0 0 0 35px;
}
.top-jn-li .head-wrap h2{
	letter-spacing: 0.04em;
}
.top-jn-li .head-wrap h3{
	letter-spacing: -0.011em;
}
.top-jn-li a{
	margin-left: auto;
}
.top-jn-stone{
	margin: 0 0 0 80px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.top-jn-stone img{
	width: 47px;
}
.top-jn-stone02{
	position: absolute;
	top: 460px;
	right: 13.2%;
	opacity: 0;
}
.top-jn-stone02 img{
	width: 208px;
}

@media all and (max-width: 786px){
	#top-journal{
		position: relative;
		height: calc(102vw + 389px + 350px);
		width: 100%;
		overflow: hidden;
	}
	.top-jn-bg{
		position: absolute;
		left: 0;
		top: -310px;
		max-width: 100%;
		height: 800px;
		width: auto;
	}
	.top-jn-bg img{
		width: 100%;
		max-width: initial;
		height: 963px;
	}

	.top-jn-wrap{
		position: absolute;
		top: 350px;
		left: 0;
		height: auto;
		width: 100%;
		padding: 40px 0 0px;
		background: #d9d9d9;
	}
	.top-jn-wrap-bg{
		height: auto;
	}
	.top-jn-wrap .head-wrap{
		margin: 0 auto 40px 24px;
		padding-left: 0;
		width: calc(100% - 58px);
	}
	.top-jn-wrap .head-wrap h2{
		margin-bottom: 8px;
	}
	.top-jn-wrap .head-wrap h3{
		margin-bottom: 16px;
	}
	.top-jn-cts{
		width: calc(100% - 24px);
	    max-width: initial;
		margin-left: 24px;
		overflow-x: scroll;
		padding-left: 0;
	}
	.top-jn-cts ul{
		display: -webkit-flex;
		display: flex;
		overflow-x: scroll;
		width: 100%;
	}
	.top-jn-cts ul li{
		height: auto;
		width: 210px;
		margin: 0 24px 41px 0;
		flex-shrink: 0;
	}
	.top-jn-cts ul li .cts-thum {
    height: 120px;
	}
	.top-jn-li{
		margin-top: 80px;
		height: 110px;
		width: 100%;
		padding-left: 21px;
	}
	.top-jn-stone{
		margin: 0;
	}
	.top-jn-stone img{
		width: 33px;
	}
	.top-jn-li .head-wrap{
		margin: 0 0 0 22px;
		width: 196px;
	}
	.top-jn-li .head-wrap h3{
		margin-bottom: 8px;
	}
	.top-jn-li .top-jn-inner{
		align-items: center;
	}
	.top-jn-li .top-jn-inner .link-block-img{
		margin-top: 0;
		height: 49px;
		width: 49px;
	}
	.top-jn-li .top-jn-inner .link-block-img img {
	  transition: unset;
	}
	.top-jn-li .top-jn-inner .link-block-img::after {
	}
	.top-jn-li .top-jn-inner:hover .link-block-img img {
		pointer-events: none;
	}
	.top-jn-li .top-jn-inner:hover .link-block-img::after {
	  pointer-events: none;
	}

	.top-jn-li .head-wrap{
	}
	.top-jn-li .head-wrap h2{
	}
	.top-jn-li .head-wrap h3{
	}
	.top-jn-li a{
	}
	.top-jn-stone{
	}
	.top-jn-stone img{
	}
	.top-jn-stone02{
		top: 250px;
	}
	.top-jn-stone02 img{
		width: 96px;
	}
}

/*---------------
approach
---------------*/
#approach{
	position: relative;
	min-height: 1450px;
	width: 100%;
	/*margin-top: -81px;*/
}
.ap-bg{
	position: absolute;
	top: 0;
	left: -10%;
	right: 0;
	margin: 0 auto;
	z-index: -1;
	will-change: transform;
	width: 100%;
  height: 100%;
}
.ap-bg img {
  position: absolute;
  width: 100%;
  object-fit: cover;
}
.approach-inner{
	position: absolute;
	max-width: 1440px;
	margin: 0 auto;
	top: 10vw;
	left: 0;
	right: 0;
	height: 1300px;
}
.ap-bird{
	position: absolute;
	top: 0;
	left: 5.7%;
}
.ap-bird img{
	width: 183px;
	transform: rotate(11deg);
	transform: translateX(-50px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  opacity: 0;
}
.ap-bird img.show {
  opacity: 1;
  transform: translateX(0);
}
.ap-des{
	position: absolute;
	top: 206px;
	left: 220px;
	width: 780px;
}
.ap-des h2{
	margin-bottom: 8px;
}
.ap-des h3{
	margin-bottom: 16px;
}
.ap-link{
	position: absolute;
	top: 309px;
	left: 1132px;
	height: 88px;
	width: 88px;
}
.ap-link .link-block-img img {
	transition: opacity 0.5s ease;
  height: 88px;
  width: 88px;
  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
}
.ap-link .link-block-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://highlite.jp/wp-content/themes/jinr-child/images/common/detail_b.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ap-link:hover .link-block-img img {
  opacity: 0;
}

.ap-link:hover .link-block-img::after {
  opacity: 1;
}
.ap-frow{
	position: absolute;
	top: 481px;
	left: 220px;
	opacity: 0;
	z-index: 10;
}
.ap-step{
	height: 147px;
	width: 1000px;
	margin-bottom: 24px;
	display: flex;
}
.ap-step img{
	width: 88px;
	margin-right: 24px;
}
span.triangle{
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	line-height: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 50px 30px;
	border-right-color: currentColor;
	border-left: 0;
}
.step-detail{
	height: 100px;
	width: calc(1000px - 88px - 24px);
	padding: 18px 0 0 18px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.step-detail::before{
    width:0px;
    height:0px;
    border-top:solid 100px transparent;
    border-bottom:solid 100px transparent;
    border-left:solid 100px #333;
    border-right:solid 100px transparent;
}
.step-detail p.head{
	margin-bottom: 8px;
}
.step-detail p.des{
}
.ap-whale{
	position: absolute;
	bottom: -100px;
	right: -200px;
	width: 721px;
	opacity: 0;
}
@media all and (max-width: 786px){
	#approach{
		position: relative;
		height: 1652px;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	.ap-bg{
		position: absolute;
		top: 81px;
		left: -10%;
		z-index: -1;
		max-width: initial;
		margin-top: -160px;
		overflow-x: hidden;
	}
	.approach-inner{
		height: 1500px;
		max-width: 100%;
	}
	.ap-bird{
		position: absolute;
		top: 63px;
		left: 16px;
	}
	.ap-bird img{
		width: 101px;
	}
	.ap-des{
		position: absolute;
		top: 287px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: calc(100% - 24px - 25px);
	}
	.ap-des h2{
		margin-bottom: 8px;
	}
	.ap-des h3{
		margin-bottom: 19px;
	}
	.ap-link{
		position: absolute;
		top: 272px;
		left: auto;
		right: 25px;
	}
	.ap-frow{
		position: absolute;
		top: 570px;
		left: 16px;
		width: calc(100% - 16px);
	}
	.ap-step{
		height: auto;
		width: 100%;
		margin-bottom: 20px;
		display: flex;
	}
	.ap-step img{
		width: 48px;
		margin-right: 12px;
	}
	span.triangle{
		border-width: 60.5px 20px;
	}
	span.triangle-w{
		border-width: 71.5px 20px;
	}
	.step-detail{
		height: auto;
		width: calc(100% - 48px - 12px);
		padding: 16px 10px;
	}
	.step-detail::before{
	}
	.step-detail p.head{
		margin-bottom: 14px;
	}
	.step-detail p.des{
		width: calc(100% - 38px);
	}
	.ap-whale{
		position: absolute;
		bottom: 50px;
		right: -160px;
		width: 434px;
		opacity: 0;
	}
}

/*---------------
service
---------------*/
#service{
	position: absolute;
	top: 1400px;
	left: 0;
	right: 0;
	width: 1070px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	z-index: 10;
}
.sv-link-block{
	display: flex;
}
.sv-link-block .sv-stone{
	width: 137px;
	transform: rotate(-212deg);
	margin-right: 73px;
}
.sv-link-block .head-wrap{
	margin: 56px 40px 0 0;
}
.sv-link-block .link-block-img {
  display: inline-block;
  position: relative;
  margin: 56px 0 0 0;
  height: 88px;
  width: 88px;
}
.sv-link-block .link-block-img img {
  transition: opacity 0.5s ease;
  height: 88px;
  width: 88px;
  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
}

.sv-link-block .link-block-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://highlite.jp/wp-content/themes/jinr-child/images/common/btn_b.png');
  background-size: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sv-link-block .link-block-img:hover img {
  opacity: 0;
}

.sv-link-block .link-block-img:hover::after {
  opacity: 1;
}
#service span{
	margin-top: 90px;
	width: 260px;
	height: 2px;
	transform: rotate(135deg);
	background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

@media all and (max-width: 786px){
	#service{
		position: absolute;
		top: 1445px;
		left: 40px;
		right: auto;
		width: calc(100% - 40px - 13px);
		flex-direction: column;
	}
	.sv-link-block{
		position: relative;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.sv-link-block .sv-stone{
		position: absolute;
		top: -140px;
		right: auto;
		left: -80px;
		width: 121px;
		transform: rotate(120deg);
		margin-right: auto;
	}
	.sv-link-block .head-wrap{
		margin:0;
	}
	.sv-link-block .head-wrap h2{
		margin-bottom: 8px;
	}
	.sv-link-block .link-block-img{
		margin:0;
		height: 49px;
		width: 49px;
	}
	.sv-link-block .link-block-img img{
		margin:0;
		height: 49px;
		width: 49px;
	}
	.sv-link-block .link-block-img::after {
	  transition: unset;
	}
	.sv-link-block .link-block-img:hover img {
	  pointer-events: none;
	}
	.sv-link-block .link-block-img:hover::after {
	  pointer-events: none;
	}
	#service span{
		margin-top: 24px;
		width: 100%;
		transform: rotate(0deg);
		margin-bottom: 24px;
	}
}
/*---------------
modal
---------------*/
.top-modal {
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
}
.top-modal_bg {
	background: rgba(0, 0, 0, 1);
	height: 100vh;
	width: 100%;
}
.top-modal_content {
	background: #DBD9DA;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 160px);
	max-width: 1280px;
	height: calc(100% - 80px - 96px);
	overflow-y: scroll;
}
.top-modal_content_inner {
	display: flex;
	flex-direction: column;
	padding: 40px;
}
.ap-popup01{
	margin-bottom: 98px;
}
.ap-popup02{
	max-width: 1000px;
	width: calc(100% - 200px);
	margin: 0 auto;
}
.ap-popup02 img{
	max-width: 1000px;
	width: 100%;
}
@media all and (max-width: 786px){
	.top-modal {
	}
	.top-modal_bg {
	}
	.top-modal_content {
		width: calc(100% - 20px - 20px);
		max-width: calc(100% - 20px - 20px);
		height: calc(100% - 30px - 30px);
	}
	.top-modal_content_inner {
		display: flex;
		flex-direction: column;
		padding: 40px 0 40px 24px;
	}
	.ap-popup01{
		width: calc(100% - 24px);
		margin-bottom: 22px;
	}
	.ap-popup01 h2{
		margin-bottom: 12px;
	}
	.ap-popup01 h3{
		margin-bottom: 16px;
	}
	.ap-popup02{
		max-width: 100%;
		width: 100%;
		margin: 0;
		overflow-x: scroll;
	}
	.ap-popup02 img{
		max-width: initial;
		width: 1000px;
		padding-bottom: 43px;
	}
}