/*--------------------------------------
 共通項目
---------------------------------------*/
body {
  font-family: "Open Sans","游ゴシック体",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size: 14px;
  line-height: 1.0;
  letter-spacing: .8px;
  color: #fff;
background-color: #000;
}

a {
  transition: opacity .3s;
  text-decoration: none;
  color: #1ca9e3;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-style: none;
}

ul,
li {
  list-style: none;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}


/*--------------------------------
 レイアウト
---------------------------------*/

.wrapper {
}


.section {
  margin: 120px 0px 0px 0px;
}

.inner {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 30px;
}

.inner02 {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 80px;
}
/*--------------------------------
 見出し
---------------------------------*/

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  position: fixed;
  top: 0;
  z-index: 1;
	width: 100%;
  height: 100px;
  transition: background-color .6s;
}
.header.active { 
}
.header-logo.active {
	font-size: 18px;
	text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(0, 0, 0, 0.4);}

.header-logo span.active {
    opacity:0;
	display: none;
}



.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 30px 30px 30px;
	
}

.header-logo {
  font-size: 24px;
  font-weight: normal;
  line-height: 1.2;
  margin-right: 20px;
  letter-spacing: 0.12em;
	padding-top: 9px;
    opacity:1;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -o-transition:all 0.3s;
    -ms-transition:all 0.3s;
    transition:all 0.3s;
}

.header-logo span {
  font-size: 15px;
  letter-spacing: 0.16em;
	color: #f2f2f2;
    opacity:1;
    transition: opacity 0.2s ease;
}


.header-logo a {
  color: #fff;
}
.header-nav {

}
.header-nav-list {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  padding: 0px 0px 5px 0px;
  letter-spacing: 0.15em;
  color: #fff;
	}

.header-nav-item:not(:last-child) {
  margin-right: 12px;
}

.header-nav-item a:hover {
  opacity: 0.8;
}

/* ナビゲーションリンクの基本スタイル */
.header-nav-item a {
    padding: 2px 3px 2px 5px;
    position: relative;
    display: inline-block;
    text-decoration: none;
transition: background-color 0.5s ease-in-out;	
	}
@keyframes fadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
 }

.header-nav-item a:active {
    border-bottom: 1px solid #fff;
}
.header-nav-item a.active {
	margin-top: 20px;
	background-color: rgba(0,0,0,0.6);
	}
/* カレント状態の下線スタイル  */
.header-nav-item a.current {
    border-bottom: 1px solid #fff;
}




/*--------------------------------
 ページトップ
---------------------------------*/
.page-top {
  padding: 10px;
  cursor: pointer;
  text-align: right;
  background-color: #000;
}

.page-top .material-icons-outlined {
  vertical-align: bottom;
}

/*--------------------------------
 フッター
---------------------------------*/
.footer {
  padding: 150px 0px 50px 0px;
	width:  100%;
	position: relative;
}
.copyright {
  font-size: 10px;
	color: #ccc;
	text-align: right;
	position: absolute;
  right: 30px;
	padding-top: 3px;
}

.footer-icon {
	position: absolute;
	text-align: left;
	left: 30px;
  font-size: 15px;
}

.footer-icon a:hover {
  opacity: 0.7;
}



/*--------------------------------------
 TOPページ
---------------------------------------*/

/* main-visual　文字表示*/

.main-txt {
width: 400px;
position: absolute;
bottom: 20px;
left: 30px;
z-index: 1;
transition: background-color .6s;
line-height: 2.0;
font-size: 15px;
	letter-spacing: 0.15em;
	color: #f2f2f2;
}
.main-txt svg {
padding-top:20px;
}

/* main-visual　video埋め込み*/

.fit {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.fitsize {
            position: absolute;
}


/* main-visual　vimeo埋め込み*/

.c-video_frame{
        }

.c-video_frame-vimeo{
        }

#js-vimeo.is-loaded iframe{
          opacity: 1;
          visibility: visible;
        }



/*top-Works*/

.top-works-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -40px;
}

