@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(min-width:960px){

/*STYLE*/
.sp {
display:none;
}

p {
font-size:1rem;
font-weight:300;
line-height:180%;
letter-spacing:1.5px;
}

img {
width:100%;
height:auto;
}

.cts {
width:1000px;
margin:auto;
}

.font {
font-family:'Montserrat', sans-serif;
}

h1{
}

h2 {
font-size:400%;
font-weight:700;
line-height:100%;
letter-spacing:5px;
padding-bottom:30px;
}

h3 {
font-size:130%;
font-weight:700;
line-height:100%;
letter-spacing:3px;
padding-bottom:15px;
}

.kanatitle {
font-size:80%;
font-weight:bold;
padding-bottom:50px;
text-align:center;
}

.asterisk {
width:20px;
margin:0 auto 10px;
}

.titles {
}

.titles .copy {
font-size:90%;
line-height:180%;
padding-bottom:30px;
}

.titles .copy p {
font-size:100%;
line-height:180%;
padding-bottom:30px;
}

.titles .copy p:last-child {
padding-bottom:0;
}

.titles .line {
height:2px;
background:#464646;
}

.inviewfadeInLine {
width:0;
transition:0.5s ease;
}

.fadeInLine {
width:70px;
transform:translate(0, 0);
}

.arrow_next {
position:relative;
display:flex;
align-items:center;
margin-left:10px;
}

.arrow_next:before {
content:"";
width:7px;
height:7px;
border-top:#d7293f 1px solid;
border-right:#d7293f 1px solid;
transform: rotate(45deg);
position:absolute;
left:0;
}

.arrow_prev {
position:relative;
display:flex;
align-items:center;
margin-right:10px;
}

.arrow_prev:before {
content:"";
width:7px;
height:7px;
border-bottom:#d7293f 1px solid;
border-left:#d7293f 1px solid;
transform: rotate(45deg);
position:absolute;
right:0;
}





/*MV*/
#mv {
width:100vw;
height:100vh;
overflow:hidden;
position:relative;
}

#mv .mv {
width:100vw;
height:100vh;
}

#mv video {
min-width:100%;
min-height:100%;
width:auto;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

#mv .mask {
width:100%;
height:100%;
/*background:rgba(0,0,0,0.75);*/
background:url(../img/mv_mk.png);
position:absolute;
top:0;
left:0;
}

#mv .objs {
position:absolute;
width:500px;
margin:auto;
top:20vh;
left:0;
right:0;
z-index:9;
}

#mv .mv_logo {
width:250px;
margin:0 auto 50px;
opacity:0;
}

#mv .mv_copies {
padding-bottom:50px;
}

#mv .mv_copies .mv_copy {
font-size:100%;
font-weight:300;
color:#fff;
text-align:center;
padding-bottom:5px;
letter-spacing:2px;
}

#mv .objs .btns {
width:435px;
margin:auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

#mv .objs .btns .btn {
width:210px;
padding-bottom:18px;
opacity:0;
}

#mv .objs .btns .btn a {
border:#fff 1px solid;
display:block;
color:#fff;
text-align:center;
padding:10px 12px;
border-radius:30px;
font-size:80%;
font-weight:300;
}

#mv .objs .btns .btn a:hover {
animation:mv_hover 0.5s ease forwards;
}





/*ABOUT*/
#about {
padding:100px 0 150px;
}

#about .projects {
display:flex;
justify-content:space-between;
padding-top:70px;
}

#about .projects .project {
width:300px;
}

#about .projects .project .photo {
padding-bottom:25px;
}

#about .projects .project:first-child .photo {
transition-delay:0;
}

#about .projects .project:nth-child(2) .photo {
transition-delay:0.3s;
}

#about .projects .project:last-child .photo {
transition-delay:0.6s;
}

#about .projects .project .ex {
font-size:85%;
}





/*CONCEPT*/
#concept {
padding:150px 0 150px;
background:#fff;
}

#concept .concept {
display:flex;
align-items:center;
padding-bottom:150px;
}

#concept .concept .photo {
width:50%;
height:500px;
background:url(../img/concept.jpg) center;
background-size:cover;
}

#concept .concept .details {
width:50%;
max-width:500px;
padding-left:50px;
}

#concept .approach {
display:flex;
flex-direction:row-reverse;
align-items:center;
padding-bottom:150px;
}

