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

/*サイトリニューアル */
@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}

#container{display:none;}
#loading{
	position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 500;
    background-color: white;
}
.loading_img {
    margin: 35vh auto;
    width: 300px;
	text-align: center;
}
.loading_img .lo {
	width: 300px;
}
.service_box {
  animation: horizontal 1s ease-in-out infinite alternate;
}
.service_box hr {
	width: 40%;
}
.listing, .social_media, .management, .adnetwork, .production, .lpo, .management2, .listing2 {
  animation: vertical 1s ease-in-out infinite alternate;
}
.listing, .listing2 { animation-duration: 1.1s}
.management, .production{ animation-duration: 1.3s}
.lpo, .adnetwork{ animation-duration: 1.5s}
.social_media, .listing2{ animation-duration: 1.7s}

.sa {
  opacity: 0;
  transition: all .5s ease;
}

.sa.show {
  opacity: 1;
  transform: none;
}

.sa--up {
  transform: translate(0, 100px);
}

html, body { height: auto; }

.container_demo  {
	min-width:1100px;
	margin:0 auto;
}
.marketing_demo {
	min-width:1100px;
	margin:0 auto;	
}
/*.container_demo header .inner_demo {
	position: relative;
	overflow: hidden;
	width: 100%;
    height: 600px;
} */
header .inner_demo {
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 499;
    background: #fff;
}
.container_demo #bg-video{
	width: 100%;
	height: 600px;
	z-index: 1;
	object-fit: cover;
    margin-top: 50px;
}
.container_demo #nav-drawer {
	display: none;
}
.container_demo .header-bg {
	position: absolute;
	top: 50px;
  	width: 100%;
  	height: 600px;
  	z-index: 10;
	background: rgba(51,153,255,0.5);;
}
header .inner_demo h1 {
	position: absolute;
    left: 100px;
    top: 10px;
  	z-index: 100;
}
header .inner_demo h1 img{
	width: 120px;
}

header .inner_demo .g_nav {
    position: absolute;
    right: 50px;
    top: 5px;
  	z-index: 100;	
}
header .inner_demo .g_nav li{
    display: inline-block;
    width: 130px;
}
header .inner_demo .g_nav li a{
	text-decoration: none;
}
.container_demo header .inner_demo .g_nav li span {
	color: #fff;
	font-size: 15px;	
}
.container_demo .inner_demo .union_concept {
    position: absolute;
	top: 27%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  	z-index: 100;
	text-align: center;
}
.container_demo .inner_demo .union_concept img {
    width: 45vw;
}
.container_demo .new_topics {
	position: relative;
	height: 200px
}
.container_demo .topics_area {
	width: 700px;
	height: 250px;
	color: #fff;
	background-color: #3f3f3f;
	padding: 20px 50px;
	position: absolute;
	top: -50px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: 200;
}
.container_demo .news_list {
	line-height: 40px;
}
.container_demo .news_list li a{
	color: #fff;
}
/*.container_demo .news_list span {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
	margin-left: 1rem;
} */
.container_demo .topics_area  h3 {
	text-align: center;
	font-size: 30px;
}
.container_demo .service {
	max-width: 1360px;
    margin: 0 auto;
}
.container_demo .service_article {
	background-color: #e7e7e7;
	width: 800px;
	height: 400px;
	padding: 60px 30px 0 30px;

}
.container_demo .company_article {
	background-color: #e7e7e7;
	width: 750px;
	height: 240px;
	padding: 65px 30px 0 30px;
	position: absolute;
    right: 0;
}
.container_demo .service_detail, .container_demo .company_detail {
	position: relative;
	margin-top: 200px;
}
.container_demo .company_detail {
	height: 290px;
    max-width: 1360px;
    margin: 150px auto 0;
}
.container_demo .service_detail h2, .container_demo .company_detail h2 {
	font-size: 70px;
	font-weight: bold;
	line-height: 50px;
	color: #3f3f3f;
}
.container_demo .service_detail h2 {
	position: absolute;
	top: -40px;
}
.container_demo .company_detail h2 {
	text-align: right;
	position: absolute;
	right: 0;
	top: -40px;
	z-index: 200;
}
.container_demo .service_article .service_text{
	/* width: 660px; */
	height: 156px;
	text-align: left;
}
.container_demo .company_article .company_text{
	/* width: 500px; */
	height: 156px;
	position: absolute;
    right: 155px;
	text-align: right;
}
.container_demo .yahoo_partner {
	margin-top: 20px;
}
.container_demo .google_img, .container_demo .yahoo_img, .container_demo .google_text, .container_demo .yahoo_text {
	display: inline-block;
}
.container_demo .google_img, .container_demo .yahoo_img {
	width: 200px;
}
.container_demo .google_text, .container_demo .yahoo_text {
	width: 500px;
	height: 72px;
}
.container_demo .union_txt {
	position: absolute;
}
.container_demo .union_proposal {
	top: 40px;
	left: 100px;
}
.container_demo .union_statement {
	top: 10px;
	right: 0px;
}
.container_demo .union_txt img {
	width: 70%;
}
.container_demo .service_detail .video_area {
	position: absolute;
	top: -155px;
	right: 0px;
}
.container_demo .service_detail .video_area video{
	width: 650px;
}
.container_demo .company_detail .video_area {
	position: absolute;
	top: -100px;
	left: 0px;
}
.container_demo .company_detail .video_area img{
	width: 650px;
}
.ytp-gradient-top {
	visibility: hidden;
}