.top-works-item {
  width: 33.281786%;
  margin-right: 0.05154639%;
  margin-bottom: 55px;
  color: #fff;
}

.top-works-item02 {
  margin-right: 0.05155%;
  width: 49.94845%;
  margin-bottom: 55px;
  color: #fff;
}
.top-works-item:hover,
.top-works-item02:hover
 {
  opacity: 0.7;
}
/*
.top-works-item:nth-of-type(3n) {
  margin-right: 0;
}
*/

.top-works-img img {
}

  .top-works-caption{
  font-size: 9px;
  padding-top: 25px;
  }

.top-works-name {
  font-size: 15px;
  padding: 25px 30px 0px 3px;
	line-height: 1.4;
letter-spacing : 0.1em ;
  }

.top-works-info {
  font-size: 9px;
	color: #555;
  padding: 14px 20px 0px 3px;
letter-spacing : 0.1em ;
}

.top-works-link {
	margin:  0 auto;
	text-align:  center;
  font-size: 16px;
	color: #ccc;
  padding-top: 120px;
letter-spacing : 0.15em ; 
}


.top-works-link a {
	text-decoration: underline;
text-decoration-color: #555;
text-underline-offset: 7px;
	padding-left: 15px;
}


/*about*/
#about{
scroll-margin-top: 100px; /* ヘッダー高さ + 余白 */
}

.about-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -50px;
}

.about-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 46%;
  margin-bottom: 50px;
}


.about-body {
  flex: 1;
}

.about-name-wrap {

}
.about-name-wrap img {
  width: 100px;
  height: auto;
  margin-right: 20px;
float: left;
}

.about-name {
  margin-bottom: 20px;
  padding-top: 20px;
font-size: 20px;
letter-spacing : 0.15em ;

}


.about-cap {
  margin-bottom: 55px;
font-size: 13px;
letter-spacing : 0.1em ;

}

.about-text {
	line-height: 2.2;
  font-size: 14px;
letter-spacing : 0.1em ;
  }

/*contact*/

#contact {
scroll-margin-top: 100px; /* ヘッダー高さ + 余白 */
	text-align:  left;
}

h2.contact-tit {
	font-size: 22px;
	font-family: 'Athelas', serif;
  letter-spacing: 0.15em;
	color: #f2f2f2;
	padding-bottom: 60px;
}

#contact section{
  display: flex;
flex-wrap: wrap;
	  align-items: left;
  justify-content: space-between;
	 width: 400px;
}

#contact hr{
    border: none;
    height: 0.5px;
    background-color: #575757;
	margin-bottom: 60px;
}

#contact dl {
}
#contact dl dt {
	font-size: 13px;
  letter-spacing: 0.15em;
	text-decoration: underline;
	text-decoration-color: #ccc;
	text-underline-offset: 5px;
	padding-bottom: 25px;
	width: 160px;
}

#contact dl dd {
	font-size: 11px;
  letter-spacing: 0.15em;
}

#contact dl dd a:hover {
  opacity: 0.8;
}


/*--------------------------------------
 下層：Worksページ
---------------------------------------*/

.title-wrp {
  display: flex;
  justify-content: space-between;
padding: 20px 0px 30px 1px;
}

.title-wrp h2
{
	font-size: 26px;
	font-family: 'Athelas', serif;
  letter-spacing: 0.1em;
}


 .title-wrp p span:not(:last-child) {
    margin-right: 30px;
  }

.title-wrp p a
{
	font-size: 11px;
  letter-spacing: 0.15em;
}

.title-wrp p a:hover {
  opacity: 0.8;
}
/*
.title-wrp p span.current
{
	color: #b2b4b3;
	  }
*/

.title-wrp p span.current

{
	text-decoration-color: #ccc;
	text-decoration: underline;
	text-underline-offset: 5px;
	font-size: 11px;
  letter-spacing: 0.15em;
}
/*--------------------------------------
 下層：Works詳細ページ
---------------------------------------*/

#works-mainvisual {
	position: relative;
	height: 100%;
}

