@charset "UTF-8";

/* image setting ------------------------------------------  */
.parallax-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
  /*opacity: 0; /* 初期は非表示 */
  transition: opacity 0.3s ease;
  max-width: 100%;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1320px) {
  .parallax-image {
    max-width: 150%;
    width: 150%;
  }
}

@media screen and (max-width: 980px) {
  .parallax-image {
    transform: translate(-50%,-50% !important);
	max-height: 100%;
	min-height: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
    max-width: 100%;
    width: 100%;
  }
}

[class^="parallax-small-image-"] {
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
  /*opacity: 0; /* 初期は非表示 */
  transition: opacity 0.3s ease;
  max-width: 120%;
  width: 120%;
  height: auto;
}

.parallax-small-image-1 {
  top: 15%;
}

.parallax-small-image-2{
  top: 10%;
}

@media screen and (max-width: 980px) {
  [class^="parallax-small-image-"] {
    transform: translate(-50%,-50% !important);
	top:50%;
	max-height: 100%;
	min-height: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
    max-width: 100%;
    width: 100%;
  }
}


/* TOP Hero setting ------------------------------------------  */

.hero {
  background: #000; 
  padding: 0;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero .slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero .slide {
	/*
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeSlide 11s infinite; 
  animation-fill-mode: forwards;
	*/
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeSlide 15s infinite;
}

/* 1枚目は5秒遅れてフェードイン */
.hero .slide:nth-child(1) { animation-delay: 5s; }
.hero .slide:nth-child(2) { animation-delay: 10s; }
.hero .slide:nth-child(3) { animation-delay: 15s; }

@keyframes fadeSlide {
  0% {
    opacity: 0;
    filter: blur(3px) grayscale(1);
  }
  10% {
    opacity: 1;
    filter: blur(0) grayscale(30%);
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
    filter: blur(3px) grayscale(1);
  }
  100% {
    opacity: 0;
  }
}

/* マスクテキスト部分 ---------- */
.hero-content{
  color: #fff;
  position: absolute;
  top: 45%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 70%;
  z-index: 20;
}

@media screen and (max-width: 980px) {
  .hero-content{
    top: 50%;
    width: 70%;
  }
}

.hero-text {
  font-size: 5vw;
  font-weight: 700;
  /*
  color: transparent;
  background: url('../img/photo1.jpg') no-repeat center / cover;
  background-clip: text;
  -webkit-background-clip: text;
  animation-delay: 2s;
  animation: textReveal 6s forwards;
  */
  margin: 0;
  text-align: center;
  overflow: hidden;
  /*
  text-transform: uppercase;
  white-space: nowrap;
  */

  display: inline-block;
  font-size: clamp(4.5vw,5vw, 5rem);
  line-height: 1.25;
  filter: blur(9px);
  opacity: 0;
  animation: textBlur 1s cubic-bezier(.22,.61,.36,1) .5s forwards;
  text-align: left;
  margin: 0 auto;
  width: auto;
}

@media screen and (max-width: 980px) {
  .hero-text {
    font-size: 7.5vw;
    letter-spacing: 0.05em;
  }
	/*
  .hero-text span.block{
    display: block;
  }
	*/
}
/*
.hero-text > span{
  display: inline-block;
  position: relative;
  animation: textShow .75s ease-out forwards; 
}
*/

.hero-content p{
  animation: fadeIn 2s ease-in 1.25s forwards;
  opacity: 0;
  margin: 1.5rem auto 0;
  letter-spacing: .02em;
  line-height: 1.75;
  text-align: left;
  max-width: 560px;
  width: 35vw;
}

@media screen and (max-width: 980px) {
  .hero-content p{
    width: auto;
  }
}

@keyframes textReveal {
  0%,70% {
    filter: blur(0);
    opacity: 1;
  }
  /*
  70% {
    filter: blur(5px);
    opacity: .5;
  }
  */
  74%,100% {
    color: #fff;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes textShow {
  from {
    bottom: -200px;
  }
  to {
    bottom: 0;
  }
}@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes textBlur {
  to {
    filter: blur(0);
    opacity: 1;
  }
}




/* carousel setting ------------------------------------------  */
.carousel {
  position: relative;
  overflow-x: hidden;
  width: 100%;              /* 両サイドを少し見切れにする */
  margin: 0;
}

.carousel-track {
  display: flex;
  transition: transform 0.7s ease-out;
  position: relative;
  will-change: transform;
  animation: slideLoop 10s linear infinite;
  animation-play-state: paused; /* 初期は停止 */
  margin: 0 -5%;
}

.carousel:hover .carousel-track {
  animation-play-state: running;
}

.carousel .slide {
  flex: 0 0 auto;
  width: 25%;
  margin-right: .5rem;
}

@media screen and (max-width: 980px) {
  .carousel .slide {
    width: 35%;
  }
}

.carousel .slide img {
  width: 100%;
  border-radius: 2px;
}

@keyframes slideLoop {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-20%); }
}