.container_demo .each_service {
	position: relative;
	margin: 30px 60px;
	height: 700px;
}
.container_demo .each_service .listing {
	background-image: url(https://union-company.jp/wp/wp-content/themes/union/img/indexdemo/listing_img.png);
	background-size: cover;
	height: 240px;
	width: 310px;
	color: #fff;
	box-shadow: 10px 10px #aed6ff;
	padding: 20px 30px;
	position: absolute;
	top: 30px;
}
.container_demo .each_service .social_media {
	background-image: url("https://union-company.jp/wp/wp-content/themes/union/img/indexdemo/socialmedia.png");
	background-size: cover;
	height: 200px;
	width: 260px;
	color: #fff;
	box-shadow: 10px 10px #c7e0e2;
	padding: 20px 30px;
	position: absolute;
	top: 90px;
	left: 340px;
}
.container_demo .each_service .management {
	background-image: url("https://union-company.jp/wp/wp-content/themes/union/img/indexdemo/management.png");
	background-size: cover;
	height: 200px;
	width: 260px;
	color: #fff;
	box-shadow: 10px 10px #cec6ff;
	padding: 20px 30px;
	position: absolute;
	top: 40px;
	left: 635px;	
}
.container_demo .each_service .adnetwork {
	background-image: url("https://union-company.jp/wp/wp-content/themes/union/img/indexdemo/adnetwork.png");
	background-size: cover;
	height: 200px;
	width: 260px;
	color: #fff;
	box-shadow: 10px 10px #7fd190;
	padding: 20px 30px;
	position: absolute;
	top: 120px;
	left: 950px;	
}
.container_demo .each_service .production {
	background-image: url("https://union-company.jp/wp/wp-content/themes/union/img/indexdemo/production.png");
	background-size: cover;
	height: 200px;
	width: 260px;
	color: #fff;
	box-shadow: 10px 10px #ffdccf;
	padding: 20px 30px;
	position: absolute;
	top: 350px;
}
.container_demo .each_service .lpo {
	background-image: url("https://union-company.jp/wp/wp-content/themes/union/img/indexdemo/lpo.png");
	background-size: cover;
	height: 210px;
	width: 260px;
	color: #fff;
	box-shadow: 10px 10px #ffcbd7;
	padding: 20px 30px;
	position: absolute;
	top: 400px;
	left: 300px;
}
.container_demo .each_service .management2 {
	background-image: url("https://union-company.jp/wp/wp-content/themes/union/img/indexdemo/management2.png");
	background-size: cover;
	height: 200px;
	width: 260px;
	color: #fff;
	box-shadow: 10px 10px #f3ffaf;
	padding: 20px 30px;
	position: absolute;
	top: 330px;
	left: 600px;
}
.container_demo .each_service .listing2 {
	background-image: url("https://union-company.jp/wp/wp-content/themes/union/img/indexdemo/listing2.png");
	background-size: cover;
	height: 240px;
	width: 310px;
	color: #fff;
	box-shadow: 10px 10px #ffd3d7;
	padding: 20px 30px;
	position: absolute;
	top: 420px;
	left: 890px;
}
.container_demo .each_service h3 {
	font-size: 30px;
}
.container_demo .each_service h3::before,
.container_demo .each_service h3::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.container_demo .each_service h3 ,
.container_demo .each_service h3::before,
.container_demo .each_service h3::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.container_demo .each_service h3:hover {
  letter-spacing: 3px;
}
.container_demo .each_service .social_media h3:hover,
.container_demo .each_service .adnetwork h3:hover, 
.container_demo .each_service .listing2 h3:hover {
  letter-spacing: 1px;
}
.container_demo .each_service 
.container_demo .each_service hr {
	width: 80px;
	
}
.container_demo .each_service .right {
	text-align: right;
	width: 170px;
}
.container_demo .each_service .service_content {
	font-size: 11px;
}
.container_demo .view_more {
	position: absolute;
	background-color: #000;
	color: #fff;
	text-align: center;
	right: 1px;
	bottom: 0;
	width: 120px;
	padding: 10px 0;
	font-size: 10px;
}
.container_demo .view_more h3::before,
.container_demo .view_more h3::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.container_demo .view_more h3 ,
.container_demo .view_more h3::before,
.container_demo .view_more h3::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.container_demo .view_more:hover {
	background-color: #59b1eb;
}
.company_address {
	font-size: 0;
}
.copyright {
	width: 100%;
	height: 23px;
	background-color: #2c2c2c;
	text-align: center;
}
.copyright span{
	color: #fff;
}
.company_address .address_detail {
	display: inline-block;
	color: #2c2c2c;
    background: #fff;
    padding: 30px 0px 40px;
    width: 55%;
    vertical-align: top;
	font-size: 14px;
    height: 282px!important;
}
.address_detail .more_detail {
	margin-bottom: 30px;
}
.company_address .company_map {
	display: inline-block;
	width: 45%;
}
.address_detail .more_detail p {
	display: inline-block;
    border: solid 1px;
    padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 20px;
}

.address_detail p {
	margin-left: 10px;
}
.address_detail .more_detail p:hover {
	margin-left: 10px;
	color: #fff;
	background: #2c2c2c;
}
.tel_number {
	width: 340px;
}
.tel_number, .privacy_mark {
	display: inline-block;
	vertical-align: top;
}
.privacy_mark img {
	width: 100px;
}
.demo_color {
	 background-image: url("../img/ttl_recruit.png");
	background-color:#0b549e;
	background-blend-mode:lighten;
}

.company_address .address_detail .footer_ico {
	display: inline-block;
	vertical-align: middle;
	width:40%;
	font-size:0;
}
.company_address .address_detail .footer_ico img {
	max-width:100%;
	height:auto;
}
.company_address .address_detail .footer_ico .privacy {
	width:28%;
	display: inline-block;
	max-width:90px;
	vertical-align: middle;
	padding-right:5px;
}
.company_address .address_detail .footer_ico .bestventure {
	width:30%;
	display: inline-block;
	max-width:100px;
	vertical-align: middle;
	padding-left:5px;
}
.company_address .address_detail .footer_ico .partner {
	width:40%;
	display: inline-block;
	max-width:120px;
	vertical-align: middle;
	padding-left:10px;
}
.company_address .address_detail .footer_ico .partner .item {
	margin-top:8px;
}
.company_address .address_detail .footer_ico .partner .item:first-child {
	margin-top:0;
}

#particles-js{
	position: absolute;
	height: 1800px;
  width: 100%;
	z-index: -999;
}
/*　ボタン　*/
.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color:white;
  text-decoration:none;
  position:absolute;
  bottom:15px;
  right:2%;
}
/*    start code for the actual button:         */

