@charset "utf-8";


/* page
---------------------------------------------*/
/* cover */
.advantage-visual {
background-image: url(../img/top-advantage-bg.png);
}
.service-visual {
background-image: url(../img/top-service-system-bg.png);
}
.page-about-visual {
background-image: url(../img/page-about-approach.png);
}
.page-service-visual {
background-image: url(../img/page-service-approach.png);
}
.advantage-visual::before,
.service-visual::before {
background-color: rgba(0,10,20,0.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
.page-about-visual::before,
.page-service-visual::before {
background-color: rgba(0,10,20,0.2);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
.parallax-box {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: sticky;
  top: 0;
}
.cover-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  width: 100vw;
  height: auto;
  min-height: 50vh;  
  background-size: cover;
  background-position: center;
}
.cover-box {
width: 100%;
z-index: 2;
}
.page-title {
display: block;
font-family: "Arial", sans-serif;
font-size: 28px;
font-weight: 900;
color: #ffffff;
text-align: center;

}

.page-head {
font-size: 14px;
color: #ffffff;
text-align: center;
padding-bottom: 4em;
}
.page-approach-title {
display: block;
font-family: "Arial", sans-serif;
font-size: 48px;
font-weight: 400;
color: #fff;
line-height: 0.9;
text-transform: uppercase;
text-align: center;
margin-top: 0px;
padding-left: 2em;
padding-right: 2em;
}
.page-approach-lead {
display: block;
font-family: "Arial", sans-serif;
font-size: 24px;
font-weight: 400;
color: #fff;
line-height: 0.9;
text-transform: uppercase;
text-align: center;
margin-top: 0px;
padding-left: 2em;
padding-right: 2em;
}
.brand-name {
display: block;
font-family: "Arial", sans-serif;
font-size: 130px;
font-weight: 900;
color: #fff;
line-height: 0.9;
text-transform: uppercase;
text-align: center;
margin-top: 0px;
}

/* page-outline */
.page-outline {
display: block;
padding-top: 3em;
padding-bottom: 10em;
}
.page-outline h1 {
font-size: 16px;
margin-bottom: 80px;
}
.page-outline-block {
text-align: center;
margin-top: 80px;
}
.page-outline-block img {
width: 70%;
}
.page-outline-box {
width: 60%;
margin: 0 auto;
padding-top: 2em;
border-top: 1px solid #000;
}
.page-outline-item {
font-family: "Arial", sans-serif;
font-size: 28px;
font-weight: 900;
color: #222;
text-transform: uppercase;
margin-bottom: 20px;
}
.page-outline-copy {
font-size:42px;
font-weight: 900;
text-align: center;
margin-bottom: 10px;
}
.page-outline-head {
font-size: 20px;
font-weight: 900;
text-align: center;
padding-bottom: 0;
}

.page-outline-text {
font-size: 20px;
font-weight: 900;
line-height: 1.9;
margin-bottom: 20px;
}
/* page-approach */
.page-approach {
background-color: #fff;
padding: 10em 0;
}
.page-approach-block {
width: 80%;
margin: 0 auto;
border-left: 3px solid #000;
padding: 0 3em 0 5em;
}
.page-approach h2{
margin-bottom: 20px;
}
.page-approach p{
line-height: 1.8;
margin-bottom: 20px;
}
/* page-about */
/* page-content */
.page-content {
width: 100%;
}
.page-layout {
position: relative;
width: 100%;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sidebar {
width: 35%;
background-color: #fff;
}
.sticky {
position: -webkit-sticky;
position: sticky;
margin-bottom: 0;
top: 50px;
z-index: 0;
}
.sidebar-image {
width: 50vw;
}
.sidebar-image img {
z-index: 0;
}
.sidebar-title {
position: absolute;
top: 50%;
left: 10%;
font-family: "Arial", sans-serif;
font-size: 42px;
font-weight: 900;
color: #fff;
text-transform: uppercase;
z-index: 1;
}
.loop_wrap {
display: flex;
width: 100vw;
overflow: hidden;
}
.loop_wrap img {
width: auto;
height: 100%;
}
@keyframes loop {
  0% {transform: translateX(100%);}
  to {transform: translateX(-100%);}
}
@keyframes loop2 {
  0% {transform: translateX(0);}
  to {transform: translateX(-200%);}
}
.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}
.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}
.static {
position: static;
}

.mainbar {
display: block;
width: 65%;
background-color: rgba(255,255,255,1);
padding-left: 4em;
padding-right: 5em;
z-index: 2;
}

.page-content-block {
margin-bottom: 250px;
}
.page-content-box {
border-top: 1px solid #333;
margin-bottom: 250px;
}
.page-content-item {
display: block;
font-family: "Arial", sans-serif;
font-size: 62px;
font-weight: 900;
letter-spacing: -2PX;
line-height: 0.9;
padding-bottom: 10px;
}
.page-content-lead {
display: block;
font-family: "Arial", sans-serif;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0;
line-height: 0.9;
padding-bottom: 5px;
}
.page-content-head {
font-size: 18px;
margin-top: 30px;
margin-bottom: 10px;
}
.page-content-copy {
font-size: 32px;
font-weight: 900;
margin-bottom: 20px;
}
.page-content-text {
font-size: 17px;
line-height: 1.9;
padding-bottom: 20px;
}
.page-content-image {
margin-bottom: 40px;
}

/* service-page */
.service-sq-pic {
position: relative;
width: 100%;
left:-140px;
}
.page-feature-icon {
text-align: center;
}
.page-feature-icon img {
margin-bottom: 0px;
}
.icon-item {
width: 60%;
}
.icon-name {
text-align: center;
}
.service-item p{
text-align: center;
margin-bottom: 0px;
}
.page-content-service {
width: 90%;
margin: 0 auto;
background-color: #000;
color: #fff;
text-align: center;
padding: 20px 40px;
}
p.page-content-service {
margin-top: 40px;
margin-bottom: 10px;
}

.service-domain {
background-color:#fafafa;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
.service-plan {
background-color:#ffffff;
text-align: center;
padding-top: 100px;
padding-bottom: 0px;
}
.service-plan-block {
padding-bottom: 50px;
}
.service-plan-box {
width: 65%;
margin: 0 auto;
}
.service-plan-box p{

}
.pricecards{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
.pricecard{
flex: 0 0 33%;
text-align: center;
border: 1px solid #eee;
padding-bottom: 1rem;
box-sizing: border-box;
}
.pricecard h3{
font-size: 24px;
text-transform: uppercase;
color: #fff;
padding: 30px 10px;
margin: 0;
}
.pricecard h3 span{
display: block;
font-size: 14px;
}
.pricecard.simple h3{
background: #2b80d5;
}
.pricecard.stock h3{
background: #236ab1;
}
.pricecard.basic h3{
background: #15406a;
}
.plan-lead {
display: block;
font-size: 22px;
font-weight: 900;
margin-top: 30px;
}
.plan-price {
display: block;
font-size: 18px;
font-weight: 400;
margin-top: 20px;
margin-bottom: 20px;
}
.pricecard h4{
font-size: 300%;
margin: 0 auto;
padding: 1rem 0 0;
}
.pricecard p{
font-size: 14px;
margin: 0;
padding: 1rem;
text-align: left;
}
.pricecard a{
padding: 10px 40px;
background: #0e2b47;
color: #fff;
text-decoration: none;
border-radius: 3px;
display: inline-block;
}

/* case swiper */
.case {
display: block;
background-color:#ffffff;
}
.case-title {
display: block;
color: rgba(0,0,0,0.7);
font-size: 12px;
letter-spacing: 0.2em;
margin-bottom: 0px;
}
.case-item {
display: block;
font-family: "Arial", sans-serif;
font-size: 32px;
font-weight: 900;
color: #333333;
text-transform: uppercase;
margin-bottom: 10px;
}

.swiper-wrapper {
margin-bottom: 60px;
}
.swiper-slide-content {
font-size: 20px;
margin-top: 20px;
margin-left: 20px;
}
.effect-color {
	overflow: hidden;
	position: relative;
}
.effect-color::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: .3s;
}
.effect-color img {
	transition: .3s;
}
a:hover .effect-color::before {
background: linear-gradient(126deg, rgba(0,106,219,0.7) 0%, rgba(0,233,255,0.7) 90%); 
}
a:hover .effect-color img {
	transform: scale(1.05);
}
.effect-color .material-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
font-size: 80px;
z-index: 20;
  }
/* -----------------------------------------------------------------------------

	レスポンシブ

----------------------------------------------------------------------------- */

/* Mobile yoko
---------------------------------------------*/

@media screen and (max-width: 896px) {

.sidebar {
width: 100%;
}
.sidebar-image {
width: 100%;
}
.sidebar-image img {
width: 100%;
height: 500px;
object-fit: cover;
}
.sidebar-image span{
text-align: center;
}
.sticky {
position: -webkit-relative;
position: relative;
}
.sidebar-title {
top: 20%;
left: 8%;
}
.mainbar {
width: 100%;
padding-left: 40px;
padding-right: 40px;
}
.page-content-block {
margin-top: 40px;
}
.page-content-item {
font-size: 42px;
}

.service-sq-pic {
left:0;
}
.icon-item {
width: 30%;
}
.icon-name {
margin-bottom: 20px;
}
.service-plan-box {
width: 100%;
margin: 0 auto;
}
.pricecard {
flex: 100%;
margin-bottom: 20px;
}

}

/* Mobile tate
---------------------------------------------*/

@media screen and (max-width: 480px) {

.page-outline-block {
width: 80%;
margin: 0 auto;
}
.page-outline-box {
width: 80%;
}
.page-outline-copy {
font-size:38px;
line-height: 1.1;
padding-top: 20px;
padding-bottom: 20px;
}
.page-outline-text {
font-size: 18px;
}
.brand-name {
font-size: 70px;
}
.page-approach-block {
width: 90%;
padding: 0 2em 0 2em;
}
.page-approach-title {
font-size: 36px;
padding-left: 0;
padding-right: 0;
}
.mainbar {
padding-left: 20px;
padding-right: 20px;
}

}