@charset "UTF-8";
/* CSS Document */
/*Header*/
.header{
    width:100%;
    min-width: 1200px;
    display:inline-block;
    position:fixed;
    top:0;
    left:0;
    transition: all 1s ease;
    z-index: 5;
}

.logo{
    display:inline-block;
    float: left;
    vertical-align: middle;
    padding:15px 0 5px 120px;}

.logo img{
    width:170px;
    height:auto;
}


.header-buttons{
    display:inline-block;
    float:right;
    padding:20px 60px 20px 20px;
}


.header-buttons a{
    border: 2px solid #ffffff;
color: #ffffff;
background:rgba(0,0,0,0.2);
    font-size: 15px;
  text-decoration: none;
  padding: 8px 16px;
  transition: .4s;
}

.header-buttons a:hover {
color:#000000;
background-color:#ffffff;
border:none;
}

.page-header {
	background: url(images/freakoutsocial_bg.jpg) top center !important;
	background-size: cover;
}

.sub-page h4 {
	font-size: 2.6rem;
	margin-bottom: 20px;
	color: #aa0000;
}

/*what is FOS
  .abovetopic {
      display:flex;
      flex-direction: row;
      justify-content: space-between;
  /*    flex-direction: row-reverse;*/
   /*    margin-bottom:20px !important;
  }*/

.bl_sliderBlock{
      display:flex;
      flex-direction: row;
      justify-content: space-between;
  /*    flex-direction: row-reverse;*/
margin-bottom:20px !important;
  }


.bl_sliderBlock_slide{
    width:30%;
}

  .abovetopic .pict{
      width:100%;
  }

  .abovetopic .topictext{
      width:100%;
  }

.abovetopic a{
color: #ffffff;
background:#aa0000;
  text-decoration: none;
  padding: 8px 16px;
  transition: .4s;
}

.abovetopic a:hover {
text-decoration: none;
background-color:#850000;
}

/*why-steps*/

.pcstep, .spstep{
text-align: center;
margin-top:50px;
}

.pcstep img{
    width:70%;
    vertical-align:bottom;
}

.spstep img{
        width:100%;
        vertical-align:bottom;
}


@media(max-width:767px){
    .pcstep{display:none;} 
    .box{display:none;} 
    .buttonspnone{display:none;} 
}
@media(min-width:768px){
    .spstep{display:none;}
    .adcreative{
    display:none;
}
}

.graybg{
    background-color:#f2f2f2;
}


.imagewrap{
    text-align: center;
    margin:50px auto;
}

.graph{
    width:45%;
}
.publogos{
    width:53%;
}

.adcreative{
    width:70%;
}

.box{
    position: relative;
    text-align:center;
}
.box video{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width:330px;
    height:auto;
}

/*Contact*/

.contact{
    text-align:center;
}

.contact h4{
    font-size:2.5em !important;
    margin-bottom:30px!important;
}

.contact p{
    font-size:0.9em;
}

.contact h4, .contact p{
    color:#ffffff !important;
}


.fbmessenger{
    margin:50px auto 20px; 
}

.fbmessenger a{
color: #ffffff;
background:#006aff;

  text-decoration: none;
  padding: 8px 16px;
  transition: .4s;
}



.fbmessenger a:hover {
text-decoration: none;
background-color:#004EBC;
}

.contactform a{
color: #ffffff;
background:#aa0000;
  text-decoration: none;
  padding: 12px 18px;
  transition: .4s;
}

.contactform a:hover {
text-decoration: none;
background-color:#850000;
}

.imagebg {
	background: url(images/contact_bg.jpg) top center !important;
	background-size: cover;
}


.footerlinks{
    padding:20px 0;
}


.footericons {
    padding:50px 0 0;
}

.footericons img{
    width:70px;
    padding:10px;
    
}

.footerlinks a{
text-decoration: none;
padding:10px;
color:#ffffff;
}

.footer{
    padding-bottom:30px;
    color:#ffffff;
    text-align: center;
    background-color:#000000;
        font-size:0.9em;
}