/*   
    Spot is the span on the inside of the href that
    fills the parent and makes the hover and link work
    for the entire div
*/

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/*
    This is the outer svg wrapper that the SVG itself will 
    fill. Multiple svg-wrapper classes can be put side by side.
*/

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 120px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}

/*
  This is where we define the fill, color, thickness,
  and stroke pattern of the SVG when there is no hover.
  The dasharray and offset together define the line position
  under the words. Here's also where the transition speed is set.
*/

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #009FFD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -176;
  transition: 1s all ease;
}
/* 
    Pushing the text up into the SVG. Without this the
    text would be below the div's.
*/

#text {
  margin-top: -38px;
  text-align: center;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}

#text a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}
/* 
    Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #06D6A0;
}
/* ボタン */

.marketing_demo .fv_article {
	height: 460px;
	position: relative;
	width: 1360px;
	margin: 0 auto;
}
.marketing_demo .fv_article h2 {
	font-size: 50px;
    font-weight: bold;
	text-shadow: white 1px 1px 10px, white -1px 1px 10px, white 1px -1px 10px, white -1px -1px 10px,		white 1px -1px 10px,
		white -1px -1px 10px;

}
.marketing_demo .fv_article p{
	font-size: 30px;
	font-weight: bold;
	text-shadow: white 1px 1px 10px,
		white -1px 1px 10px,
		white 1px -1px 10px,
		white -1px -1px 10px,
		white 1px -1px 10px,
		white -1px -1px 10px;
}
.marketing_demo .fv_article p span{
	font-size: 20px;
}
.marketing_demo .fv_article .fv_text {
	position: absolute;
    z-index: 200;
    top: 60px;
    left: 60px;
	font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.marketing_demo .fv_article .fv_img {
	position: absolute;
	right: 0;
	top: 0;
    z-index: 100;
}
.marketing_demo .fv_article .fv_img img{
	width: 950px;
}
.marketing_demo .section01 .bg_ttl {
	width: 100%;
	padding: 90px 0 40px;
	background-color: #e7eff6;
    text-align: center;
}
.marketing_demo .section01 .bg_ttl p {
position: relative;
    font-size: 30px;
    font-weight: bold;
    width: 700px;
    height: 200px;
    margin: 0 auto;
    padding: 60px 0;
}
.marketing_demo .section01 .bg_ttl p:before {
	content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5.5rem;
    height: 5.5rem;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    margin: 0;
}
.marketing_demo .section01 .bg_ttl p:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5.5rem;
    height: 5.5rem;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    margin: 0;
}
.marketing_demo .section01 .checklist {
	width: 1100px;
	margin: 50px auto;
}