#concept .approach .photo {
width:50%;
height:500px;
background:url(../img/approach.jpg) center;
background-size:cover;
}

#concept .approach .details {
width:50%;
max-width:500px;
padding-right:50px;
}

#concept .relation {
display:flex;
align-items:center;
}

#concept .relation .photo {
width:50%;
height:500px;
background:url(../img/relation.jpg) center;
background-size:cover;
}

#concept .relation .details {
width:50%;
max-width:500px;
padding-left:50px;
}





/*TOP_TOPICS*/
#top_topics {
background:#fff;
}

#top_topics .topic {
width:1000px;
margin:auto;
display:flex;
align-items:center;
padding:25px 0;
}

#top_topics .topic a {
display:inline-block;
}

#top_topics .topic a .topics_cts {
display:flex;
align-items:center;
}

#top_topics .topic a .cate_date {
width:240px;
display:flex;
align-items:center;
}

#top_topics .topic a .cate_date .cate {
width:100px;
height:18px;
font-size:65%;
border:#464646 1px solid;
display:flex;
justify-content:center;
align-items:center;
color:#464646;
}

#top_topics .topic a .cate_date .date {
font-size:90%;
width:115px;
color:#464646;
}

#top_topics .topic a .title {
max-width:760px;
font-size:90%;
color:#464646;
padding-top:2px;
}





/*TOPICS*/
#topics {
padding:150px 0;
}

#topics .cts {
width:1000px;
}

#topics h3 {
font-size:300%;
text-align:center;
padding-bottom:50px;
letter-spacing:7px;
}

#topics .topics {
padding-bottom:30px;
}

#topics .topics .topic {
margin-bottom:35px;
}

#topics .topics .topic:last-child {
margin-bottom:0;
}

#topics .topics .topic a {
display:inline-block;
}

#topics .topics .topic a .topics_cts {
display:flex;
align-items:flex-start;
}

#topics .topics .topic a .cate_date {
width:240px;
display:flex;
align-items:center;
}

#topics .topics .topic a .cate_date .cate {
width:100px;
height:18px;
font-size:65%;
border:#464646 1px solid;
display:flex;
justify-content:center;
align-items:center;
color:#464646;
}

#topics .topics .topic a .cate_date .date {
font-size:90%;
width:115px;
color:#464646;
}

#topics .topics .topic a .title {
max-width:760px;
font-size:90%;
color:#464646;
padding-top:2px;
}

#topics .more_btn {
text-align:right;
}

#topics .more_btn a {
display:flex;
justify-content:flex-end;
align-items:center;
}

#topics .more_btn a .more {
font-size:85%;
font-weight:500;
color:#464646;
}

#topics .sns_icons {
display:flex;
justify-content:center;
margin-top:70px;
}

#topics .sns_icons a {
width:30px;
margin-right:30px;
}

#topics .sns_icons a:last-child {
margin-right:0;
}





/*TOP_CONTACT*/
#top_contact {
background:#fff;
padding:150px 0 150px;
}

#top_contact .cts {
width:600px;
}

#top_contact h3 {
font-size:300%;
text-align:center;
padding-bottom:50px;
letter-spacing:7px;
}

#top_contact .copy {
text-align:center;
font-size:90%;
padding-bottom:25px;
}

#top_contact .contact_btn {
width:300px;
margin:0 auto 30px;
color:#fff;
background:#d7293f;
text-align:center;
}

#top_contact .contact_btn a {
display:block;
padding:20px;
color:#fff;
font-size:90%;
letter-spacing:2px;
}

#top_contact .contact_btn:hover {
animation:hover 0.4s ease forwards;
}

#top_contact .attentions {
width:650px;
margin:auto;
}

#top_contact .attentions .attention {
display:flex;
font-size:70%;
color:#aaa;
}





/*UNDER*/
.under h2 {
font-size:500%;
}

.under .titles {
padding-bottom:30px;
}

.bread {
font-size:70%;
text-align:right;
padding-bottom:50px;
}

.bread a {
color:#464646;
}

.bread span {
margin:0 10px;
}

.BackBtn {
text-align:center;
}

.BackBtn a {
display:flex;
justify-content:center;
align-items:center;
}

.BackBtn .back {
font-size:90%;
font-weight:500;
letter-spacing:2px;
}





/*LATTELOG*/
#lattelog {
padding:100px 0;
}

#lattelog .lattelog {
display:flex;
flex-direction:row-reverse;
justify-content:space-between;
}

