html::-webkit-scrollbar {
width: 12px; }
html::-webkit-scrollbar-track {
background: #f1f1f1; }
html::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #fb6050, #041c7b); border-radius: 10px; border: 3px solid #f1f1f1; } body {
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 1.9;
font-size: 16px;
font-weight: 400;
background: #fafafa;
color: #333;
margin: -2rem 0 0 0;
overscroll-behavior: none;
cursor: none; }
a {
color: #CA82F8;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s; }
a:hover {
text-decoration: none;
color: #CA82F8; }
a:focus, a:active {
outline: none; }
p, span {
margin-bottom: 1em;
font-weight: 400;
}
ul, ol {
display: block;
margin-bottom: 1em; }
h1, h2, h3, h4, h5, h6 {
color: rgba(0, 0, 0, 0.8);
font-family: "Playfair Display", Georgia, serif;
margin: 0 0 30px 0; }
::selection {
color: #fcfcfc;
background: #b7c2c2;
}
#page {
position: relative;
}
.dm-sans {
font-family: "DM Sans", sans-serif;
font-optical-sizing: auto;
}
.fade-left,
.fade-bottom {
opacity: 0;
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.fade-left {
transform: translateX(-50px);
}
.fade-bottom {
transform: translateY(50px);
}
.show.fade-left {
opacity: 1;
transform: translateX(0);
}
.show.fade-bottom {
opacity: 1;
transform: translateY(0);
}
figure{
margin: 0;
}
li {
list-style: none;  
margin: 0;         
padding: 0;      
}
dl {
margin: 0;
padding: 0;
}
dt {
margin: 0;
padding: 0;
font-weight: normal; }
dd {
margin: 0;
padding: 0;
}
ul {
list-style: none; padding: 0; margin: 0; }
@media screen and (max-width:1024px) {
}
@media screen and (max-width:767px) {
} #cursor{
position: fixed; background: #222;
border-radius: 10px;
border: 0px solid #fff;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
z-index: 9999; pointer-events: none; opacity: 0;
transition: transform 0.1s; }
#stalker{
position: fixed;
background: #ff003b;
width: 40px;
height: 40px;
border-radius:30px;
margin: -20px 0 0 -20px; z-index: 9998; pointer-events: none; opacity: 0;
transition: transform 0.1s; }
#cursor.active,
#stalker.active{
transform: scale(1.6);
}
@media screen and (max-width:768px) {
body {
cursor: auto; }
#cursor,
#stalker {
display: none; }
} .laading-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fafafa;
font-family: Arial, sans-serif;
z-index: 100;
overflow: hidden;
}
.loading-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f1f1f1;
transition: transform 0.9s ease-out, opacity 0.9s ease-out;
}
.loading-bg.hidden {
transform: translateY(-100%);
opacity: 0;
}
.loading-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
z-index: 2;
position: relative;
transition: transform 1s ease-out, opacity 1s ease-out;
}
.loading-screen.hidden {
opacity: 0;
}
.load-logo {
width: 140px;
height: 100px;
overflow: hidden;
transform: scale(0.85);
position: relative;
}
#logo-group {
clip-path: inset(105% 0% -5% 0%);
transition: clip-path 1s linear;
}
.logo-visible {
clip-path: none !important;
}
.loader-text {
margin-top: 10px;
font-size: 15px;
font-weight: 500;
color: #041c7b;
}
.laading-wrap.hidden {
display: none;
}
.loader-text.hidden {
transform: translateY(-100%);
opacity: 0;
transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}
.main-content {
opacity: 0;
transition: opacity 2s ease-out, transform 2s ease-out;
}
.main-content.visible {
opacity: 1;
}
@media screen and (max-width: 767px) {
.load-logo {
width: 120px;
height: 80px;
}
} div#side-nav {
position: relative;
z-index: 9999;
transition: opacity 0.5s ease;
}
nav#g-nav ul{
list-style: none;
display: block;
justify-content: center;
padding: 0;
}
nav#g-nav ul li{
position: relative;
}
nav#g-nav ul li a{
display: block;
position: relative;
text-decoration: none;
color: #b1b1b1;
padding: 5px 10px;
font-size: 13px;
transition: all 0.3s;
font-weight: 700;
}
.csi{
padding: 0 0 45px;
}
nav#g-nav ul li.current a,
nav#g-nav ul li a:hover{
color: #222;
text-shadow: #fff 0px 0px 5px;
}
nav#g-nav ul li.current a:before{
content: "・";
position: absolute;
margin: 0 0 0 -1em;
}
.nav-fade-out {
opacity: 0;
}
.nav-fade-in {
opacity: 1;
}
@media screen and (max-width:768px) {
nav#g-nav ul li a:hover{    
color: #666;
}
nav#g-nav ul li.current a {
color:#fff; 
}
p{
font-size: 14px;
line-height: 2;
}
}
@media screen and (max-width: 768px) {
#page {
padding-top: 0; }
}
#main-nav {
position: fixed;
top: 0;
bottom: 0;
right: 0;
padding: 2vw 3vw 3vw 5vw;
width: 35%;
height: 100%;
background: white;
z-index: 1002;
border: 10px solid #243d9d;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8scubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
@media screen and (max-width: 768px) {
#main-nav {
width: 300px; }
}
#main-nav .nav-toggle {
position: absolute;
top: 25px;
right: 30px;
padding: 20px;
height: 44px;
width: 44px;
line-height: 0;
padding: 0 !important;
visibility: hidden;
opacity: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#main-nav .nav-toggle i {
top: 18px !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
text-indent: 0; }
#main-nav .nav-toggle.show {
visibility: visible;
opacity: 1; }
.menu-show #main-nav {
visibility: visible;
opacity: 1;
height: auto;
height: -webkit-fill-available;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
#main-nav ul {
padding: 0;
margin: 0 0 0em 0;
text-align: left;
}
@media screen and (max-width: 768px) {
#main-nav ul {
padding: 20px 0 0 0; } }
#main-nav ul li {
padding: 0;
margin: 0;
list-style: none;
text-align: left; }
#main-nav ul li {
width: 100%;
display: inline-block;
position: relative;
overflow: hidden;
color: #222;
font-size: 3vw;
padding: 0px 0px 0px;
margin: 0 auto 0px;
line-height: 1;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 0.1em;
text-decoration: none;
font-family: "DM Sans", sans-serif;
}
#main-nav ul li a{
display: inline-block;
position: relative;
overflow: hidden;
color: #222;
text-decoration: none;
padding: 0 0 0.5vw;
margin: 2vw 0;
}
#main-nav ul li ul li{
position: relative;
width: 100%;
line-height: 1;
margin: 0 0 -3vw;
padding: 0 0 0 1em;
}
#main-nav ul li ul li:before{
content: "-";
position: absolute;
top: 1.15vw;
left: 0.5vw;
}
#main-nav ul li ul li a {
font-size: 1.5vw;
}
#main-nav ul li a:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(35deg, #f36d5f 0%, #253d9d 100%);
transform: translate(-100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
content: "";
}
#main-nav ul li a:hover:after {
transform: translate(0, 0);
}
.nav-footer {
border-top: 1px solid #ccc;
padding: 3vw 0 2vw;
}
.company-name img {
max-width: 70px;
}
.company-name p {
font-size: 0.9vw;
font-weight: 500;
margin: 0 auto;
}
.company-info p {
font-size: 0.85vw;
font-weight: 500;
margin: 0.5vw auto 0;
}
@media screen and (max-width: 768px) {
#main-nav ul li a {
font-size: 16px; } }
#main-nav ul li a:hover, #main-nav ul li a:active, #main-nav ul li a:focus {
color: black;
outline: none;
text-decoration: none; }
#main-nav ul li.active a {
color: #CA82F8; }
#main-nav .form-group {
margin-bottom: 40px;
position: relative;
width: 100%; }
@media screen and (max-width: 480px) {
#main-nav .form-group {
width: 100%; } }
#main-nav .form-group input::-webkit-input-placeholder {
color: #333333; }
#main-nav .form-group input::-moz-input-placeholder {
color: #333333; }
#main-nav .form-group input::-ms-input-placeholder {
color: #333333; }
#main-nav .form-group input::-o-input-placeholder {
color: #333333; }
#main-nav .form-group input::input-placeholder {
color: #333333; }
#main-nav #search {
font-size: 14px;
width: 100%;
padding-right: 3em;
border: none;
border: 2px solid #f2f2f2;
background: #fafafa;
color: #333333 !important; }
#main-nav button {
position: absolute;
top: 0;
right: -4px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
background: #CA82F8;
color: #fff;
border: none;
padding: 16px; }
#main-nav #email {
font-size: 18px;
width: 100%;
border: none;
border: 2px solid #fff;
background: #fff;
color: #333333 !important; }
.nav-toggle {
cursor: pointer;
text-decoration: none; }
.nav-toggle.active i::before, .nav-toggle.active i::after {
background: none; }
.nav-toggle:hover, .nav-toggle:focus, .nav-toggle:active {
outline: none;
border-bottom: none !important; }
.nav-toggle i {
position: relative;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
width: 50px;
height: 2px;
color: #000;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #000;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.menu-show .nav-toggle i {
background: #000;
color: #fff; }
.nav-toggle i::before, .nav-toggle i::after {
content: '';
width: 50px;
height: 2px;
background: #000;
position: absolute;
left: 0;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
.menu-show .nav-toggle i::before, .menu-show .nav-toggle i::after {
background: #333333; }
.nav-toggle i::before {
top: -10px; }
.nav-toggle i::after {
bottom: -10px; }
.nav-toggle:hover i::before {
top: -13px; }
.nav-toggle:hover i::after {
bottom: -13px; }
.nav-toggle.active i {
background: transparent; }
.nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
.nav-toggle {
z-index: 1003;
position: relative;
display: block;
margin: 0;
cursor: pointer;
margin-top: 10px;
}
@media screen and (max-width:1024px) {
#main-nav {
width: 40%;
padding: 10vw 5vw 3vw 5vw;
}
.menu-show #main-nav {
visibility: visible;
opacity: 1;
height: 70vh;
}
#main-nav ul li a {
padding: 1.5vw 0;
margin: 1.5vw 0;
}
#main-nav ul li a {
font-size: 3vw;
}
#main-nav ul li ul li a {
font-size: 2vw;
}
#main-nav ul li ul li:before {
top: 2.4vw;
}
#main-nav ul {
padding: 0px 0 0px 0;
}
#main-nav ul li {
padding: 10px 0px 10px;
}
.nav-toggle {
margin-top: 8px;
}
}
@media screen and (max-width:767px) {
#page {
overflow: hidden;
padding-top: 0em;
margin-top: -11vw;
}
} header {
padding: 1rem 2rem;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
margin: 0 auto;
}
.header-wrap {
display: flex  ;
align-items: center;
justify-content: space-between;
}
.header-wrap-right {
display: flex;
gap: 3rem;
}
header .navbar-brand {
margin: 0 0 0 1.1%;
}
header .navbar-brand .logo {
text-transform: uppercase;
display: block;
text-align: center;
}
header .navbar-brand .logo span {
display: block;
margin-bottom: 0;
line-height: 1.2;
color: #fff;
}
header .navbar-brand .logo:hover {
text-decoration: none !important;
}
header .navbar-brand .logo:active, header .navbar-brand .logo:focus {
outline: none;
text-decoration: none;
}
.gradient {
position: fixed;
width: 7%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
opacity: 0;
transform: translateX(-100%);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.gradient.showin {
opacity: 1;
transform: translateX(0);
}
.button-link {
position: relative;
display: inline-block;
padding: 0.6rem 2.5rem;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.1em;
color: white;
background-color: #d01a40;
text-decoration: none;
border: 2px solid #d01a40;
border-radius: 50px;
overflow: hidden;
transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
z-index: 1;
}
.button-link::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: white;
transition: width 0.4s ease-in-out;
z-index: -1;
}
.button-link:hover::before {
width: 100%;
}
.button-link:hover {
color: #d01a40;
border-color: #d01a40;
}
@media screen and (max-width:1024px) {
header {
padding: 1rem 2rem 1rem 1rem;
}
.button-link {
font-size: 16px;
}
}
@media screen and (max-width:767px) {
header {
padding: 0.5rem;
}
header .navbar-brand .logo {
text-transform: uppercase;
display: block;
text-align: center;
width: 50px;
height: 50px;
}
header .navbar-brand .logo img{
width: 50px;
height: 50px;
}
.nav-toggle {
display: block;
top: -7px;
right: 15px;
}
.nav-toggle i {
width: 35px;
}
.nav-toggle i::before, .nav-toggle i::after {
content: '';
width: 35px;
}
.button-link {
display: none;
}
#main-nav ul li a,#main-nav ul li  {
font-size: 7vw;
}
#main-nav ul li ul li a {
font-size: 4vw;
}
#main-nav ul li ul {
margin: 2vw 0 0;
}
#main-nav {
width: 70%;
padding: 5vw 5vw 3vw 5vw;
}
#main-nav ul li {
padding: 5px 0px 5px;
}
#main-nav ul li a {
padding: 3vw 0;
margin: 0;
}
#main-nav ul li ul li:before {
top: 1.2vw;
}
#main-nav .nav-toggle {
position: absolute;
top: 0px;
right: 10px;
}
.nav-footer {
padding: 7vw 0 2vw;
}
.company-name img {
width: 50px;
}
.company-name p {
font-size: 12px;
}
.company-info p {
font-size: 10px;
line-height: 1.7;
font-weight: 500;
margin: 1.5vw auto 0;
}
} section#fv {
position: relative;
height: 100vh;
padding-top: 0rem;
overflow: hidden;
background-image: url(//design.e-lifegroup.co.jp/wp-content/themes/design/images/noise.gif);
background-repeat: repeat;
border-bottom: 1px solid #eee;
}
.fv-container{
position: relative;
width: calc(1024 / 810* 100vh);
margin-left: calc(81 / 810* 100vh);
max-width: 100vw;
padding-top: calc(130 / 810* 100vh);
}
.fv-text-container01 {
width: 88%;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: visible;
margin: 0 0 1.8rem;
}
.fv-text-container02 {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: visible !important;
}
.fv-text-container03 {
margin-top: 3.5rem;
width: 60%;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: visible !important;
}
.fv-text-container01 svg,.fv-text-container02 svg,.fv-text-container03 svg {
width: 100%;
height: auto;
max-width: 100%;
} #clip-rect1, #clip-rect2 ,#clip-rect3{
transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; }
#fv-txt01, #fv-txt02, #fv-txt03 {
clip-path: none !important;
}
.clip-rect, .clip-rect02, .clip-rect03 {
display: none;
} @keyframes revealClip {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes revealClip02 {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes revealClip03 {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.scrolldown1{
position:absolute;
right: 15%;
bottom:10px;
height:50px;
}
.scrolldown1 span{
position: absolute;
left: -20px;
top: -30px;
color: #222;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
.scrolldown1::after{
content: "";
position: absolute;
top: 0;
width: 1px;
height: 30px;
background: #222;
animation: pathmove 1.5s ease-in-out infinite;
opacity:0;
}
@keyframes pathmove{
0%{
height:0;
top:0;
opacity: 0;
}
30%{
height:30px;
opacity: 1;
}
100%{
height:0;
top:50px;
opacity: 0;
}
}
@media screen and (max-width:1024px) {
section#fv {
position: relative;
height: calc(100vh - 0rem);
margin-top: 0;
}
.fv-container {
margin-left: 3%;
}
.fv-text-container01 {
width: 73%;
}
.fv-text-container02 {
width: 85%;
}
.fv-text-container03 {
margin-top: 3.5rem;
width: 60%;
}
.fv-container {
padding-top: calc(270 / 810* 100vh);
}
}
@media screen and (max-width:767px) {
.fv-container {
padding-top: calc(290 / 810* 100vh);
}
.fv-text-container01 {
width: 79%;
margin: 0 0 20px;
}
.fv-text-container02 {
width: 90%;
}
.fv-text-container03 {
margin-top: 40px;
width: 78%;
}
} #mission {
position: relative;
padding: 10vw 0;
overflow: hidden;
background: #fafafa;
}
.mission-images {
position: absolute; width: 100%;
height: 100%;
overflow: hidden;
}
.parallax-item {
position: absolute;
height: auto;
will-change: transform;
box-shadow: 0 0 10px #00000014;
}
.parallax-item {
opacity: 0;
transform: translateY(15px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
.parallax-item.show {
opacity: 1;
transform: translateY(0);
} .pi01 { top: 0vh; left: 32vw; width: 36vw; }
.pi02 { top: 12vh; right: 2vw; width:28vw; }
.pi03 { top: 10vh; left: 2vw; width: 20vw; }
.pi04 { top: 34vh; width: 22%; left: 5.5vw; }
.pi05 { top: 44vh; right: 8vw; width: 20vw; }
.pi06 { top: 79vh; left: 3vw; width: 18vw; }
.pi07 { top: 66vh; right: 4vw; width: 15vw; }
.pi08 { top: 68vh; left: 17.5vw; width: 11vw; }
.pi09 { top: 78vh; right: 18vw; width: 12vw; }
.mission-text-content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin: 60vh auto 0;
}
.mission-text-content h2,
.mission-text-content h3 {
font-size: 7.5vw;
font-style: italic;
font-weight: 900;
display: inline-block;
letter-spacing: 0.5rem;
line-height: 1;
color: #fafafa;
padding: 0.05em 0.5em;
position: relative;
overflow: hidden;
z-index: 1;
}
.mission-text-content h3 {
font-size: 5vw;
font-weight: 800;
padding: 0.2em 0.5em;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
margin: 1.5rem 0;
}
.mission-text-content h2::after,
.mission-text-content h3::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: linear-gradient(145deg, #f36d5f 0%, #253d9d 55%);
transform-origin: left center;
transition: width 0.4s ease-in-out;
z-index: -1;
}
.mission-text-content h2.show::after,
.mission-text-content h3.show::after {
width: 100%;
}
.mission-text-wrap {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: auto;
width: 100%;
}
.mission-text {
font-size: 2vw;
line-height: 1;
letter-spacing: 0.1rem;
margin: 1vw 0;
}
.mission-space{
margin-bottom: 1.5rem;
}
.mission-text .char {
opacity: 0; display: inline-block;
font-weight: 700;
color: #333;
transform: scale(1.3); transition: opacity 0.1s ease, transform 0.1s ease;
margin: 0;
}
@media screen and (max-width:1024px) {
.pi01 {
top: 0vh;
left: 26vw;
width: 49vw;
}
.pi02 {
top: 11vh;
right: 2vw;
width: 31vw;
}
.pi03 {
top: 8vh;
left: 2vw;
width: 25vw;
}
.pi04 {
top: 21vh;
width: 34vw;
left: 9.5vw;
}
.pi05 {
top: 19vh;
right: 11vw;
width: 29vw;
}
.pi06 {
top: 38vh;
left: 4vw;
width: 22vw;
}
.pi07 {
top: 32vh;
right: 4vw;
width: 23vw;
}
.pi08 {
top: 31vh;
left: 28vw;
width: 17vw;
}
.pi09 {
top: 25vh;
right: 32vw;
width: 18vw;
}
.mission-text-content {
margin: 55vh auto 0;
}
.mission-text-content h2, .mission-text-content h3 {
font-size: 12vw;
}
.mission-text-content h3 {
font-size: 8vw;
}
.mission-text {
font-size: 3vw;
line-height: 1.3;
}
}
@media screen and (max-width:767px) {
.mission-text-content h2, .mission-text-content h3 {
font-size: 16vw;
max-width: 90%;
margin: 0 auto 30px;
padding: 0.15em 0.5em;
}
.mission-text {
font-size: 5.2vw;
margin: 7px 0;
line-height: 1.4;
}
.mission-text-content {
margin: 60vh auto 0;
}
.mission-text-content h3 {
font-size: 10vw;
max-width: 90%;
margin: 0 auto 30px;
padding: 0.4em 0.4em 0.45em;
}
.pi01 {
top: 0vh;
left: 24vw;
width: 52vw;
}
.pi02 {
top: 8vh;
right: 2vw;
width: 36vw;
}
.pi03 {
top: 4vh;
left: 2vw;
width: 30vw;
}
.pi04 {
top: 17vh;
width: 34vw;
left: 15.5vw;
}
.pi05 {
top: 25¥2vh;
right: 14vw;
width: 31vw;
}
.pi06 {
top: 35vh;
left: 3vw;
width: 31vw;
}
.pi07 {
top: 33vh;
right: 3vw;
width: 25vw;
}
.pi08 {
top: 31vh;
left: 24vw;
width: 27vw;
}
.pi09 {
top: 28vh;
right: 30vw;
width: 22vw;
}
} .case{
position: relative;
margin: 0 auto 0;
padding: 7.5vw 0 0;
background: #f5f6f7;
}
.case::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 1px;
background-color: #111;
transition: width 0.6s ease-in-out;
}
.case.show::before {
width: 100%;
}
.case h2{
width: 100%;
position: relative;
text-align: center;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
font-size: 2.5vw;
font-weight: 800;
color: #222;
letter-spacing: 0.1em;
z-index: 1;
margin: 0 auto 2vw;
display: flex;
align-items: center;
justify-content: center;
}
.case h2 img {
width: 1.3em;
padding-right: 0.3em;
}
.case-work-wrap{
width: 90%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 0 auto 2vw;
padding: 0 0 2vw;
border-bottom: 1px solid #ccc;
}
.case-ex-wrap{
width: 90%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 0 auto 4vw;
}
.case-ex-inner,.case-work-inner {
display: flex  ;
align-items: center;
justify-content: flex-start;
background: #fafafa;
box-shadow: 0 0 10px color(srgb 0 0 0 / 0.1);
padding: 1.5% 2%;
width: 13%;
margin: 0.5%;
}
.case-ex-inner img,.case-work-inner img{
width: 2vw;
max-width: 50px;
margin-right: 0.7em;
}
.case-ex-inner p,.case-work-inner p {
font-size: clamp(14px, 0.9vw, 1000px);
font-weight: 500;
margin: 0;
line-height: 1;
}
.case-txt-wrap p {
font-size: clamp(15px, 1.05vw, 1000px);
line-height: 2;
text-align: center;
color: #222;
font-weight: 600;
}
.case-container {
position: relative;
width: 100%;
margin: 4.5vw auto 1px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.case-box {
width: 50%;
padding: 0 0%;
font-size: 1.5rem;
position: relative;
height: auto;
background: #fafafa;
transform: translateY(0px);
transition: opacity 0.4sease-out, transform 0.6s ease-out;
}
.case-box-header{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.case-box p{
width: 25%;
background: linear-gradient(145deg, #f36d5f 0%, #253d9d 50%);
display: -webkit-inline-box;
color: #fff;
padding: 0.5em 0.3em;
font-size: 2.8vw;
letter-spacing: 0.1em;
font-weight: bold;
font-style: italic;
margin: 1px 0 0 0rem;
text-align: center;
}
.case-icon-wrap {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
.case-icon-wrap img{
max-width: 100%;
width: 60%;
}
.case-list-wrap{
width: 50%;
display: block;
padding: 0;
margin: 0vh;
}
.case-list-wrap dl{
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
.case-list-wrap dl dt{
width: 25%;
font-size: clamp(13px, 0.95vw, 1000px);
border: 1px solid #d01a40;
padding: 0.2em 0.2em;
text-align: center;
font-weight: 600;
margin: 0.2rem auto 0.2rem;
}
.case-list-wrap dl dd{
width: 70%;
font-weight: 600;
font-size: clamp(13px, 0.95vw, 1000px);
margin: 0.6rem 1rem;
}
.case-content-wrap{
background: #d01a40;
display: flex;
width: 88%;
padding: 5% 2%;
margin: 0 auto;
justify-content: center;
align-items: flex-end;
margin: 2vw auto;
}
.case-content-wrap .left{
width: 35%;
}
.case-content-wrap .left p,.case-content-wrap .left02 p{
width: 100%;
background: none;
font-size: 1.05vw;
display: block;
padding: 0;
letter-spacing: 0.1em;
font-weight: 700;
font-style: normal;
text-align: center;
color: #fff;
}
.case-content-wrap .right{
width: 58%;
margin: 0 0 0 2%;
}
.case-content-wrap .right p,.case-content-wrap .right02 p{
width: 100%;
background: none;
font-size: 1.05vw;
display: block;
padding: 0;
letter-spacing: 0.1em;
font-weight: 700;
font-style: normal;
line-height: 1;
color: #fff;
}
.case-content-wrap .right p span,.case-content-wrap .right02 p span{
font-size: 6vw;
font-weight: 900;
font-style: italic;
}
.case-content-wrap .left02{
width: 45%;
}
.case-content-wrap .right02{
width: 30%;
margin: 0 0 0 0%;
}
.case-container.show .case-box {
opacity: 1;
transform: translateY(0);
}
.case-container::before,
.case-container::after,
.case-container .horizontal-middle {
content: "";
position: absolute;
left: 0;
width: 0%;
height: 0.01rem;
background: #111;
transition: width 0.9s ease-in-out;
z-index: 1;
}
.case-container::before {
top: 0;
}
.case-container::after {
bottom: 0;
}
.case-container .horizontal-middle {
top: 50%;
transform: translateY(-50%);
}
.case-container .vertical-middle {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0.01rem;
height: 0%; background: #111;
transition: height 0.9s ease-in-out;
transform: translateX(-50%);
}
.case-container.show::before,
.case-container.show::after,
.case-container.show .horizontal-middle {
width: 100%;
}
.case-container.show .vertical-middle {
height: 100%;
}
@media screen and (max-width:1499px) {
.case-ex-inner,.case-work-inner {
width: 14%;
padding: 1.5% 1% 1.5% 2%;
}
.case-ex-inner p,.case-work-inner p {
font-size: clamp(13px, 0.9vw, 1000px);
}
}
@media screen and (max-width:1024px) {
.case {
margin: 10vw auto 0;
padding: 9vw 0 0;
}
.case h2 {
font-size: 5vw;
}
.case h2::before {
width: 100%;
}
.case-ex-wrap {
width: 100%;
}
.case-work-wrap {
width: 100%;
}
.case-ex-inner,.case-work-inner {
width: 15%;
padding: 1.5% 1% 1.5% 1.5%;
}
.case-ex-inner img,.case-work-inner img {
margin-right: 0.5em;
}
.case-ex-inner p,.case-work-inner p {
font-size: clamp(12px, 0.8vw, 1000px);
}
.case-txt-wrap p {
font-size: 2vw;
padding: 0 10%;
text-align: left;
}
.case-container {
position: relative;
width: 100%;
margin: 5vw auto 1px;
}
.case-box p {
width: 22%;
padding: 0.7em 0.5em;
font-size: 2.4vw;
margin: 1px 0 0rem;
}
.case-icon-wrap {
display: none;
}
.case-list-wrap {
width: 70%;
margin-left: 2%;
}
.case-list-wrap dl dt {
width: 25%;
font-size: 11px;
border: 1px solid #d01a40;
padding: 0em 0.1em;
text-align: center;
font-weight: 600;
margin: 0rem auto 0rem;
}
.case-list-wrap dl dd {
width: 70%;
font-weight: 600;
font-size: 11px;
margin: 0.2rem 0 0.2rem 0.5rem;
}
.case-content-wrap .left {
width: 40%;
}
.case-content-wrap .right {
width: 50%;
margin: 0 0 0 2%;
}
.case-content-wrap .right02 {
width: 25%;
margin: 0 0 0 2%;
}
.case-content-wrap .left02 {
width: 55%;
}
.case-content-wrap .left p, .case-content-wrap .left02 p {
font-size: 11px;
}
.case-content-wrap .right p, .case-content-wrap .right02 p {
width: 100%;
background: none;
font-size: 1.15vw;
}
.case-content-wrap {
width: 92%;
padding: 5% 1%;
margin: 1.5vw auto;
}
}
@media screen and (max-width:767px) {
.case {
margin: 50px auto 0;
padding: 60px 0 0;
border-top-left-radius: none;
}
.case-ex-wrap {
width: 94%;
margin: 0 auto 50px;
}
.case-work-wrap {
width: 94%;
margin: 0 auto 25px;
padding: 0 0 25px;
}
.case-ex-inner,.case-work-inner {
width: 40%;
padding: 1em 0.5em 1em 1em;
margin: 1%;
}
.case-ex-inner img,.case-work-inner img {
width: 20px;
max-width: 20px;
}
.case-ex-inner,.case-work-inner {
width: 41%;
padding: 1em 0.5em 1em 1em;
margin: 1%;
}
.case-txt-wrap p {
font-size: 15px;
padding: 0 5%;
text-align: left;
line-height: 1.9;
font-weight: 500;
}
.case h2 {
font-size: 6vw;
margin: 0 auto 25px;
}
.case-container {
position: relative;
width: 100%;
margin: 55px auto 1px;
}
.case h2::before {
width: 100%;
font-size: 15vw;
}
.case-box {
width: 100%;
border-bottom: 1px solid #111;
}
.case-box p {
display: block;
width: 21%;
padding: 25px 8px 25px 5px;
font-size: 18px;
margin: 0px 0 0rem;
}
.case-icon-wrap {
display: none;
}
.case-list-wrap {
width: 60%;
}
.case-list-wrap dl dt {
font-size: 12px;
padding: 3px 3px;
margin: 2px auto;
}
.case-list-wrap dl dd {
font-size: 12px;
margin: 3px 0 3px 6px;
}
.case-list-wrap {
width: 65%;
margin: 0 0 0 2%;
}
.case-content-wrap {
width: 95%;
padding: 5% 0%;
margin: 15px auto;
flex-wrap: wrap;
align-items: flex-start;
}
.case-content-wrap .left,.case-content-wrap .left02 {
width: 85%;
}
.case-content-wrap .left p, .case-content-wrap .left02 p {
font-size: 15px;
line-height: 1.7;
}
.case-content-wrap .right,.case-content-wrap .right02 {
width: 100%;
margin: 10px 0 0 0;
}
.case-content-wrap .right p,.case-content-wrap .right02 p {
font-size: 15px;
}
.case-content-wrap .right p span, .case-content-wrap .right02 p span {
font-size: 58px;
font-weight: 900;
font-style: italic;
}
.case-container.show::after, .case-container.show .horizontal-middle {
display: none
}
.case-container.show .vertical-middle {
display: none
}
.case-container .horizontal-middle {
display: none
}
} .service-container {
position: relative;
padding: 15vw 0 0;
background-color: #fafafa;
margin: -1px 0 0;
transition: background-color 0.5s ease-in-out;
}
.service-container.bg-active {
background: #162871
}
.service-head-wrap{
position: relative;
display: flex;
margin: 0 auto 12vw;
justify-content: center;
overflow: hidden;
}
.service-container h2{
position: relative;
font-size: 10vw;
font-weight: 800;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
font-style: italic;
color: #fafafa;
line-height: 1.3em;
z-index: 1;
}
.service-head-wrap h2::before {
content: "LET'S WIN TOGETHER WITH US LET'S WIN TOGETHER WITH US";
position: absolute;
top: 70%;
left: 100%;
white-space: nowrap;
font-size: 20vw;
font-weight: bold;
color: rgba(255, 255, 255, 0.04);
transform: translateY(-50%);
animation: scrollText 20s linear infinite;
z-index: -1;
}
@keyframes scrollText {
from {
left: 100%;
}
to {
left: -100%;
}
}
.service-sub-head{
position: relative;
display: inline-block;
overflow: hidden;
}
.service-sub-head h3{
position: relative;
overflow: hidden;
z-index: 1;
color: #162871;
padding: 0.2em 0.4em 0.1em;
letter-spacing: 0.2rem;
line-height: 1;
display: inline-block;
font-size: 5vw;
font-style: italic;
margin: 0 auto;
font-weight: 800;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
}
.service-sub-head::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #fafafa;
transition: width 0.6s ease-in-out;
z-index: 0;
}
.service-sub-head.show::before {
width: 100%;
}
.service-txt-wrap{
display: block;
margin: 0 auto 5vw;
}
.service-txt-wrap p{
font-size: clamp(15px, 1.05vw, 1000px);
color: #fff;
width: 55%;
letter-spacing: 0.04rem;
font-weight: 500;
display: block;
margin: 3vw 0 0 7vw;
line-height: 2;
}
.service-content {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
}
.service-inner {
display: flex;
align-items: flex-start;
border-bottom: 1px solid #fafafa;
}
.service-inner .left {
width: 10%;
position: sticky;
top: 120px;
padding: 5px;
z-index: 2;
}
.service-inner .left p{
font-size: 1.5vw;
font-weight: 700;
color: #fafafa;
writing-mode: tb-rl;
letter-spacing: 0.2em;
margin: 2vw auto 2vw;
}
.service-inner .left p img{
width: 2vw;
margin: 0 auto 0.5em;
}
.service-inner .right {
width: 90%;
padding: 5%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.service-list{
width: 45%;
}
.service-list img{
display: block;
margin: 0 auto 2vw;
max-width: 90px;
width: 18%;
}
.service-list h3{
font-size: 2vw;
color: #fafafa;
letter-spacing: 0.1em;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
text-align: center;
padding: 0 0 1.5vw;
margin: 0 auto 1.3vw;
border-bottom: 2px solid #fafafa;
}
.service-list ul{
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.service-list li{
color: #fafafa;
font-size: clamp(15px, 1vw, 1000px);
padding: 0.2vw;
width: 45%;
}
.service-info{
width: 50%;
}
.service-info p{
color: #fafafa;
line-height: 2.1;
font-size: clamp(14px, 0.95vw, 1000px);
}
.service-nb{
border-bottom: none!important;
}
.service-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 1px;
background-color: #fff;
transition: width 0.5s ease-in-out;
}
.service-inner::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 10%;
width: 1px;
height: 0%;
background-color: #fff;
transition: height 0.5s ease-in-out;
}
.service-content.show::before {
width: 100%;
}
.service-inner.show::before {
height: 100%;
}
@media screen and (max-width:1024px) {
.service-container {
position: relative;
padding: 30vw 0 0;
}
.service-head-wrap {
position: relative;
display: flex;
margin: 0 auto 30vw;
}
.service-container h2 {
position: relative;
font-size: 12vw;
}
.service-head-wrap h2::before {
font-size: 30vw;
}
.service-txt-wrap p {
font-size: 2vw;
color: #fff;
width: 80%;
}
.service-sub-head h3 {
padding: 0.4em 0.4em 0.15em;
font-size: 6vw;
}
.service-info p {
line-height: 1.9;
font-size: 14px;
}
.service-list h3 {
font-size: 3vw;
padding: 0 0 2vw;
margin: 0 auto 2vw;
}
.service-inner .right {
width: 100%;
}
.service-inner .left p {
font-size: 2.5vw;
}
.service-inner .left p img {
width: 3vw;
margin: 0 auto 0.5em;
}
.service-list li {
color: #fafafa;
font-size: 15px;
padding: 0.2vw;
width: 100%;
}
.service-list ul {
padding: 0 0 0 4.5em;
}
.service-inner .left {
padding: 5px;
}
}
@media screen and (max-width:767px) {
.service-container {
position: relative;
padding: 200px 0 0px;
margin: -1px auto 0;
}
.service-container h2 {
position: relative;
font-size: 13.5vw;
}
.service-head-wrap h2::before {
font-size: 110px;
top: 80%;
}
.service-head-wrap {
margin: 0 auto 200px;
}
.service-txt-wrap p {
font-size: 14px;
width: 90%;
}
.service-txt-wrap p {
font-size: 15px;
color: #fff;
width: 90%;
margin: 30px auto;
}
.service-sub-head h3 {
padding: 0.4em 0.4em 0.3em;
font-size: 9vw;
letter-spacing: 0.1rem;
}
.service-inner.show::before {
display: none;
}
.service-inner .left {
width: 0%;
display: none;
}
.service-inner .right {
width: 90%;
padding: 50px 5%;
}
.service-txt-wrap {
display: block;
margin: 0 auto 50px;
}
.service-list {
width: 100%;
margin: 0 auto 20px;
}
.service-list li {
color: #fafafa;
font-size: 14px;
padding: 3px 0;
width: 48%;
}
.service-list img {
display: block;
margin: 0 auto 20px;
width: 55px;
}
.service-list ul {
width: 100%;
padding: 0 5%;
}
.service-list h3 {
font-size: 24px;
padding: 0 0 15px;
margin: 0 auto 20px;
}
.service-info {
width: 100%;
}
.service-inner .right {
width: 90%;
padding: 50px 5% 40px;
}
} #cta{
background-image: url(//design.e-lifegroup.co.jp/wp-content/themes/design/images/cta-bg.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 8.5vw 0;
margin: 0px 0 0;
}
.cta-container {
display: flex;
align-items: center;
justify-content: center;
}
.cta-left{
width: 55%;
}
.cta-left p{
font-size: 6vw;
font-weight: 800;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
line-height: 1.5;
font-style: italic;
margin: 0 auto;
color: #fafafa;
letter-spacing: 0.02em;
}
.cta-right{
width: 30%;
}
.cta-right a {
position: relative;
display: inline-block;
padding: 0.8rem 4.5rem;
font-size: 1.3vw;
line-height: 1.7;
font-weight: 600;
letter-spacing: 0.1em;
color: white;
background-color: #d01a40;
text-decoration: none;
border: 2px solid #d01a40;
border-radius: 100px;
overflow: hidden;
transition: color 0.4sease-in-out, border-color 0.4sease-in-out;
z-index: 1;
text-align: center;
}
.cta-right a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: white;
transition: width 0.4s ease-in-out;
z-index: -1;
}
.cta-right a:hover::before {
width: 100%;
}
.cta-right a:hover {
color: #d01a40;
border-color: #d01a40;
}
@media screen and (max-width:1024px) {
#cta {
padding: 10vw 0;
}
.cta-container {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.cta-left {
width: 100%;
display: flex;
justify-content: center;
margin: 0 auto 5vw;
}
.cta-left p {
font-size: 8vw;
text-align: center;
}
.cta-right {
width: 100%;
display: flex;
justify-content: center;
}
.cta-right a {
font-size: 18px;
}
}
@media screen and (max-width:767px) {
#cta {
padding: 100px 0;
}
.cta-left {
width: 100%;
margin: 0 auto 30px;
}
.cta-left p {
font-size: 12vw;
line-height: 1.6;
}
.cta-right a {
font-size: 18px;
padding: 0.8rem 3rem;
}
} #about{
padding: 10vw 0 0;
}
.about-text-container{
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
width: 68%;
margin: 0 auto 40vh;
}
.about-text-wrap01 {
position: relative;
display: inline-block;
align-self: flex-start;
padding: 2.5em;
border: solid 5px #555;
box-sizing: border-box;
border-radius: 30px;
background: #fff;
}
.about-text-wrap01:before {
content: "";
position: absolute;
bottom: -46px;
left: 105px;
margin-left: -15px;
border: 23px solid transparent;
border-top: 23px solid #FFF;
z-index: 2;
}
.about-text-wrap01:after {
content: "";
position: absolute;
bottom: -60px;
left: 100px;
margin-left: -17px;
border: 30px solid transparent;
border-top: 30px solid #555;
z-index: 1;
}
.about-text-wrap02 {
position: relative;
display: inline-block;
align-self: flex-end;
margin-top: 3rem;
padding: 2.5em;
border: solid 5px #555;
box-sizing: border-box;
border-radius: 30px;
background: #fff;
}
.about-text-wrap02:before {
content: "";
position: absolute;
bottom: -46px;
right: 105px;
margin-left: -15px;
border: 23px solid transparent;
border-top: 23px solid #FFF;
z-index: 2;
}
.about-text-wrap02:after {
content: "";
position: absolute;
bottom: -60px;
right: 98px;
margin-left: -17px;
border: 30px solid transparent;
border-top: 30px solid #555;
z-index: 1;
}
.about-text-wrap03 {
position: relative;
display: inline-block;
align-self: flex-start;
padding: 2.5em;
margin-top: 3rem;
margin-left: 3rem;
border: solid 5px #555;
box-sizing: border-box;
border-radius: 30px;
background: #fff;
}
.about-text-wrap03:before {
content: "";
position: absolute;
bottom: -46px;
left: 105px;
margin-left: -15px;
border: 23px solid transparent;
border-top: 23px solid #FFF;
z-index: 2;
}
.about-text-wrap03:after {
content: "";
position: absolute;
bottom: -60px;
left: 100px;
margin-left: -17px;
border: 30px solid transparent;
border-top: 30px solid #555;
z-index: 1;
}
.about-text {
display: inline-block;
letter-spacing: 0.2rem;
line-height: 1;
display: inline-block;
font-size: 3vw;
margin: 0 auto;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
}
.char {
display: inline-block;
font-weight: 800;
opacity: 0;
margin: 0;
transform: scale(1.3);
transition: opacity 0.1s ease, transform 0.2s ease;
}
.about-slick-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0;
transform: scale(0.7);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
z-index: -1;
}
.about-slick-container.show {
opacity: 1;
transform: scale(1);
}
.about-content-container {
position: relative;
z-index: 1;
position: relative;
z-index: 1;
background-repeat: repeat;
background: rgb(9 23 81 / 90%);
background-repeat: repeat;
padding: 10vw 0 0px;
}
.about-content-header {
display: block;
margin: 0 auto 5vw;
}
.about-anime-header {
position: relative;
display: inline-block;
overflow: hidden;
}
.about-anime-header h2 {
position: relative;
overflow: hidden;
z-index: 1;
color: #171c4f;
padding: 0.3em 0.4em 0.2em;
letter-spacing: 0.1rem;
line-height: 1;
display: inline-block;
font-size: 5vw;
font-style: italic;
margin: 0 auto;
font-weight: 800;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
}
.about-anime-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #fafafa;
transition: width 0.6s ease-in-out;
z-index: 0;
}
.about-anime-header.show::before {
width: 100%;
}
.about-content-header p {
font-size: clamp(15px, 1.05vw, 1000px);
color: #fff;
width: 55%;
letter-spacing: 0.04rem;
font-weight: 500;
display: block;
margin: 3vw 0 0 7vw;
line-height: 2;
}
.about-content-inner {
position: relative;
display: flex;
align-items: flex-start;
border-bottom: 1px solid #fafafa;
}
.about-content-inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 1px;
background-color: #fff;
transition: width 0.6s ease-in-out;
}
.about-content-inner::after {
content: "";
position: absolute;
top: 0;
left: 10%;
width: 1px;
height: 0%;
background-color: #fff;
transition: height 0.6s ease-in-out;
}
.about-content-inner.show::before {
width: 100%;
}
.about-content-inner.show::after {
height: 100%;
}
.about-content-left {
width: 9%;
position: sticky;
top: 120px;
padding: 1%;
z-index: 2;
}
.about-content-left h3 {
font-size: 1.5vw;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 700;
color: #fafafa;
writing-mode: tb-rl;
letter-spacing: 0.2em;
margin: 2vw auto 2vw;
}
.about-content-left h3 img {
width: 2vw;
margin: 0 auto 0.5em;
}
.about-content-right {
width: 100%;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.about-ex{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 5%;
justify-content: space-between;
border-bottom: 1px solid #fff;
}
.about-ex:last-child{
border-bottom: none;
}
.about-ex .left{
width: 50%;
}
.about-ex .left p{
color: #fafafa;
line-height: 2.1;
font-size: clamp(14px, 0.95vw, 1000px);
margin: 0 auto;
}
.about-ex .right{
width: 45%;
}
.about-ex .right img{
max-width: 100%;
}
.about-obi-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0 auto 1.3vw;
}
.about-obi {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0.4em 0.6em;
font-size: 2.3vw;
font-weight: 800;
z-index: 1;
letter-spacing: 0.1em;
line-height: 1;
color: #171c4f;
margin: 0 0 0.5em;
}
.about-obi::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #fafafa;
transition: width 0.5s ease-in-out;
z-index: -1;
}
.about-obi.show::before {
width: 100%;
}
.about-obi span{
color: #d01a40;
font-weight: 800;
}
@media screen and (max-width: 1024px) {
.about-text-wrap01{
padding: 2.0em 2.0em 1.6em;
}
.about-text-wrap02 {
margin-top: 2rem;
padding: 2.0em 2.0em 1.6em;
}
.about-text-wrap03{
margin-top: 2rem;
padding: 2.0em 2.0em 1.6em;
}
.about-text-container {
width: 90%;
margin: 0 auto 20vh;
}
.about-anime-header h2 {
letter-spacing: 0.1rem;
font-size: 6vw;
padding: 0.4em 0.4em 0.15em;
}
.about-content-header p {
font-size: 2vw;
color: #fff;
width: 80%;
}
.about-content-left h3 {
font-size: 2.5vw;
}
.about-ex .left p {
line-height: 1.9;
font-size: 14px;
}
.about-ex .right figure {
margin: 0;
}
.about-obi {
padding: 0.4em 0.4em;
font-size: 2.5vw;
}
.about-content-left {
padding: 5px;
}
}
@media screen and (max-width: 767px) {
#about {
padding: 75px 0 0;
position: relative;
}
.about-text-wrap01,.about-text-wrap02,.about-text-wrap03 {
padding: 1em 1em 0.8em;
border: solid 3px #555;
border-radius: 15px;
}
.about-text {
letter-spacing: 0.05em;
font-size: 20px;
}
.about-text-wrap01:after {
bottom: -40px;
left: 50px;
border: 20px solid transparent;
border-top: 20px solid #555;
}
.about-text-wrap01:before {
bottom: -32px;
left: 52px;
margin-left: -15px;
border: 16px solid transparent;
border-top: 16px solid #FFF;
}
.about-text-wrap02:after {
bottom: -40px;
right: 50px;
border: 20px solid transparent;
border-top: 20px solid #555;
}
.about-text-wrap02:before {
bottom: -32px;
right: 54px;
margin-left: -15px;
border: 16px solid transparent;
border-top: 16px solid #FFF;
}
.about-text-wrap03:after {
bottom: -40px;
left: 50px;
border: 20px solid transparent;
border-top: 20px solid #555;
}
.about-text-wrap03:before {
bottom: -32px;
left: 52px;
margin-left: -15px;
border: 16px solid transparent;
border-top: 16px solid #FFF;
}
.about-text-wrap03{
margin-left: 1.5rem;
}
.about-obi {
padding: 0.4em 0.4em 0.5em;
font-size: 20px;
}
.about-obi-wrap {
margin: 0 auto 30px;
}
.about-content-container {
padding: 75px 0 0px;
}
.about-content-left {
display: none;
}
.about-content-inner::after{
display: none;
}
.about-anime-header h2 {
padding: 0.4em 0.3em 0.25em;
font-size: 8vw;
letter-spacing: 0.05rem;
}
.about-content-header {
display: block;
margin: 0 auto 50px;
}
.about-content-header p {
font-size: 15px;
color: #fff;
width: 90%;
margin: 30px auto;
}
.about-ex .left {
width: 100%;
}
.about-ex {
width: 90%;
padding: 50px 5% 50px;
}
.about-ex .left p {
line-height: 1.9;
font-size: 14px;
}
.about-ex .right {
width: 100%;
margin: 30px auto 0;
}
} #works{
position: relative;
padding: 10vw 0 10vw;
background: rgb(9 23 81 / 90%);
}
.works-header {
position: relative;
display: inline-block;
overflow: hidden;
}
.works-header h2 {
position: relative;
overflow: hidden;
z-index: 1;
color: #171c4f;
padding: 0.3em 0.6em 0.2em 0.4em;
letter-spacing: 0.1rem;
line-height: 1;
display: inline-block;
font-size: 5vw;
margin: 0 auto;
font-style: italic;
font-weight: 800;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
}
.works-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #fafafa;
transition: width 0.6s ease-in-out;
z-index: 0;
}
.works-header.show::before {
width: 100%;
}
.works-web-wrap{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 7.5vw auto 5vw;
}
.works-movie-wrap{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 auto;
}
.web-left,.movie-left{
width: 28%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.web-left h3,.movie-left h3{
font-size: 2vw;
width: 80%;
color: rgb(250, 250, 250);
letter-spacing: 0.1em;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
text-align: center;
padding: 0px 0px 1.0vw;
margin: 0px auto 2.3vw;
border-bottom: 2px solid rgb(250, 250, 250);
}
.web-left a,.movie-left a{
position: relative;
display: inline-block;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.1em;
color: white;
background-color: rgb(208, 26, 64);
z-index: 1;
padding: 0.8rem 2.5rem;
text-decoration: none;
border-width: 2px;
border-style: solid;
border-color: rgb(208, 26, 64);
border-image: initial;
border-radius: 50px;
overflow: hidden;
transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}
.web-left a::before,.movie-left a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: white;
transition: width 0.4s ease-in-out;
z-index: -1;
}
.web-left a:hover::before,.movie-left a:hover::before {
width: 100%;
}
.web-left a:hover,.movie-left a:hover {
color: #d01a40;
border-color: #d01a40;
}
.web-right,.movie-right{
width: 70%;
}
.works-slick-wrap{
padding: 0 40px;
margin: 0 auto;
}
.works-slick-item p {
font-size: 18px;
line-height: 150px;
text-align: center;
margin: 10px;
padding: 2%;
background: white;
position: relative;
}
.works-slick-item img {
display: block;
width: 32vw;
text-align: center;
padding: 0 0%;
position: relative;
}
.slick-prev, .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 40px;
height: 40px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
z-index: 1;
background: transparent;
}
.slick-prev:before, .slick-next:before {
font-family: 'slick';
font-size: 40px;
line-height: 1;
opacity: .75;
color: white;
z-index: 3;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -3%;
}
.web-right a, .movie-right a {
display: none;
}
@media screen and (max-width:1024px){
.works-header h2{
font-size: 6vw;
padding: 0.4em 0.4em 0.2em 0.2em;
}
.works-web-wrap {
margin: 7.5vw auto 7.5vw;
}
.web-left, .movie-left {
width: 40%;
}
.web-right, .movie-right {
width: 59%;
}
.web-left h3, .movie-left h3 {
width: 85%;
font-size: 3vw;
padding: 0px 0px 2vw;
margin: 0px auto 3vw;
}
.web-left a, .movie-left a {
font-size: 16px;
}
.works-slick-item img {
display: block;
width: 100%;
}
.slick-prev {
left: -7%;
}
.web-right a, .movie-right a {
display: none;
}
}
@media screen and (max-width:767px){
#works {
position: relative;
padding: 75px 0 75px;
}
.web-left a, .movie-left a {
display: none;
}
.works-header h2 {
padding: 0.4em 0.6em 0.2em 0.42em;
font-size: 8vw;
letter-spacing: 0.05rem;
}
.works-web-wrap {
width: 90%;
margin: 50px auto 50px;
padding: 0 0 50px;
border-bottom: 1px solid #fafafa;
}
.works-movie-wrap {
width: 90%;
}
.web-left, .movie-left {
width: 100%;
}
.web-left h3, .movie-left h3 {
width: 90%;
font-size: 22px;
padding: 0 0 15px;
margin: 0 auto 25px;
}
.web-right, .movie-right {
width: 100%;
text-align: center;
}
.slick-prev {
left: -10%;
}
.slick-next {
right: -10%;
}
.web-right a, .movie-right a{
position: relative;
display: inline-block;
font-size: 16px;
font-weight: 600;
margin: 50px auto 0;
letter-spacing: 0.1em;
color: white;
background-color: rgb(208, 26, 64);
z-index: 1;
padding: 0.8rem 2.5rem;
text-decoration: none;
border-width: 2px;
border-style: solid;
border-color: rgb(208, 26, 64);
border-image: initial;
border-radius: 50px;
overflow: hidden;
transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}
.web-right a::before,.movie-right a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: white;
transition: width 0.4s ease-in-out;
z-index: -1;
}
.web-right a:hover::before,.movie-right a:hover::before {
width: 100%;
}
.web-right a:hover,.movie-right a:hover {
color: #d01a40;
border-color: #d01a40;
padding: 0.8rem 2.5rem 1.4em;
}
.works-slick-wrap {
padding: 0 20px;
}
.works-slick-item p {
font-size: 15px;
line-height: 100px;
margin: 5px;
padding: 1.5%;
}
} .flow{
position: relative;
background: #fafafa;
background-image: url(//design.e-lifegroup.co.jp/wp-content/themes/design/images/noise.gif);
background-repeat: repeat;
padding: 10vw 0 0;
}
.flow-header {
position: relative;
display: inline-block;
overflow: hidden;
}
.flow-header h2 {
position: relative;
overflow: hidden;
z-index: 1;
color: #fafafa;
padding: 0.3em 0.6em 0.2em 0.4em;
letter-spacing: 0.2rem;
line-height: 1;
display: inline-block;
font-size: 5vw;
margin: 0 auto;
font-style: italic;
font-weight: 800;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
}
.flow-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #222;
transition: width 0.6s ease-in-out;
z-index: 0;
}
.flow-header.show::before {
width: 100%;
}
.timeline {
position: relative;
width: 84%;
margin: 7.5vw auto 0;
}
.step {
display: flex;
align-items: center;
margin: 0px 0;
}
.step {
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.step.active {
opacity: 1;
transform: translateY(0);
}
.line {
width: 3px;
height: 5vw;
background: #222;
margin-left: 4.2vw;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s ease-in-out;
}
.line.active {
transform: scaleY(1);
}
.flow-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.flow-circl-wrap {
width: 15%;
}
.flow-circle {
width: 8.5vw;
height: 8.5vw;
border-radius: 50%;
background-color: #222;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2vw;
font-weight: bold;
}
.flow-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
width: 85%;
}
.flow-content h3{
display: flex;
align-items: center;
margin: 0;
width: 30%;
font-size: clamp(18px, 1.1vw, 1000px);
font-weight: 700;
letter-spacing: 0.05em;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.flow-content h3 img {
width: 1.7em;
padding: 0.4em;
}
.flow-content p{
margin: 0;
font-size: clamp(15px, 0.9vw, 1000px);
margin: 0;
width: 64%;
padding: 1em 0em 1em 2em;
border-left: 1px solid #333;
}
@media screen and (max-width: 1449px) {
.flow-circl-wrap {
width: 12%;
}
.flow-content {
width: 87%;
}
.flow-content h3 {
width: 29%;
font-size: 16px;
line-height: 1.3;
}
.flow-content p {
font-size:14px;
width: 64%;
}
}
@media screen and (max-width: 1249px) {
.flow-content p {
font-size: 14px;
width: 62%;
}
.flow-content h3 {
width: 31%;
font-size: 15px;
}
}
@media screen and (max-width: 1024px) {
.timeline {
position: relative;
width: 90%;
}
.flow-circle {
width: 9.5vw;
height: 9.5vw;
font-size: 16px;
}
.flow-content h3 {
width: 30%;
font-size: 16px;
padding: 0 0.5em 0 0;
}
.flow-content p {
font-size: 13px;
width: 62%;
}
.line {
width: 3px;
height: 8vw;
background: #222;
margin-left: 4.5vw;
}
.flow-header h2 {
font-size: 6vw;
padding: 0.4em 0.4em 0.2em 0.4em;
}
}
@media screen and (max-width: 767px) {
.flow {
padding: 75px 0 1px;
border-bottom: 1px solid #ccc;
}
.flow-header h2 {
padding: 0.4em 0.6em 0.2em 0.42em;
font-size: 8vw;
letter-spacing: 0.05rem;
}
.timeline {
position: relative;
width: 90%;
margin: 50px auto 0;
}
.flow-inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.flow-circl-wrap {
width: 21%;
}
.flow-content {
width: 78%;
}
.flow-circle {
width: 15vw;
height: 15vw;
font-size: 16px;
}
.flow-content h3 {
width: 100%;
font-size: 15px;
padding: 0 0 10px;
margin: 0 auto 15px;
line-height: 1;
border-bottom: 1px solid #333;
}
.flow-content p {
font-size: 14px;
width: 100%;
padding: 0;
border: none;
}
.line {
display: none;
}
.step {
margin: 0px 0 50px;
}
} .faq{
position: relative;
background: #fafafa;
background-image: url(//design.e-lifegroup.co.jp/wp-content/themes/design/images/noise.gif);
background-repeat: repeat;
padding: 10vw 0 10vw;
}
.faq-header {
position: relative;
display: inline-block;
overflow: hidden;
}
.faq-header h2 {
position: relative;
overflow: hidden;
z-index: 1;
color: #fafafa;
padding: 0.3em 0.6em 0.2em 0.4em;
letter-spacing: 0.2rem;
line-height: 1;
display: inline-block;
font-size: 5vw;
margin: 0 auto;
font-style: italic;
font-weight: 800;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
}
.faq-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #222;
transition: width 0.6s ease-in-out;
z-index: 0;
}
.faq-header.show::before {
width: 100%;
}
.tab-switch {
width: 80%;
display: flex;
flex-wrap: wrap;
margin: 7.5vw auto 0;
justify-content: center;
border: 1px solid #333;
border-radius: 12px;
}
.tab-switch > label {
flex: 1 1 auto;
order: -1;
position: relative;
padding: 1em 1em;
background-color: #f2f3f4;
color: #333;
font-size: clamp(18px, 1.1vw, 1000px);
letter-spacing: 0.05em;
font-weight: 600;
text-align: center;
cursor: pointer; 
transition:.3s all;
}
.tab-switch > label.web{
border-top-left-radius: 10px;
}
.tab-switch > label.movie{
border-top-right-radius: 10px;
}
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
background-color: #333;
color: #fff;
}
.tab-switch input {
display: none;
}
.tab-switch > div {
display: none;
width: 100%;
padding: 3% 2%;
}
.tab-switch label:has(:checked) + div {
display: block;
background: #fafafa;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.acc-container01,.acc-container02 {
width: 100%;
margin:0px auto 0 auto;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
overflow: hidden;
}
.acc-btn { 
width:100%;
margin:0 auto;
padding:0;
cursor:pointer;
background:#fafafa;
border-bottom:1px solid #a5a5a5;
}
.acc-btn h3{ 
margin: 0 auto;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #333;
line-height: 1;
padding: 2em 1.5em;
font-size: clamp(16px, 1.1vw, 1000px);
font-weight: 600;
letter-spacing: 0.03em;
}
.acc-content {
width: 100%;
margin: 0 auto;
display: none;
background: #fafafa;
padding: 3%;
height: auto;
}
.acc-content p{
margin: 0 auto;
font-size: clamp(15px, 1vw, 1000px);
}
@media screen and (max-width: 1024px) {
.faq {
padding: 10vw 0 12vw;
}
.faq-header h2 {
font-size: 6vw;
padding: 0.4em 0.4em 0.2em 0.4em;
}
.tab-switch {
width: 90%;
}
.acc-content p {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.faq {
padding: 75px 0 75px;
}
.faq-header h2 {
padding: 0.4em 0.6em 0.2em 0.42em;
font-size: 8vw;
letter-spacing: 0.05rem;
} 
.tab-switch > label {
padding: 1em 0.5em;
font-size: 14px;
letter-spacing: 0.05em;
}
.tab-switch {
width: 92%;
border-radius: 8px;
margin: 50px auto 0;
}
.tab-switch > label.web {
border-top-left-radius: 6px;
}
.tab-switch > label.movie {
border-top-right-radius: 6px;
}
.acc-btn h3 {
padding: 1.75em 0.75em;
font-size: 15px;
line-height: 1.5;
}
.tab-switch > div {
padding: 15px 10px;
}
.acc-content {
width: 90%;
padding: 15px 5%;
}
} .cta02{
position: relative;
background: #fafafa;
background-image: url(//design.e-lifegroup.co.jp/wp-content/themes/design/images/cta02-bg.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 10vw 0 10vw;
}
.cta02::before,
.cta02::after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 1px;
background: #333;
transition: width 0.7s ease-out;
}
.cta02::before {
top: 0;
}
.cta02::after {
bottom: 0;
}
.cta02.in-view-top::before {
width: 100%;
}
.cta02.in-view-bottom::after {
width: 100%;
}
.cta02-container h2{
font-size: 6.5vw;
font-weight: 900;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
line-height: 1.4;
font-style: italic;
margin: 0 auto 0 7%;
color: #162871;
letter-spacing: 0.02em;
}
.cta02-container h3{
font-size: 6.5vw;
font-weight: 900;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
line-height: 1.5;
font-style: italic;
margin: -4% 7% 0 auto;
color: #162871;
letter-spacing: 0.02em;
text-align: right;
}
.cta02-container h2 span,.cta02-container h3 span{
color: #d01a40;
font-weight: 900;
}
.fade-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
width: 100%;
justify-content: space-between;
flex-direction: row-reverse;
}
.fade-list li {
width: 24%;
position: relative;
opacity: 0;
transform: translateY(20px);
overflow: hidden;
}
.fade-list li img{
max-width: 100%;
}
.fade-list li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #162871; transition: transform 1s ease-out;
transform: translateY(0%);
}
.fade-list li.show {
opacity: 1;
transform: translateY(0);
}
.fade-list li.show::before {
transform: translateY(101%);
}
.fade-list li:first-child{
margin-top: -5.5vw;
}
.fade-list li:nth-child(2){
}
.fade-list li:nth-child(3){
margin-top: 5.5vw;
}
.fade-list li:nth-child(4){
margin-top: 11vw;
}
.thanks-wrap {
display: block;
margin: 7.5vw auto 0;
width: 70%;
}
@media screen and (max-width: 1024px) {
.cta02-container h2 {
font-size: 8vw;
margin: 0 auto 2vw 7%;
}
.cta02-container h3 {
font-size: 8vw;
line-height: 1.4;
margin: 0% 7% 0 auto;
}
}
@media screen and (max-width: 767px) {
.cta02 {
padding: 75px 0;
}
.cta02-container h2 {
font-size: 9.5vw;
margin: 0 auto 3vh 5%;
}
.cta02-container h3 {
font-size: 9.5vw;
line-height: 1.4;
margin: 2vh 5% 0 auto;
}
.fade-list li {
width: 33%;
}
.fade-list li:first-child {
margin-top: 0;
}
.fade-list li:nth-child(2) {
margin-top: 5vh;
}
.fade-list li:nth-child(4) {
display: none;
}
.fade-list li:nth-child(3) {
margin-top: 10vh;
}
.thanks-wrap {
display: block;
margin: 50px auto 0;
width: 90%;
}
} #contact{
background: #fafafa;
padding: 10vw 0 10em;
margin: 0 auto 0;
clear: both;
position: relative;
}
.contact-en-txt{
position: relative;
display: inline-block;
overflow: hidden;
}
.contact-en-txt::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: linear-gradient(145deg, #f36d5f 0%, #253d9d 55%);
transition: width 0.6s ease-in-out;
z-index: 0;
}
.contact-en-txt.show::before {
width: 100%;
}
.contact-en-txt h2 {
position: relative;
overflow: hidden;
z-index: 1;
color: #fafafa;
padding: 0.1em 0.5em 0;
letter-spacing: 0.2rem;
line-height: 1;
display: inline-block;
font-size: 7.5vw;
font-style: italic;
margin: 0 auto;
font-weight: 900;
font-family: "DM Sans", sans-serif;
}
span.caution{
color: #ca0000;
padding: 0 0 0 3px;
}
.custom-contact-container {
display: block;
width: 60%;
margin: 0 auto;
}
.custom-contact-container h2 {
margin-bottom: 20px;
text-align: center;
}
.custom-contact-container p{
text-align: center;
margin: 5vw auto 0;
font-size: clamp(15px, 1.05vw, 1000px);
}
.custom-form-group {
position: relative;
margin: 100px auto;
}
.custom-form-group input,
.custom-form-group select,
.custom-form-group textarea {
width: 100%;
font-size: clamp(14px, 0.88vw, 1000px);
padding: 15px 15px;
border: none;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
outline: none;
background: none;
appearance: none;
transition: border-color 0.3s ease;
}
.custom-form-group input:focus,
.custom-form-group textarea:focus,
.custom-form-group select:focus {
border-color: #333;
}
.custom-form-group label {
position: absolute;
top: 10px;
left: 10px;
pointer-events: none;
transition: 0.3s ease all;
color: #aaa;
display: block;
font-size: 18px;
font-weight: 444;
}
.custom-form-group input:focus + label,
.custom-form-group input.has-content + label,
.custom-form-group textarea:focus + label,
.custom-form-group textarea.has-content + label,
.custom-form-group select:focus + label,
.custom-form-group select:valid + label {
top: -50px;
left: 10px;
font-size: clamp(16px, 0.9vw, 1000px);
color: #333;
}
.custom-form-group textarea {
resize: vertical;
height: 100px;
font-size: clamp(14px, 0.88vw, 1000px);
}
.privacy-link{
margin-bottom: 15px;
}
.custom-submit-wrap {
position: relative;
display: inline-block;
width: 40%;
margin-top: 70px;
}
.custom-submit-wrap button {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
width: 100%;
position: relative;
padding: 1.8rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #fafafa;
background: #d01a40;
border: none;
overflow: hidden;
z-index: 1;
border:2px solid #d01a40;
transition: 0.3s;
border-radius: 100px;
}
.custom-submit-wrap button:hover {
color: #d01a40;
background: #fafafa;
}
.custom-submit-wrap button:hover:after {
opacity: 1;
}
@media screen and (max-width: 1024px) {
#contact {
padding: 12vw 0 10vw;
}
.contact-en-txt h2 {
padding: 0.2em 0.8em 0;
font-size: 8vw;
}
.custom-contact-container p {
text-align: left;
margin: 30px auto 0;
font-size: 2vw;
}
.custom-form-group label {
font-size: 14px;
}
.custom-contact-container {
width: 80%;
}
.custom-form-group {
margin: 75px auto;
}
.custom-form-group input:focus + label, .custom-form-group input.has-content + label, .custom-form-group textarea:focus + label, .custom-form-group textarea.has-content + label, .custom-form-group select:focus + label, .custom-form-group select:valid + label {
top: -40px;
left: 10px;
font-size: 15px;
}
.custom-form-group input, .custom-form-group select, .custom-form-group textarea {
font-size: 14px;
}
.custom-submit-wrap {
width: 50%;
}
.custom-submit-wrap button {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
#contact {
padding: 75px 0 100px;
}
.custom-contact-container {
width: 90%;
}
.custom-contact-container p {
text-align: left;
margin: 30px auto 100px;
font-size: 15px;
}
.custom-submit-wrap {
width: 95%;
}
.custom-submit-wrap button {
font-size: 16px;
padding: 1.5rem 4rem;
}
.contact-en-txt h2 {
padding: 0.35em 0.5em 0.1em;
font-size: 10vw;
}
} footer {
position: relative;
background: #222;
padding: 7.5vw 0 5vw;
display: block;
width: 100%;
z-index: 10;
}
.footer-wrap{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.footer-top {
width: 100%;
text-align: center;
margin: 0 auto 5vw;
}
.footer-top p{
color: #fff;
font-size: 0.85vw;
margin: 1rem auto 0;
}
.footer-left {
width: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.footer-left ul {
width: 100%;
padding: 0;
display: flex;
justify-content: center;
margin: 1rem 0;
gap: 6vw;
}
.footer-left ul li {
list-style: none;
width: fit-content;
text-align: center;
}
.footer-left ul li a{
text-decoration: none;
color: #fff;
font-size: 0.9vw;
margin: 0;
padding: 0.5em 0em;
transition: 0.3s;
}
.footer-left ul li a:hover{
color: #aaa;
}
.footer-right{
width: 100%;
text-align: center;
margin: 5vw auto 0;
}
.footer-right p{
color: #fff;
font-size: 0.85vw;
margin: 1rem auto 0;
}
@media screen and (max-width: 1024px) {
footer {
padding: 7.5vw 0 7.5vw;
}
.footer-top p {
font-size: 13px;
margin: 1rem auto 0;
}
.footer-left ul {
gap: 4vw;
}
.footer-left ul li a {
font-size: 14px;
padding: 0.5em 0em 0.7em;
}
.footer-right p {
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
footer {
padding: 75px 0 50px;
}
.footer-top {
margin: 0 auto 50px;
}
.footer-top p {
color: #fff;
font-size: 13px;
margin: 10px auto 0;
}
.footer-left{
width: 100%;
margin: 0 auto 0;
border-bottom: none;
}
.footer-left ul {
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0;
}
.footer-left ul li {
list-style: none;
width: 100%;
border-bottom: 1px solid #fff;
text-align: center;
padding: 1em 0 0.8em;
}
.footer-left ul li {
list-style: none;
width: 100%;
border-bottom: 1px solid #fff;
text-align: center;
padding: 1em 0;
}
.footer-right {
width: 100%;
margin: 50px auto 0;
}
.footer-right p {
font-size: 11px;
margin: 0;
}
} .main-content.visible.sub-page{
margin-top: 0;
}
.achieve{
position: relative;
background: #fafafa;
background-image: url(//design.e-lifegroup.co.jp/wp-content/themes/design/images/noise.gif);
background-repeat: repeat;
padding: 10vw 0 10vw;
}
.achieve-header {
position: relative;
display: inline-block;
overflow: hidden;
}
.achieve-header h2 {
position: relative;
overflow: hidden;
z-index: 1;
color: #fafafa;
padding: 0.3em 0.6em 0.15em 0.4em;
letter-spacing: 0.2rem;
line-height: 1;
display: inline-block;
font-size: 5vw;
margin: 0 auto;
font-style: italic;
font-weight: 800;
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
}
.achieve-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: linear-gradient(145deg, #f36d5f 0%, #253d9d 55%);
transition: width 0.6s ease-in-out;
z-index: 0;
}
.achieve-header.show::before {
width: 100%;
}
.work-entry {
position: relative;
display: block;
margin: 6.5vw auto 0;
width: 90%;
}
.grid {
width: 80%;
padding: 0;
margin: 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
column-gap: 2%;
row-gap: 32px;
}
.item {
display: block;
width: 31.5%;
height: auto;
margin: 0;
z-index: 1;
transition: 0.5s ease;
}
.item a{
color: inherit; 
text-decoration: none;
}
.item-content {
position: relative;
width: 100%;
height: auto;
display:table;
text-align: center;
}
.item-content span{
display: block;
font-size: 18px;
font-weight: 700;
margin-top: 16px;
color: #222;
}
.grid img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.item-content:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
background: rgb(5 14 48 / 50%);
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
.item-content:hover:after {
opacity: 1;
}
.item-content img {
display: block;
width: 100%;
}
.item-content .icon-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; opacity: 0;
transition: opacity 0.3s ease;
}
.item-content:hover .icon-wrapper {
opacity: 1;
}
.icon-wrapper i {
font-size: 28px; color: white; }
@media screen and (max-width: 1024px) {
.achieve {
padding: 17.5vw 0 12.5vw;
margin-top: 0rem;
}
.achieve-header h2 {
font-size: 6vw;
padding: 0.4em 0.4em 0.2em 0.4em;
}
.item {
width: 30.0%;
}
.grid {
width: 90%;
row-gap: 24px;
}
}
@media screen and (max-width: 767px) {
.achieve {
padding: 100px 0 70px;
margin-top: 0rem;
}
.achieve-header h2 {
padding: 0.4em 0.6em 0.2em 0.42em;
font-size: 8vw;
letter-spacing: 0.05rem;
}
.work-entry {
margin: 50px auto 0;
}
.item {
width: 47%;
}
table#popup-table td {
padding: 10px 5px;
border: none;
text-align: left;
font-size: 14px;
line-height: 1.6;
}
.grid {
width: 95%;
row-gap: 16px;
}
.item-content span {
font-size: 15px;
font-weight: 700;
}
#popup-info2 a {
color: #162871;
font-size: 13px;
text-align: left;
display: flex;
align-items: flex-start;
}
.popup-content {
background: white;
padding: 15px;
border-radius: 6px;
max-width: 85%;
}
} .policy{
width: 70%;
margin: 0 auto;
padding: 10vw 0 10vw;
}
.policy h2{
font-size: 30px;
}
.policy h3{
margin: 70px 0 10px 0;
background: #253d9d;
color: #fff;
padding: 7px 15px 5px;
font-size: 22px;
}
.policy h4{
margin: 40px 0 0 0;
font-size: 18px;
}
.policy .rules-inner ul li{
list-style: none;
} .achieve-about{
position: relative;
background: #fafafa;
background-image: url(//design.e-lifegroup.co.jp/wp-content/themes/design/images/noise.gif);
background-repeat: repeat;
padding:10vw 0 10vw;
}
.achieve-container{
width: 1180px;
max-width: 100%;
margin: 0 auto;
}
.achieve-fv{
text-align: center;
}
.achieve-about img{
width: 100%;
}
.achieve-container h2{
line-height: 1.2;
font-size: 32px;
font-weight: 700;
}
.achieve-container .hp-url{
font-size: 16px;
color: #b4b4b4;
transition: opacity .3s;
}
.achieve-container .hp-url:hover{
opacity: .6;
}
.achieve-container .achieve-web-img{
margin-top: 56px;
}
.achieve-container .achieve-info .achieve-info-head{
font-size: 25px;
font-weight: 700;
line-height: 1.4;
margin:24px 0 8px 0;
}
.achieve-container .achieve-web-img .web-img-wrap{
list-style: none; padding: 0; margin: 0; }
.achieve-container .achieve-web-img .web-img-wrap li{
display: flex;
width: 100%;
gap: 50px;
}
.achieve-container .achieve-web-img .web-img-wrap li figure{
width: 48%;
}
.work-entry .grid li img{
box-shadow: 0 10px 10px rgba(0, 0, 0, .16);
} .category-list{
display: flex;
align-items: center;
justify-content: center;
width: 80%;
margin: 2vw auto 0 auto;
}
.category-list li{
font-size: 25px;
font-weight: bold;
border-left: 1px solid #ccc;
width: 30%;
text-align: center;
}
.category-list li:last-of-type{
border-right: 1px solid #ccc;
}
.category-list li a{
color: #222;
text-decoration: none;
transition: opacity .3s;
}
.category-list li a:hover{
opacity: .6;
} .popup-overlay {
display: flex; opacity: 0;
visibility: hidden;
transform: scale(0.7); transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
z-index: 100;
}
.popup-overlay.active {
opacity: 1;
transform: scale(1);
visibility: visible;
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.popup-content {
background: white;
padding: 20px;
border-radius: 6px;
text-align: center;
max-width: 80%;
min-width: 300px;
position: relative;
transform: scale(0.5);
transition: transform 0.3s ease-out;
max-height: 90vh; overflow-y: auto;
}
.popup-overlay.active .popup-content {
transform: translateY(0);
}
.popup-overlay.active .popup-content {
transform: scale(1);
}
.popup-content img {
width: 100%;
height: auto;
}
table#popup-table {
width: 100%;
margin-top: 10px;
border-collapse: collapse;
}
table#popup-table td {
padding: 10px;
border: none;
text-align: left;
}
td#popup-info1 {
text-align: left;
border-bottom: 1px solid #ccc !important;
font-size: clamp(15px, 1vw, 1000px);
}
.close-btn {
position: absolute;
top: -15px;
right: 15px;
font-size: 44px;
cursor: pointer;
text-shadow: 0px 0px 7px #fff;
}
#popup-info2 a{
color: #162871;
font-size: clamp(14px, 0.9vw, 1000px);
text-align: left;
display: flex;
align-items: center;
}
#popup-info2 a img{
display: inline-block;
width: 20px;
height: 20px;
padding: 0 0.5em 0 0;
}
@media screen and (max-width:1024px){
.achieve-about{
padding: 17.5vw 0 12.5vw;
margin-top: 0rem;
}
.achieve-container {
width: 90%;
margin: 0 auto;
}
.category-list li{
font-size: 18px;
}
}
@media screen and (max-width:767px){
.achieve-about{
padding: 100px 0 10vw;
margin-top: 0rem;
}
.popup-content-design img{
width: 100%;
}
.category-list {
width: 100%;
}
.category-list li{
font-size: 15px;
}
} .other-works{
background: #fafafa;
background-image: url(//design.e-lifegroup.co.jp/wp-content/themes/design/images/noise.gif);
background-repeat: repeat;
padding:0 0 10vw 0;
}
.other-works .achieve-container h2{
font-size: 2.6vw;
font-weight: 700;
line-height: 1.2;
}
.other-works .achieve-container h2 span{
display: flex;
align-items: center;
font-size: 20px;
font-weight: 700;
gap: 16px;
}
.other-works .achieve-container h2 span:after {
background: linear-gradient(90deg, #222 0, #555);
content: "";
display: block;
height: 1px;
width: 220px;
}
.other-works .achieve-container {
position: relative;
}
.other-works .achieve-container .slider-wrapper {
overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .other-works .achieve-container {
position: relative;
}
.other-works .achieve-container .slider-wrapper {
overflow-x: scroll; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.other-works .achieve-container .slider-wrapper::-webkit-scrollbar {
width: 12px; }
.other-works .achieve-container .slider-wrapper::-webkit-scrollbar-thumb {
background: #888; border-radius: 10px;
}
.other-works .achieve-container .slider-wrapper::-webkit-scrollbar-track {
background: #f1f1f1; } .other-works .achieve-container .other-works-list {
display: flex;
gap: 16px;
flex-wrap: nowrap; justify-content: flex-start; } .other-works .achieve-container .other-works-list li {
flex: 0 0 23%; margin-bottom: 24px;
} .other-works .achieve-container .other-works-list li a {
display: block;
transition: opacity .3s;
width: 100%;
overflow: hidden;
text-align: center;
color: #222;
text-decoration: none;
}
.other-works .achieve-container .other-works-list li a img {
width: 100%;
height: auto;
box-shadow: 0 5px 5px rgba(0, 0, 0, .16);
display: block;
margin-bottom: 16px;
}
.other-works .achieve-container .other-works-list li a:hover {
opacity: .6;
}
@media screen and (max-width:1024px){
.other-works .achieve-container .other-works-list li {
width: 48%;
}
.other-works .achieve-container h2 {
font-size: 3.6vw;
} @media (max-width: 768px) {
.other-works .achieve-container .slider-wrapper {
overflow-x: scroll !important; }
.other-works .achieve-container .other-works-list li {
flex: 0 0 48%; }
}
}
@media screen and (max-width:767px){
.other-works .achieve-container .other-works-list li {
width: 47%;
}
.other-works .achieve-container h2 {
font-size: 30px;
}
.achieve-container .achieve-info .achieve-info-head {
font-size: 20px;
}
.achieve-container h2 {
line-height: 1.2;
font-size: 28px;
font-weight: 700;
}
.other-works .achieve-container h2 span{
font-size: 16px;
}
.other-works .achieve-container h2 span:after {
width: 54%;
}
} .pagination {
text-align: center;
margin: 40px 0; } .pagination .page-numbers {
display: inline-block;
margin: 0 5px;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
text-decoration: none;
color: #222;
font-size: 14px;
transition: all 0.2s ease;
} .pagination .current {
background-color: #0073aa; color: #fff;
border-color: #0073aa;
cursor: default;
} .pagination .page-numbers:hover {
background-color: #0073aa;
color: #fff;
border-color: #0073aa;
} .pagination .prev,
.pagination .next {
font-weight: bold;
}