.marketing_demo .section01 .checklist ul{
	font-size: 23px;
	width: 500px;
	margin: 0 auto;

}
.marketing_demo .section01 .checklist ul li{
    margin: 10px;
}
.marketing_demo .section01 .checklist ul li:before{
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    margin-right: 20px;
    background-image: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/checkbox_icon.png);
    background-size: contain;
    vertical-align: middle;
}


.marketing_demo .section01 .union_solution {
	width: 900px;
	background-color: #0074d7;
	border-radius: 10px;
	padding: 40px;
	margin:0 auto;
}
.union_proposal {
    transform: skewX(-45deg);
    width: 600px;
    background-color: #0074d7;
    margin: 0 auto;
}
.union_proposal .union_txt{
	transform: skewX(45deg);
    color: #fff;
    text-align: center;
    font-size: 30px;
    margin-bottom: 25px;
    font-weight: bold;	
}
.union_proposal .union_txt span{
    font-size: 40px;
    font-weight: bold;
    padding-top: 30px;
}

.marketing_demo .section01 .union_solution .union_certificate {
	color: #fff;
    text-align: center;
    font-size: 21px;
    margin-bottom: 25px;
}
.marketing_demo .section01 .union_solution .union_certificate span{
	font-size: 30px;
    font-weight: bold;
	padding-top: 30px;
}
.marketing_demo .section01 .union_solution .partner {
	background-color: #fff;
	width: 100%;
	padding: 30px;
}
.marketing_demo .section01 .union_solution .partner .google_img, .marketing_demo .section01 .union_solution .partner .yahoo_partner {
	margin-top: 30px;
}
.marketing_demo .section01 .union_solution .partner .google_img, .marketing_demo .section01 .union_solution .partner .yahoo_img{
	display: inline-block;
    width: 26%;
}
.marketing_demo .section01 .union_solution .partner .google_text, .marketing_demo .section01 .union_solution .partner .yahoo_text{
	display: inline-block;
    width: 65%;
}