#lattelog .lattelog .blogarea {
width:770px;
}

#lattelog .lattelog .infoarea {
width:170px;
}

#lattelog .lattelog .infoarea .sns_icons {
display:flex;
}

#lattelog .lattelog .infoarea .sns_icons a {
width:24px;
margin-right:20px;
}

#lattelog .lattelog .infoarea .sns_icons a:last-child {
margin-right:0;
}

#lattelog .category {
padding-bottom:50px;
}

#lattelog .category p {
margin-bottom:12px;
font-size:80%;
}

#lattelog .category p a {
letter-spacing:1px;
}

#lattelog .category p.now a {
font-weight:600;
border-bottom:#464646 1px solid;
pointer-events:none;
}

#lattelog .category p.none a {
color:#ccc;
pointer-events:none;
}

#lattelog .category p:last-child {
margin-right:0;
}

#lattelog .category p a {
}

#lattelog .memos {
padding-bottom:70px;
}

#lattelog .memos .memo {
margin-bottom:30px;
}

#lattelog .memos .memo:last-child {
margin-bottom:0;
}

#lattelog .memos .memo h4 {
font-size:85%;
font-weight:500;
}

#lattelog .memos .memo p {
font-size:80%;
}

#lattelog .topics {
padding-bottom:30px;
}

#lattelog .topics .topic {
border-bottom:#ddd 1px solid;
}

#lattelog .topics .topic:first-child {
border-top:#ddd 1px solid;
}

#lattelog .topics .topic:last-child {
margin-bottom:0;
}

#lattelog .topics .topic a {
display:block;
padding:45px 0;
}

#lattelog .topics .topic a .topics_cts {
display:flex;
align-items:flex-start;
}

#lattelog .topics .topic a .cate_date {
width:240px;
display:flex;
align-items:center;
}

#lattelog .topics .topic a .cate_date .cate {
width:100px;
height:18px;
font-size:65%;
border:#464646 1px solid;
display:flex;
justify-content:center;
align-items:center;
color:#464646;
}

#lattelog .topics .topic a .cate_date .date {
font-size:90%;
width:115px;
color:#464646;
}

#lattelog .topics .topic a .title {
max-width:480px;
font-size:90%;
color:#464646;
padding-top:2px;
}





/*LATTELOG DETAIL*/
#lattelog .lattelog .blogarea .blog {
padding-bottom:100px;
}

#lattelog .lattelog .blogarea .blog .titles {
padding-bottom:10px;
}


#lattelog .lattelog .blogarea .blog .titles .cate {
width:100px;
height:20px;
font-size:70%;
border:#464646 1px solid;
display:flex;
justify-content:center;
align-items:center;
color:#464646;
margin-bottom:10px;
}

#lattelog .lattelog .blogarea .blog .titles h3 {
font-size:200%;
font-weight:600;
line-height:150%;
padding-bottom:5px;
}

#lattelog .lattelog .blogarea .blog .titles .date {
font-size:80%;
color:#464646;
}

#lattelog .lattelog .blogarea .blog .sns {
display:flex;
justify-content:flex-end;
margin-bottom:20px;
}

#lattelog .lattelog .blogarea .blog .sns a {
}

#lattelog .lattelog .blogarea .blog .sns .fb-like {
margin-left:10px;
}

#lattelog .lattelog .blogarea .blog .photo {
}

#lattelog .lattelog .blogarea .blog .detail {
margin-top:30px;
}

#lattelog .lattelog .blogarea .blog .youtube {
width:100%;
margin:50px auto 0;
padding-top: 56.25%;
position:relative;
}

#lattelog .lattelog .blogarea .blog .youtube iframe {
position: absolute;
top:0;
right:0;
width:100% !important;
height:100% !important;
}

#lattelog .lattelog .blogarea .blog .btn_file {
margin-top:50px;
display:flex;
align-items:center;
}

#lattelog .lattelog .blogarea .blog .btn_file p {
font-weight:500;
line-height:100%;
}

#lattelog .lattelog .blogarea .blog .btn_link {
margin-top:30px;
display:flex;
align-items:center;
}

#lattelog .lattelog .blogarea .blog .btn_link p {
font-weight:500;
line-height:100%;
}

#lattelog .transition {
display:flex;
justify-content:center;
align-items:center;
}