/* work setting ------------------------------------------  */

section.work{
  padding-bottom: 3rem;
}
.work .read{
  text-align: center;
  padding: 5rem 0;
  position: relative;
}

@media screen and (max-width: 980px) {
  .work .read{
    padding: 0 0 10vw 0;
  }
}

.work .inner{
  position: relative;
  padding: 5rem 0 5rem 0;
}

@media screen and (max-width: 980px) {
  .work .inner{
    padding: 2.5rem 0 2.5rem 0;
  }
}
.work .inner.read{
  padding-top: 0;
}

.work .inner:not(.read){
  padding-bottom: 2.5rem;
}

.work .contents{
  margin-left: auto;
  width: 75%;
}

@media screen and (max-width: 768px) {
  .work .contents{
    width: 100%;	
  }	
}

.work .contents h3{
  display:none;
}

@media screen and (max-width: 768px) {
  .work .contents h3{
    display:block;
	padding-left: 1rem;
	position: relative;
	width: 100%;
  }
  .work .contents h3::before{
	content: '';
    background: var( --point-color);
    border-radius: 5px;
	display: block;
    height: 6px;
    top: .65rem;
	position: absolute;
    left: 0;
    width: 6px;
  }
}
.work .contents .work-content{
  flex-wrap: wrap;
  padding: 0 0;
}

@media screen and (min-width: 769px) {
.work .contents .button-more{
  text-align: right;
}
}

.work .contents .button-more{
  margin-bottom: 6rem;
}
@media screen and (max-width: 768px) {
  .work .contents .button-more{
   margin-bottom: 1.5rem;
  } 
}

.work .contents .button-more:last-child{
  margin-bottom: 0;
}

.work .contents .flex-box .box{
  background: var(--gray-color);
  margin: 0 2% 2% 0;
  width: 48%;
}
.work .contents .flex-box .box:nth-child(odd){
  margin: 0 0 2%;
}

@media screen and (max-width: 768px) {
  .work .contents .flex-box .box:nth-child(n+6){
   display: none;
  }
}

.work .contents .flex-box .box a{
  color: var(--white-color);
  display:block;
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}

.work .contents .flex-box .box a::before{
  content:'';
  display: block;
  background: transparent;
  padding-top: 60%;
  width: 100%;
}

.work .contents .flex-box .box a:hover{
  opacity: 1;
}

.work .contents .flex-box .box a:hover::before{
  background: var(--black-color);
}

.work .contents .flex-box .box a img{
  display: block;
  line-height: 1;
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .2s ease-in;
  max-width: 100%;
  width: 100%;
}

.work .contents .flex-box .box a:hover img{
  filter: grayscale(0.8) blur(2px);
  opacity: .25;
  max-width: 115%;
  width: 115%;
}

.work .contents .flex-box .box .post_title{
  opacity:0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: .5s ease-in;
  width: 90%;
}

.work .contents .flex-box .box a:hover .post_title{
  opacity:1;
}
/*
.work .contents .flex-box .box .title strong{
  display: block;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing:2px;
  line-height: 1.75;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 1240px) {
  .work .contents .flex-box .box .title strong{
    font-size: 1rem;
  }
}
*/
.work .contents .flex-box .box .post_title .tag{
  font-size: 1.15rem;
  margin:0;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .work .contents .flex-box .box .post_title .tag{
    font-size: 1rem;
  }
}

.work .contents .flex-box .box .post_title p.tag span{
  display: inline-block;
}

.work .contents .flex-box .box .post_title p.tag span:not(:last-child)::after{
  content:'/';
  display: inline-block;
  margin:0 .5rem;
}

.work .contents .flex-box .box .post_title p.area {
  font-size: .8rem;
  text-align: center;
  margin: 0;
}