.marketing_demo .section01 .service_category {
	width: 1160px;
	margin: 0 auto;
}
.marketing_demo .section01 .service_category .content {
	width: 510px;
    margin: 30px;
    display: inline-block;
    vertical-align: top;
}

.marketing_demo .section01 .service_category .content .ttl {
	width: 100%;
	height: 160px;
	padding: 30px 0;
	text-align: center;
}
.service_category .listing3 .ttl {
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/bg_listing3.png);
	background-position: center center;
	background-repeat: no-repeat;
}
.service_category .adnetwork3 .ttl {
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/bg_adnetwork3.png);
	background-position: center center;
	background-repeat: no-repeat;
}
.service_category .socialmedia .ttl {
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/bg_socialmedia.png);
	background-position: center center;
	background-repeat: no-repeat;
}
.service_category .youtubemarketing .ttl {
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/bg_youtube.png);
	background-position: center center;
	background-repeat: no-repeat;
}

.service_category .sitecreate .ttl {
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/sitecreate.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.service_category .wordpress .ttl {
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/wordpress.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.service_category .sitemanagement .ttl {
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/management.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.service_category .development .ttl {
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/development.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.marketing_demo .section01 .service_category .content h3 {
	font-size: 35px;
	color: #fff;
}
.marketing_demo .section01 .service_category .content p {
	margin: 0 auto;
	color: #fff;
	font-size: 18px;
}
.marketing_demo .section01 .service_category .content hr {
	color: #fff;
	width: 125px;
}
.marketing_demo .section01 .service_category .content .text {
	color: #000;
	padding: 20px 0;
}
.marketing_demo .affiliate_section .bg_ttl{
    text-align: center;
    background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/bg_affiliate.png);
	background-position: center center;
	background-repeat: no-repeat;
    color: #fff;
}
.marketing_demo .affiliate_section .bg_ttl h2 {
	padding: 54px 0;
    font-size: 35px;
}
.marketing_demo .affiliate_section .article {
	width: 100%;
}
.marketing_demo .affiliate_section .article p{
	width: 1070px;
	margin: 40px auto;
    text-align: center;
}
.marketing_demo .affiliate_section .site_list {
    display: flex;
    align-items:stretch;
	width: 1120px;
	padding: 0 0 40px 0;
	margin: 0 auto;
}
.marketing_demo .affiliate_section .site_list .each_site{
	width: 23%;
    margin: 20px 10px;
    box-shadow: 4px 6px #dadada;
	position: relative;
    height: 350px;
}
.each_site .site_img {
	position: absolute;
	bottom: 0;
}
.each_site .site_img img {
	width: 100%;
}
.marketing_demo .affiliate_section .site_list .site_ttl {
	width: 100%;
	padding: 15px 0;
	color: #fff;
	font-weight: bold;
	text-align: center;
	font-size: 18px;	
}
.marketing_demo .affiliate_section .site_list .jobworker .site_ttl {
    background-color: #4365d4;
}
.marketing_demo .affiliate_section .site_list .kabunavi .site_ttl {
    background-color: #f06060;
}
.marketing_demo .affiliate_section .site_list .cardloan .site_ttl {
    background-color: #78b33f;
}
.marketing_demo .affiliate_section .site_list .creditcard .site_ttl {
    background-color: #b3905d;
}
.marketing_demo .affiliate_section .site_list .site_name {
	margin: 15px auto;
    width: 85%;
    text-align: center;
    border-radius: 18px;
    padding: 8px 0;
}

.jobworker .site_name {
    background-color: #dee5fb;
}
.jobworker .num, .jobworker .pv {
	color: #4365d4;
}
.kabunavi .site_name {
    background-color: #ffe6e6;
}
.kabunavi .num, .kabunavi .pv {
    color: #f06060;
}
.cardloan .site_name {
    background-color: #e5f2d8;
}
.cardloan .num, .cardloan .pv {
    color: #78b33f;
}
.creditcard .site_name {
    background-color: #f8ead6;
}
.creditcard .num, .creditcard .pv {
    color: #b3905d;
}
.pv_num {
	text-align: center;
	font-size: 18px;
}
.num {
    font-size: 40px;
    font-family: impact;
}
.ad_flow {
	background-color: #e1eeef;
	padding: 0 0 40px 0;
}
.ad_flow h2 {
	text-align: center;
	padding: 30px;
	font-size: 40px;
	font-weight: bold;
}
.each_step {
	display: block;
    position: relative;
    margin: 15px auto;
    padding: 10px 0;
    width: 900px;
    height: 240px;
    background: #fff;
	box-shadow: 4px 8px #dadada;
}
.each_step h3 {
	text-align: center;
	display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 5px;
    margin: 0 0 0 -20px;
    width: calc(20% + 20px);
    font-size: 18px;
    color: white;
    background: #0074d7;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.each_step h3:before {
	  position: absolute;
	  content: '';
	  top: 100%;
	  left: 0;
	  border: none;
	  border-bottom: solid 15px transparent;
	  border-right: solid 20px #6081b7;
}
.each_step .left, .each_step .right{
	position: absolute;
}
.each_step .left {
	width: 50%;
}
.each_step .right {
	top: 0;
	right: 0;
}
.each_step .step_ttl {
	font-size: 28px;
    margin: 10px auto 0px;
    text-align: center;
}
.each_step .step_description {
	text-align: center;
    padding: 5px 15px;
	font-size: 16px;
}
.each_step .contact_btn {
	width: 60%;
    margin: 10px auto;
    padding: 2px;
    text-align: center;
    color: #0074d7;
    border: solid 1px #0074d7;
}
.each_step .contact_btn span{
	font-weight: bold;
}
.each_step .contact_btn:hover {
	color: white;
    background: #0074d7;
}
.qanda {
	background: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/bg_qanda.png);
	padding: 40px 0;
}
.qanda h2 {
	text-align: center;
    font-size: 40px;
    font-weight: bold;
}
.qanda_article {
	width: 870px;
	margin: 0 auto;
}
.qanda_article #acMenu dt{
	position: relative;
	display:block;
	height:50px;
	line-height:50px;
	text-align:left;
	cursor:pointer;
	font-size: 24px;
	margin:20px 0;
	padding:0 0 0 70px;
}
.qanda_article #acMenu dt:before {
	position: absolute;
	left: 10px;
	content: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/question.png);
}
.qanda_article #acMenu dt:after {
	position: absolute;
    right: 10px;
    top: 10px;
	content: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/open_btn.png);
}

