@charset "UTF-8";
 .flex{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.cover{
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;'
} #project #page-header{position: relative;z-index: 9000;}
#project #page-header .wrap{position: absolute;width: 100%;}
#project #page-header .logo{
position: absolute;
top: 40px;
left: 35px;
width: 60px;
height: 68px;
margin: 0;
}
#project #page-header .logo img{width: 100%;height: auto;}
#project #page-header .logo img:nth-of-type(2){display: none;}
#project #page-header #gnav{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 8900;
width: 100%;
height: 100%;
background-color: #FFF;
}
#project #page-header #gnav ul{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
#project #page-header #gnav li{
float: none;
display: block;
width: 100%;
}
#project #page-header #gnav li a{
padding: 1em;
font-weight: bold;
line-height: 1.0;
color: #000;
}
#project #page-header.navOpen #gnav{display: block;} #project header .navBtn{
display: block;
width: 20px;
position: absolute;
top: 40px;
right: 48px;
cursor: pointer;
z-index:9000;
margin: 0;
}
#project #page-header .navBtn span{
display: block; height: 2px;
width: 100%;
background: #777b7d; -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#project #page-header.navOpen .navBtn span{background: #000}
#project #page-header .navBtn span:nth-of-type(2),
#project #page-header .navBtn span:nth-of-type(3){margin-top: 6px;} #project #page-header.navOpen .navBtn span:nth-of-type(1){
-webkit-transform: translateY(9px) translateX(0) rotate(45deg);
-ms-transform: translateY(9px) translateX(0) rotate(45deg);
transform: translateY(9px) translateX(0) rotate(45deg);
}
#project #page-header.navOpen .navBtn span:nth-of-type(2){ margin-top: 8px;
opacity: 0;
-webkit-transform: translateY(9px);
-ms-transform: translateY(9px);
transform: translateY(9px);
}
#project #page-header.navOpen .navBtn span:nth-of-type(3){
-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-9px) translateX(0) rotate(-45deg);
transform: translateY(-9px) translateX(0) rotate(-45deg);
} #project .inner{max-width: 1080px;margin: 0 auto;}
#project #key .canvas{
position: relative;
z-index: 8000;
padding-top: 40%;
}
#project #key .canvas .movie{
position: absolute;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
background-color: #787B7D;
object-fit: cover;
font-family: 'object-fit: cover;';
}
#project #key .canvas .movie img{width: 100%;height: 100%;}
#project #key .canvas .box{
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
width: 380px;
height: 380px;
padding: 55px 20px 0;
background-color: rgba(255,255,255,0.9);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#project #key .canvas .box .catch{font-size: 17px;font-weight: bold;text-align: center;line-height: 1.7;color: #777B7D;letter-spacing: 0.05em;}
#project #key .canvas .box .page-title{
max-width: 225px;
margin: 3% auto 0;
}
#project #key .canvas .box .page-title img{display: block;width: 100%;height: auto;}
#project #key .canvas .box .page-title img:last-child{margin: 0 auto;margin-top: 1em;}
#project #key .lead{padding-top: 80px;font-size: 41px;font-weight: bold;text-align: center;line-height: 1.5;letter-spacing: 0.05em;}
#project .section{padding: 80px 0;text-align: center;}
#project .section .sec-title,
#project .section .lead{text-align: center;}
#project .section .sec-title{display: inline-block;margin: 0 0 60px;padding-bottom: 0.4em;font-size: 23px;line-height: 1.0;border-bottom: solid 3px #000;}
#project .section .lead{font-size: 18px;line-height: 2.2;letter-spacing: 0.1em;} #project #secGallery #gallery-list{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
margin-top: 70px;
}
#project #secGallery #gallery-list>li{
position: relative;
width: calc(100% / 3);
}
#project #secGallery #gallery-list>li::before{
content: "";
display: block;
width: 0;
padding-top: 62.0833333333333%;
}
#project #secGallery #gallery-list>li>.img,
#project #secGallery #gallery-list>li>.hover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
#project #secGallery #gallery-list>li>.img{}
#project #secGallery #gallery-list>li>.img img{display: block;width: 100%;height: 100%;}
#project #secGallery #gallery-list>li>.hover{
background-color: rgba(0,0,0,0.6);
opacity:0;
-webkit-transition: opacity .4s;
transition: opacity .4s;
}
#project #secGallery #gallery-list>li>.hover .wrap{text-align: center;}
#project #secGallery #gallery-list>li>.hover .wrap *{color: #FFF;}
#project #secGallery #gallery-list>li>.hover .title{
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
#project #secGallery #gallery-list>li>.hover .title .Nm{
display: inline-block;
padding: 0.5em 30px;
margin-bottom: 6.25%;
font-size: 12px;
font-weight: bold;
line-height: 1.0;
border-left: solid 1px #FFF;
border-right: solid 1px #FFF;
}
#project #secGallery #gallery-list>li>.hover .title .txt{
display: block;
font-size: 1.3vw;
font-weight: bold;
line-height: 1.33;
}
#project #secGallery #gallery-list>li.column>.hover .title::after{
background-image: url(//hoshino-co.com/wp/wp-content/themes/hoshino2.9.4/img/movie/icon_column01.png);
}
#project #secGallery #gallery-list>li>.hover .title::after{
content: "";
display: block;
width: 30px;
height: 30px;
margin: 6.25% auto 0;
background-image: url(//hoshino-co.com/wp/wp-content/themes/hoshino2.9.4/img/movie/icon_movie01.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#project #secGallery #gallery-list>li>.hover:hover{opacity: 1;}
#project #secGallery #gallery-list .contents{
display: none;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 9990;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.95);
}
#project #secGallery #gallery-list .contents .inner{padding: 90px 0 100px;}
#project #secGallery #gallery-list .contents .inner *{margin: 0;}
#project #secGallery #gallery-list .contents .close-win{
position: fixed;
top: 40px;
right: 35px;
display: inline-block;
padding-left: 14px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
background-image: url(//hoshino-co.com/wp/wp-content/themes/hoshino2.9.4/img/movie/icon_close01.png);
background-size: 10px 10px;
background-position: center left;
background-repeat: no-repeat;
}
#project #secGallery #gallery-list .contents .view{}
#project #secGallery #gallery-list .contents .view .title{}
#project #secGallery #gallery-list .contents .view .title .Nm{
display: inline-block;
margin: 0 0 50px;
padding-bottom: 0.4em;
font-size: 23px;
line-height: 1.0;
border-bottom: solid 3px #000;
}
#project #secGallery #gallery-list .contents .view .title .txt{
display: block;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.11em;
}
#project #secGallery #gallery-list .contents .view .image{
position: relative;
padding-top: 56.2037037037037%;
margin-top: 45px;
background-color: #787B7D;
}
#project #secGallery #gallery-list .contents .view .image iframe,
#project #secGallery #gallery-list .contents .view .image .img,
#project #secGallery #gallery-list .contents .view .image .img img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#project #secGallery #gallery-list .contents .view .info{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
margin-top: 60px;
}
#project #secGallery #gallery-list .contents .view .description{
width: calc(100% - 250px);
min-height: 5em;
padding-right: 60px;
font-size: 18px;
line-height: 1.65;
text-align: justify;
}
#project #secGallery #gallery-list .contents .view .prof{
position: relative;
width: 250px;
padding-left: 60px;
text-align: left;
border-left: solid 1px #000;
}
#project #secGallery #gallery-list .contents .view .prof .title{font-size: 18px;font-weight: bold;}
#project #secGallery #gallery-list .contents .view .prof .name{font-size: 12px;}
#project #secGallery #gallery-list .contents .view .prof .links{ margin-top: 10px;
font-size: 0;
}
#project #secGallery #gallery-list .contents .view .prof .links li{
display: inline-block;
width: 26px;
height: 26px;
margin: 0;
}
#project #secGallery #gallery-list .contents .view .prof .links li + li{margin-left: 10px;}
#project #secGallery #gallery-list .contents .view .prof .links a{display: block;}
#project #secGallery #gallery-list .contents .view .prof .links img{display: block;width: 100%;height: auto;}
#project #secGallery #gallery-list .contents .items{padding-top: 100px;}
#project #secGallery #gallery-list .contents .items *{margin: 0;}
#project #secGallery #gallery-list .contents .items .title{
display: inline-block;
padding: 0 30px;
margin-bottom: 60px;
font-size: 18px;
font-weight: bold;
line-height: 1.0;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#project #secGallery #gallery-list .contents .items .item-list{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
}
#project #secGallery #gallery-list .contents .items .item-list>li{
width: 31.4814814814815%;
text-align: left;
}
#project #secGallery #gallery-list .contents .items .item-list .img{position: relative;}
#project #secGallery #gallery-list .contents .items .item-list .img::before{
content: "";
display: block;
width: 0;
padding-top: 100%;
}
#project #secGallery #gallery-list .contents .items .item-list .img img{position: absolute;top: 0;left: 0;}
#project #secGallery #gallery-list .contents .items .item-list .spec{
margin-top: 30px;
font-size: 0;
}
#project #secGallery #gallery-list .contents .items .item-list .spec li{
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 1.4;
}
#project #secGallery #gallery-list .contents .items .item-list .spec li + li::before{
content: "/";
display: inline-block;
margin: 0 0.5em;
}
#project #secGallery #gallery-list .contents .items .item-list .item-name{
margin-top: 0.2em;
font-size: 18px;
font-weight: bold;
}
#project #secGallery #gallery-list .contents .items .item-list .links{
padding-top: 30px;
margin-top: 30px;
text-align: center;
border-top: solid 1px #000;
}
#project #secGallery #gallery-list .contents .items .item-list .links dt{margin-bottom: 20px;font-size: 14px;font-weight: bold;line-height: 1.0;}
#project #secGallery #gallery-list .contents .items .item-list .links dd + dd{margin-top: 15px;}
#project #secGallery #gallery-list .contents .items .item-list .links dd a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 30px;
font-size: 12px;
font-weight: bold;
border: solid 1px #000;
border-radius: 15px;
}
#project #secGallery #gallery-list .contents .items .item-list .links dd img{
width: auto;
max-width: 100%;
height: auto;
max-height: 19px;
margin: 0 auto;
}
#project #secGallery #search{
left: 0;
margin: 10px 0 30px;
padding: 0;
}
#project #secGallery #search ul.termList{
width: 80%;
margin: 0 auto;
justify-content: space-around;
}
#project #secGallery #search ul.termList li {
margin-bottom: 1em;
}
#project #secGallery #search ul.termList li a{
width: 150px;
text-align: center;
padding: 15px 20px;
border: solid 1px #bbbbbb;
color: #bbbbbb;
display: inline-block;
}
#project #secGallery #search ul.termList li a:hover,
#project #secGallery #search ul.termList li a.selected{
background: #bbbbbb;
color: #fff;
} #project #secGallery #gallery-list2{
margin-top: 20px;
}
#project #secGallery #gallery-list2>li{
position: relative;
width: 100%;
padding: 20px;
background: #f1f1f1;
margin-top: 20px;
}
#project #secGallery #gallery-list2>li>.img{width: 30%;cursor: pointer;}
#project #secGallery #gallery-list2>li>.img img{display: block;width: 100%;height: 100%;} #project #secGallery #gallery-list2>li>.text{
width: 36%;
text-align: left;
position: absolute;
top: 50%;
left: 52.2%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#project #secGallery #gallery-list2>li>.text .category{
}
#project #secGallery #gallery-list2>li>.text .category li{
min-width: 150px;
width: calc((100% - 50px) / 2);
text-align: center;
color: #bbbbbb;
border: solid 1px;
padding: 0px 20px;
margin-left: 2em;
margin-bottom: 1em;
border-radius: 3px;
}
#project #secGallery #gallery-list2>li>.text .category li:first-child{
margin-left: 0;
}
#project #secGallery #gallery-list2>li>.text .title{
margin: 0.75rem 0;
font-weight: bold;
font-size: 19px;
}
#project #secGallery #gallery-list2>li>.text .description{
display: block;
font-size: 14px;
font-weight: normal;
line-height: 1.5;
} #project #secGallery #gallery-list2>li .products{
width: 25%;  position: absolute;
right: 1.75%;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
#project #secGallery #gallery-list2>li .prof .products{
padding: 0;
width: 100%;
position: unset;
transform: none;
}
#project #secGallery #gallery-list2>li .products .icon-list li{
width: 50%;
cursor: pointer;
}
#project #secGallery #gallery-list2>li .products img{display: block;width: 100%;height: 100%;}
#project #secGallery #gallery-list2>li .products span.products-link {
padding: 15px 20px;
color: #fff;
width: 100%;
background-color: #9ea0a0;
display: block;
font-size: 16px;
margin-top: 1em;
text-indent: 2em;
text-align: center;
position: relative;
cursor: pointer;
}
#project #secGallery #gallery-list2>li .products span.products-link:before {
content:  '';
width: 20px;
height: 20px;
display:  block;
border-top: solid 1px;
border-right: solid 1px;
position:  absolute;
top: 0;
bottom:  0;
left: 0;
right: 0;
margin:  auto;
transform: translate(-85px, 0%) rotate(45deg);
}
#project #secGallery #gallery-list2>li .products span.products-link:after {
}
#project #secGallery #gallery-list2 .contents{
display: none;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 9990;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.95);
}
#project #secGallery #gallery-list2 .contents .inner{padding: 50px 0;}
#project #secGallery #gallery-list2 .contents .inner *{margin: 0;}
#project #secGallery #gallery-list2 .contents .close-win{
position: fixed;
top: 40px;
right: 35px;
display: inline-block;
padding-left: 14px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
background-image: url(//hoshino-co.com/wp/wp-content/themes/hoshino2.9.4/img/movie/icon_close01.png);
background-size: 10px 10px;
background-position: center left;
background-repeat: no-repeat;
}
#project #secGallery #gallery-list2 .contents .view{max-width: 960px;margin: 0 auto;}
#project #secGallery #gallery-list2 .contents .view .title{}
#project #secGallery #gallery-list2 .contents .view .title .Nm{
display: inline-block;
margin: 0 0 20px;
padding-bottom: 0.4em;
font-size: 23px;
line-height: 1.0;
border-bottom: solid 3px #000;
}
#project #secGallery #gallery-list2 .contents .view .title .txt{
display: block;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.11em;
}
#project #secGallery #gallery-list2 .contents .view .image{
position: relative;
width: 80%;
padding-top: 45%;
margin: 45px auto 0;
background-color: #787B7D;
}
#project #secGallery #gallery-list2 .contents .view .image iframe,
#project #secGallery #gallery-list2 .contents .view .image .img,
#project #secGallery #gallery-list2 .contents .view .image .img img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#project #secGallery #gallery-list2 .contents .view .image iframe{
border: solid 1px #a2a5a6;
}
#project #secGallery #gallery-list2 .contents .view .image .title{
position: absolute;
bottom: -2.5rem;
right: 0;
text-align: right;
font-size: 12px;
padding-bottom: 0.25em;
border-bottom: solid 1px;
display: inline-block;
}
#project #secGallery #gallery-list2 .contents .view .info{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
width: 80%;
margin: 100px auto;
}
#project #secGallery #gallery-list2 .contents .view .description{
width: calc(100% - 250px);
min-height: 5em;
padding-right: 60px;
font-size: 14px;
line-height: 1.65;
text-align: justify;
}
#project #secGallery #gallery-list2 .contents .view .prof{
position: relative;
width: 250px;
padding-left: 30px;
text-align: left;
}
#project #secGallery #gallery-list2 .contents .view .prof .title{font-size: 18px;font-weight: bold;}
#project #secGallery #gallery-list2 .contents .view .prof .name{font-size: 12px;}
#project #secGallery #gallery-list2 .contents .view .prof .links{ margin-top: 10px;
font-size: 0;
}
#project #secGallery #gallery-list2 .contents .view .prof .links li{
display: inline-block;
width: 26px;
height: 26px;
margin: 0;
}
#project #secGallery #gallery-list2 .contents .view .prof .links li + li{margin-left: 10px;}
#project #secGallery #gallery-list2 .contents .view .prof .links a{display: block;}
#project #secGallery #gallery-list2 .contents .view .prof .links img{display: block;width: 100%;height: auto;}
#project #secGallery #gallery-list2 .contents .items{}
#project #secGallery #gallery-list2 .contents .items *{margin: 0;}
#project #secGallery #gallery-list2 .contents .items .title{
display: inline-block;
padding: 0 30px;
margin-bottom: 60px;
font-size: 18px;
font-weight: bold;
line-height: 1.0;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#project #secGallery #gallery-list2 .contents .items .item-list{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
}
#project #secGallery #gallery-list2 .contents .items .item-list>li{
width: 25%;
text-align: left;
}
#project #secGallery #gallery-list2 .contents .items .item-list .img{position: relative;}
#project #secGallery #gallery-list2 .contents .items .item-list .img::before{
content: "";
display: block;
width: 0;
padding-top: 100%;
}
#project #secGallery #gallery-list2 .contents .items .item-list .img img{position: absolute;top: 0;left: 0;}
#project #secGallery #gallery-list2 .contents .items .item-list .spec{
margin-top: 30px;
font-size: 0;
}
#project #secGallery #gallery-list2 .contents .items .item-list .spec li{
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 1.4;
}
#project #secGallery #gallery-list2 .contents .items .item-list .spec li + li::before{
content: "/";
display: inline-block;
margin: 0 0.5em;
}
#project #secGallery #gallery-list2 .contents .items .item-list .item-name{
margin-top: 0.2em;
font-size: 18px;
font-weight: bold;
}
#project #secGallery #gallery-list2 .contents .items .item-list .links{
padding-top: 30px;
margin-top: 30px;
text-align: center;
border-top: solid 1px #000;
}
#project #secGallery #gallery-list2 .contents .items .item-list .links dt{margin-bottom: 20px;font-size: 14px;font-weight: bold;line-height: 1.0;}
#project #secGallery #gallery-list2 .contents .items .item-list .links dd + dd{margin-top: 15px;}
#project #secGallery #gallery-list2 .contents .items .item-list .links dd a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 30px;
font-size: 12px;
font-weight: bold;
border: solid 1px #000;
border-radius: 15px;
}
#project #secGallery #gallery-list2 .contents .items .item-list .links dd img{
width: auto;
max-width: 100%;
height: auto;
max-height: 19px;
margin: 0 auto;
} #project #secContact{padding: 0 0 100px;}
#project #secContact .contact-btn{margin-top: 40px;}
#project #secContact .contact-btn span{cursor: pointer;} #project img.online-link_image{margin-bottom: 30px;}
#project #secondaryNav{margin: 0 auto 70px;}
#project .wp-pagenavi a,
#project .wp-pagenavi span {
border: none;
} @media screen and (max-width: 1080px) { #project .inner{max-width: 90%;}
#project #secGallery #gallery-list2>li>.img {
width: 100%;
}
#project #secGallery #gallery-list2>li>.img img{display: block;width: 100%;height: 100%;}
#project #secGallery #gallery-list2>li>.text{
position: unset;
width: 100%;
padding: 20px 0 0;
transform: none;
}
#project #secGallery #gallery-list2>li .products{
position: unset;
width: 100%;
transform: none;
margin-top: 1.5em;
}
#project #secGallery #gallery-list2>li .products .icon-list li{
width: 33%;
}
}  @media screen and (max-width: 768px) { #project #page-header{
position: fixed;
width: 100%;
height: 65px;
background-color: #FFF;
}
#project #page-header .wrap{position: static;}
#project #page-header .logo{
position: absolute;
top: 7px;
left: calc(50% - 20px);
width: 40px;
height: 50px;
}
#project #page-header .logo img{display: none;}
#project #page-header .logo img:nth-of-type(2){display: block;width: auto;height: 100%;}
#project #page-header #gnav ul{ left: 0;}
#project #page-header.navOpen #gnav{display: block;} #project header .navBtn{top: 25px;left: 27px;right: auto;
}
#project #page-header .navBtn span{background: #000;} #project main{padding-top: 65px;}
#project #key .canvas{padding-top: 109.6%;}
#project #key .canvas .box{
width: 280px;
height: 280px;
padding: 45px 30px 0;
}
#project #key .canvas .box .catch{font-size: 12.5px;}
#project #key .canvas .box .page-title{max-width: 165px;margin: 3% auto 0;}
#project #key .lead{padding: 50px 5% 0;font-size: 18px;text-align: center;}
#project .section{width: 90%;padding: 50px 0 0;margin: 0 auto;}
#project .section .sec-title{margin: 0 0 30px;font-size: 20px;border-bottom: solid 2px #000;}
#project .section .lead{font-size: 16px;line-height: 1.6;text-align: justify;} #project #secGallery #gallery-list{
display: block;
margin-top: 40px;
}
#project #secGallery #gallery-list>li{
position: relative;
width: 100%;
}
#project #secGallery #gallery-list>li + li{margin-top: 30px;}
#project #secGallery #gallery-list>li::before{display: none;}
#project #secGallery #gallery-list>li>.img,
#project #secGallery #gallery-list>li>.hover{
position: static;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
#project #secGallery #gallery-list>li>.img{}
#project #secGallery #gallery-list>li>.img img{display: block;width: 100%;height: 100%;}
#project #secGallery #gallery-list>li>.hover{
background-color: transparent;
opacity:1;}
#project #secGallery #gallery-list>li>.hover .wrap{text-align: left;}
#project #secGallery #gallery-list>li>.hover .wrap *{color: #000;}
#project #secGallery #gallery-list>li>.hover .title{
position: relative;
top: auto;
left: auto;
display: flex;
margin: 15px 0 0;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
#project #secGallery #gallery-list>li>.hover .title .Nm{
display: block;
width: 80px;
padding: 0.3em 0 0;
margin-bottom: 0;
font-size: 12px;
border: none;
}
#project #secGallery #gallery-list>li>.hover .title .txt{
display: block;
width: calc(100% - 80px);
padding-right: 45px;
padding-left: 1em;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
text-align: left;
border-left: solid 1px #000;
}
#project #secGallery #gallery-list>li.column>.hover .title::after{
background-image: url(//hoshino-co.com/wp/wp-content/themes/hoshino2.9.4/img/movie/icon_column02.png);
}
#project #secGallery #gallery-list>li>.hover .title::after{
position: absolute;
top: calc(50% - 15px);
right: 0;
margin: 0;
background-image: url(//hoshino-co.com/wp/wp-content/themes/hoshino2.9.4/img/movie/icon_movie02.png);
}
#project #secGallery #gallery-list>li>.hover:hover{opacity: 0.6;}
#project #secGallery #gallery-list .contents .inner{position: relative;padding: 65px 0 60px;}
#project #secGallery #gallery-list .contents .inner *{margin: 0;}
#project #secGallery #gallery-list .contents .close-win{
position: absolute;
top: 25px;
right: 0;
}
#project #secGallery #gallery-list .contents .view .title .Nm{
margin: 0 0 30px;
font-size: 20px;
}
#project #secGallery #gallery-list .contents .view .title .txt{
font-size: 16px;
text-align: justify;
}
#project #secGallery #gallery-list .contents .view .image{
padding-top: 56.2037037037037%;
margin-top: 30px;
}
#project #secGallery #gallery-list .contents .view .info{
display: block;
margin-top: 30px;
}
#project #secGallery #gallery-list .contents .view .description{
width: 100%;
padding-right: 0;
font-size: 14px;
line-height: 1.6;
}
#project #secGallery #gallery-list .contents .view .prof{
width: 100%;
padding-left: 0;
padding-top: 16px;
margin-top: 16px;
text-align: justify;
border-top: solid 1px #000;
border-left: none;
}
#project #secGallery #gallery-list .contents .view .prof .title{font-size: 18px;}
#project #secGallery #gallery-list .contents .view .prof .name{font-size: 12px;}
#project #secGallery #gallery-list .contents .view .prof .links{
position: static;
margin-top: 16px;
}
#project #secGallery #gallery-list .contents .items{padding-top: 50px;}
#project #secGallery #gallery-list .contents .items .title{
padding: 0 30px;
margin-bottom: 30px;
font-size: 18px;
}
#project #secGallery #gallery-list .contents .items .item-list{
display: block;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
#project #secGallery #gallery-list .contents .items .item-list>li{
width: 100%;
text-align: justify;
}
#project #secGallery #gallery-list .contents .items .item-list>li + li{margin-top: 30px;}
#project #secGallery #gallery-list .contents .items .item-list .spec{margin-top: 20px;}
#project #secGallery #gallery-list .contents .items .item-list .links{
padding-top: 20px;
margin-top: 20px;
}
#project #secGallery #gallery-list .contents .items .item-list .links dt{margin-bottom: 10px;}
#project #secGallery #gallery-list .contents .items .item-list .links dd + dd{margin-top: 10px;}
#project #secGallery #search{
margin-bottom: 10px;
}
#project #secGallery #search ul.termList{
width: 100%;
}
#project #secGallery #search ul.termList li{
width: 100%;
margin-bottom: 0.5em;
}
#project #secGallery #search ul.termList li a{
width: 100%;
padding: 5px 20px;
} #project #secGallery #gallery-list2{
display: block;
margin-top: 20px;
}
#project #secGallery #gallery-list2>li{
position: relative;
width: 100%;
}
#project #secGallery #gallery-list2>li + li{margin-top: 30px;}
#project #secGallery #gallery-list2>li::before{display: none;}
#project #secGallery #gallery-list2>li>.img,
#project #secGallery #gallery-list2>li>.hover{
position: static;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
#project #secGallery #gallery-list2>li>.img{}
#project #secGallery #gallery-list2>li>.hover{
background-color: transparent;
opacity:1;}
#project #secGallery #gallery-list2>li>.hover .wrap{text-align: left;}
#project #secGallery #gallery-list2>li>.hover .wrap *{color: #000;}
#project #secGallery #gallery-list2>li>.hover .title{
position: relative;
top: auto;
left: auto;
display: flex;
margin: 15px 0 0;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
#project #secGallery #gallery-list2>li>.hover .title .Nm{
display: block;
width: 80px;
padding: 0.3em 0 0;
margin-bottom: 0;
font-size: 12px;
border: none;
}
#project #secGallery #gallery-list2>li>.hover .title .txt{
display: block;
width: calc(100% - 80px);
padding-right: 45px;
padding-left: 1em;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
text-align: left;
border-left: solid 1px #000;
}
#project #secGallery #gallery-list2>li.column>.hover .title::after{
background-image: url(//hoshino-co.com/wp/wp-content/themes/hoshino2.9.4/img/movie/icon_column02.png);
}
#project #secGallery #gallery-list2>li>.hover .title::after{
position: absolute;
top: calc(50% - 15px);
right: 0;
margin: 0;
background-image: url(//hoshino-co.com/wp/wp-content/themes/hoshino2.9.4/img/movie/icon_movie02.png);
}
#project #secGallery #gallery-list2>li>.hover:hover{opacity: 0.6;}
#project #secGallery #gallery-list2 .contents .inner{position: relative;padding: 65px 0 60px;}
#project #secGallery #gallery-list2 .contents .inner *{margin: 0;}
#project #secGallery #gallery-list2 .contents .close-win{
position: absolute;
top: 25px;
right: 0;
}
#project #secGallery #gallery-list2 .contents .view .title .Nm{
margin: 0 0 30px;
font-size: 20px;
}
#project #secGallery #gallery-list2 .contents .view .title .txt{
font-size: 16px;
text-align: justify;
}
#project #secGallery #gallery-list2 .contents .view .image{
width: 100%;
padding-top: 56.2037037037037%;
margin-top: 30px;
}
#project #secGallery #gallery-list2 .contents .view .info{
display: block;
margin-top: 60px;
width: 100%;
}
#project #secGallery #gallery-list2 .contents .view .description{
width: 100%;
padding-right: 0;
font-size: 13px;
line-height: 1.6;
}
#project #secGallery #gallery-list2 .contents .view .prof{
width: 100%;
padding-left: 0;
padding-top: 16px;
margin-top: 16px;
text-align: justify;
border-top: solid 1px #000;
border-left: none;
}
#project #secGallery #gallery-list2 .contents .view .prof .title{font-size: 18px;}
#project #secGallery #gallery-list2 .contents .view .prof .name{font-size: 12px;}
#project #secGallery #gallery-list2 .contents .view .prof .links{
position: static;
margin-top: 16px;
}
#project #secGallery #gallery-list2 .contents .items{padding-top: 50px;}
#project #secGallery #gallery-list2 .contents .items .title{
padding: 0 30px;
margin-bottom: 30px;
font-size: 18px;
}
#project #secGallery #gallery-list2 .contents .items .item-list{
display: block;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
#project #secGallery #gallery-list2 .contents .items .item-list>li{
width: 100%;
text-align: justify;
}
#project #secGallery #gallery-list2 .contents .items .item-list>li + li{margin-top: 30px;}
#project #secGallery #gallery-list2 .contents .items .item-list .spec{margin-top: 20px;}
#project #secGallery #gallery-list2 .contents .items .item-list .links{
padding-top: 20px;
margin-top: 20px;
}
#project #secGallery #gallery-list2 .contents .items .item-list .links dt{margin-bottom: 10px;}
#project #secGallery #gallery-list2 .contents .items .item-list .links dd + dd{margin-top: 10px;}
.navigation{
margin-top: 30px;
} #project #secContact{padding: 30px 0 30px;}
#project #secContact .lead{text-align: center;}
#project #secContact .contact-btn{margin-top: 30px;}
#project #secContact .contact-btn span{cursor: pointer;} #project img.online-link_image{margin-bottom: 5px;}
#project #secondaryNav{margin: 0 auto 40px;}
}