/*----------------------------------------------------
**
** GRANTEST Inc. / example.css
**
** Ver.1.0.0
**
** copyright 2020 GRANTEST Inc.
**
**----------------------------------------------------
** web font
**----------------------------------------------------
** font-family:'Bebas Neue',cursive;
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/
/*アニメーション キーフレーム*/
@keyframes turnAround {
0%{
transform:rotateX(0deg) rotateY(0deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
@keyframes fadeup{
0%{
opacity: 0;
transform: translateY(50px);
}
100%{
opacity: 1;
transform: translateY(0);
}
}
@keyframes scale01{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes scale02{
0%{
width: 0;
height: 0;
opacity: 0;
}
50% {
width: 5em;
height: 100%;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 1;
}
}
@keyframes from_left{
0%{
opacity: 0;
transform: translateX(-100%);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
@keyframes from_right{
0%{
opacity: 0;
transform: translateX(100%);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
@keyframes titleline{
0%{
width: 0;
opacity: 0;
}
10%{
width: 0;
opacity: 1;
}
100%{
opacity: 1;
width: 100vw;
}
}
@keyframes title{
0%{
width: 0;
height: 0;
opacity: 0;
}
50% {
width: 2em;
height: 100%;
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 1;
}
}
@keyframes title_text{
0%{
color: rgba(255,255,255,0);
}
100% {
color: rgba(255,255,255,1);
opacity: 1;
}
}
/*アニメーション css*/
section.greeting h2.visible{
animation: scale01 1s ease-out 300ms forwards;
}
div.text_box p.text.visible{
animation: scale01 1s ease-out 700ms forwards;
}
div.text_box p.text.visible::before{
animation: scale02 0.8s ease-in 500ms forwards;
}
div.recruit_list p.point.visible{
animation:fadeup 400ms ease-out forwards;
}
div.recruit_list ul li:nth-of-type(1).visible{
animation: from_left 400ms ease-out forwards;
}
div.recruit_list ul li:nth-of-type(2).visible{
animation: from_right 400ms ease-out forwards;
}
div.text_box div.text.visible{
animation: fadeup 400ms ease-out forwards;
}
p.text02.visible{
animation: fadeup 400ms ease-out forwards;
}
div.text_box02 div.line_title.visible::before{
animation:titleline 300ms ease-in forwards;
}
div.text_box02 div.line_title::after{
animation:title 400ms ease-in forwards;
}
div.text_box02 div.line_title h3.visible{
animation: title_text 500ms ease-in forwards;
}
div.text_box02 div.back_color.visible{
animation: fadeup 300ms ease-in forwards;
}
div.text_box03 > p.visible{
animation: scale01 1.5s ease-out forwards;
}
/*アニメーション以降*/
div.examplewrap{
text-align:center;
}
div.examplewrap > article{
display:block;
text-align:left;
position:relative;
overflow:hidden;
z-index:1;
max-width:320px;
background-color:#FFF;
margin:0 auto 20px auto;
}
div.examplewrap.viewtargetwrap > article{
transition:all 0.6s ease;
transform:scale(0.7);
opacity:0;
}
div.examplewrap.viewtargetwrap > article.visible{
transform:scale(1);
opacity:1;
}
div.examplewrap > article a{
display:block;
box-sizing:border-box;
position:absolute;
z-index:3;
top:0;
right:0;
bottom:0;
left:0;
padding:255px 10px 0 10px;
line-height:30px;
text-decoration:none;
text-align:left;
background-color:rgba(255,255,255,0);
color:#445;
font-size:16px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
div.examplewrap > article a::before{
position:absolute;
font-family:'Raleway';
color:#FFF;
z-index:3;
right:10px;
top:10px;
white-space:nowrap;
font-size:24px;
line-height:24px;
height:24px;
}
div.examplewrap > article.graphic a::before{
content:'GRAPHIC DESIGN';
}
div.examplewrap > article.website a::before{
content:'WEBSITE PRODUCTION';
}
div.examplewrap > article.system a::before{
content:'SYSTEM CONSTRUCTION';
}
div.examplewrap > article.branding a::before{
content:'BRANDING';
}
div.examplewrap > article.consulting a::before{
content:'IT CONSULTING';
}
div.examplewrap > article.management a::before{
content:'WEBSITE MANAGEMENT';
}
div.examplewrap > article figure{
display:block;
width:100%;
height:250px;
overflow:hidden;
position:relative;
z-index:1;
}
div.examplewrap > article figure::after{
position:absolute;
z-index:2;
content:'';
background:-webkit-linear-gradient(top, rgba(68,68,85,0.1) 0%,rgba(34,34,51,0.5) 100%);
background:linear-gradient(to bottom, rgba(68,68,85,0.1) 0%,rgba(34,34,51,0.5) 100%);
top:0;
right:0;
bottom:0;
left:0;
display:block;
}
div.examplewrap > article figure picture{
position:absolute;
z-index:1;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
div.examplewrap > article figure img{
width:320px;
height:320px;
object-fit: cover;
}
div.examplewrap > article figure h3,
div.examplewrap > article figure h4{
position:absolute;
display:inline-block;
max-width:calc( 100% - 20px );
z-index:3;
left:10px;
line-height:20px;
height:20px;
background-color:rgba(0,0,0,0);
color:#FFF;
}
div.examplewrap > article figure h3{
bottom:10px;
}
div.examplewrap > article figure h4{
bottom:30px;
}
div.examplewrap > article figure h4 span{
color:#FFF;
}
div.examplewrap > article figure h4 span:nth-child(1)::after{
content:'|';
margin:0 0.5em;
}
div.examplewrap > article figure h3::before{
font-family:'Raleway';
content:'CLIENT';
margin:0 0.5em 0 0;
font-size:12px;
}
div.examplewrap > article > p{
padding:35px 10px 5px 10px;
opacity:0.8;
line-height:20px;
}
div.examplewrap > article > div{
padding:0 10px 10px 10px;
line-height:20px;
display:flex;
flex-wrap:wrap;
}
div.examplewrap > article > div p{
display:inline-block;
font-size:12px;
line-height:20px;
}
div.examplewrap > article > div p::after{
content:'|';
margin:0 0.5em;
}
div.examplewrap > article > div p:last-child::after{
display:none;
}
section.example{
background-image:url(../img/pattern_03.png);
background-position:center top;
background-size:10px 10px;
background-repeat:repeat;
background-color:#f2f2f3;
}
div.exampleimgarea{
text-align:center;
}
div.exampleimgarea > h2{
position:relative;
z-index:1;
font-weight:700;
}
div.exampleimgarea > h2::before{
font-family:'Raleway';
content:'PROJECT NAME';
color:#fff;
background-color:#0bf;
font-weight:700;
padding:0 0.5em;
border-radius:5px;
}
div.exampleimgarea > h2::after{
display:block;
font-family:'Oswald';
white-space:nowrap;
color:#445;
position:absolute;
z-index:1;
font-weight:400;
background-image:url(../img/example/title.png);
background-position:left bottom;
background-repeat:no-repeat;
}
.graphic div.exampleimgarea > h2::after{
content:'PRODUCTION OF GRAPHIC DESIGN';
}
.website div.exampleimgarea > h2::after{
content:'PRODUCTION OF WEBSITE';
}
.system div.exampleimgarea > h2::after{
content:'SYSTEM CONSTRUCTION';
}
.management div.exampleimgarea > h2::after{
content:'WEBSITE MANAGEMENT';
}
div.exampleimgarea div.website div.imgwrap,
div.exampleimgarea div.system div.imgwrap{
background-position:center top;
background-repeat:no-repeat;
background-size:100px 50px;
}
div.exampleimgarea div.website div.imginner,
div.exampleimgarea div.system div.imginner{
position:relative;
z-index:1;
margin:0 auto;
width:900px;
height:450px;
}
div.exampleimgarea div.website div.imginner::after,
div.exampleimgarea div.system div.imginner::after{
position:absolute;
z-index:3;
width:900px;
height:450px;
top:0;
left:0;
display:block;
content:'';
}
div.exampleimgarea div.website div.imginner img{
position:absolute;
z-index:2;
width:100%;
top:0;
left:0;
}
div.exampleimgarea div.website div.imginner > div,
div.exampleimgarea div.system div.imginner > div{
position:absolute;
z-index:-1;
background-position:center center;
background-repeat:no-repeat;
background-size:80px 20px;
background-color:#FFF;
}
div.exampleimgarea div.website div.mobile,
div.exampleimgarea div.system div.mobile{
transform-origin:left bottom;
left:20px;
bottom:60px;
width:93.75px;
height:203px;
}
div.exampleimgarea div.website div.tablet,
div.exampleimgarea div.system div.tablet{
transform-origin:right bottom;
right:30px;
bottom:75px;
width:192px;
height:256px;
}
div.exampleimgarea div.website div.pc,
div.exampleimgarea div.system div.pc{
transform-origin:left bottom;
left:155px;
bottom:50px;
width:480px;
height:270px;
}
div.exampleimgarea div.website iframe{
position:relative;
z-index:1;
display:block;
transform-origin:left top;
transform:scale(0.25);
}
div.exampleimgarea div.system div.imginner > div img{
width:100%;
}
div.pageheader.example{
background-image:url(../img/pattern_03.png);
background-position:center bottom;
background-size:10px 10px;
background-repeat:repeat;
background-color:#f2f2f3;
}
div.exampleimgarea div.website div.btnarea a{
display:inline-block;
position:relative;
z-index:1;
background-color:#445;
color:#FFF;
padding:0 calc( 1em + 30px ) 0 1em;
margin:0 auto;
font-weight:700;
border-radius:5px;
}
div.exampleimgarea div.website div.btnarea a::after{
content:'/website';
}
div.exampleimgarea div.website div.btnarea a::before{
content:'';
display:block;
position:absolute;
z-index:1;
background-image:url('data:image/svg+xml;charset=UTF-8,');
background-position:center center;
background-size:20px 20px;
background-repeat: no-repeat;
width:20px;
height:20px;
top:50%;
transform:translateY(-50%);
right:10px;
}
#detailwrap div.concept{
position:relative;
z-index:1;
}
#detailwrap div.concept::before{
content:'CONCEPT';
font-family:'Raleway';
color:#FFF;
font-weight:700;
background-color:#0bf;
border-radius:5px;
display:table;
padding:0 0.5em;
}
#detailwrap div.concept ul{
display:flex;
flex-wrap:wrap;
list-style:none;
list-style-position:outside;
}
#detailwrap div.concept ul li{
margin:0 0.5em 0.5em 0;
}
#detailwrap div.concept ul li h3{
padding:0 0.5em;
background-color:#f2f2f6;
border-radius:2px;
}
#detailwrap div.concept ul li.active h3{
background-color:#445;
color:#fff;
}
#detailwrap.graphic div.exampleimgarea div.website,
#detailwrap.graphic div.exampleimgarea div.system,
#detailwrap.graphic div.exampleimgarea div.management,
#detailwrap.website div.exampleimgarea div.graphic,
#detailwrap.website div.exampleimgarea div.system,
#detailwrap.website div.exampleimgarea div.management,
#detailwrap.system div.exampleimgarea div.graphic,
#detailwrap.system div.exampleimgarea div.website,
#detailwrap.system div.exampleimgarea div.management,
#detailwrap.management div.exampleimgarea div.graphic,
#detailwrap.management div.exampleimgarea div.website,
#detailwrap.management div.exampleimgarea div.system{
display:none;
}
section#detailwrap > div.inner .clientdata h2::before{
content:'CLIENT';
font-family:'Raleway';
color:#FFF;
font-weight:700;
background-color:#0bf;
border-radius:5px;
display:table;
padding:0 0.5em;
}
section#detailwrap > div.inner .clientdata h2::after{
content:' 様';
}
section#detailwrap > div.inner .clientdata h3 span:last-of-type::before{
content:' / '
}
section#detailwrap > div.inner .clientdata p{
line-height:2em;
}
section#detailwrap > div.inner .clientdata a{
font-family:'Raleway';
background-image:url('data:image/svg+xml;charset=UTF-8,');
background-position:right center;
background-size:20px 20px;
background-repeat: no-repeat;
line-height:20px;
padding:0 20px 0 0;
text-decoration:underline;
font-weight:700;
}
section#detailwrap > div.inner .detail img{
width:100%;
}
div.exampleimgarea div.graphic::after{
content:'';
display:block;
position:absolute;
z-index:3;
top:0;
right:0;
bottom:0;
left:0;
}
div.exampleimgarea div.graphic div.productimg div.productimgwrap{
width:640px;
height:360px;
}
div.exampleimgarea div.graphic div.productimg div.productimgwrap > div{
width:640px;
height:360px;
}
div.exampleimgarea div.graphic div.productimg div.productimgwrap > div img{
width:640px;
height:360px;
}
#detailwrap div.inner{
position:relative;
z-index:1;
}
#detailwrap div.inner::before{
content:'PRODUCTION CONTENT';
font-family:'Oswald';
display:block;
text-align:center;
color:#0bf;
}
/*----------------------------------------------------
** Retina Display
**----------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
}
@media screen and (max-width:767px){
div.exampleimgarea > h2{
padding:90px 15px 20px 15px;
font-size:16px;
line-height:20px;
text-align:left;
}
div.exampleimgarea > h2::before{
display:table;
font-size:12px;
line-height:20px;
margin:0 0 10px 0;
}
div.exampleimgarea > h2::after{
top:15px;
left:15px;
line-height:1em;
padding:0 0 20px 0;
background-size:300px 15px;
}
.graphic div.exampleimgarea > h2::after,
.graphic div.inner::before{
font-size:calc(( 100vw - 30px ) / 12.5 );
}
.website div.exampleimgarea > h2::after,
.website div.inner::before{
font-size:calc(( 100vw - 30px ) / 9.5 );
}
.system div.exampleimgarea > h2::after,
.system div.inner::before{
font-size:calc(( 100vw - 30px ) / 9 );
}
.management div.exampleimgarea > h2::after,
.management div.inner::before{
font-size:calc(( 100vw - 30px ) / 8.6 );
}
#detailwrap div.inner{
padding:20px 0 0 0;
}
#detailwrap div.inner::before{
line-height:50px;
}
div.exampleimgarea div.website{
}
div.exampleimgarea div.website div.imgwrap,
div.exampleimgarea div.system div.imgwrap{
overflow-x:auto;
background-image:url(../img/example/responsive@2x.png);
-ms-overflow-style:none;
scrollbar-width:none;
}
div.exampleimgarea div.website div.imginner,
div.exampleimgarea div.system div.imginner{
overflow:hidden;
}
div.exampleimgarea div.website div.imginner > div,
div.exampleimgarea div.system div.imginner > div{
background-image:url(../img/example/undisclosed.png);
}
div.exampleimgarea div.website div.btnarea{
padding:20px 0;
}
div.exampleimgarea div.website div.btnarea a{
line-height:40px;
}
#detailwrap div.concept{
padding:20px 15px 0 15px;
}
#detailwrap div.concept::before{
line-height:20px;
font-size:12px;
margin:0 0 10px 0;
}
#detailwrap div.concept p{
line-height:2em;
padding:0 calc(( 100vw - 30px - ( 1em * 24 )) / 2 );
}
#detailwrap div.concept ul{
padding:40px 0 0 0;
}
section#detailwrap > div.inner .clientdata{
margin:30px 15px 0 15px;
padding:0 0 30px 0;
}
section#detailwrap > div.inner .clientdata{
margin:30px 15px 0 15px;
padding:0 0 30px 0;
}
section#detailwrap > div.inner .clientdata div.contentsinner > *{
margin:10px 0 0 0;
}
section#detailwrap > div.inner .clientdata h2::before{
margin:0 0 5px 0;
line-height:20px;
font-size:12px;
}
#detailwrap div.inner{
border-top:solid 1px #dbdbdb;
margin:50px 0 0 0;
}
#detailwrap div.articlewrap article{
padding:0 0 1.5em 0;
margin:30px 0 0 0;
position:relative;
z-index:1;
}
#detailwrap div.articlewrap article::before{
content:'';
display:block;
width:2px;
top:0;
bottom:0;
left:10px;
background-color:#0bf;
position:absolute;
z-index:1;
}
#detailwrap div.articlewrap article h3{
font-size:16px;
font-weight:700;
padding:10px 15px 20px 20px;
}
#detailwrap div.articlewrap article p{
line-height:2em;
padding:20px 15px 0 20px;
}
div.exampleimgarea div.graphic{
overflow:hidden;
height:250px;
position:relative;
z-index:1;
}
div.exampleimgarea div.graphic div.cover{
position:absolute;
z-index:2;
width:400px;
height:250px;
top:0;
right:0;
}
div.exampleimgarea div.graphic div.productimg{
perspective:900px;
width:320px;
margin:0 0 0 auto;
}
div.exampleimgarea div.graphic div.productimg > div{
width:640px;
height:360px;
position: absolute;
z-index:1;
top:28px;
right:43px;
transform:rotateX(18deg) rotateY(-26deg) rotateZ(6deg) scale(0.39);
transform-origin:top right;
overflow:hidden;
}
/*スマホのコンテンツ記述*/
span.weight{
font-weight: 700;
}
span.skyblue{
font-weight: 700;
color: #0bf;
}
span.pink{
color: #ff8080;
font-weight: 700;
}
div.pageheader div.video{
height:80vw;
}
div.pageheader::before {
z-index: 2;
background: -webkit-linear-gradient(top, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 80%,rgba(242,242,246,1) 100%);
background: linear-gradient(to bottom, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 80%,rgba(242,242,246,1) 100%);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
div.pageheader::after{
content: "RECRUIT";
display: block;
position: absolute;
top: 50%;
font-size: 15vw;
left: 50%;
font-family: 'Oswald';
opacity: 0.1;
color: #445;
z-index: 4;
text-align: center;
transform: translate(-50%,-50%);
}
div.pageheader div.video::before{
background-image:url(../img/pattern_01@2x.png);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
z-index: 2;
background: radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0),radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0);
background-position: 0px 0,3px 3px;
background-size: 6px 6px
}
div.pageheader div.video video{
height:80vw;
}
section.greeting{
padding: 50px 0;
}
section.greeting h2{
text-align: center;
opacity: 0;
font-size: 16px;
font-weight: 700;
}
section.greeting h2 span.skyblue{
font-size: 18px;
}
div.text_box{
margin-top: 15px;
overflow: hidden;
}
div.text_box p.text{
line-height: 2em;
width: 100%;
padding:15px;
box-sizing: border-box;
margin-top: 15px;
opacity: 0;
position: relative;
z-index: 1;
width: calc(100% - 30px);
margin: 0 auto;
}
div.text_box p.text::before{
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgba(255,255,255,0.5);
position: absolute;
z-index: -1;
}
div.recruit_list{
position: relative;
z-index: 1;
padding: 50px 0;
}
div.recruit_list p.point{
text-align: center;
font-size: 18px;
font-weight: 700;
opacity: 0;
margin-bottom: 15px;
}
div.recruit_list ul{
list-style: none;
list-style-position: outside;
}
div.recruit_list ul li{
position: relative;
z-index: 2;
padding: 15px;
box-sizing: border-box;
width: calc(100% - 30px);
margin: 0 auto 45px auto;
border: 2px #fff solid;
background-color: rgba(255,255,255,0.4);
opacity: 0;
}
div.recruit_list ul li:nth-of-type(1) span{
content: "01";
}
div.recruit_list ul li:nth-of-type(2) span{
content: "02";
}
div.recruit_list ul li span{
font-family: 'Oswald';
font-size: 32px;
font-weight: 700;
position: absolute;
z-index: 3;
width: 1.5em;
text-align: center;
top: 0;
left: -0.75em;
transform: translateY(-50%);
}
div.recruit_list ul li span::before{
content: "";
transform: rotate(45deg);
line-height: 1em;
text-align: center;
width: 1.5em;
height: 1.5em;
background-color: #fff;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div.recruit_wrap div.recruit_list ul li p{
line-height: 2em;
}
div.text_box div.text{
line-height: 2em;
position: relative;
z-index: 3;
text-align: center;
opacity: 0;
}
div.text_box div.text span{
font-size: 18px;
font-weight: 700;
}
p.text02{
line-height: 2em;
width: 100%;
padding: 0 15px 50px 15px;
box-sizing: border-box;
opacity: 0;
}
div.text_box div.text > p:nth-child(2) span{
font-size: 16px;
font-weight: 700;
}
div.text_box02{
position: relative;
z-index: 1;
padding: 50px 0;
box-sizing: border-box;
}
div.text_box02::after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: repeat;
background-size: 91px 81px;
z-index: 2;
background-image: url(../img/pattern_01.png);
}
div.text_box02{
}
div.text_box02 div.line_title{
position: relative;
z-index: 1;
height: 2em;
margin: 0 auto;
margin-bottom: 1rem;
display: table;
}
div.text_box02 div.line_title::before{
content:"";
width: 0;
height: 0;
border-top: solid 1px #0bf;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
div.text_box02 div.line_title::after{
content: "";
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #0bf;
border-radius: 1em;
}
div.text_box02 div.line_title h3{
position: relative;
z-index: 5;
left: 50%;
transform: translateX(-50%);
line-height: 2em;
height: 2em;
border-radius: 1em;
padding: 0 1rem;
font-size: 16px;
color: #fff;
display: table;
}
div.text_box02 > div:nth-child(1){
margin-bottom: 15px;
}
div.text_box02 > div div.back_color{
padding: 15px;
box-sizing: border-box;
width: calc(100vw - 30px);
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
line-height: 2em;
opacity: 0;
}
div.text_box02 > div div.back_color dl{
margin-bottom: 15px;
}
div.text_box02 > div div.back_color dl:last-child{
margin: 0;
}
div.text_box02 > div div.back_color dl dt{
font-size: 16px;
position: relative;
z-index: 1;
padding-left: 1.5em;
box-sizing: border-box;
font-weight: 700;
}
div.text_box02 > div div.back_color dl dt::before{
content: "";
position: absolute;
z-index: 2;
width: 0.6em;
height: 3px;
background-color: #00bbff;
transform: rotate(45deg);
top: 58%;
left: 0;
}
div.text_box02 > div div.back_color dl dt::after{
content: "";
position: absolute;
z-index: 2;
width: 1em;
height: 3px;
background-color: #00bbff;
top: 50%;
transform: rotate(-45deg);
left: 3.5px;
}
div.text_box02 > div div.back_color dl dd{
line-height: 2em;
}
div.text_box03{
position: relative;
z-index: 1;
padding: 50px 0;
}
div.text_box03 > p{
padding: 0 15px;
box-sizing: border-box;
line-height: 2em;
position: relative;
z-index: 3;
opacity: 0;
}
div.text_box03 figure{
position: absolute;
bottom: 0;
opacity: 0.25;
width: 100%;
}
div.text_box03 figure img{
width: 100%;
object-fit: cover;
}
div.recruit_box{
padding-top: 50px;
}
div.recruit_box h3{
padding: 0 1.5em;
border: solid 1px #445;
color: #445;
background-color: #f2f2f6;
display: table;
margin: 0 auto 30px auto;
line-height: 40px;
border-radius: 20px;
}
div.recruitment_list{
position: relative;
z-index: 1;
overflow: hidden;
padding-bottom: 30px;
}
div.recruitment_list dl{
display: flex;
width: 100%;
text-align: left;
padding: 1px;
box-sizing: border-box;
position: relative;
z-index: 1;
margin-bottom: 1px;
}
div.recruitment_list dl dt{
width: 35%;
position: relative;
z-index: 1;
padding: 0.5em 1em;
box-sizing: border-box;
}
div.recruitment_list dl dt::after {
background-color: #445;
opacity: 0.1;
left: 1px;
right: 1px;
position: absolute;
z-index: -1;
content: '';
top: 1px;
bottom: 1px;
display: block;
}
div.recruitment_list dl dd{
width: 65%;
padding: 0.5em 1em;
}
div.recruitment_list dl dd::after{
position: absolute;
z-index: -1;
content: '';
top: 1px;
bottom: 1px;
display: block;
background-color: #FFF;
opacity: 0.5;
right: 1px;
left: 1px;
}
div.recruit_box div.recruitment_list span.logowrap{
position: absolute;
z-index: 1;
display: block;
width: 150px;
height: 150px;
transform-style: preserve-3d;
animation: turnAround 10s linear 0s infinite normal none running;
top: calc( 50% - 75px );
left: calc( 50% - 75px );
}
div.recruit_box div.recruitment_list span.logowrap span {
width: 150px;
height: 150px;
position: absolute;
z-index: 1;
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.1;
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(1) {
transform: translateY(75px) rotateX(-90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(2) {
transform: translateY(-75px) rotateX(90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(3) {
transform: translateZ(75px);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(4) {
transform: translateZ(-75px) rotateX(180deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(5) {
transform: translateX(-75px) rotateY(-90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(6) {
transform: translateX(75px) rotateY(90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.video{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: grayscale(100%) invert(100%);
}
div.recruit_box div.video video{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 100%;
opacity: 0.1;
}
}
@media screen and (max-width:320px){
div.examplewrap > article{
max-width:300px;
}
div.examplewrap > article figure{
height:240px;
}
div.examplewrap > article figure img{
width:300px;
height:300px;
}
div.examplewrap > article a{
padding:245px 10px 0 10px;
}
div.examplewrap > article a::before{
font-size:22px;
line-height:22px;
height:22px;
}
#detailwrap div.concept p{
line-height:2em;
padding:0 calc(( 100vw - 30px - ( 1em * 20 )) / 2 );
}
}
@media screen and (min-width:768px) and (max-width:1099px){
/*タブレットのコンテンツ記述*/
span.weight{
font-weight: 700;
}
span.skyblue{
font-weight: 700;
color: #0bf;
}
span.pink{
color: #ff8080;
font-weight: 700;
}
div.pageheader div.video{
height:40vw;
}
div.pageheader div.inner{
width: 100%;
padding: 0 1em;
}
div.pageheader::before {
z-index: 2;
background: -webkit-linear-gradient(top, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 80%,rgba(242,242,246,1) 100%);
background: linear-gradient(to bottom, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 80%,rgba(242,242,246,1) 100%);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
div.pageheader::after{
content: "RECRUIT";
display: block;
position: absolute;
top: 50%;
font-size: 15vw;
left: 50%;
font-family: 'Oswald';
opacity: 0.1;
color: #445;
z-index: 4;
text-align: center;
transform: translate(-50%,-50%);
}
div.pageheader div.video::before{
background-image:url(../img/pattern_01@2x.png);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
z-index: 2;
background: radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0),radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0);
background-position: 0px 0,3px 3px;
background-size: 6px 6px
}
div.pageheader div.video video{
height:40vw;
}
section.greeting{
padding: 70px 0;
}
section.greeting h2{
text-align: center;
opacity: 0;
font-size: 18px;
font-weight: 700;
}
section.greeting h2 span.skyblue{
font-size: 22px;
}
div.text_box{
margin-top: 70px;
overflow: hidden;
}
div.text_box p.text{
line-height: 2em;
width: 100%;
padding:1rem;
box-sizing: border-box;
margin-top: 1rem;
opacity: 0;
position: relative;
z-index: 1;
width: calc(100% - 10em);
margin: 0 auto;
text-align: center;
font-size: 16px;
}
div.text_box p.text::before{
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgba(255,255,255,0.5);
position: absolute;
z-index: -1;
}
div.recruit_list{
position: relative;
z-index: 1;
padding: 70px 0;
}
div.recruit_list p.point{
text-align: center;
font-size: 18px;
font-weight: 700;
opacity: 0;
margin-bottom: 15px;
}
div.recruit_list ul{
list-style: none;
list-style-position: outside;
padding-top: 3em;
}
div.recruit_list ul li{
position: relative;
z-index: 2;
padding: 1rem;
box-sizing: border-box;
width: calc(100% - 10em);
margin: 0 auto 3em auto;
border: 2px #fff solid;
background-color: rgba(255,255,255,0.4);
opacity: 0;
text-align: center;
padding-top: 3.5em;
}
div.recruit_list ul li:nth-of-type(1) span{
content: "01";
}
div.recruit_list ul li:nth-of-type(2) span{
content: "02";
}
div.recruit_list ul li span{
font-family: 'Oswald';
font-size: 32px;
font-weight: 700;
position: absolute;
z-index: 3;
width: 2em;
line-height: 2em;
text-align: center;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
}
div.recruit_list ul li span::before{
content: "";
transform: rotate(45deg);
line-height: 2em;
text-align: center;
width: 2em;
height: 2em;
background-color: #fff;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div.recruit_list ul li p{
line-height: 2em;
}
div.text_box div.text{
line-height: 2em;
font-size: 16px;
text-align: center;
}
div.text_box div.text span{
font-size: 22px;
}
div.text_box div.text > p{
text-align: center;
font-weight: 700;
}
p.text02{
line-height: 2em;
text-align: center;
font-size: 16px;
width: calc(100% - 10em);
margin: 0 auto;
padding-bottom: 70px;
}
div.text_box div.text > p:nth-child(2) span{
font-size: 20px;
font-weight: 700;
}
div.text_box02{
position: relative;
z-index: 1;
padding: 70px 5em;
box-sizing: border-box;
font-size: 16px;
}
div.text_box02::after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: repeat;
background-size: 91px 81px;
opacity: 0.5;
z-index: 2;
background-image: url(../img/pattern_01.png);
}
div.text_box02{
}
div.text_box02 div.line_title{
position: relative;
z-index: 1;
height: 2em;
margin: 0 auto;
margin-bottom: 1rem;
display: table;
}
div.text_box02 div.line_title::before{
content:"";
width: 0;
height: 0;
border-top: solid 1px #0bf;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
div.text_box02 div.line_title::after{
content: "";
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #0bf;
border-radius: 1em;
}
div.text_box02 div.line_title h3{
position: relative;
z-index: 5;
left: 50%;
transform: translateX(-50%);
line-height: 2em;
height: 2em;
border-radius: 1em;
padding: 0 1rem;
font-size: 18px;
color: #fff;
display: table;
}
div.text_box02 > div:nth-child(1){
margin-bottom: 15px;
}
div.text_box02 > div div.back_color{
padding: 15px;
box-sizing: border-box;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
line-height: 2em;
}
div.text_box02 > div div.back_color p{
font-size: 16px;
}
div.text_box02 > div div.back_color dl{
margin-bottom: 15px;
}
div.text_box02 > div div.back_color dl:last-child{
margin: 0;
}
div.text_box02 > div div.back_color dl dt{
font-size: 18px;
position: relative;
z-index: 1;
padding-left: 1.5em;
box-sizing: border-box;
font-weight: 700;
}
div.text_box02 > div div.back_color dl dt::before{
content: "";
position: absolute;
z-index: 2;
width: 0.6em;
height: 3px;
background-color: #00bbff;
transform: rotate(45deg);
top: 58%;
left: 0;
}
div.text_box02 > div div.back_color dl dt::after{
content: "";
position: absolute;
z-index: 2;
width: 1em;
height: 3px;
background-color: #00bbff;
top: 50%;
transform: rotate(-45deg);
left: 3.5px;
}
div.text_box02 > div div.back_color dl dd{
line-height: 2em;
font-size: 16px;
}
div.text_box03{
position: relative;
z-index: 1;
padding: 70px 0;
}
div.text_box03 > p{
padding: 0 5em;
box-sizing: border-box;
line-height: 2em;
position: relative;
z-index: 3;
font-size: 16px;
}
div.text_box03 figure{
position: absolute;
bottom: 0;
opacity: 0.25;
width: 100%;
}
div.text_box03 figure img{
width: 100%;
object-fit: cover;
}
div.recruit_box{
padding-top: 70px;
width: calc(100% - 10vw);
margin: 0 auto;
}
div.recruit_box h3{
padding: 0 1.5em;
border: solid 1px #445;
color: #445;
background-color: #f2f2f6;
display: table;
margin: 0 auto 30px auto;
line-height: 40px;
border-radius: 20px;
}
div.recruitment_list{
position: relative;
z-index: 1;
overflow: hidden;
padding-bottom: 30px;
}
div.recruitment_list dl{
display: flex;
width: 100%;
text-align: left;
padding: 1px;
box-sizing: border-box;
position: relative;
z-index: 1;
margin-bottom: 1px;
}
div.recruitment_list dl dt{
width: 35%;
position: relative;
z-index: 1;
padding: 0.5em 1em;
box-sizing: border-box;
}
div.recruitment_list dl dt::after {
background-color: #445;
opacity: 0.1;
left: 1px;
right: 1px;
position: absolute;
z-index: -1;
content: '';
top: 1px;
bottom: 1px;
display: block;
}
div.recruitment_list dl dd{
width: 65%;
padding: 0.5em 1em;
}
div.recruitment_list dl dd::after{
position: absolute;
z-index: -1;
content: '';
top: 1px;
bottom: 1px;
display: block;
background-color: #FFF;
opacity: 0.5;
right: 1px;
left: 1px;
}
div.recruit_box div.recruitment_list span.logowrap{
position: absolute;
z-index: 1;
display: block;
width: 150px;
height: 150px;
transform-style: preserve-3d;
animation: turnAround 10s linear 0s infinite normal none running;
top: calc( 50% - 75px );
left: calc( 50% - 75px );
}
div.recruit_box div.recruitment_list span.logowrap span {
width: 150px;
height: 150px;
position: absolute;
z-index: 1;
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.1;
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(1) {
transform: translateY(75px) rotateX(-90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(2) {
transform: translateY(-75px) rotateX(90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(3) {
transform: translateZ(75px);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(4) {
transform: translateZ(-75px) rotateX(180deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(5) {
transform: translateX(-75px) rotateY(-90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(6) {
transform: translateX(75px) rotateY(90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.video{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: grayscale(100%) invert(100%);
}
div.recruit_box div.video video{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 100%;
opacity: 0.1;
}
}
@media (orientation: landscape) and (max-width:568px){
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
}
@media screen and (min-width:1100px){
div.examplewrap{
width:1100px;
margin:0 auto;
display:flex;
justify-content:center;
flex-wrap:wrap;
}
div.examplewrap > article{
margin:0 20px 40px 20px;
}
div.examplewrap > article img{
transition:all 0.3s ease;
}
div.examplewrap > article:hover img{
transform:scale(1.2) rotate(20deg);
}
section#detailwrap{
padding:30px 0 60px 0;
}
div.exampleimgarea{
padding:0 0 60px 0;
}
div.exampleimgarea div.graphic{
perspective:900px;
position:relative;
z-index:1;
width:900px;
margin:0 auto;
}
div.exampleimgarea div.graphic div.cover{
position:relative;
z-index:2;
}
div.exampleimgarea div.graphic div.productimg{
width:640px;
height:360px;
position: absolute;
z-index:1;
top:47px;
right:90px;
transform:rotateX(4deg) rotateY(-25deg) rotateZ(5deg) scale(0.8);
transform-origin: top right;
}
div.exampleimgarea div.website div.imgwrap{
background-image:url(../img/example/responsive.png);
}
div.exampleimgarea > h2{
padding:100px 0 0 0;
font-size:16px;
line-height:20px;
text-align:left;
width:900px;
margin:0 auto 20px auto;
}
div.exampleimgarea > h2::after{
min-width:600px;
top:0;
left:0;
font-size:50px;
line-height:50px;
background-size:600px 30px;
padding:0 0 40px 0;
}
section#detailwrap > div.inner{
display:flex;
justify-content:space-between;
width:1000px;
margin:0 auto;
padding:120px 0 0 0;
}
section#detailwrap > div.inner .detail{
width:640px;
}
section#detailwrap > div.inner .clientdata{
width:320px;
position:relative;
z-index:1;
}
section#detailwrap > div.inner .clientdata .contentsinner{
position:sticky;
top:100px;
}
div.concept{
text-align:center;
width:1100px;
margin:0 auto;
padding:0 100px 60px 100px;
border-bottom:solid 1px #dbdbdb;
box-sizing:border-box;
}
div.concept div.contentsinner{
text-align:left;
}
div.exampleimgarea > h2::before{
line-height:20px;
margin:0 10px 0 0;
}
#detailwrap div.concept::before{
line-height:20px;
margin:0 0 20px 0;
}
div.concept div.contentsinner p{
line-height:2em;
font-size:16px;
padding:0 1.5em;
}
div.concept div.contentsinner ul{
padding:40px 0 0 0;
}
#detailwrap div.inner::before{
display:block;
width:100%;
font-size:50px;
line-height:50px;
position:absolute;
z-index:1;
top:30px;
}
section#detailwrap > div.inner .clientdata h2::before{
line-height:20px;
margin:0 0 20px 0;
}
section#detailwrap > div.inner .clientdata .contentsinner h2{
font-weight:700;
font-size:16px;
margin:0 0 20px 0;
}
section#detailwrap > div.inner .clientdata .contentsinner h2::after{
font-weight:400;
font-size:14px;
}
section#detailwrap > div.inner .clientdata .contentsinner h3,
section#detailwrap > div.inner .clientdata .contentsinner p{
margin:0 0 20px 0;
}
section#detailwrap > div.inner .detail div.articlewrap article{
position:relative;
z-index:1;
margin:30px 0 0 0;
}
section#detailwrap > div.inner .detail div.articlewrap article:nth-of-type(1){
margin:0;
}
section#detailwrap > div.inner .detail div.articlewrap article::after{
position:absolute;
z-index:2;
content:'';
display:block;
left:10px;
top:0;
bottom:0;
background-color:#0bf;
width:2px;
}
section#detailwrap > div.inner .detail div.articlewrap article h3{
font-size:18px;
font-weight:700;
margin:0 0 30px 0;
padding:10px 0 0 20px;
}
section#detailwrap > div.inner .detail div.articlewrap article p{
font-size:16px;
line-height:2em;
padding:30px 1.5em 10px 20px;
}
section#detailwrap > div.inner .detail div.articlewrap article img{
width:100%;
}
/*パソコンのコンテンツ記述*/
span.weight{
font-weight: 700;
font-size: 16px;
}
span.skyblue{
font-weight: 700;
color: #0bf;
font-size: 16px;
}
span.pink{
color: #ff8080;
font-weight: 700;
font-size: 16px;
}
div.pageheader div.video{
height:500px;
}
div.pageheader div.inner{
width: 1100px;
margin: 0 auto;
}
div.pageheader::before {
z-index: 2;
background: -webkit-linear-gradient(top, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 80%,rgba(242,242,246,1) 100%);
background: linear-gradient(to bottom, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 80%,rgba(242,242,246,1) 100%);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
div.pageheader::after{
content: "RECRUIT";
display: block;
position: absolute;
top: 50%;
font-size: 100px;
left: 50%;
font-family: 'Oswald';
opacity: 0.1;
color: #445;
z-index: 4;
text-align: center;
transform: translate(-50%,-50%);
}
div.pageheader div.video::before{
background-image:url(../img/pattern_01@2x.png);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
z-index: 2;
background: radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0),radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0);
background-position: 0px 0,3px 3px;
background-size: 6px 6px
}
div.pageheader div.video video{
width: 100vw;
}
section.greeting{
padding: 100px 0;
}
section.greeting h2{
text-align: center;
opacity: 0;
font-size: 18px;
font-weight: 700;
}
section.greeting h2 span.skyblue{
font-size: 22px;
}
div.text_box{
margin-top: 100px;
overflow: hidden;
}
div.text_box p.text{
line-height: 2em;
width: 100%;
padding:1rem;
box-sizing: border-box;
margin-top: 1rem;
opacity: 0;
position: relative;
z-index: 1;
width: 800px;
margin: 0 auto;
text-align: center;
font-size: 16px;
}
div.text_box p.text::before{
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgba(255,255,255,0.5);
position: absolute;
z-index: -1;
}
div.recruit_wrap{
position: relative;
z-index: 1;
padding-bottom: 100px;
}
div.recruit_wrap::before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: calc((100vw - 810px) / 2);
background-image: url("../img/recruit/pc04.webp");
background-size: cover;
background-position: center;
opacity: 0.2;
}
body.ie div.recruit_wrap::before,
body.safari div.recruit_wrap::before{
background-image:url("../img/recruit/pc04.png")
}
div.recruit_wrap::after{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: calc((100vw - 810px) / 2);
background-image:url("../img/recruit/sp05.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
}
body.ie div.recruit_wrap::after,
body.safari div.recruit_wrap::after{
background-image: url("../img/recruit/sp05.png");
}
div.recruit_list{
position: relative;
z-index: 1;
padding: 100px 0;
}
div.recruit_wrap div.recruit_list p.point{
text-align: center;
font-size: 18px;
font-weight: 700;
width: 800px;
margin: 0 auto 15px auto;
}
div.recruit_list ul{
list-style: none;
list-style-position: outside;
padding-top: 3em;
width: 800px;
margin: 0 auto;
display: flex;
}
div.recruit_list ul li{
position: relative;
z-index: 2;
padding: 1rem;
box-sizing: border-box;
width: calc((100% / 2) - 3em);
margin: 0 auto 3em auto;
border: 2px #fff solid;
background-color: rgba(255,255,255,0.4);
opacity: 0;
text-align: center;
padding-top: 3.5em;
}
div.recruit_list ul li:nth-of-type(1) span{
content: "01";
}
div.recruit_list ul li:nth-of-type(2) span{
content: "02";
}
div.recruit_list ul li span{
font-family: 'Oswald';
font-size: 32px;
font-weight: 700;
position: absolute;
z-index: 3;
width: 2em;
line-height: 2em;
text-align: center;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
}
div.recruit_list ul li span::before{
content: "";
transform: rotate(45deg);
line-height: 2em;
text-align: center;
width: 2em;
height: 2em;
background-color: #fff;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div.recruit_list ul li p{
line-height: 2em;
font-size: 16px;
}
div.text_box div.text{
line-height: 2em;
font-size: 16px;
text-align: center;
}
div.text_box div.text span{
font-size: 18px;
}
div.text_box div.text > p{
text-align: center;
font-weight: 700;
}
p.text{
line-height: 2em;
text-align: center;
font-size: 16px;
}
p.text02{
text-align: center;
line-height: 2em;
font-size: 16px;
width: 800px;
margin: 0 auto;
}
div.text_box div.text > p:nth-child(2) span{
font-size: 20px;
font-weight: 700;
}
div.text_box02{
position: relative;
z-index: 1;
padding: 100px 0;
box-sizing: border-box;
}
div.text_box02::after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
background-repeat: repeat;
background-size: 91px 81px;
opacity: 0.5;
z-index: 2;
background-image: url(../img/pattern_01.png);
}
div.text_box02{
}
div.text_box02 div.line_title{
position: relative;
z-index: 1;
height: 2em;
margin: 0 auto;
margin-bottom: 1rem;
display: table;
}
div.text_box02 div.line_title::before{
content:"";
width: 0;
height: 0;
border-top: solid 1px #0bf;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
div.text_box02 div.line_title::after{
content: "";
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #0bf;
border-radius: 1em;
}
div.text_box02 div.line_title h3{
position: relative;
z-index: 5;
left: 50%;
transform: translateX(-50%);
line-height: 2em;
height: 2em;
border-radius: 1em;
padding: 0 1rem;
font-size: 18px;
color: #fff;
display: table;
}
div.text_box02 > div:nth-child(1){
margin-bottom: 15px;
}
div.text_box02 > div div.back_color{
padding: 15px;
box-sizing: border-box;
width: 800px;
display: table;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
line-height: 2em;
text-align: center;
}
div.text_box02 > div div.back_color p{
font-size: 16px;
}
div.text_box02 > div div.back_color dl{
margin-bottom: 15px;
}
div.text_box02 > div div.back_color dl:last-child{
margin: 0;
}
div.text_box02 > div div.back_color dl dt{
font-size: 18px;
position: relative;
z-index: 1;
padding-left: 1.5em;
box-sizing: border-box;
font-weight: 700;
display: table;
margin: 0 auto;
}
div.text_box02 > div div.back_color dl dt::before{
content: "";
position: absolute;
z-index: 2;
width: 0.6em;
height: 3px;
background-color: #00bbff;
transform: rotate(45deg);
top: 58%;
left: 0;
}
div.text_box02 > div div.back_color dl dt::after{
content: "";
position: absolute;
z-index: 2;
width: 1em;
height: 3px;
background-color: #00bbff;
top: 50%;
transform: rotate(-45deg);
left: 3.5px;
}
div.text_box02 > div div.back_color dl dd{
line-height: 2em;
font-size: 16px;
text-align: center;
}
div.text_box03{
position: relative;
z-index: 1;
padding: 100px 0;
}
div.text_box03 > p{
padding: 0 5em;
box-sizing: border-box;
line-height: 2em;
position: relative;
z-index: 3;
width: 800px;
margin: 0 auto;
font-size: 16px;
}
div.text_box03 figure{
position: absolute;
bottom: 0;
opacity: 0.5;
width: 100%;
display: none;
}
div.recruit_box{
padding-top: 100px;
}
div.recruit_box h3{
padding: 0 1.5em;
border: solid 1px #445;
color: #445;
background-color: #f2f2f6;
display: table;
margin: 0 auto 30px auto;
line-height: 40px;
border-radius: 20px;
}
div.recruitment_list{
position: relative;
z-index: 1;
overflow: hidden;
padding-bottom: 30px;
width: 800px;
margin: 0 auto;
}
div.recruitment_list dl{
display: flex;
width: 100%;
text-align: left;
padding: 1px;
box-sizing: border-box;
position: relative;
z-index: 1;
margin-bottom: 1px;
}
div.recruitment_list dl dt{
width: 35%;
position: relative;
z-index: 1;
padding: 0.5em 1em;
box-sizing: border-box;
}
div.recruitment_list dl dt::after {
background-color: #445;
opacity: 0.1;
left: 1px;
right: 1px;
position: absolute;
z-index: -1;
content: '';
top: 1px;
bottom: 1px;
display: block;
}
div.recruitment_list dl dd{
width: 65%;
padding: 0.5em 1em;
}
div.recruitment_list dl dd::after{
position: absolute;
z-index: -1;
content: '';
top: 1px;
bottom: 1px;
display: block;
background-color: #FFF;
opacity: 0.5;
right: 1px;
left: 1px;
}
div.recruit_box div.recruitment_list span.logowrap{
position: absolute;
z-index: 1;
display: block;
width: 150px;
height: 150px;
transform-style: preserve-3d;
animation: turnAround 10s linear 0s infinite normal none running;
top: calc( 50% - 75px );
left: calc( 50% - 75px );
}
div.recruit_box div.recruitment_list span.logowrap span {
width: 150px;
height: 150px;
position: absolute;
z-index: 1;
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.1;
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(1) {
transform: translateY(75px) rotateX(-90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(2) {
transform: translateY(-75px) rotateX(90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(3) {
transform: translateZ(75px);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(4) {
transform: translateZ(-75px) rotateX(180deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(5) {
transform: translateX(-75px) rotateY(-90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.recruitment_list span.logowrap span:nth-of-type(6) {
transform: translateX(75px) rotateY(90deg);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
div.recruit_box div.video{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: grayscale(100%) invert(100%);
}
div.recruit_box div.video video{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 100%;
opacity: 0.1;
}
}
/*----------------------------------------------------
** Internet Explorer
**----------------------------------------------------*/