#lattelog .transition a {
display:flex;
align-items:center;
margin:0 30px;
}

#lattelog .transition a.none {
opacity:0.3;
pointer-events:none;
}

#lattelog .transition a p {
font-size:90%;
font-weight:500;
}




/*PAGENATION*/
.pagenation {
display:flex;
justify-content:center;
align-items:center;
}

.pagenation p {
font-size:90%;
}

.pagenation p a {
display:block;
text-decoration:none;
color:#464646;
padding:5px 10px;
margin:0 5px;
}

.pagenation p.now a {
font-weight:600;
}

.pagenation p.none {
opacity:0.3;
pointer-events:none;
}





/*コンテンツ装飾*/
#lattelog .blogarea .main .blog_cts {
}

#lattelog .blogarea .main .blog_cts .photo {
width:100%;
padding-bottom:50px;
}

#lattelog .blogarea .main h5 {
border-left:#d7293f 2px solid;
font-size:100%;
font-weight:bold;
padding:10px 0 10px 15px;
margin:100px 0 20px;
letter-spacing:2px;
}

#lattelog .blogarea .main .blog_cts p {
font-size:90%;
line-height:180%;
margin-bottom:30px;
}

#lattelog .blogarea .main .blog_cts p a {
color:#464646;
}

#lattelog .blogarea .main .blog_cts p:last-child {
margin-bottom:0;
}

#lattelog .blogarea .main .blog_cts .quote {
background:#fff;
padding:25px 35px;
margin-bottom:30px;
font-size:80%;
}

#lattelog .blogarea .main .blog_cts .attention {
font-size:70%;
color:#aaa;
display:flex;
padding-bottom:30px;
}

#lattelog .blogarea .main .btns {
padding-top:100px;
display:flex;
justify-content:center;
}

#lattelog .blogarea .main .btns p {
margin:0 30px;
}

#lattelog .blogarea .main .btns a {
font-size:85%;
color:#464646;
border-bottom:#464646 2px solid;
padding-bottom:3px;
}





/*TALK*/
#lattelog .blogarea .blog .talks {
margin-bottom:30px;
}

#lattelog .blogarea .blog .talks .avatar {
width:50px;
}

#lattelog .blogarea .blog .talks .avatar img {
border-radius:25px;
}

#lattelog .blogarea .blog .talks .talka {
display:flex;
margin-bottom:20px;
}

#lattelog .blogarea .blog .talks .talka p {
display:flex;
align-items:center;
max-width:450px;
padding:18px 25px;
background:#fff;
margin-left:15px;
position:relative;
border-radius:15px;
}

#lattelog .blogarea .blog .talks .talka p:before {
content:"";
width:10px;
height:10px;
position:absolute;
top:20px;
left:-20px;
border-top:transparent 8px solid;
border-right:#fff 10px solid;
border-bottom:transparent 8px solid;
border-left:transparent 10px solid;
}

#lattelog .blogarea .blog .talks .talkb {
display:flex;
flex-direction:row-reverse;
margin-bottom:20px;
}

#lattelog .blogarea .blog .talks .talkb p {
display:flex;
align-items:center;
max-width:450px;
padding:18px 25px;
background:#fff;
margin-right:20px;
position:relative;
border-radius:15px;
}

#lattelog .blogarea .blog .talks .talkb p:after {
content:"";
width:10px;
height:10px;
position:absolute;
top:20px;
right:-20px;
border-top:transparent 8px solid;
border-right:transparent 10px solid;
border-bottom:transparent 8px solid;
border-left:#fff 10px solid;
}





/*CONTACT*/
#contact {
padding:100px 0;
}

#contact .explain {
padding-bottom:50px;
}

#contact .explain .ex {
padding-bottom:30px;
}

#contact .attention {
padding-bottom:30px;
}

#contact .attention p {
font-size:70%;
line-height:180%;
}

#contact .forms {
}

#contact .forms .form {
display:flex;
align-items:flex-start;
margin-bottom:50px;
}

#contact .forms .form .item {
width:180px;
font-size:90%;
padding-top:15px;
}

#contact .forms .form .item .required {
color:#ca2c3e;
padding-left:5px;
}

#contact .forms .form .detail {
width:650px;
font-size:90%;
}

#contact .forms .form .detail .style_name {
width:40%;
}

#contact .forms .form .detail .style_mail {
width:80%;
}

#contact .forms .form .detail .style_cate {
}