@media(max-width:767px){
	.header{
    width:100%;
    display:inline-block;
    position:fixed;
    top:0;
    left:0;
    transition: all 1s ease;
    z-index: 5;
}

.logo{
    display:inline-block;
    float: left;
    vertical-align: middle;
    padding:10px 0 0 10px;}

.logo img{
    width:150px;
}

.header-buttons{
    display:inline-block;
    float:right;
    padding:20px 10px 20px 0;
}


.header-buttons a{
    font-size: 14px;
    padding: 5px 12px;
}



	.sub-page h4 {
		font-size: 2rem;
	}
	 .intro .text {
		float: none;
		width: 100%;
	}
	 .intro .img {
		margin: auto;
		float: none;
		 width: 60%;
	}
	.video .intro .img {
		float: none;
	}
	.format li {
		width: 60%;
		float: none;
		margin: auto;
		margin-bottom: 30px;
	}

	.demo ul {
		flex-wrap: wrap;
	}
	.demo li {
		width: 40%;
		float: none;
		margin: auto;
		margin-bottom: 30px;
	}
	.panel-left .panel-img img, .panel-right .panel-img img {
		height: 40vh;
	}
}

@charset "UTF-8";
/* CSS Document */

/*
Theme Name: global
*/

html {
	font-size: 62.5%;
	 -webkit-text-size-adjust: 100%;
	min-width: 1200px;
}
@media(max-width:767px){
	html {
		min-width:0;
	}
    
    .header{
		min-width:0;
	}
}
body {
    margin:0 !important;
	background-size: cover;
	color: #333;
	text-align: center;
	font-size: 1.8rem;
    font-family: 'Poppins', sans-serif;
	letter-spacing: 0.05em;
	background: #f2f2f4;
  word-wrap : break-word;
  overflow-wrap : break-word;
	position: relative;
}
body {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
	


*, *::before, *::after {
	  box-sizing: border-box;
}
a {
	color: #aa0000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
p {
	line-height: 1.8em;
}

.inner {
	margin: 0 auto;
	padding: 60px 10% 0;
}

h2{
    margin-block-start:  0 !important;
    margin-block-end: 0 !important;
}

h2.heading {
	font-size: 4rem;
	font-weight: bold;
}
h2.heading::after {
	content: "";
	width: 50px;
	height: 5px;
	background: #aa0000;
	display: block;
	margin: auto;
}
h3 {
	font-size: 2.4rem;
	margin-bottom: 15px;
}
.button {
	display: block;
	margin: auto;
	width: 20%;
	padding: 10px 20px;
	color: #fff;
	background: linear-gradient(to right,#aa0000,#850000);
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 1.4rem;
	text-align: center;
	transition: opacity 0.5s;
	text-decoration: none;
	transition: all 0.5s;
	border-radius: 25px;
	    position: relative;
}
.button:hover{
	transform: scale(0.975);
	text-decoration: none;
}

.button_arrow {
	text-align: right;
	display: block;
}
.button_arrow::after {
	content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid #aa0000;
    border-top: 1px solid #aa0000;
    transform: rotate(45deg);
    display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

@media(max-width:640px){
	body {
		font-size: 1.4rem;
	}
	img {
		max-width: 100%;
		max-height: 100%;
	}
	
	#footer ul.menu {
		display: block;
	}
	#footer small {
		display: block;
	}
	#footer .menu > li {
    	margin: 0 0 35px 0;
		text-align: center;
	}
	#footer .menu > li.contact a {
		float: none;
		margin: auto;
	}
	#footer .menu .sub-menu li {
    	margin: 0;
	}
	h2.heading {
		font-size: 2.8rem;
	}
	h3 {
		font-size: 2rem;
	}
	.button {
		width: 60%;
	}
    
    .underproducts{
    height:40px;   
}
    
}

.underproducts{
    height:70px;   
}

@media(max-width:768px){
	.inner {
		width: 100%;
		padding: 60px 5% 0;
	}
}

hr {
	height: 1px;
	background-color:#ccc;
	width: 100%;
	display: block;
	margin: 50px 0;
}

