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

/* TOP */
#top h1{
	font-size:3.6rem;
	margin-top:3em;
	margin-bottom:0.5em;
	font-family: "Inter", sans-serif;
	font-weight: 300;
}
#top .works_img{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:0.5rem;
}
#top .works_img li{
	font-size:0;
	min-width:0;
	margin:0;
}
#top .works_img li a,
#top .works_img li img{
	display:block;
}
#top .works_img li img{
	width:100%;
	height:auto;
}
#top .tab{
	justify-content:flex-start;
	margin-bottom:2em;
}
#top .tab + .tab{
  margin-bottom:3em;
}
#top .tab li{
	cursor:pointer;
	padding:0em 0.4em;
	line-height:1;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	margin-right:0.5em;
	margin-bottom:0.5em;
	color:#a7a7a7;
  position:relative;
}
#top .tab li span{
  font-family: 'hiragino_W2';
}
#top .tab li:first-child{
	padding-left:0px;
}
#top .tab li#Feature{
	border-right: 1px solid #a7a7a7;
  padding-right: 1.2em;
    margin-right: 1em;
}
#top .tab li:hover{
	color:#18b3bc;
}
#top .tab li.active{
	color:#18b3bc;
	pointer-events:none;
}


/* 詳細ページ */
#detail{
	padding-top: 13rem;
}
#detail img{
	width:100%;
}
#detail .navi{
	font-size:1.2rem;
}
#detail .navi a{
	font-family: "Inter", sans-serif;
	font-weight: 400;
}
#detail .navi span{
	color:#00BEC7;
	font-family: "Inter", sans-serif;
	font-weight: 400;
}
#detail h1{
	font-size:2.6rem;
	margin:0.5em 0 0.3em 0;
}
#detail h1.EN{
	font-family: "Inter", sans-serif;
	font-weight: 300;
}
#detail h1 span{
	color:#a7a7a7;
}
#detail h2 video{
	width:100%;
}
#detail .cate{
	font-size:1.2rem;
	margin-bottom:5rem;
	font-family: "Inter", sans-serif;
	font-weight: 400;
}
#detail .cate span{
	color:#a7a7a7;
	font-family: "Inter", sans-serif;
	font-weight: 400;
}
#detail .lead{
	font-size:1.5rem;
	line-height:1.8;
	margin:0 auto;
	margin-top:2em;
	margin-bottom:2em;
}
#detail .lead.EN{
	font-family: "Inter", sans-serif;
	font-weight: 300;
}

#detail .link{
	font-size:1.5rem;
}
#detail .link .EN{
	font-family: "Inter", sans-serif;
	font-weight: 300;
}
#detail .link + .text{
	font-size:1.5rem;
	line-height:1.777;
	margin-top:2em;
}
#detail .link + .text .EN{
	font-family: "Inter", sans-serif;
	font-weight: 300;
}
#detail .movie_360 .ricoh-theta-spherical-image{
	width:100%!important;
	height:562px!important;
}
#detail .movie_360 .ricoh-theta-iframe{
	width:100%!important;
	height:562px!important;
}
#detail .movie_360 + p{
	  width: 90%;
    margin: 0 auto;
    font-size: 1.8rem;
    margin-top: 2.5em;
}
#detail ul.img li{
	margin-top:6rem;
	font-size:0px;
}
#detail ul.img li video{
	width:100%;
}
#detail ul.img li p{
	font-size: 1.5rem;
	margin-top:2.5em;
}
#detail ul.img li p .EN{
	font-family: "Inter", sans-serif;
	font-weight: 300;
}
#detail .related_ttl{
	margin-top:7rem;
	font-size:2.5rem;
	margin-bottom:1em;
	font-family: "Inter", sans-serif;
	font-weight: 300;
}
#detail ul.related{
	justify-content:flex-start;
	width:102%;
	overflow:hidden;
}
#detail ul.related li{
	width: 23.825%;
	font-size:0px;
	margin-right:0.9%;
	margin-bottom:0.8rem;
}
/*#detail ul.related li:nth-of-type(-n+8){
	display:block!important;
}*/

#detail .caption{
	display:none;
}


