@charset "UTF-8";
.bg-twitter {
background-color: #1DA1F2;
}
.bg-twitter:hover {
background-color: #61bef8;
}
.bg-facebook {
background-color: #1877f2;
}
.bg-facebook:hover {
background-color: #66a1ee;
}
.bg-instagram {
background-color: #CF2E92;
}
.bg-instagram:hover {
background-color: #d16eab;
}
.bg-youtube {
background-color: #DA1725;
}
.bg-youtube:hover {
background-color: #d65e66;
} }
#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; font-size: 14px;
border-radius:15px;
}
.pagination span {
color: #fbbf24;
padding: 5px 10px;
display: inline-block;
}
.pagination span.current {  background-color:#fbbf24;
border-radius:15px;
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 {
position: fixed;
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;
}
@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{
margin-top:60px;
}
.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;
}
}
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
}
}

body { animation: bgiLoop 100s linear infinite;
}
@keyframes bgiLoop {
0% { background-position: 0 0;}
100% { background-position: 2206px -2215px;}
}
.shape1{
border: solid 1px #000;
border-radius: 176px 10px 176px 56px;
}
.shape2{
border: solid 1px #000;
border-radius: 10px 176px 56px 176px;
}
.wave{
position:relative;
height:200px;animation-name
}
canvas{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}
header {
background-color: #FFFFFF;
border-bottom: medium solid #AE1313;
position: fixed;
width: 100vw;
}.fluid {
width:100%; height: 70vh;  animation: fluidrotate 30s ease 0s infinite; }
@keyframes fluidrotate {  
0%, 100% {
border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
background:#6a5285;
}
14% {
border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
background:#edb5d1;
}
28% {
border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; background:#ea5514;
}
42% {
border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
background:#f3ea43;
}
56% {
border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
background:#6dbe85;
}
70% {
border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
background:#6ec4c3;
}
84% {
border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
background:#646cb0;
}
}
@media screen and (orientation: portrait) {
.fluid {
height: 40vh; }
}