#collabo .container {
max-width: 1200px;
}
#single_nav a:hover, .btn-opacity:hover {
opacity: 0.8 ;
}
.title-font{
font-family: vdl-linegrpop-shadow, vdl-linegrpop-shadow;
}
.twitter_color {
color: #1DA1F2;
}
.twitter_color:hover {
color: #61bef8;
}
.bg-twitter {
background-color: #1DA1F2;
}
.bg-twitter:hover {
background-color: #61bef8;
}
.bg-facebook {
background-color: #1877f2;
}
.bg-facebook:hover {
background-color: #66a1ee;
}
.instagram_color {
color: #CF2E92;
}
.instagram_color:hover {
color: #d16eab;
}
.bg-instagram {
background-color: #CF2E92;
}
.bg-instagram:hover {
background-color: #d16eab;
}
.bg-youtube {
background-color: #DA1725;
}
.bg-youtube:hover {
background-color: #d65e66;
}
.spikes {
position: relative;
background: #fff;
}
.spikes::after {
content: '';
position: absolute;
right: 0;
left: -0%;
top: 100%;
z-index: 10;
display: block;
height: 45px;
background-size: 45px 100%;
background-image: linear-gradient(135deg, #fff 25%, transparent 25%), linear-gradient(225deg, #fff 25%, transparent 25%);
background-position: 0 0;
}
.spikes2 {
position: relative;
background: #c4ecae;
}
.spikes2::after {
content: '';
position: absolute;
right: 0;
left: -0%;
top: 100%;
z-index: 10;
display: block;
height: 45px;
background-size: 45px 100%;
background-image: linear-gradient(135deg, #c4ecae 25%, transparent 25%), linear-gradient(225deg, #c4ecae 25%, transparent 25%);
background-position: 0 0;
}
.bg-round-top {
border-top-right-radius: 15rem;
border-top-left-radius: 15rem;
}
.bg-left, .bg-right{
position: relative;
}
.bg-left:before {
position: absolute;
content: '';
top: 0;
bottom: 0;
right: 0;
width: 94%;
z-index: -1;
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
}
.bg-right:before {  
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
width: 94%;
z-index: -1;
border-top-right-radius: 200px;
border-bottom-right-radius: 200px;
}
#news.bg-left:before {
background: linear-gradient(180deg, #6ec4c3, #fff); }
#works.bg-right:before {
background: linear-gradient(180deg, #fdd, #fff); }
#company.bg-right:before {
background: linear-gradient(180deg, #6ec4c3, #fff);
}
.bg-thumbnail-1{
position: relative;
overflow: hidden;
width: 100%;
height:0;
padding-top: 75%;
}
.bg-thumbnail-2{
position: relative;
overflow: hidden;
width: 100%;
height:0;
padding-top: 75%;
}
.bg-thumbnail-2 div img {
height: 100%;
}
.bg-thumbnail{
position: relative;
overflow: hidden;
width: 100%;
height:0;
padding-top: 61.8%;
}
.bg-thumbnail div, .bg-thumbnail-1 div, .bg-thumbnail-2 div{
width: 100%;
height:100%;
position: absolute;
top: 50%;
left: 50%;
background-repeat:no-repeat;
background-position: center;
background-size:contain;
transform: translate(-50%,-50%);
transition: 0.2s;
}
.bg-thumbnail-1 div{
background-position: top;
background-size:cover;
}
.contents-box:hover .bg-thumbnail div, .contents-box:hover .bg-thumbnail-1 div {
cursor: pointer;
transform: translate(-50%,-50%) scale(1.2);
}
.contents-box:hover a{
color: #fbbf24;
}
.thumbnail-center img {
margin: 0 auto;
}
.p_mamrgin0 p{
margin: 0!important;
padding: 0;
}
.contents-r-ml, .contents-l-ml{
margin-left: 50px;
}
.contents-r-mr, .contents-l-mr{
margin-right: 50px;
}
.pagination h2.screen-reader-text { display: none; }
.pagination a {
padding: 2px 10px;
display: inline-block;  border-radius:15px;
}
.pagination span { padding: 5px 10px;
display: inline-block;
}
.pagination span.current {  background-color:#ffffff; padding: 0px 10px;
}
.pagination {
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
clear: both;
} .site-title{
margin: 0;
line-height: 88px;
font-size: 25px;
font-family: ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
}
.main-navigation li{
line-height: 20px;
padding-top: 34px;
padding-bottom: 34px;
}
.header-nav { top: 0px;
left: 0px;
width: 100vw;
z-index: 101;
}
header a, .main-navigation a { font-weight: 600;
position: relative;
display: inline-block;
text-decoration: none;
}
.main-navigation a::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 2px; transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
}
.main-navigation a:hover::after {
transform: scale(1, 1);
}
.main-navigation {
display: block;
width: 100%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
display: block;
left: auto;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation li {
position: relative;
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.main-navigation a {
display: block;
text-decoration: none;
} .menu-toggle,
.main-navigation.toggled ul {
display: block;
}
.drawer--right.drawer-open .drawer-hamburger {
right: 0!important;
}
.drawer--right .drawer-hamburger span, .drawer--right .drawer-hamburger span::before, .drawer--right .drawer-hamburger span::after {
background-color: #6a5285;	
}
.drawer--right.drawer-open .drawer-hamburger span::before, .drawer--right.drawer-open .drawer-hamburger span::after {
background-color: #6a5285;
}
.drawer--right.drawer-open .drawer-hamburger span{
background-color: transparent;
}
.drawer-nav ul{
margin: 3em 1em;
}
.drawer-nav .drawer-menu-item {
padding: 0;
}
.drawer-nav .drawer-menu-item > a {
display: block;
padding: 1rem 1rem 1rem 2.5rem;
padding: 1rem;
text-decoration: none;
color: #6a5285;
border-bottom: 1px solid #6a5285;
}
.drawer-nav { box-shadow: 0 4px 3px -3px rgb(0 0 0 / 12%);
} .accordion {
margin: 3em auto;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
border: solid 1px #ccc;
padding: 1em;
display: block;
color: #333;
font-weight: bold;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}
.toggle:checked + .title + .content {
max-height: 5000px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}
main{ }
@media (min-width: 1500px){
.contents-r-ml{
margin-left: calc((100% - (1500px - 50px * 2)) / 2);
}
.contents-r-mr{
margin-right: calc(100% - (1500px - 50px * 2));
}
.contents-l-ml{
margin-left: calc(100% - (1500px - 50px * 2));
}
.contents-l-mr{
margin-right: calc((100% - (1500px - 50px * 2)) / 2);
}
}
@media (max-width: 640px){
.contents-r-ml, .contents-l-ml, .contents-r-mr, .contents-l-mr{
margin-left: 0px;
margin-right: 0px;
}
table th, table td {
display: block;
width: 100%;
}
.site-title{
line-height: 60px;
font-size: 25px;
}
.main-navigation li{
line-height: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
main{ }
.contents-box:hover .bg-thumbnail div, .contents-box:hover .bg-thumbnail-1 div {
transform: translate(-50%,-50%);
}
.bg-left:before {
width: 100%;
border-bottom-left-radius: 0px;
}
.bg-right:before {  
width: 100%;
border-bottom-right-radius: 0px;
}
.bg-round-top {
border-top-right-radius: 5rem;
border-top-left-radius: 5rem;
}	
}
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
justify-content: center;
}
}