@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*共通*/
.commonPage{
padding-top: 150px;
}
@media screen and (max-width:767px){
.commonPage{
padding-top: 90px;
}
}
.btn a{
border: 1px solid #333;
width: 150px;
height: 34px;
line-height: 34px;
background: #fff;
}
.btn a:hover{
background: #333;
}
/*rollBtn*/
.rollBtn a{
height: 40px;
line-height: 40px;
  border-bottom :1px solid #999;
  width: 100%;
}
.rollBtn.noline a{
border-bottom: none;
}

.rollBtn a .arrow{
width: 9px;
top: 50%;
transform: translate(0,-50%);
right: 0;
}
.rollBtn a:hover .arrow {
animation: btnArrow 800ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes btnArrow {
40%,50% {
opacity: 0;
}
43% {
transform: translate(105%,-50%) scaleY(0.1);
}
44%,50% {
transform: translate(-145%,-50%) scaleY(0.1);
}
100% {
transform: translate(0,-50%) scaleY(1);
}
}
.rollBtn a .txtOuter{
left: 0;
top: 50%;
width: 100%;
transform: translate(0,-50%);
line-height: 1;
}
.rollBtn a .txt{
transition: opacity 650ms,transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.rollBtn a:hover .txt{
opacity: 0;
transform: translate3d(0, -130%, 0);
}
.rollBtn a .txtAfter{
transition: opacity 650ms,transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1);
top: 0;
left: 0;
opacity: 0;
width: 100%;
transform: translate3d(0, 130%, 0);
}
.rollBtn a:hover .txtAfter{
opacity: 1;
transform: translate3d(0, 0, 0);
}
/*areaTtl*/
@media screen and (max-width:767px) {
 .areaTtl{
font-size: 3.2rem;
}
}
/* breadcrumbs*/
.breadcrumbs {
margin: 120px auto 100px;
line-height:1;
color:#ccc;
}
@media screen and (max-width:980px){
.breadcrumbs {
margin: 80px auto 100px;
}
}
@media screen and (max-width:767px){
.breadcrumbs {
margin:65px auto 50px;
height:auto;
padding-bottom:6px;
}
}
@media print {
.breadcrumbs {
display: none;
}
}
.breadcrumbs li{
display:inline;
list-style:none;
vertical-align:middle;
color:#ccc;
}
.breadcrumbs li:after{
content:"";
display: inline-block;
width: 5px;
height: 5px;
color: #ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(45deg);
margin:0 12px 0 10px;
position: relative;
top: -2px;
}
@media screen and (max-width:767px){
.breadcrumbs li:after{
margin:0 8px 0 6px;
width: 3px;
height: 3px;
top: -1px;
}
}
.breadcrumbs li:last-child:after{
display:none;
}
/* ページャー */
.pager{
text-align: center;
position:relative;
height:40px;
line-height:40px;
}
@media screen and (max-width:767px){
.pager{
margin-top:30px;
font-size: 1.4rem;
}
}
.pager a {
border-bottom: 1px solid rgba(255,255,255,0);
padding: 0 20px 15px;
margin:0 5px;
transition: all 0.3s ease 0s;
}
@media screen and (max-width: 767px) {
.pager a {
padding: 0 10px 10px;
margin:0 3px;
}
}
.pager .current {
border-bottom: 1px solid #000;
color: #000;
padding: 0 20px 15px;
margin:0 5px;
}
@media screen and (max-width: 767px) {
.pager .current {
padding: 0 10px 10px;
margin:0 3px;
}
}
.pager .nextpostslink{
padding: 0 0 5px;
margin:0;
position: absolute;
top: 0;
right: 0;
font-weight: normal;
}
.pager .previouspostslink{
padding: 0 0 5px;
margin:0;
position: absolute;
top: 0;
left: 0;
font-weight: normal;
}
@media screen and (max-width: 767px) {
.pager .nextpostslink,
.pager .previouspostslink{
padding:0;
}
}
.pager .arrow{
margin:5px;
top:-1px;
}
/*commonBlock*/
.commonBlock .colum2 .txtBoxIn{
width: 47.5%;
}
@media screen and (max-width:767px) {
.commonBlock .colum2 .txtBoxIn{
width:100%;
}
.commonBlock .colum2 .txtBoxIn:first-child{
margin-bottom: 40px;
}
}
.commonBlock .contentsBlock .semiBlock:last-child{
margin-bottom: 0;
}
.commonBlock .colum2 .imgBoxIn{
width: 50%;
}
@media screen and (max-width:767px) {
.commonBlock .colum2 .imgBoxIn{
width:100%;
}
}
.commonBlock .colum2 .imgBoxIn:first-child .txtBoxIn{
margin-left: calc(50vw - 650px);
margin-right: 5%;
width: auto;
}
@media screen and (max-width:1444px) {
.commonBlock .colum2 .imgBoxIn:first-child .txtBoxIn{
margin-left: 10%;
margin-right: 5%;
}
}
@media screen and (max-width:767px) {
.commonBlock .colum2 .imgBoxIn:first-child .txtBoxIn{
margin:0 5% 50px;
}
}
.commonBlock .colum2 .imgBoxIn:last-child .txtBoxIn{
margin-right: calc(50vw - 650px);
margin-left: 20px;
width: auto;
}
@media screen and (max-width:1444px) {
.commonBlock .colum2 .imgBoxIn:last-child .txtBoxIn{
margin-right: 10%;
margin-left: 3%;
}
}
@media screen and (max-width:767px) {
.commonBlock .colum2 .imgBoxIn:last-child .txtBoxIn{
margin:0 5%;
}
}
.commonBlock video{
width: 100%;
height: auto;
}
.commonBlock .img + .img,
.commonBlock .img + .movie,
.commonBlock .movie + .img{
margin-top: -50px;
}
@media screen and (max-width:767px) {
.commonBlock .img + .img,
.commonBlock .img + .movie,
.commonBlock .movie + .img{
margin-top: -45px;
}
}
.commonBlock .txtBox a:link,
.commonBlock .txtBox a:visited
{
text-decoration:underline;
}
.commonBlock .txtBox a:hover,
.commonBlock .txtBox a:active
{
text-decoration:none;
}
.commonBlock .txtBox .btn a:link,
.commonBlock .txtBox .btn a:visited
{
text-decoration:none;
}
.commonBlock .txtBox .btn a:hover,
.commonBlock .txtBox .btn a:active
{
text-decoration:none;
}
.commonBlock .fs-27{
font-size: 2rem;
}
@media screen and (max-width:767px){
.commonBlock .fs-27{
font-size: 1.8rem;
}
}
/*blogLink*/
.blogLink .link:first-child{
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid #333;
}
/*cateNavi*/
.cateNavi .navi{
margin-right: 3rem;
}
@media screen and (max-width:767px){
.cateNavi .navi{
font-size: 1.3rem;
margin-right:1.5rem;
margin-bottom: 20px;
}
}
.cateNavi .navi a{
padding-bottom: 10px;
border-bottom: 1px solid #fff;
}
@media screen and (max-width:767px){
.cateNavi .navi a{
padding-bottom: 5px;
}
}
.cateNavi .navi a:hover,
.cateNavi .navi.on a{
border-bottom: 1px solid #999;
}
/*worksList*/
.worksList li{
width: 32%;
margin-right: 2%;
}
@media screen and (max-width:980px){
.worksList li{
width: 47.5%;
margin-right: 5%;
}
}
@media screen and (max-width:767px){
.worksList li{
width: 100%;
margin-right: 0;
}
}
.worksList li:nth-child(3n){
margin-right: 0;
}
@media screen and (max-width:980px){
.worksList li:nth-child(3n){
margin-right: 5%;
}
.worksList li:nth-child(2n){
margin-right: 0;
}
}
@media screen and (max-width:767px){
.worksList li:nth-child(3n){
margin-right: 0;
}
}
.worksList li .img{
padding-top: 66.6666%;
}
.worksList li .img img{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height:auto;
transform:translate(-50%,-50%);
}
/*memberList*/
.memberList li{
width: 18%;
margin-right: 2.5%;
}
@media screen and (max-width:980px){
.memberList li{
width: 32%;
margin-right: 2%;
}
}
@media screen and (max-width:767px){
.memberList li{
width: 47.5%;
margin-right: 5%;
}
}
.memberList li:nth-child(5n){
margin-right: 0;
}
@media screen and (max-width:980px){
.memberList li:nth-child(5n){
margin-right: 2%;
}
.memberList li:nth-child(3n){
margin-right: 0;
}
}
@media screen and (max-width:767px){
.memberList li:nth-child(3n){
margin-right: 5%;
}
.memberList li:nth-child(2n){
margin-right: 0;
}
}
.memberList li .img{
padding-top: 100%;
}
.memberList li .img img{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height:auto;
transform:translate(-50%,-50%);
}
/* fixbn */
.fixbn{
bottom:20px;
right:20px;
width:370px;
z-index:1000;
}
@media screen and (max-width:767px){
.fixbn{
bottom:10px;
right:auto;
left: 50%;
transform: translate(-50%,0);
width:90%;
max-width:300px;
}
}
.fixbn a{
height: 65px;
line-height: 65px;
background: rgba(0,0,0,0.5);
}
@media screen and (max-width:767px){
.fixbn a{
height: 55px;
line-height: 55px;
}
}
.fixbn a:hover{
  background: rgba(0,0,0,0.9);
}
/*規約関連*/
.cancel{
width: 100%;
max-width: 800px;
}
.cancel th,
.cancel td{
padding: 10px 0;
border: 1px solid #fff;
width: 25%;
}