/* --------------------------- */
/* Base
/* --------------------------- */
html{
  font-size: 62.5%;
  background-color: #fff;
}
body{
  font-size: 1.2rem;
  color: #1A1919;
  /* font-family:'Futura PT','游教科書体', serif,'Noto Sans JP', sans-serif; */
  font-family:'Helvetica','Arial','小塚ゴシック Pro','Kozuka Gothic Pro','Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05rem;
  padding: 0 10px;
}
main{
  height: 100vh;
}
img{
  width: 100%;
  vertical-align: bottom;
}

a{
  color: #1A1919;
  text-decoration: none;
}

a:hover{
  opacity: 0.4;
  transition: 0.6s;
}
.sp{
  display: none;
}
.pc{
  display: block;
}
.sp-cont{
display: none;
}
.url-rink{
  text-decoration: underline;
  text-decoration-color: #1A1919;
}
.url-rink:hover{
  color: blue;
  text-decoration-color: blue;
}

h2{
  font-size: 18px;
  padding-bottom: 15px;
}

.mt80{
  margin-top: 80px;
}
.mt30{
  margin-top: 30px;
}
.mb100{
  margin-bottom: 100px;
}

/* --------------------------- */
/* header
/* --------------------------- */

.favicon{
  width: 30px;
}
.btn_trigger{
  display: none;
}
.site-title{
  font-size: 2.4rem;
  font-weight: bold;
}

.nav-item{
  font-size: 1.6rem;
  margin-right: 50px;
  position: relative;
}
.nav-item a{
  display: inline-block;
  padding: 4px;
  transition: .3s;
}

.site-title a:hover{
  opacity: 0.3;
  transition: .5s;
}

/*　ハンバーガーボタン　*/

.hamburger {
  display : none;
  position: fixed;
  z-index : 3;
  top : 20px;
  left: 10px;
  width : 30px;
  height: 20px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  height  : 1px ;
  left    : 6px;
  background : #000;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
  width   : 20px;
}
.hamburger span:nth-child(2) {
  top: 20px;
  width   : 25px;
}
.hamburger span:nth-child(3) {
  top: 30px;
  width   : 30px;
}

/* ナビ開いてる時のボタン */

.hamburger.active span:nth-child(1) {
  top : 22px;
  left: 22px;
  width: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2){
  top: 16px;
  width   : 30px;
  /* -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg); */
}

