/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
/* max-height: 100%; */
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
font-family: 'Noto Serif JP', sans-serif;
line-height: 2;
color:#242424;
font-size:1rem;
position:relative;
}
#wrapper{
width:100%;
overflow:hidden;
}
html,body {
height: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
color: inherit;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input,select {
vertical-align: middle;
}
img {
vertical-align: top;
font-size: 0;
line-height: 0;
max-width: 100%;
}
/* clear fix */
.cf:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clf {
clear: both;
}
* html .cf {
height: 1%;
}
.cf {
display: block;
}
/* float */
.floatL {
float: left;
}
.floatR {
float: right;
}
/* align */
.alignL {
text-align: left;
}
.alignC {
text-align: center;
}
.alignR {
text-align: right;
}
input[type="submit"],
input[type="button"] {
border-radius: 0;
-webkit-box-sizing: content-box;
-webkit-appearance: button;
appearance: button;
border: none;
box-sizing: border-box;
cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
outline-offset: -2px;
}
.pcnone{display:none;}
.spnone{display:inline-block;}
@media screen and (max-width:900px){
.pcnone{display:inline-block;}
.spnone{display:none;}
}
.wrap{width:60%;margin:0 auto;}
@media screen and (max-width:900px){
.wrap{width:95%;}
}
.start {
background: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9000;
}
.start p {
position: fixed;
display: none;
z-index: 9999;
width: 100%;
text-align:center;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
}
.start p video{max-width:60%;width:1920px;margin:0 auto;padding:5% 0;}
/* header */
header{position:fixed;left:0;top:0;width:100%;background:#fff;height:80px;z-index:999}
.head_wrap{max-width:1000px;width:100%;margin:0 auto;}
header .head_logo{width:30%;float:left;padding-top:2%;}
header .menu{width:70%;float:left;}
header .menu ul{text-align:right;}
header .menu li{display:inline-block;padding:3%;}
@media screen and (max-width:900px){
header{width:100%;}
}
@media screen and (max-width:480px){
header .head_logo{margin:10px;}
header{height:40px;}
header .menu{display:none;}
}
/* アニメーションスタイル */
/* ---------------------------- */
/* アニメーション前 */
.u-fade-type-up{
transform: translateY(50px);
opacity: 0;
}
/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
transition: .6s;
transform: translateY(0);
opacity: 1;
}
.mask-bg {
color: transparent;
display: inline-block;
font-size: 36px;
font-weight: bold;
overflow: hidden;
position: relative;
transition: color 0ms 450ms;
}
.mask-bg::after {
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(0, 100%);
}
.mask-bg.is-animated {
color: #362ae0;
}
.mask-bg.is-animated::after {
animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg {
0% {
transform: translate(0, 101%)
}
40%, 60% {
transform: translate(0, 0%)
}
100% {
transform: translate(0, -100%)
}
}
.textwrap {width:200px; margin:auto; z-index:1;}
.msg {
color: #04916d;
font-weight: bold;
font-size:1.5em;
position:absolute;
margin:125px 0 0 50px;
pointer-events: none;
text-align:left;
}
@media screen and (max-width:480px){
header .head_logo{width:40%;}
.textwrap{position:relative;width:100%;}
.msg{position:relative;font-size:4vw;text-align:center;margin:125px 0 0 0;}
.MV .container .box{width:100%;padding:10% 10% 0 10%;}
.content1 .box{width:100%;padding:5% 5% 0;}
.contact_btn a{max-width:80%;}
.content2 .container .box{padding:10% 10% 0;width:100%;}
.point_block{margin-top:15%;}
.point_box .img_box{width:100%;padding:0 20% 3%;margin:0;}
.point_box .text_box{width:100%;}
}
footer{text-align:center;background:#fff;}
body {
background: #000;
padding-bottom: 0;
}
.logo-size {
width:300px;
}
h1 {
font-size: 55px;
border-bottom: none;
margin: 0;
color: #fff;
}
h2 {
font-size: 35px;
}
h3 {
font-size: 25px;
line-height: 40px !important;
margin: 0;
}
h4 {
font-size: 20px;
line-height: 30px !important;
margin: 20px 0 5px 0;
}
p {
font-size: 18px;
line-height: 35px;
}
ul {
padding: 0;
}
.title-svg {
}
.cross-left {
border-top: 1px solid #fff;
width: 50px;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.cross-right {
border-top: 1px solid #fff;
width: 50px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.container {
width: 100%;
max-width: 100%;
padding: 0;
}
.container-dark {
/* background-color: rgba(0, 0, 0, 0.6); */
padding: 130px 30px 130px 30px;
}
.title-section {
/*background-color: rgba(0, 0, 0, 0.6);*/
/*width: 500px;*/
}
.box01 img {
height: 100px;
}
.bg-top {
background: url(img/photo1.jpeg) no-repeat right;
background-size: cover;
}
@keyframes imageAnimation {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.bg-section01 {
padding: 100px 0;
background-color: #f6f5ef;
}
.bg-section02 {
background: url(/images/landing/industry-bg03.png) ;
padding: 50px 0 0 0;
}
.section02-text-margin {
margin-top: 7%;
margin-bottom: 7%;
}
.bg-section03 {
padding: 100px 0;
background-color:#fff;
}
.bg-section04 {
padding: 50px 0;
background: url(img/industry-cream-pixels.png) ;
}
.bg-section05 {
padding: 50px 0;
background-color:#fff;
}
.bg-section06 {
background: url(/images/landing/industry-bg03.png) ;
/*background-position: center center ;*/
/*background-size: cover;*/
}
.container-dark02 {
/*background-color: rgba(0, 0, 0, 0.9);*/
padding: 50px 0;
}
.bg-section-pic {
background: url(/images/landing/industry-bg04.jpg) no-repeat;
background-position: center center ;
background-size: cover;
padding: 120px 0;
}
.btn-register:hover, .btn-register:visited {
text-decoration:none;
font-weight:normal;
color: #fff;
}
.bg-section04 p {
font-size: 16px;
line-height: 30px;
}
.content {
max-width: 1200px;
width: 80%;
margin: auto;
}
.sub-title {
color: #fff;
font-size: 15px;
margin-top: 40px;
margin-bottom: 10px;
}
.sub-title-line {
border-top: 1px solid #fff;
left: 0;
position: relative;
top: -10px;
width: 600px;
}
.margin-bottom-40 {
margin-bottom: 40px;
}
.key-word {
color: #fff;
font-size: 37px;
}
.btn-register {
background: #3598db;
border: 1px solid #2078b2;
color: #fff;
padding: 10px 15px;
width: 300px;
}
/* Logo */
.logo {
position: relative;
width: 100%;
animation-duration: 50s;
animation-timing-function: linear;
animation-name: slidein;
animation-iteration-count: infinite;
}
@keyframes slidein {
from {
margin-left: 0;
width: 100%;
}
to {
margin-left: -2502px;
width: 100%;
}
}
.logo > ul {
position: relative;
width: 7000px;
height:84px;
}
.logo ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo li {
float: left;
margin:0 10px;
}
.frame {
margin-top: 50px;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
table.question {
margin-bottom: 10px;
}
table.question td.blue {
color:#24a0c4;
font-size: 22px;
padding: 5px;
}
table.question td.answer {
font-size: 18px;
padding: 5px;
}
/* Shine */
.hover14 figure {
position: relative;
}
.hover14 figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(300,300,300,0) 0%, rgba(300,300,300,.3) 100%);
background: linear-gradient(to right, rgba(300,300,300,0) 0%, rgba(300,300,300,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.hover14 figure:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
/* progress-bar */
.pie-chart {
width: 100%;
position: relative;
font-size: 12px;
line-height: 2em;
padding: 10px 0;
}
#skill {
list-style:none;
padding-top:30px;
}
#skill li {
margin-bottom: 60px;
background: #000;
height: 10px;
border-radius: 3px;
border-left: 1px solid #111;
border-top: 1px solid #111;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
#skill li em {
position:relative;
top:-30px;
font-size: 14px;
}
.expand {
height: 5px;
margin: 2px 0;
background:#2187e7;
position: absolute;
box-shadow: 0px 0px 10px 1px rgba(0,198,300,0.4);
}
.graph01.animation-scrollUp.is-animated { width: 2.7%; -moz-animation:graph01 2s ease-out; -webkit-animation:graph01 2s ease-out; }
.graph02.animation-scrollUp.is-animated { width:16.4%; -moz-animation:graph02 2s ease-out; -webkit-animation:graph02 2s ease-out; }
.graph03.animation-scrollUp.is-animated { width:68.5%; -moz-animation:graph03 2s ease-out; -webkit-animation:graph03 2s ease-out; }
.graph04.animation-scrollUp.is-animated { width:12.8%; -moz-animation:graph04 2s ease-out; -webkit-animation:graph04 2s ease-out; }
.graph05.animation-scrollUp.is-animated { width: 0.6%; -moz-animation:graph05 2s ease-out; -webkit-animation:graph05 2s ease-out; }
@-moz-keyframes graph01 { 0% { width:0px; } 100% { width: 2.7%; } }
@-moz-keyframes graph02 { 0% { width:0px; } 100% { width:16.4%; } }
@-moz-keyframes graph03 { 0% { width:0px; } 100% { width:68.5%; } }
@-moz-keyframes graph04 { 0% { width:0px; } 100% { width:12.8%; } }
@-moz-keyframes graph05 { 0% { width:0px; } 100% { width: 0.6%; } }
@-webkit-keyframes graph01 { 0% { width:0px; } 100% { width: 2.7%; } }
@-webkit-keyframes graph02 { 0% { width:0px; } 100% { width:16.4%; } }
@-webkit-keyframes graph03 { 0% { width:0px; } 100% { width:68.5%; } }
@-webkit-keyframes graph04 { 0% { width:0px; } 100% { width:12.8%; } }
@-webkit-keyframes graph05 { 0% { width:0px; } 100% { width: 0.6%; } }
.move-section01-text.animation-scrollUp {
opacity:0; transform: translate(100px);
transition: 1s;
}
.move-section01-text.animation-scrollUp.is-animated {
opacity: 1; transform: translate(0);
}
@-moz-keyframes move-section01-text { 0% { opacity:0; transform: translate(100px);} 100% { opacity: 1; transform: translate(0); } }
@-webkit-keyframes move-section01-text { 0% { opacity:0; transform: translate(100px);} 100% { opacity: 1; transform: translate(0); } }
.move-section01-image.animation-scrollUp {
opacity:0; transform: translate(-100px);
transition: 1s;
}
.move-section01-image.animation-scrollUp.is-animated {
opacity: 1; transform: translate(0);
}
@-moz-keyframes move-section01-image { 0% { opacity:1; transform: translate(-100px);} 100% { opacity: 1; transform: translate(0); } }
@-webkit-keyframes move-section01-image { 0% { opacity:1; transform: translate(-100px);} 100%{ opacity: 1; transform: translate(0); } }
.scale-icon.animation-scrollUp {
opacity:0; transform: scale(0);
transition: 1s;
}
.scale-icon.animation-scrollUp.is-animated {
opacity: 1; transform: scale(1.0);
}
@-moz-keyframes scale-icon { 0% { opacity:1; transform: scale(0);} 100% { opacity: 1; transform: scale(2.0); } }
@-webkit-keyframes scale-icon { 0% { opacity:1; transform: scale(0);} 100%{ opacity: 1; transform: scale(2.0); } }
@media screen and (max-width: 600px) {
.content {
width: 100%;
margin: auto;
padding: 0 15px;
}
.logo-size {
width:200px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 20px;
}
p {
font-size: 18px;
line-height:30px;
}
.sub-title-line {
width: 100%;
}
.sub-title {
margin-top: 30px;
}
.key-word {
font-size: 30px;
}
.section02-text-margin {
margin-top: 0;
margin-bottom: 20px;
}
.bg-section01 {
background-image: none;
background-color: #f6f5ef;
padding: 40px 0;
}
.container-dark {
background-color: rgba(0, 0, 0, 0.6);
padding-bottom: 50px;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
}
}
.form{width:100%;min-height:80vh;background:#fff;}
.form_block{width:80%;padding-top:10%;margin:0% auto;}
.form_block table{width:100%;}
.form_block th{vertical-align:top;padding:0.5em 1em;}
.form_block td{padding:0.5em 1em;}
header .menu li a{color:#000;}
.submitbtn input{width: 300px;
margin: 10px auto;
display: block;}