#works-mainvisual p.main-img {
  }

#works-mainvisual p.play-button {
	position: absolute;
top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
	width: 72px;
  }

#works-mainvisual p.play-button:hover  {
  opacity: 0.7;
  transition: opacity .3s;
}

#movie01
 {
  width: 100%;
  height: 100%;
  border: none;
}
 .works-date .category{
  font-size: 11px;
letter-spacing : 0.1em ;
	 color: #8d8d8d;
	 padding-top: 55px;
  }

 .works-date .title{
  font-size: 36px;
line-height: 1.4;
letter-spacing : 0.075em ;
	 padding-top: 30px;
  }

 .works-date .position{
  font-size: 11px;
	 line-height: 1.8;
letter-spacing : 0.1em ;
	 padding-top: 30px;
  }

 .works-date .lead{
  font-size: 14px;
letter-spacing : 0.1em ; 
	 line-height: 2.6;
	 padding-top: 50px;
  }
 .works-date .lead-en{
  font-size: 14px;
letter-spacing : 0.1em ; 
	 line-height: 2.6;
	 padding-top: 25px;
  }

 .works-img-wrp {
	 padding-top: 60px;
  }
 .works-img-wrp img {
	 padding-bottom: 60px;
  }

.credits-wrp {
  display: flex;
  justify-content: space-between;
}

.credits-wrp-item {
  width: 48%;
}


.credits-wrp-body {
}


.credits-wrp-body img {
  margin-right: 10px;
}

 .works-date .credits{
  font-size: 11px;
letter-spacing : 0.05em ; 
	 line-height: 2.2;
  }


 .works-date .credits th{
	 padding-right: 7%;
  }
 .works-date .credits td{
  }

h3.title02 {
  font-size: 16px;
  padding: 40px 0px 25px 0px;
letter-spacing : 0.125em ; 
}


.works-link-button {
	margin:  0 auto;
	text-align:  center;
  font-size: 16px;
	color: #ccc;
letter-spacing : 0.15em ;
	padding-top: 60px;
}

.works-link-all {
	padding: 0px 100px;
}

.works-link-all img {
	height: 16px;
	width: 16px;
}

.works-link-arrow {
letter-spacing : 0.15em ; 
	border: solid 1px #575757;
	padding: 3px 2px 3px 5px;
}
.works-link-all img:hover,
.works-link-arrow:hover
 {
  opacity: 0.7;
}


/*--------------------------------------------------
/*media Queries 
----------------------------------------------------*/

@media screen and (max-width:980px){
/*--------------------------------------
 下層：Worksページ
---------------------------------------*/
 .works-date .credits th{
  }
 .works-date .credits td{
	 width: 50%
  }
  }


@media screen and (max-width:960px){
	
.inner02 {
  padding: 0 40px;
}
  /* レイアウト */
.section {
  margin: 110px 0px 0px 0px;
}
	
  .top-works-item {
  margin-right: 0.05155%;
  width: 49.94845%;
}
	
.top-works-link {
  padding-top: 50px;
}
	
/*--------------------------------------
 下層：Worksページ
---------------------------------------*/

.title-wrp {
padding: 10px 0px 20px 1px;
}
	
 .title-wrp p span:not(:last-child) {
    margin-right: 25px;
  }

}