.sub-page,
.article-page {
	background: #fff;
	color: #111;
	text-align: left;
}
.sub-page .page-header,
.article-page .page-header {
	background: #000;
	background-size: cover !important;
} 
.sub-page h2,
.article-page h2 {
	background: rgba(0,0,0,0.3);
	font-size: 5.2rem;
	font-weight: bold;
	text-align: center;
	padding: 270px 0 140px;
	color: #fff;
}
.sub-page h3 {
	font-size: 4.2rem;
	font-weight: 900;
	margin-bottom: 40px;
	text-align: left;
}
.sub-page h3:first-letter {
	color: #aa0000;
}
.sub-page h3::after {
	content: '';
    display: block;
	width: 50px;
    height: 4px;
    margin: 25px 0 0;
	background-color: #aa0000;
}
.sub-page h3 span {
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
	color: #aa0000;
	line-height: 1.5em;
}
.sub-page h4,
.article-page h4 {
	font-weight: 900;
	margin-bottom: 10px;
    font-size: 2.2rem;
}
.sub-page h5,
.article-page h5 {
	font-weight: 900;
	margin-bottom: 10px;
    font-size: 1.8rem;
}
.sub-page h6,
.article-page h6 {
	font-weight: bold;
}
.sub-page p,
.article-page p {
	margin-bottom: 15px;
}
.article-page h3 {
	font-weight: 700;
	text-align: left;
	font-size: 3.2rem;
	margin-bottom: 20px;
}


.subtitle{font-size: 2.2rem;
font-weight: normal;}

@media(max-width:640px){
    
    
	.sub-page h2, .article-page h2 {
		font-size: 3.5rem;
		padding: 120px 15px 70px;
	}
    
    
    .sub-page h2{
        line-height:30px;
    }
    .subtitle{
        font-size:14px !important;

    }
    
	.sub-page h3 {
		font-size: 2.7rem;
	}
	.article-page h3 {
		font-size: 2.2rem;
		}
	.sub-page h4,
	.article-page h4 {
		font-size: 1.8rem;
	}
	.article-page img {
		width: 100%;
	}
    
    .bl_sliderBlock {
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom:20px !important;
  }

  .abovetopic .pict{
      width:98%;
  }

  .abovetopic .topictext{
      width:98%;
  }
    
    .graph{
    width:80%;
}
.publogos{
    width:98%;
}

.adcreative{
    width:90%;
}
    .pict{
        margin-top:30px;
    }
    
    .contact h4{
        font-size:2.5rem !important;
    }
    
    .footer a{
        font-size:11px;
    }

}


.bg01 {
	background: #f7f7f7;
}
.bg02 {
	background: #858585;
}
.bg03 {
	background: #e3e3e3;
}


/*---- 2column --*/

.column-2 {
	overflow: hidden;
	display:flex;
	flex-wrap:wrap;
}
.column-2 li {
	width: 48%;
	margin-right: 4%;
	margin-bottom: 30px;
}
.column-2 li:nth-of-type(2n) {
	margin-right: 0;
}

@media screen and (max-width:640px) {
	.column-2 li {
		width: 100%;
		margin-right: 0;
	}
}

/*---- 3column --*/

.column-3 {
	overflow: hidden;
	display:flex;
	flex-wrap:wrap;
}
.column-3 li {
	width: 31.3333%;
	margin-right: 3%;
	margin-bottom: 30px;
}
.column-3 li:nth-of-type(3n) {
	margin-right: 0;
}

@media screen and (max-width:640px) {
	.column-3 li {
		width: 100%;
		margin-right: 0;
	}
}


/*Slick */

.bl_sliderBlock{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    text-align:center;
}
 
.slick-initialized .slick-slide{
    position: relative;
}
 
.bl_sliderBlock_slide video{
    max-width:100%;
    height:auto;
    width:250px;
}


/*.slick-initialized .slick-slide{
        max-width:100%;
        height:auto;
        width:250px;
}*/

@media screen and (max-width:640px) {
    
    .bl_sliderBlock{
        margin-top:20px;
    }
    
    .demobutton{
        text-align: center !important;
    }
    
    .bl_sliderBlock_slide{
    width:100%;       
}
    .bl_sliderBlock_slide p {
    margin-bottom: 30px;
}
}


/*スライダー送り矢印のCSS*/
.slider-arrow{
    position: absolute;
    cursor: pointer;
    z-index: 1;
    top: calc(50%);
    transform: translateY(-50%);
}
 
.slider-arrow.slider-prev{
    left:30px;
    transform: translate(-100%,-50%);
}
 
.slider-arrow.slider-next{
    right: 30px;
    transform: translate(100%,-50%);
}
.slider-arrow img{
    width:30px !important;
    height:auto !important;*/
}

.slick-dots li button::before {
    font-size: 20px!important;
    color: #aa0000 !imporatnt;}


.bl_sliderBlock_slide div{
    font-size:1.2em;
    display: flex;
	flex-direction: column;
	justify-content: center; 
    align-items: center; 
}
/*Chrome枠消す*/
*:focus {
outline: none;
}