#contact .forms .form .detail .style_detail {
width:100%;
height:300px;
}

input, select, textarea {
border:#ccc 1px solid;
padding:18px 20px;
}

#contact .btns {
display:flex;
justify-content:center;
}

#contact .btns .btn {
margin:0 15px;
}

#contact .btns .btn .style_submit {
width:150px;
background:#ca2c3e;
color:#fff;
border:none;
cursor:pointer;
}

#contact .btns .btn .style_fix {
width:150px;
background:#ccc;
color:#fff;
border:none;
cursor:pointer;
}

#contact .forms .form .detail .warning {
font-size:80%;
color:#ca2c3e;
}

#contact .forms .form .detail .warning.show {
display:block;
padding-top:5px;
}



/*CONFIRM*/
#contact.confirm .forms .form .item {
padding-top:0;
}



/*FINISH*/
#finish {
padding:70px 0 150px;
}

#finish .cts {
width:700px;
margin:auto;
}

#finish .message {
padding:70px 0 100px;
}

#finish .message .item {
font-size:90%;
padding-bottom:30px;
}

#finish .message .attentions {
}

#finish .message .attentions .attention {
display:flex;
font-size:70%;
}

#finish .form_close_btn {
width:100px;
margin:auto;
}

#finish .form_close_btn a {
display:block;
font-size:80%;
color:#464646;
border:#464646 1px dotted;
padding:12px 15px 10px;
text-align:center;
line-height:100%;
}





/*FOOTER*/
footer {
background:#2b2321;
padding:50px 0 30px;
}

footer .data {
display:flex;
justify-content:space-between;
padding-bottom:70px;
}

footer .data .foot_l {
}

footer .data .foot_l .foot_logos {
display:flex;
align-items:center;
padding-bottom:20px;
}

footer .data .foot_l .foot_logos .foot_symbol {
width:40px;
margin-right:10px;
}

footer .data .foot_l .foot_logos .foot_logo {
width:180px;
}

footer .data .foot_l .icon {
display:flex;
}

footer .data .foot_l .icon li {
width:20px;
margin-right:20px;
}

footer .data .foot_r {
}

footer .data .foot_r .services {
display:flex;
}

footer .data .foot_r .services li {
width:70px;
margin-left:30px;
}

footer .copyright {
text-align:center;
font-size:70%;
color:#aaa;
font-weight:300;
letter-spacing:1px;
line-height:160%;
}





/*INTRO*/
#intro {
width:100%;
height:100vh;
position:absolute;
z-index:1000;
overflow:hidden;
}

#intro .wrap {
width:100%;
height:100vh;
position:relative;
transform:translate(-10%,0) scale(1.1);
left:10%;
}

#intro .bg {
width:100%;
height:100vh;
background:#2b2321;
}

#intro .left_area {
background:#f5f5f5;
width:100%;
height:100vh;
transform:skewX(135deg) translate(-49%,0);
position:absolute;
z-index:2;
}

#intro .right_area {
background:#f5f5f5;
width:100%;
height:100vh;
transform:skewX(135deg) translate(49%,0);
position:absolute;
z-index:2;
}

#intro .symbol {
width:54px;
margin:auto;
position:absolute;
top:45vh;
left:0;
right:0;
z-index:99;
display:flex;
justify-content:space-between;
}

#intro .symbol .symbol_l {
width:25px;
opacity:0;
}

#intro .symbol .symbol_r {
width:25px;
opacity:0;
}

.vegas-animation-kenburns {
animation: kenburns ease-out;
}

@keyframes kenburns {
0% {transform: scale(1.2);}
100% {transform: scale(1);}
}




/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:14px;
height:30px;
right:20px;
bottom:-30px;
z-index:100;
transition:0.5s;
}

.arrow_on {
bottom:0;
}





/*GROBAL NAVI*/
#grobal {
}

#grobal .nav_btn {
width:40px;
height:40px;
position:fixed;
top:20px;
right:25px;
display:flex;
justify-content:center;
align-items:center;
z-index:997;
transform:translate(0,-200%);
cursor:pointer;
}

#grobal.under .nav_btn {
transform:translate(0,0);
}

#grobal .nav_btn span {
width:100%;
height:2px;
background:#ca2c3e;
position:absolute;
display:block;
}

#grobal .nav_btn span:first-child {
top:7px;
transition:0.5s;
}

