@charset "UTF-8";
/* CSS Document */
/*
Theme Name: Imajin
Author: [sb] 
Description: レスポンシブ
*/
/* =============================================
share
================================================ */
.pc { display: block; }

.mb { display: none; }

a { color: #000000; }

a:hover { color: #777; }

a img { -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; backface-visibility: hidden; }

a:hover img { opacity: 0.6; filter: alpha(opacity=60); }

p, .text { line-height: 180%; color: #555; font-size: 90%; }

.center { margin: 0 auto; padding-left: 20px; padding-right: 20px; max-width: 920px; }

/* =============================================
top
================================================ */
#top { text-align: center; }

#imajin h1 { padding: 24% 0 40px; }
#imajin h1 img { width: 500px; height: 91px; }
#imajin p { font-size: 120%; }
#imajin .image { margin: 100px auto 60px; position: relative; }
#imajin .image:before, #imajin .image:after { content: ""; display: block; position: absolute; top: 0; }
#imajin .image:before { width: 97%; height: 97%; left: 2%; background-color: #060360; animation: bg-color 10s infinite; -webkit-animation: bg-color 10s infinite; }
#imajin .image:after { width: 100%; height: 100%; left: 0; background: url(img/text.svg) no-repeat center bottom; background-size: cover; }
@-webkit-keyframes bg-color { 0% { background-color: #E5006A; }
  40% { background-color: black; }
  100% { background-color: #E5006A; } }
@keyframes bg-color { 0% { background-color: #E5006A; }
  40% { background-color: black; }
  100% { background-color: #E5006A; } }
#imajin .image img { width: 100%; height: auto; display: block; position: relative; z-index: 2; }
#imajin .image .underconstruction { width: 20%; padding-bottom: 20%; background: black; position: absolute; z-index: 2; border-radius: 50%; left: 40%; margin-left: -10px; top: 70%; border: solid 10px white; }
#imajin .image .underconstruction p { color: white; line-height: 130%; font-size: 2vw; position: absolute; width: 100%; top: 38%; }

.sec_title { font-size: 170%; margin-bottom: 40px; }

#service { background: #EBEBEB; padding: 80px 0; }
#service h1 { font-size: 150%; margin-bottom: 40px; }
#service ul { overflow: hidden; }
#service ul li:not(:last-child) { width: 31%; float: left; height: 270px; }
#service ul li:last-child { width: 100%; float: left; }
#service ul li:nth-child(3n) { margin-left: 3.5%; margin-right: 3.5%; }
#service ul li { margin-bottom: 40px; padding-top: 10px; }
#service ul li:nth-child(1) b { background-image: url(img/title_bg/bg1.svg); }
#service ul li:nth-child(2) b { background-image: url(img/title_bg/bg2.svg); }
#service ul li:nth-child(3) b { background-image: url(img/title_bg/bg3.svg); }
#service ul li:nth-child(4) b { background-image: url(img/title_bg/bg4.svg); }
#service ul li:nth-child(5) b { background-image: url(img/title_bg/bg5.svg); }
#service ul li:nth-child(6) b { background-image: url(img/title_bg/bg6.svg); }
#service ul li:nth-child(7) b { background-image: url(img/title_bg/bg7.svg); }
#service ul p { text-align: left; padding: 0 6px; }
#service a { font-weight: bold; }
#service b { display: block; line-height: 90px; height: 90px; margin-bottom: 20px; font-weight: bold; font-size: 95%; border-radius: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; }

#works { background: black; padding: 80px 0; color: white; }
#works b { display: block; margin-bottom: 10px; }
#works p, #works a { text-decoration: none; color: white; margin-bottom: 30px; }
#works ul { overflow: hidden; }
#works ul li { width: 31%; float: left; margin-bottom: 40px; font-size: 90%; }
#works ul li:nth-child(3n-1) { margin-left: 3.5%; margin-right: 3.5%; }
#works ul img { width: 100%; height: auto; margin-bottom: 10px; }

#company { padding: 80px 0 0; }
#company p, #company a { text-decoration: none; margin-bottom: 30px; }
#company img { display: block; margin: 40px auto; width: 220px; height: 40px; }

footer { text-align: center; font-size: 90%; padding: 30px 0; }