/*---------------------------------------------------------------
横幅768px～1000pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1000px) {
#top .works_img{
	grid-template-columns:repeat(3, minmax(0, 1fr));
}
#detail .movie_360 .ricoh-theta-spherical-image{
	height:55vw!important;
}
#detail .movie_360 .ricoh-theta-iframe{
	height:55vw!important;
}
}


/*---------------------------------------------------------------
PDF用のレイアウト
---------------------------------------------------------------*/
@media print , screen and (min-width: 768px) {
  body.pdf header{
    max-width:94%;
    margin:0 auto;
    position:relative;
    display:block;
    padding: 2vw 0rem 2vw 0rem;
    text-align:right;
  }
  body.pdf header .logo img{
    width: 12vw;
  }
  body.pdf header .header_content{
    display:none;
  }
  body.pdf #detail {
    padding-top: 0rem;
}
  body.pdf #detail > .inner{
    /*padding-bottom:15rem;*/
    padding-left:0px!important;
    padding-right:0px!important;
    max-width:94%;
    /*height:calc(100vh - 90px);*/
    box-sizing: border-box;
  }
  body.pdf #detail .navi {
    display:none;
  }
  body.pdf #detail h1 {
    margin: 0em 0 0.5em 0;
    width:35%;
        font-size: 2vw;
    line-height:1.5;
    position:relative;
    top:-0.2em;
}
  
  body.pdf #detail h1 span {
    display:block;
}
  body.pdf #detail .cate {
    /*position:absolute;
    left:0px;
    bottom:1em;*/
    margin-bottom:1em;
    font-size:1vw;
}
  body.pdf #detail h2 {
    position:absolute;
    right:0px;
    top:0px;
    width:63%;
    transition-duration: 0s;
    font-size:0px;
  }
  
  body.pdf #detail h2 img{
    max-height: 34vw;
    width:auto;
    max-width:100%;
    object-fit:cover;
  }
  /*@media print , screen and (max-width: 1000px) {
    body.pdf #detail h2 img{
      max-height:41vw;
    }
  }*/
  body.pdf #detail .movie_360{
    display:none;
  }
  body.pdf #detail ul.img {
    position: absolute;
    right: 0px;
    width: 63%;
    top: 35vw;
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
}

  body.pdf #detail ul.img li {
    margin-top: 0rem;
    max-width:49%;
        transition-duration: 0s;

}
  body.pdf #detail ul.img li:first-child {
    margin-right:2%;
}
  body.pdf #detail ul.img li p{
    display:none;
  }
  body.pdf #detail ul.img li img{
        max-height: 22vw;
    width:auto;
    max-width:100%;
  }
  body.pdf #detail ul.img li:nth-child(n + 3) {
  display:none;
}
  
  body.pdf #detail .lead {
    font-size: 1.15vw;
    width: 35%;
    margin: 0em;
}
  
body.pdf #detail .link {
    font-size: 1.15vw;
    width: 35%;
    margin: 0em;
  margin-top:1em;
}
  body.pdf #detail .link + .text {
    font-size: 1.15vw;
    width: 35%;
    margin: 0;
    margin-top: 1em;
}
  
  
  
  body.pdf #detail .related_ttl{
    display:none;
  }
  body.pdf #detail ul.related{
    display:none;
  }
  body.pdf footer{
    display:none;
  }
  
  
  
}


/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width: 767px) {
/* TOP */
#top h1 {
    margin-top: 3em;
}
#top .works_img {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}
#top .tab li {
    font-size: 3.1vw;
	margin-bottom:1em;
}
#top .tab li:nth-of-type(6) {
    padding-left: 0px;
}
#top .tab li#environment{
  padding-left: 0px;
}
  
/* 詳細ページ */
#detail h1 {
	line-height:1.5;
}
#detail .lead {
    width: 100%;
	font-size:1.6rem;
}
#detail .link {
    width: 100%;
	font-size:1.6rem;
}
#detail .link + .text {
    width: 100%;
	font-size:1.6rem;
}
#detail .movie_360 .ricoh-theta-spherical-image{
	height:50vw!important;
}
#detail .movie_360 .ricoh-theta-iframe{
	height:50vw!important;
}
#detail .movie_360 + p{
	  width: 100%;
    margin-top: 1.5em;
    font-size: 1.6rem;
}
#detail ul.related li {
    width: 47.825%;
    margin-right: 2%;
    margin-bottom: 2rem;
}
#detail ul.img li {
    margin-top: 4rem;
}

#detail ul.img li p{
	width:100%;
	margin-top:1.5em;
	font-size:1.6rem;
}

#detail .related_ttl {
    font-size: 1.8rem;
}

	
}