#grobal .nav_btn.show span:first-child {
top:18.5px;
transform:rotate(45deg);
}

#grobal .nav_btn span:nth-child(2) {
transition:0.5s;
}

#grobal .nav_btn.show span:nth-child(2) {
top:18px;
transform:rotate(90deg);
}

#grobal .nav_btn span:nth-child(3) {
bottom:7px;
transition:0.5s;
}

#grobal .nav_btn.show span:nth-child(3) {
bottom:19.5px;
transform:rotate(0deg);
}

#grobal .nav_btn span:nth-child(4) {
transition:0.5s;
}

#grobal .nav_btn.show span:nth-child(4) {
bottom:18.5px;
transform:rotate(-45deg);
}

#grobal .nav_close {
width:100%;
height:100%;
background:transparent;
position:fixed;
top:0;
left:0;
z-index:998;
display:none;
cursor:pointer;
}

#grobal .grobal_base {
position:fixed;
top:calc(50% - 210px);
left:calc(0);
border-top:rgba(202,44,62,0.95) 420px solid;
border-right:rgba(202,44,62,0.95) 420px solid;
transform:translate(-130%,90%) rotate(45deg);
z-index:998;
transition:0.5s;
}

#grobal .grobal_base.show {
transform:translate(-30%,0) rotate(45deg);
}

#grobal .grobal_nav {
position:fixed;
top:calc(50% - 210px);
left:calc(0);
height:420px;
display:flex;
flex-direction:column;
justify-content:center;
z-index:999;
transform:translate(-100%,0);
transition:0.5s;
transition-delay:0.2s;
padding-left:50px;
}

#grobal .grobal_nav.show {
transform:translate(0,0);
}

#grobal .grobal_nav nav {
margin-bottom:30px;
}

#grobal .grobal_nav nav:last-child {
margin-bottom:0;
}

#grobal .grobal_nav nav a {
color:#fff;
font-weight:300;
letter-spacing:2px;
}





/*HEAD LOGO*/
.head_symbol {
position:fixed;
top:15px;
left:15px;
display:flex;
align-items:center;
padding-bottom:20px;
width:30px;
transform:scale(0);
transition:0.5s;
}

.symbol_on {
transform:scale(1);
}

.head_symbol.under {
transform:scale(1);
}





/*NOW LOADING*/
#loader {
width:100%;
height:100vh;
background:#000;
position:absolute;
top:0;
left:0;
z-index:999;
display:flex;
justify-content:center;
align-items:center;
}

#loader.loaded {
animation: fadeOut 0.5s forwards;
}




/*PORTFOLIO*/
#portfolio {
padding:100px 0;
}

#portfolio .works {
display:flex;
flex-wrap:wrap;
padding-bottom:100px;
}

#portfolio .works .work {
width:300px;
margin:0 50px 50px 0;
}

#portfolio .works .work:nth-child(3n) {
margin-right:0;
}

#portfolio .works .work .photo {
margin-bottom:25px;
}

#portfolio .works .work .worktitle {
font-weight:bold;
padding-bottom:10px;
}

#portfolio .works .work .cate_date {
font-size:70%;
color:#969696;
}

#portfolio .works .work .client {
font-size:70%;
color:#969696;
}

#portfolio .works .work .management {
font-size:70%;
color:#969696;
}

#portfolio .works .work .data {
font-size:70%;
color:#969696;
}

#portfolio .works .work .view {
padding-top:10px;
display:inline-block;
}

#portfolio .works .work .view .btn {
display:flex;
align-items:center;
}

#portfolio .works .work .view .btn .arrow {
width:6px;
height:6px;
border-top:#d7293f 1px solid;
border-right:#d7293f 1px solid;
transform:rotate(45deg);
margin-right:10px;
}

#portfolio .works .work .view .btn p {
font-size:80%;
}

#portfolio .category {
padding-bottom:50px;
display:flex;
}

#portfolio .category p {
margin-right:30px;
font-size:90%;
}

#portfolio .category p a {
letter-spacing:1px;
}

#portfolio .category p.now a {
font-weight:600;
border-bottom:#464646 1px solid;
pointer-events:none;
}

#portfolio .category p.none a {
color:#ccc;
pointer-events:none;
}

#portfolio .category p:last-child {
margin-right:0;
}

#portfolio .category p a {
}

.modaal-container {
}

.modaal-container img {
max-width:1000px;
max-height:1000px;
}








}