.qanda_article #acMenu dd{
	background: #fff4d0;
    text-align: left;
    display: none;
    margin: 20px 0;
	font-size: 24px;
	position: relative;
    padding: 20px 70px;
}

.qanda_article #acMenu dd:before {
	content: url(https://union-company.jp/wp/wp-content/themes/union/img/marketingdemo/answer.png);
	position: absolute;
    left: 10px;
    top: 8px;
}
.inquiry_img {
	width: 880px;
	margin: 40px auto 60px;
}

/*    start code for the actual button:         */


/*   
    Spot is the span on the inside of the href that
    fills the parent and makes the hover and link work
    for the entire div
*/

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


@media screen and (max-width: 480px) {
.container_demo {
    min-width: 100%;
    margin: 0 auto;
}
.container_demo .new_topics {
	height: initial;
}
.container_demo header .inner_demo .union_concept img {
    width: 300px;
}
.container_demo header .inner_demo h1 {
	left: 20px;
}
.container_demo .topics_area {
	width: initial;
	height: initial;
	color: #fff;
	background-color: #3f3f3f;
	padding: 20px 15px;
	position: initial;
	top: initial;
    left: initial;
    transform: initial;
    -webkit-transform: initial;
	-ms-transform: initial;
}
.container_demo .video_area {
	display: none;
}
.container_demo .service_article {
	width: initial;
    padding: 30px 15px;
	height: 100%;
}
.container_demo .service_article .service_text {
	width: 100%;
	height: 200px;
}
.container_demo .service_detail, .container_demo .company_detail {
	margin-top: 30px;
}
.container_demo .google_img, .container_demo .yahoo_img, .container_demo .google_text, .container_demo .yahoo_text {
	width: 100%;
}
.container_demo .google_img, .container_demo .yahoo_img {
	margin-bottom: 10px;
}
.container_demo .each_service {
	position: static;
	margin: initial;
	height: 100%
}
.container_demo .each_service .listing, .container_demo .each_service .social_media, .container_demo .each_service .management, .container_demo .each_service .adnetwork, .container_demo .each_service .production, .container_demo .each_service .lpo, .container_demo .each_service .management2, .container_demo .each_service .listing2 {
	position: static;
	height: initial;
    width: 80%;
    margin: 0 auto;
	box-shadow: initial;
}
.container_demo .company_article {
    width: 750px;
    height: 200px;
	padding: 55px 15px 30px;
	position: static;
}
.container_demo .company_article .company_text {
	position: static;
	width: initial;
}
.container_demo .company_address {
	position: relative;
}
.container_demo .address_detail {
	position: static;
	margin-top: 282px;
}
.container_demo .company_map {
    position: absolute;
    top: 0;
    left: 0;
}
.container_demo .address_detail, .container_demo .company_map {
	width: 100%;
}
.container_demo .address_detail {
	padding: 30px 0px;
}
.container_demo .address_detail p {
	margin: 10px 30px;
}
.container_demo .more_detail p{
    width: 80%;
}
.container_demo .union_statement {
	top: 35px;
}
/*ヘッダーまわりはサイトに合わせて調整してください*/

.container_demo header .inner_demo .g_nav {
	display: none;
}
.container_demo #nav-drawer {
	display: block;
    position: absolute;
	top: 10px;
    right: 10px;
	z-index: 150;
}

/*チェックボックス等は非表示に*/
.container_demo .nav-unshown {
  display:none;
}

/*アイコンのスペース*/
.container_demo #nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
.container_demo #nav-open span, .container_demo #nav-open span:before, .container_demo #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
}
.container_demo #nav-open span:before {
  bottom: -8px;
}
.container_demo #nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
.container_demo #nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
.container_demo #nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #000;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
  text-align: center;
  line-height: 60px;
  font-size: 35px;
  padding-top: 40px;
}
.container_demo #nav-content ul li a {
  text-decoration: none;
  color: #fff;
}
	
/*チェックが入ったらもろもろ表示*/
.container_demo #nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

.container_demo #nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
  background-color: #000;
}

}