.hamburger.active span:nth-child(3) {
  top: 10px;
  left: 22px;
  width: 15px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
/* --------------------------- */
/* main
/* --------------------------- */
main{

}

.header{
  position: fixed;
  left: 5%;
  top: 50%;
  z-index: 1;
  transform: translate(0%,-50%);
}
.header-nav .nav-list ,.header .tit,.hamburger {
  animation-name: fadein;
  animation-duration: 2s;
}
.header .tit{
display: flex;
align-items: flex-end;
}
.flex-l .inner .tit p{
  font-size: 10px;
  padding: 0 0 10px 24px;
  letter-spacing: 0.01rem;
  }
@media screen and (max-width:1330px){
  .header .tit{
    display: block;
    }
    .header .tit h1{
      padding-bottom: 20px;
      margin-right: -4vw;
      }
      .flex-l .inner .tit p{
        padding: 0;
      }
}
.header h1{
font-size: clamp(24px, 2.4vw, 28px);
  }
  .header h1 img{
max-width: 170px;
    height: auto;
    object-fit: cover;
    margin: 0 0 -2rem 2rem;
  }
.nav-list {
padding-top: 50px;
}

.nav-item {
  list-style-type: none;
  padding: 0;
}

.nav-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.nav-item:hover{
  background :transparent;
}
.nav-list li::before{

}

.nav-item a {
  display: block;
  color: #1A1919;
  padding: 0.8vh 0;
  text-decoration :none;
  font-size: 14px;
  position: relative;
}
.nav-item.active {
  pointer-events: none;
  }
.nav-item.active a {
  color: #b0b0b0;
  }
.nav-item a p.sub{
position: absolute;
bottom: 15%;
left: 150px;
font-family: 'Futura PT';
font-size: 11px;
}
.nav-item a img{
  left: 65px;
    position: absolute;
    width: 15px;
    height: auto;
    bottom: 11px;
}
.nav-list a::after {
  border-bottom: none;
}

/* このクラスを、jQueryで付与・削除する */
.header-nav.active {
  transform: translateX(0%);
}

.flex-box{
  padding-left: 32%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.flex-box02{
  top: auto;
  transform: translate(-50%,0%);
}
.flex-l .inner{

}
.flex-l .inner .tit h1,.nav-item a{
line-height: 1.8em;
font-family: sans-serif;
}


/* --------------------------- */
/* kv
/* --------------------------- */
.slideshow img{
    height: 80vh;
    object-fit: cover;
    object-position: 50% 50%;
    width: 70vw;
}

/* ----------------------------------- */
/* slideshow
/* ----------------------------------- */

.slideshow{
  overflow: hidden;
  animation-name: fadein;
  animation-duration: 2s;
}


.page-titile_name{
  /* ここから下が読み込み時ふわっと要素 */
  animation-name: fadein;
  animation-duration: 2s;
}
@keyframes fadein {
  from {
      opacity: 0;
      transform: translateY(-20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}  
.kv-name{
  animation-name: fadein;
  animation-duration: 2s;
  /* animation-iteration-count: infinite; */
}
.kv-message{
  animation-name: fadein;
  animation-duration: 2s;
}
.section-inner{
  animation-name: fadein;
  animation-duration: 2s;
}
@keyframes fadein {
  from {
      opacity: 0;
      transform: translateY(-20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}  
  /* ここまでが読み込み時ふわっと要素 */

.section-title{
  font-size: 3rem;
  /* font-weight: bold; */
  margin-bottom: 40px;
}
.section-title_jp{
  font-size: 1.2rem;
  display: block;
  color: #777;
  margin-top: 10px;
  text-align: center;
}
/* ボタン要素 */
.btn{
  color: #fff;
  display: block;
  line-height: 48px;
  width: 240px;
  border-radius: 24px;
  background-color: #222;
  text-align: center;
  font-weight: bold;
  transition: .3s;
}
.link-btn{
  margin: 0 auto;
  margin-bottom: 120px;
}
.btn:hover{
  letter-spacing: 5px;
}

/* その他の共通クラス */
.text-center{
  text-align: center;
}

.accent-bg{
  background-color: #1A1919;
}
.works-list{
  display: flex;
  justify-content: space-between;
    flex-wrap: wrap;
  /* align-items:center; */
}

.multi-lines{
  line-height: 1.8;
}
.sp-br{
  display: none;
}
.s-text-wrapper{
  width: 440px;
  margin: 0 auto;
  line-height: 200%;
  letter-spacing: normal;
}
.page-title_name{
  /* font-weight: bold; */
  font-size: 30px;
  text-align: center;
}



/* --------------------------- */
/* footer
/* --------------------------- */
.footer{
  padding: 18px 0;
  font-size: 1.2rem;
  color: #b0b0b0;
  display: flex;
  margin-left: 30px;
  align-items: center;
  position: fixed;
    bottom: 0;
    background: #fff;
}
.footer-icon{
  display: flex;
  
}
.footer-icon a{
  width: 20px;
  margin-left: 30px;
}
/* 下層ページのページタイトル */
.page-title-wrapper{
  position: relative;
}
.page-title{
  font-size: 3.6rem;
  font-weight: bold;
  position: absolute;
  letter-spacing: 1.2rem;
}
.page-title_jp{
  font-size: 1.4rem;
  display: block;
  text-align: center;
  font-weight: normal;
  margin-top: 20px;
  letter-spacing: 0;
}
.page-title.title-center{
  margin-top: 160px;
  left: 50%;
  transform: translate(-50%,-50%);
}



/* --------------------------- */
/* media
/* --------------------------- */
@media screen and (max-width:768px){
body{
  padding: 0;
}
.sp{
  display: block;
}
.pc{
  display: none;
}
.sp-mt30{
  margin-top: 30px;
}
.sp-mb0{
margin-bottom: 0;
}
.hamburger{
  display: block;
}
.header-wrap{
  height: 5%;
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 10;
}
.header {
  top: 3%;
  right: 0;
  left: auto;
  transform: inherit;
}
.header h1{
font-size: 16px;
}
.header .tit{
  display: block;
  padding-right: 10px;
}
.footer{
  margin-left: 0;
  width: 100%;
}
.footer small{ 
margin: 0 auto;
}
.flex-l .inner .tit p {
  font-size: 10px;
  text-align: right;
}
.flex-box{
  padding-left: 0;
  position: inherit;
  transform: inherit;
  padding-top: 140px;
  max-width: 90vw;
    margin: 0 auto;
}
.flex-box02{
  transform: none;
}
.slideshow img{
  width: 100%;
  /* height: calc(100vh - 210px); */
  height: 35vh;
}
.sp-cont{
  display: block;
}
/* } */
/* @media screen and (max-width:375px){ */
  .s-text-wrapper{
    width: 100%;
  }
  .nav-list {
    background-color: rgba(255, 255, 255, 0.85);
    margin: 0 auto;
    padding-top: 100px;
    width: 100%;
    height: 100vh;
    display: block;
}
.nav-item{
  margin-right: 0;
}
.nav-item a{
  padding-left: 25px;
}
.nav-item a img{
  left: 90px;
  bottom: 12px;
}
.nav-item a p.sub{
  font-size: 16px;
  bottom: 20%;
}
.header-nav.active {
  transform: translateX(0%);
}
.header-nav {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  color: #000;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
  height: 100%;
}
  .header h1 img{
max-width: 140px;
margin: 0 auto;
padding-right: 6vw;
  }
}