.work .contents .flex-box .box .post_title p.area::before{
  background: var(--white-color);
  content:'';
  display: block;
  margin: .5rem auto;
  height: 1px;
  width: 3.5rem;
}
/*
.work .contents .flex-box .box .title time{
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  margin-right: 1rem;
}
.work .contents .flex-box .box figcaption p.cat{
  background: var(--black-color);
  color: var(--white-color);
  display: inline-block;
  font-size: .75rem;
  line-height: 1;
  padding: .5rem;
  position: absolute;
  right: 1.5%;
  top: 2.5%;
}

@media screen and (max-width: 768px) {
  .work .contents .flex-box .box figcaption p.cat{
    font-size: .6rem;
    padding: .25rem .5rem;
  }
}
*/

.button-more font-jost{
  margin-bottom: 5rem;
}

.work #side-menu {
  position: absolute;
  top: 5rem;
  left:0;
  transition: opacity 0.3s ease;
}

@media screen and (max-width: 768px) {
  .work #side-menu {
    display: none !important;
  }
}


.work #side-menu.fixed {
  position: fixed;
  top: 20%;
/*  transform: translateY(-50%); */
  left: 5%;
}

.work #side-menu ul{
  margin: 0;
  padding: 0;
}

.work #side-menu li a.menu-btn {
  display: block;
  padding: .5rem 1rem;
  position: relative;
  transition: all .3s ease;
}


.work #side-menu li a::before,
.work #side-menu li a::after{
  content: '';
  display: block; 
  position: absolute;
}

.work #side-menu li a::before{
  background: var( --bg-gray-color02);
  border-radius: 5px;
  height: 8px;
  top: 1rem;
  left: 0;
  width: 8px;
  opacity: .5;
}

.menu-btn {
  padding: .5rem 1rem;
  transition: all .3s ease;
}

.work #side-menu li a.menu-btn.show::before {
  background: var( --point-color);
  opacity: 1;
}

.work #side-menu li a.menu-btn.show::after{
  background: var( --bg-gray-color02);
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  right: -65%;
  width: 65%;
  opacity: .5;
}

@media screen and (max-width: 1536px) {
  .work #side-menu li a.menu-btn.show::after{
    right: -7.5vw;
    width: 7.5vw;
  }
}
/*
@media screen and (max-width: 1320px) {
  .work #side-menu li a.menu-btn.show::after{
    right: -150%;
    width: 150%;
  }
}
*/
@media screen and (max-width: 980px) {
  .work #side-menu li a.menu-btn.show::after{
    right: -100%;
    width: 100%;
  }
}


/* commitment setting ------------------------------------------  */

.commitment{
  background: url('../img/index/bg_commitment.jpg') no-repeat center / cover;
  background-attachment: fixed;
/*  background-color: #eee; */
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 980px) {
  .commitment{
    padding: 12.5vw 0;
	width: 100%;
  }
}


.commitment .content{
  background: var(--white-color);
  border-radius: 1rem;
  margin: 0 auto;
  padding: 4rem 4rem;
  position: relative;
  max-width: 1080px;
  width: 70%;
  z-index: 10;
}

@media screen and (max-width: 980px) {
  .commitment .content{
    padding: 6.5vw 5vw 5vw;
    width: 80%;
  }
}

.commitment h2{
  text-align: center;
}

@media screen and (max-width: 980px) {
  .commitment h2 span{
    display: block;
  }
}

/* about setting ------------------------------------------  */

section.about {
  padding-top: 8rem;
}
@media screen and (max-width: 980px) {
  section.about {
    padding-top: 10vw;
  }
}
.about .flex-box{
  align-content: stretch;
  flex-direction: row-reverse;
}

.about .flex-box .box_50.image{
  align-content: stretch;
  display: flex;
  left: -5.5%;
  justify-content: space-between;
  position: relative;
  height: 100%;
  width: 50%;
}

@media screen and (max-width: 980px) {
  .about .flex-box .box_50.image{
    left: 0;
	width: 100%;
  }
}

.about .flex-box .box_50.image .mask{
  background: var(--gray-color);
  overflow: hidden;
  position: relative;
  padding-top: 60%;
  width: 49%;
}

.about .flex-box .box_50.text{
  padding: 2rem 0 2rem 2.5%;
}

@media screen and (max-width: 980px) {
  .about .flex-box .box_50.text{
    padding: 2rem 0;
  }
}


.about .flex-box .box_50.text h2{
  text-align: center;
}

@media screen and (max-width: 980px) {
  .about .flex-box .box_50.text h2 span{
    display: block;
  } 
}