@media screen and (max-width: 767px) {
  body {
    font-size: 13px;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }
	
  /* レイアウト */
.inner {
  padding: 0 15px;
}
	
.inner02 {
  padding: 0 15px;
}


  /* レイアウト */
.section {
  margin: 70px 0px 0px 0px;
}


  /* ヘッダー */
	
.header-inner {
  padding: 25px 15px 15px 15px;
}
  .header-logo {
    font-size: 18px;
  line-height: 1.1;
}
.header-logo span {
  font-size: 10px;
}

	.header-logo.active {
    
	font-size: 18px;
	padding-top: 9px;}

  .header-nav-item:not(:last-child) {
    margin-right: 15px;
  }

  .header-nav-item a {
    font-size: 11px;
  }
.header-nav-item a.active {
	margin-top: 9px;

	}
.header-logo span.active {
	display: block;
}
	
/* main-visual　文字表示*/

.main-txt {
left: 15px;
}
	
	
  /* メインビジュアル */
  .main-visual-img {
    height: 60vh;
    background-image: url(../img/sp_mv.jpg);
  }
  .sub-main-visual-img {
    height: 100px;
    background-image: url(../img/sp_mv.jpg);
  }

  /* プロフィール */
  .profile {
    padding: 30px 0;
  }
  .profile-title {
    font-size: 20px;
  }

  /* Works */

	
.top-works-info {
  padding: 10px 0px 0px 3px;
letter-spacing : 0.1em ;
}

  .top-works-list {
    justify-content: space-between;
  }

  .top-works-item,
  .top-works-item02
	{
  width: 100%;
  margin-bottom: 40px;
  }
.top-works-link {
  padding-top: 60px;
}

  /* about */
	
  .about-list {
    display: block;
    margin-bottom: 0;
  }

  .about-item {
    width: 100%;
    margin-bottom: 35px;
  }

  .about-item:last-child {
    margin-bottom: 0;
  }

  /* Contact */
#contact section{
}

	
/*--------------------------------
 下層：Worksページ
---------------------------------*/
	
.title-wrp {
}
.title-wrp p a
{
	font-size: 10px;
  letter-spacing: 0.15em;
}
	
.title-wrp {
padding: 20px 0px 15px 1px;
}
 .title-wrp p span:not(:last-child) {
    margin-right: 20px;
  }
	
.credits-wrp {
  display: block;
}
.credits-wrp-item {
  width: 100%;
}
	
 .works-date .credits th{
	 width: 55%;
	 padding-right: 10%;
  }
 .works-date .credits td{
	 width: 35%;
  }


	
	
/*--------------------------------
 下層：Works詳細ページ
---------------------------------*/
#works-mainvisual {
}
#works-mainvisual p.main-img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

 .works-date .category{
  font-size: 10px;
letter-spacing : 0.1em ;
	 padding-top: 30px;
  }

 .works-date .title{
  font-size: 24px;
  line-height: 1.4;
letter-spacing : 0.075em ;
	 padding-top: 18px;
  }

 .works-date .position{
  font-size: 10px;
letter-spacing : 0.1em ;
	 padding-top: 18px;
  }

 .works-date .lead{
  font-size: 14px;
letter-spacing : 0.1em ; 
	 line-height: 2.0;
	 padding-top: 30px;
  }
 .works-date .lead-en{
  font-size: 14px;
letter-spacing : 0.1em ; 
	 line-height: 2.0;
	 padding-top: 15px;
  }

 .works-img-wrp {
	 padding-top: 36px;
  }
 .works-img-wrp img {
	 padding-bottom: 36px;
  }



.credits-wrp-body img {
  margin-right: 10px;
}

 .works-date .credits{
  font-size: 11px;
letter-spacing : 0.05em ; 
	 line-height: 2.0;
  }
}

@media screen and (max-width: 600px) {
/*--------------------------------
 フッター
---------------------------------*/
.footer {
	padding: 90px 0px 40px 0px;
	width:  100%;
	position: static;
}
.copyright {
	text-align: right;
	right: 15px;
}

.footer-icon {
	left: 15px;
	text-align: left;
}
	
	
/*contact*/
	
h2.contact-tit {
	padding-bottom: 35px;
}

#contact section{
  display: inline-block;
}
	

#contact dl {
	padding-bottom: 35px;
}
	
#contact dl dt {
	padding-bottom: 15px;
}
	
@media screen and (max-width: 380px) {
	
.header-logo.active {
	font-size: 17px;
	}
  .header-logo {
    font-size: 17px;
  line-height: 1.1;
}
.header-logo span {
  font-size: 10px;
}
	
/* main-visual　文字表示*/

.main-txt {
line-height: 1.8;
font-size: 14px;
}
	
}
	
	
	
}