@charset "utf-8";

/*
Theme Name: THREE Web Site
Author: THREE
Version: ver 1.00
*/


/* -------------------------------------------------
    ---     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, 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; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, 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; }
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; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
img { vertical-align: top; font-size: 0; line-height: 0; }
sup { font-size: 8px; }

section:after, div:before, div:after, ul:before, ul:after, ol:before, ol:after, dl:before, dl:after { content: ""; display: block; }
section:after, div:after, ul:after, ol:after, dl:after { clear: both; }
div, ul, ol, dl { zoom: 1; }

* {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* -------------------------------------------------
    ---     COMMON     ---
   -------------------------------------------------  */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500,300);
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }
@font-face{
	font-family: 'Founders-Grotesk-Medium';
	src: url('font/Founders-Grotesk-Medium.eot'); /* IE9以上用 */
	src: url('font/Founders-Grotesk-Medium.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('font/Founders-Grotesk-Medium.woff') format('woff'), /* モダンブラウザ用 */
		url('font/Founders-Grotesk-Medium.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: 'Founders-Grotesk-Regular';
	src: url('font/Founders-Grotesk-Regular.eot'); /* IE9以上用 */
	src: url('font/Founders-Grotesk-Regular.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('font/Founders-Grotesk-Regular.woff') format('woff'), /* モダンブラウザ用 */
		url('font/Founders-Grotesk-Regular.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: 'Graphik-Medium';
	src: url('font/Graphik-Medium.eot'); /* IE9以上用 */
	src: url('font/Graphik-Medium.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('font/Graphik-Medium.woff') format('woff'), /* モダンブラウザ用 */
		url('font/Graphik-Medium.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: 'Graphik-Regular';
	src: url('font/Graphik-Regular.eot'); /* IE9以上用 */
	src: url('font/Graphik-Regular.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('font/Graphik-Regular.woff') format('woff'), /* モダンブラウザ用 */
		url('font/Graphik-Regular.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}

body {
    font-family: 'Graphik-Regular' , "Yu Gothic", "ヒラギノ角ゴ Pro W3",  "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1C1C1C;
    font-size: 14px;
		line-height: 1.8;
    letter-spacing: 0.1rem;
    position: relative;
		font-feature-settings : "palt";
		-webkit-font-smoothing: antialiased;
}

.grecaptcha-badge {
	display: none;
}

::selection {
	background: #4d4d4d;
	color: #fff;
}

img {max-width: 100%; height: auto;}

ul, ul li { list-style: none; }
ul:after { display: block; clear: both; content: "";  }

a img:hover { opacity: 0.8; }
a img.photo_base:hover { opacity: 1.0; }

a {
	color: #999;
	text-decoration:none;
}

a:hover {
	color: #666;
	text-decoration: none;
}


/* -------------------------------------------------
    ---     LAYOUT     ---
   -------------------------------------------------  */
section#over { position: fixed; z-index: 110}
header { color: #FFF; width: 100%; height: 120px; padding: 4%; position: fixed; z-index: 99; top: 0; left: 0; }
header.head_black { color: #1C1C1C; }
footer {
	color: #FFF;
	width: 100%;
	height: 70px;
	padding: 15px calc(3% + 15px);
	position: fixed !important;
	z-index: 199;
	bottom: 0;
	left: 0;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

footer.subpage { position: relative; color: #1C1C1C; }
footer.is-pages { position: relative!important; }
#logo, #copyright, .anc_contact { float: left;}
#menu, #footer_menu { float: right; }
/*#copyright {padding-bottom: 10px;}*/
.contents { padding: 120px 8% ; max-width: 1300px; margin: 0 auto; position: relative; }
.contents_full { padding: 0; width: 100%; margin: 0; position: relative; /*top: -25px;*/ }
.section{ overflow: hidden; }

.anc_contact {margin-left: 40px;padding-top: 10px;}
.anc_contact a {display: block; color: #A0A2A5 !important; font-weight: bold; /*font-size: 2.1rem;*/}
.anc_contact span {display: inline-block; background: url(images/icon_contact.svg) no-repeat right center;padding-right: 62px;}


/* 黒 */
/*#header.is-black {color: #1c1c1c !important;}
#footer.is-black {color: #1c1c1c !important;}
#logo_three.is-black {fill: #1c1c1c !important;}
.is-scroll #header input + label span.is-black {background-color: #1c1c1c !important;}*/

/* 白 */
/*header#header.is-white,
.is-scroll header#header.is-white {color: #fff !important;}
footer#footer.is-white,
.is-scroll footer#footer.is-white {color: #fff !important;}
#logo_three.is-white {fill: #fff !important;}
.is-scroll #header input + label span.is-white {background-color: #fff !important;}*/

/* 白 or 黒 */
/*.is-scroll #logo_three {fill: #000 !important;}
.is-scroll header,
.is-scroll footer,
.is-scroll header#header,
.is-scroll footer#footer {color: #000 !important;}
.is-scroll #header input + label span {background-color: #000 !important;}

.is-scroll #footer_menu a.fb { background-image: url(images/footer_facebook.svg); }
.is-scroll-footer #footer_menu a.fb { background-image: url(images/footer_facebook_white.svg); }*/


.is-black header#header {color: #1c1c1c !important;}
.is-black footer#footer {color: #1c1c1c !important;}
.is-black #logo_three {fill: #1c1c1c !important;}
.is-black header#header input + label span {background-color: #1c1c1c !important;}
.is-black #footer_menu a.fb {background-image: url(images/footer_facebook.svg);}

.is-always-white header#header {color: #fff !important;}
.is-always-white footer#footer {color: #fff !important;}
.is-always-white #logo_three {fill: #fff !important;}
.is-always-white header#header input + label span {background-color: #fff !important;}
.is-always-white #footer_menu a.fb {background-image: url(images/footer_facebook_white.svg);}


/* -------------------------------------------------
    ---     COMMON     ---
   -------------------------------------------------  */

h1 { font-size: 4.5rem; margin-bottom: 10px; }
h1 img { width: 100%; }
h1.works_ttl {
	font-size: 2.2rem;
	color: #FFF;
	max-width: 500px;
	height: 130px;
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0 10px;
	line-height: 1.3;
}
h2.ttl { font-size: 5rem; line-height: 0.9; margin-top: 5%; }
h2.works_ttl { font-size: 1.8rem; margin: 80px 0 2rem; line-height: 1.3;}
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.3rem;  }
div.page_ttl { display: table; margin: 50px 0 0; }
div.page_ttl h1 { font-size: 5rem; line-height: 0.9; margin-top: 0; }
div.page_ttl div { width: 50%; display: table-cell; vertical-align: middle; }
div.bg_layer { position: absolute; top: 280px; left: -10%; width: 85%; height: 80%; background: #EEE; z-index: -1; }
.bg_black { color: #FFF; background: #1C1C1C; }

/* Header   -------------------------- */
#logo img { width: 100px; height: auto;}
#logo_three { fill: #FFF; }
header.head_black #logo_three { fill: #1C1C1C; }
body header.head_black input + label span { background:#1C1C1C }
#menu { font-size: 0.7rem; font-weight: bold; width: 85px; text-align: left; cursor: pointer; position: absolute; top: 53px; right: 58px;  }
#footer_menu { max-width: 700px; min-width: 450px; text-align: right; margin-bottom: 3px;}
#footer_menu a { color: inherit; display: inline-block; margin: 0 1%; vertical-align: middle; }
#footer_menu a img { vertical-align: -1px; margin-right: 10px; }
#footer_menu a.fb { background: url(images/footer_facebook_white.svg) no-repeat left center;width: 28px;overflow: hidden;padding-left: 28px;height: 28px; }

/* Effect   -------------------------- */
.fadeup {
  transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -webkit-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  transition: transform 0.7s;
  -moz-transition: transform 0.7s;
  -webkit-transition: transform 0.7s;
  -o-transition: transform 0.7s;
}

 /* Btn   -------------------------- */

 .Btn{
 	margin-top: 5%;
   width:250px;
   height:50px;
   /*border:2px solid #1C1C1C;*/
   background: #1C1C1C;
   float:left;
   padding-left: 20px;
   cursor:pointer;
   position:relative;
   box-sizing:border-box;
   overflow:hidden;
   margin-bottom:10px;
 	-webkit-transform: skew(-10deg);
 	-moz-transform: skew(-10deg);
 	-o-transform: skew(-10deg);
 }

 .Btn:before{
   content:" ";
   display:inline-block;
   width:28px;
   height:17px;
 	z-index: 999;
   background:url('images/arrow.svg');
   background-size:contain;
 	background-repeat: no-repeat;
   vertical-align:middle;
 	position: absolute;
 	right: 15px;
 	top: 0;
 	bottom: 0;
 	margin: auto;
 	-webkit-transform: skew(10deg);
 	-moz-transform: skew(10deg);
 	-o-transform: skew(10deg);
 }

 .Btn a,
 .Btn input{
   font-family:arial;
   color:#FFF;
   text-decoration:none;
   line-height:50px;
   transition:all .5s ease;
   z-index:2;
   position:relative;
   display: block;
 	-webkit-transform: skew(10deg);
 	-moz-transform: skew(10deg);
 	-o-transform: skew(10deg);
 }
 .Btn input{
	font-size: 14px;
 	cursor: pointer;
 	border: 0;
 	background: transparent;
 	width: 100%;
 	text-align: left;
 }

 .Btn:hover:before, .Btn:focus:before, .Btn:active:before {
   -webkit-transform: translateX(4px) skew(10deg);
   transform: translateX(4px) skew(10deg);
 	-webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
 }

 .eff{
   width:250px;
   height:50px;
   left:-400px;
   background-color:#333;
   position:absolute;
   transition:all .5s ease;
   z-index:1;
 }
 .Btn:hover .eff{ left:0; }

 .share { text-align: center; padding: 20px; margin-top: 50px; }

 .circle {
   border-radius: 50%;
   width: 30px;
   height: 30px;
   display: inline-block;
   position: relative;
	 margin: 0 10px;
 }

 .circle img {
   height: 15px;
   width: auto;
   position: absolute;
   margin: auto !important;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }

 .circle.sns_fb { background:#3a5998; }
 .circle.sns_twit { background: #00aced; }

/* Go Top
-------------------------- */
#go-top{
  display: block;
  position: fixed;
  z-index: 5000;
  bottom: 0;
  right: 30px;
  width: 30px;
  padding: 18px 10px 17px;
  background: rgba(0,0,128,1);
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#go-top:hover{ background: rgba(0,0,128,.8); }
#go-top img { width: 18px; }


/* Menu
-------------------------- */

/*
#menu:hover {
	-webkit-transform: translateX(4px);
  transform: translateX(4px);
	-webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
*/

#menu .ring {
	background: rgba(245, 245, 245, 0.5);
	opacity: 0.0;
	position: absolute;
	z-index:-1;
	border-radius: 80px;
	height: 45px;
	width: 45px;
	top: -15px;  /* center */
	right: -1px;  /* center */
}
#menu:hover .ring {
  animation: pulsate 0.7s ease-out;
	animation-iteration-count: 1;
	/* animation-iteration-count: infinite; */
}
@keyframes pulsate {
    0%   { transform: scale(1, 1); opacity: 0.0; }
    50%  { opacity: 0.8; }
    100% { transform: scale(2, 2); opacity: 0.0; }
}

#bar_menu {
	z-index: -1;
	background: rgba(0,0,0,0.98);
}


#bar_menu ul { margin: 10% 0; height: 70%; width: 100%; border-top: 1px solid #666; border-bottom: 1px solid #666; display: table; }
#bar_menu ul li { display: table-cell; width: 20%; border-right:1px solid #666; vertical-align: middle; text-align: left; background-repeat: no-repeat; background-position: center; background-size: cover; }
#bar_menu ul li.about { background-image: url(images/nav_bg_about.jpg); }
#bar_menu ul li.works { background-image: url(images/nav_bg_works.jpg); }
#bar_menu ul li.service { background-image: url(images/nav_bg_service.jpg); }
#bar_menu ul li.team { background-image: url(images/nav_bg_team.jpg); }
#bar_menu ul li.news { background-image: url(images/nav_bg_blog.jpg); }
#bar_menu ul li.contact { background-image: url(images/nav_bg_contact.jpg); }
#bar_menu ul li:last-child { border: none; }
#bar_menu ul li a { background: #000; color: #FFF; display: block; height: 100%; min-height: 100%; position: relative; transition: .2s ease all; -webkit-transition: .2s ease all; -moz-transition: .2s ease all; -ms-transition: .2s ease all; }
#bar_menu ul li a:hover { background-color: transparent; }
#bar_menu ul li a div {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 10%;
	height: 120px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
}
#bar_menu ul li a div span { display: block; color: #666; font-size: 0.8rem; }
#bar_menu ul li a div span:nth-child(2) { margin-top: 20px;}



/* -------------------------------------------------
    ---     TOP     ---
   -------------------------------------------------  */

 /* Movie   -------------------------- */

#mainVideo{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	/*background-size: 100% 100%;*/
	background-image: url(images/kv1.jpg);
	/*background-position: center center;
	background-size: contain;*/
	object-fit: cover; /*cover video background */
	z-index:3;
	opacity: 1;
	background-size: cover;
}
#top_home .layer{
	position: absolute;
	z-index: 4;
	width: 100%;
	height: 100vh;
	padding: 3%;
	left: 0;
	top: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#top_home {
	overflow: hidden;
	color: #FFF;
	line-height: 1.2;
	min-height: 100vh;
	background-color: #000 !important;
}

.mfp-bg {max-height: 100vh !important;}
video::-webkit-media-controls { display:none !important; }

.fp-scroller {height: 100vh;}


article.topMain {
  background: inherit;
  position: relative;
  width: 490px;
	height: 420px;
  margin: 15vh auto;
	padding: 90px;
	text-align: center;
  border: 10px solid rgba(255,255,255,.15);
  box-shadow: 1px 1px 4px rgba(0,0,0,.3);
  z-index: 5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
article.topMain:before {
  content: '';
  position: absolute;
  top: 0; left:0; right:0; bottom:0;
  background: inherit;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: url(#blur);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='20');
}

svg.topMainSvg {
  height:0;
  width: 0;
  position: absolute;
}

p.topCatch { text-align: left; font-size: 0.875rem; margin: 40px 0 0 0; line-height: 1.8; }
div.scroll {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100px;
	height: 80px;
	text-align: center;
	overflow: hidden;
}

div.scroll span {
	width: 100px;
	height: 1px;
	background: #FFF;
	transform: rotate(90deg);
	display: block;
	position: absolute;
	top:75px;
}

div.playWrapper { position: relative; text-align: center; font-size: 0.75rem; }
a.playBtn,
a.playBtn:after {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

a.playBtn {
	display: block;
  margin: 20px auto 10px;
  position: relative;
  border: 1px solid #FFF;
}

a.playBtn:hover {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid #FFF;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: RotateCircle 1.1s infinite linear;
  animation: RotateCircle 1.1s infinite linear;
}

@-webkit-keyframes RotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes RotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

a.playBtn span.playCenter {
	display: block;
	border-radius: 50%;
  width: 46px;
  height: 46px;
	background: #FFF;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

span.playArrow{
	width: 0;
	height: 0;
	display: block;
	border: 5px solid transparent;
	border-left: 7px solid #1C1C1C;
	position: absolute;
	z-index: 5;
	top: -25px;
	bottom: 0;
	left: 8px;
	right: 0;
	margin: auto;
}



ul.top_inner { display: table; width: 100%; }
ul.top_inner li { overflow: hidden; position: relative; height: 100vh; display: table-cell; vertical-align: middle; }
ul.top_inner li:first-child { width: 45%; }
ul.top_inner li:last-child { width: 55%; }
ul.top_inner li:first-child .inner {padding: 20%!important;font-size: 12px;}

ul.top_inner li .txt { margin: 5% 0 3%; }
#top_about ul li > img {
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
#top_works ul.top_inner { padding: 6vw 3vw;box-sizing: border;-webkit-box-sizing: border-box;}
#top_works ul.top_inner li:first-child { width: 45%; float: right; }
#top_works ul.top_inner li:last-child { width: 55%; float: left; }
#top_works ul.top_inner li:first-child .inner { padding: 10%; }
ul.top_box {
	display: -webkit-box; /* before Android4.3 iOS6:Safari */
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* Pc-safari */
	-js-display: flex;
	display: flex;
	-ms-flex-flow: row wrap; /* IE10 */
	-webkit-flex-flow: row wrap; /* Pc-safari */
	flex-flow: row wrap;
}
ul.top_box li {
	-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
	-ms-flex: 0 0 50%; /* IE10 */
	-webkit-flex: 0 0 50%; /* Pc-safari */
	flex: 0 0 50%;
	width: 50%; /* before Android4.3 iOS6:Safari */
	max-width: 50%; /* IE11*/
	height: auto;
}

#top_news ul.top_box li {
	-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
	-ms-flex: 0 0 33.333333%; /* IE10 */
	-webkit-flex: 0 0 33.333333%; /* Pc-safari */
	flex: 0 0 33.333333%;
	width: 33.333333%; /* before Android4.3 iOS6:Safari */
	max-width: 33.333333%; /* IE11*/
	height: auto;
}

#top_news .Btn {margin-left: auto;margin-right: auto;float: none;}


ul.top_box li a { color: #1C1C1C; display: block; margin: 5%; padding-bottom: 5%; box-shadow: 1px 10px 30px -7px #dedede; }
ul.top_box li .img img { width: 100%; }
ul.top_box li p { padding: 1% 5%; line-height: 1.2; }
ul.top_box li p.ttl { padding-top: 40px; font-weight: bold; position: relative; }
ul.top_box li p.tag { color:#9a9a9a; margin-top: 0; font-size: 0.7rem; padding-bottom: 4%; margin-top: 5%; }
ul.top_box li p.ttl .author { position: absolute; display: block; border-radius: 50%; border: 4px solid #fff; left: 5%; top: -23px; width: 47px; height: 47px; }
ul.top_box li p.ttl .author img { border-radius: 50%; }
ul.top_box li p.date { margin-top: 15px;font-size: 86%; color: #999; }


@media screen and (max-width: 768px) { .pc-only { display: none !important; } }
@media screen and (min-width: 769px) { .sp-only { display: none !important; } }


/* Bounce */
@-webkit-keyframes hv_bounce {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hv_bounce {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hv_bounce-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hv_bounce-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.hv_bounce {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hv_bounce:hover, .hv_bounce:focus, .hv_bounce:active {
  -webkit-animation-name: hv_bounce-float, hv_bounce;
  animation-name: hv_bounce-float, hv_bounce;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}



ul.top_service_inner {
	display: -webkit-box; /* before Android4.3 iOS6:Safari */
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* Pc-safari */
	-js-display: flex;
	display: flex;
	-ms-flex-flow: row wrap; /* IE10 */
	-webkit-flex-flow: row wrap; /* Pc-safari */
	flex-flow: row wrap;
	width: 80%;
}
ul.top_service_inner li {
	-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
	-ms-flex: 0 0 33.3333333%; /* IE10 */
	-webkit-flex: 0 0 33.3333333%; /* Pc-safari */
	flex: 0 0 33.3333333%;
	width: 33.3333333%; /* before Android4.3 iOS6:Safari */
	max-width: 33.3333333%; /* IE11*/
	height: auto;
	padding: 5%;
	text-align: center;
	position: relative;
}

ul.top_service_inner li div.cont { position: relative; height: 80px; }
ul.top_service_inner li div.lazylinepainter { margin: 0 auto; }
ul.top_service_inner li div svg { height: 80px; width: auto;}
ul.top_service_inner li p.ttl { font-weight: bold; margin-top: 10px; }
ul.top_service_inner li p.txt { color:#9A9A9A; font-size: 0.7rem; letter-spacing: 0; }


#top_team ul.top_inner li:first-child { width: 45%; float: right; }
#top_team ul.top_inner li:last-child { width: 55%; float: left; background: url(images/top_team.jpg) no-repeat center #F5F5F5; background-size: contain; }
#top_team ul.top_inner li:first-child .inner { padding: 10%; width: 864px; display: table-cell; height: 100vh; vertical-align: middle; }

img.ico_illust {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 80px;
}

div.news_wrap { padding: 10%;padding-top: 6%; }
div.news_wrap h2 { text-align: center; margin-bottom: 3%; }

.tel_btn{
	position: fixed;
	bottom: 3%;
	right: 5%;
}

.tel_btn a img{
	margin-top: 11px;
}

.fab {display: block;
		background: #fff;
    width: 46px;
    height: 46px;
    text-align: center;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2)/*影*/;
}


/* -------------------------------------------------
    ---     Contents     ---
   -------------------------------------------------  */

/* Service
-------------------------- */
main#service h2 { font-size: 2rem; margin-bottom: 2rem; }
main#service .catch { font-weight: bold; font-size: 1.1rem; margin-bottom: 2rem; }
#branding ul li { width: 45%; float: left; margin-right: 10%; }
#branding ul li:last-child { margin-right: 0; }
#branding .catch2 { color: #727272; margin-bottom: 2rem; }
#branding .catch2 a { color: #727272; text-decoration: underline; }
#branding .catch2 a:hover { text-decoration: none; }
ul.brand_list li p { font-size: 0.8rem; margin: 10px 0; }
#service_menu { margin-top: 120px; }
#service_menu a { display: block; padding: 10px; text-decoration: none; color: #1C1C1C; line-height: 1; }
#service_menu label ul { border-top: 1px solid #1C1C1C; padding: 0 30px; }
#service_menu label ul.last { border-bottom: 1px solid #1C1C1C; }
#service_menu label ul:hover { background-color: #EEE; }
#service_menu label ul li {
	display: block;
	margin: 0 0 2px 0;
	padding :50px 0;
	line-height: 1;
	color :#1C1C1C;
	cursor :pointer;
	float: left;
	line-height: 40px;
}

#service_menu label ul li:nth-child(1) { width: 100px; }
#service_menu label ul li:nth-child(2) { width: 300px; font-size:1.4rem; font-weight: bold; }
#service_menu label ul li:nth-child(3) { width: auto; font-size: 0.9rem; }
#service_menu label ul li:nth-child(4) { width: 80px; font-size: 2rem; font-weight: bold; position: relative; margin-top: 15px; float: right; }
#service_menu label ul li:nth-child(4) span {
  position: absolute;
  width: 25px;
  height: 1px;
  top: 50%;
  margin-top: -1px;
  right: 0;
  display: block;
  background: #1C1C1C;
  transition: .5s;
}

#service_menu label ul li:nth-child(4) span:last-child { transform: rotate(90deg); }
#service_menu label ul li:nth-child(3) span { font-size: 0.6em; font-weight: normal; }
#service_menu label ul li:nth-child(1) img { height: 40px; width: auto; }
#service_menu input { display: none; }
#service_menu ul.under {
	margin: 0 0 0 5%;
	padding: 0;
	list-style: none;
	width: 95%;
	height: 0;
	max-height: 0;
	overflow-y: hidden;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

#service_menu ul.under li {
	width: 48%;
	float: left;
}
#service_menu ul.under li:last-child {margin-left: 4%;}

#service_menu ul.under table tr th { color: #B3B3B3; }
#service_menu ul.under table { width: 100%; }
#service_menu ul.under table tr td span,
#service_menu ul.under table tr th span{
	border-top: 1px solid #B3B3B3;
	display: block;
	padding: 10px 0;
	margin-right: 30px;
}
#service_menu ul.under table tr th span { border: none; }
#service_menu ul.under table tr td:nth-child(3) span,
#service_menu ul.under table tr th:nth-child(3) span { margin-right: 0; }

#service_menu ul.under table tr td:nth-child(1) { width: 25%; margin-right: 5%; font-weight: bold; }
#service_menu ul.under table tr td:nth-child(2) { width: 15%; margin-right: 5%;}
#service_menu ul.under table tr td:nth-child(3) { width: 55%; margin-right: 5%;}

#service_menu #menu_bar01:checked ~ #cont01,
#service_menu #menu_bar02:checked ~ #cont02,
#service_menu #menu_bar03:checked ~ #cont03,
#service_menu #menu_bar04:checked ~ #cont04,
#service_menu #menu_bar05:checked ~ #cont05,
#service_menu #menu_bar06:checked ~ #cont06 { height: auto;max-height: 100%; opacity: 1; margin-bottom: 40px; }

#service_menu ul.under .link1 {margin-bottom: 10px;}
#service_menu ul.under .link1 a {display: block;background: #000;color: #fff;position: relative;padding: 0;}
#service_menu ul.under .link1 a img {vertical-align: top;}
#service_menu ul.under .link1 a:hover img {opacity: .4;}
#service_menu ul.under .link1 a .link1-txt {position: absolute;padding: 20px;vertical-align: middle;z-index: 99;opacity: 0;transition: .2s ease all;box-sizing: border-box;width: 100%;height: 100%;top: 0;left: 0;font-size: 124%;line-height: 160%;}
#service_menu ul.under .link1 a:hover .link1-txt {opacity: 1;}
#service_menu ul.under .link1 a .link1-txt span {display: block;display: table-cell;width: 100%;height: 255px;vertical-align: middle;}

#service_ftr_btn { margin: 30px auto; float: none; }


/* Works
-------------------------- */
.works_category {text-align: center;margin-bottom: 30px;padding-top: 50px;}
.works_category li {display: inline-block;margin-left: 15px;margin-right: 15px;vertical-align: middle;font-weight: bold;}
.works_category li a {color: #999;}
.works_category li.current-cat a {color: #000;}

ul.works_box li {
	float: left;
	width: 50%;
	height: auto;
	display: inline-block;
}
ul.works_box li:nth-child(2n) { margin-top: 5%; }
ul.works_box li a { color: #1C1C1C; display: block; margin: 5%; text-align: center; }
ul.works_box li img { width: 100%; height: auto; box-shadow: 0px 10px 50px rgba(0,0,0,0.2); }
ul.works_box li p { padding: 1% 5%; line-height: 1.2; }
ul.works_box li p.ttl { margin-top: 6%; font-weight: bold; }
ul.works_box li p.tag { color:#9a9a9a; margin-top: 0; font-size: 0.7rem; }
ul.works_box li p.date { margin-top: 0; font-size: 0.65rem; padding-bottom: 3%; }

#works_detail_header {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position:relative;
}

.works_detail_header_layer {
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: rgba(0,0,0,0.6);
}

.works_header_btm {
	color: #FFF;
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 0;
	left: 0;
	padding: 4%;
}
.works_header_btm a { color: #FFF; text-decoration: underline; }
.works_header_btm a:hover{ text-decoration: none; }
.all_works {
	float: left;
	background: url('images/arrow_left_w.svg') no-repeat left center;
	background-size: 45px auto;
	padding-left: 60px;
	position: relative;
	z-index: 98;
}
.works_header_btm .all_tags { float: right; }

#works_detail_main { position: relative; font-size: 0.8rem; background: #F6F6F6; }

#works_detail_summary {
	float: left;
	width: 30%;
	padding: 4% 0 4% 8%;
	transition: .8s;
}

#works_detail_main main {
	position: relative;
	float: right;
	width: 70%;
	padding: 4% 8% 4% 4%;
}

#works_detail_main main img { width: 100%; }

#works_detail_summary p.date { color: #9A9A9A; font-size: 0.7rem; }
#works_detail_summary p.tags a { color: #9A9A9A; font-size: 0.85rem; text-decoration: underline; }
#works_detail_summary p.tags a:hover { text-decoration: none; }
#works_detail_summary div.summary { margin: 2rem 0; font-size: 0.9rem; }
#works_detail_summary div.create { margin-bottom: 2rem; }
#works_detail_summary div.line { padding-right: 15%; border-right: 1px solid #9A9A9A; overflow-y: scroll; height: calc( 100vh - 200px );  margin-bottom: 30px;}

.is-fixed { position: fixed; top: 0; left: 0; z-index: 2; width: 30%; }
.is-hide { transform: translateY(-100%); }

#works_detail_footer {
	display: table;
	position: relative;
	text-align: center;
	width: 100%;
	padding: 80px 8%;
	margin: 50px 0;
	border-top: 1px solid #E4E4E4;
	border-bottom: 1px solid #E4E4E4;
}
#works_detail_footer div.detail_footer_ttl { position: absolute; line-height: 1; margin: 5px 0; padding: 10px 0; }
#works_detail_footer div.tags { display: inline-block; vertical-align: middle; width: 80%; }
#works_detail_footer div.tags a {
	display: inline-block;
	font-size: 0.7rem;
	color: #1A1A1A;
	margin: 5px;
	padding: 10px;
	background: #E4E4E4;
	line-height: 1;
}
#works_detail_footer div.tags a:hover { color: #999; }

#latest_works { padding: 50px 8%;  }
#latest_works h3 { font-size: 2rem; }
#latest_works ul.top_box li {
	-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
	-ms-flex: 0 0 33.333333%; /* IE10 */
	-webkit-flex: 0 0 33.333333%; /* Pc-safari */
	flex: 0 0 33.333333%;
	width: 33.333333%; /* before Android4.3 iOS6:Safari */
	max-width: 33.333333%; /* IE11*/
	height: auto;
}

#latest_works .all_works {
	background: url('images/arrow_left_b.svg') no-repeat left center;
	background-size: 45px auto;
	padding: 50px 0 50px 60px;
}

#latest_works .all_works a { color: #1A1A1A; }
#latest_works .all_works a:hover { color: #999; }



#mordal {
	width: 50%;
	height: 300px;
	text-align: center;
	padding: 0;
	background-image: url(images/top_works01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	box-shadow: 0 2px 8px rgba(0,0,0,.4);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 100;
}
#mordal img {width: 100%;}
#cover {
	z-index: 99;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255,.9);
}
@media screen and (max-width:991px){
	#mordal {width:80%;}
}


.layer_contact {
	background-color: rgba(0, 0, 0, 0.4);
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}

.btn01 {
	font-size: 1rem;
	border: 2px solid #FFF;
	border-radius: 30px;
	padding: 5px;
	text-align: center;
	display: block;
	margin: 10px auto;
	font-weight: bold;
	width: 220px;
	color: #FFF !important;
}


#cta {
	display: block;
	color: #FFF!important;
	position: relative;
	width: 100%;
	margin: 30px 0;
	background: url("images/img_cta.jpg") no-repeat center center;
	background-size: cover;
}

#cta h3 {
	font-size: 3rem;
	margin: 0;
}

#cta .inner {
	padding: 30px;
	text-align: center;
	position: relative;
	z-index: 5;
}

#cta p {
	line-height: 1.5;
	margin-bottom: 20px;
}

#cta:hover .layer_contact { background-color: rgba(0, 0, 0, 0.6); }




/* About
-------------------------- */
#about_header { position: relative; }
#about_header .contents { padding-bottom: 0; }
#about_header .page_ttl { margin-bottom: 0; }
#about_header .page_ttl div { float: left; }
#about_header p { width: 85%; margin-top: 2rem; }
img.img_main { width: 50%; position: absolute; right: 0; top: 180px; }
#about ul {
	display: -webkit-box; /* before Android4.3 iOS6:Safari */
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* Pc-safari */
	-js-display: flex;
	display: flex;
	-ms-flex-flow: row wrap; /* IE10 */
	-webkit-flex-flow: row wrap; /* Pc-safari */
	flex-flow: row wrap;
	width: 80%;
	margin: 3rem auto;
}
#about ul li {
	-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
	-ms-flex: 0 0 33.3333333%; /* IE10 */
	-webkit-flex: 0 0 33.3333333%; /* Pc-safari */
	flex: 0 0 33.3333333%;
	width: 33.3333333%; /* before Android4.3 iOS6:Safari */
	max-width: 33.3333333%; /* IE11*/
	padding: 5%;
}

#threeto p.three { text-align: right; margin-top: 50px; }
#threeto p.three img { max-width: 560px; }
#threeto ul li h3 { font-weight: bold; font-size: 1.2rem; margin-bottom: 1rem; }
#threeto ul li p { margin-bottom: 15px; line-height: 180%; }
#threeto .Btn { margin: 0 auto; float: none; }

#company {padding-top: 60px; padding-bottom: 30px;}
#company h2 {font-size: 3rem;margin-bottom: 80px;}
#company .company_profile {padding-left: 4%;padding-right: 4%;}
#company table {max-width: 1110px;margin-left: auto;margin-right: auto;}
#company table th {font-weight: normal;text-align: left;width: 250px;}
#company table td,
#company table th {padding: 10px 10px;}
#company table td a {color: #333;text-decoration: underline;}


/* Team
-------------------------- */
.is-team .page_ttl {margin-bottom: 100px;}
#team_menu h2 { font-size: 3rem; line-height: 1; position: absolute; top:30px; left: -60px; }
#team_menu h2 span { font-size: 0.75rem; display: block; margin: 8px 0; font-weight: normal; line-height: 1.5; }
ul.team_box li {
	float: left;
	width: 50%;
	height: auto;
	display: inline-block;
	margin-bottom: 7%;
}
ul.team_box li:nth-child(2n) { margin-top: 5%; }
ul.team_box li > .img { width: 50%; float: left; position: relative; }
ul.team_box li > .img .clone {
	position: absolute;
	z-index: -1;
	top: 15px;
	left: 10px;
	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
	filter: blur(20px);
	opacity: .75;
}
ul.team_box li > div { width: 45%; float: right; position: relative; }
ul.team_box li p { padding-right: 50px; padding-left: 4%; line-height: 1.8; font-size: 0.7rem; margin-top: 180px; color: #727272; }
#team_menu .Btn { margin: 30px auto; float: none; }


/* Contact
-------------------------- */
.contact-wrap {max-width: 700px;margin-left: auto;margin-right: auto;}
.contact-wrap .page_ttl h1 {font-size: 7.4rem;}
.contact-wrap .page_ttl p {font-size: 2.0rem;margin-left: 10px;}
.contact-wrap .Btn {
	float: none;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
}
.FlowupLabels .fl_label { top: 25px; transition: all 0.2s ease-out; }
.FlowupLabels .fl_input { padding: 7px 0px 5px; }
.FlowupLabels textarea.fl_input { resize: none; }
.FlowupLabels .fl_wrap { height:70px; }
.FlowupLabels .fl_label { top:30px; }
.FlowupLabels .fl_input { padding:20px 0; }
.FlowupLabels .fl_wrap2 { height: 180px; }
span.wpcf7-not-valid-tip {
	position: absolute;
	bottom: 20px;
	font-size: 12px;
}
span.wpcf7-not-valid-tip::before {
	content: '＊';
}

.wpcf7-form-control-wrap {display: block;}
.wpcf7-mail-sent-ok {display:none !important;}


/* Thanks
-------------------------- */
.thanks-wrap {max-width: 700px;margin-left: auto;margin-right: auto;}
.thanks-wrap .page_ttl2 h1 {font-size: 2rem; text-align: center; margin-bottom: 50px; line-height: 40px;}
.thanks-wrap .page_ttl2 p {text-align: center;}
.thanks-wrap .Btn {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
}

div.page_ttl2 { display: table; margin: 50px auto; }

/* Blog
-------------------------- */
#blog_detail {padding-top: 160px;padding-bottom: 160px; }
#blog_detail .block1:after {display: block; content: "";clear: both;}
#blog_detail .block1 {
	color: #999;
	font-weight: bold;
}
#blog_detail .block1 .back {
	float: left;
	width: calc((100% - 700px)/2);
	padding-right: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#blog_detail .block1 .back a {
	background: url(images/icon_back.svg) no-repeat left center;
	padding-left: 45px;
	color: #999;
}
#blog_detail .block1 .heading {
	float: left;
	max-width: 700px;
	margin-right: calc((100% - 700px)/2);
	margin-bottom: 50px;
}
#blog_detail .block1 .heading span {display: inline-block;}
#blog_detail .block1 .heading .category {
	position: relative;
	margin-right: 6px;
	padding-right: 20px;
}
#blog_detail .block1 .heading .category:after {
	display: block;
	content: "";
	border-top: 1px solid #999;
	width: 10px;
	right: 0;
	position: absolute;
	top: 50%;
}
#blog_detail .content { word-wrap:break-word; }
#blog_detail .content .title {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	font-size: 1.8rem;
	font-weight: bold;
	color: #000;
	line-height: 1.5;
}
#blog_detail .content .eyecatch {margin-bottom: 30px;}
#blog_detail .content .entrybody {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1rem;
}
#blog_detail .content .entrybody h2 {
	font-size: 1.5rem;
  border-bottom: 3px solid #000;
  margin: 25px 0 15px;
}
#blog_detail .content .entrybody h3 {
	font-size: 1.3rem;
  margin: 1.5rem 0 1rem;
  border-bottom: 3px solid #F1f1f1;
}
#blog_detail .content .entrybody a {
	text-decoration: underline;
}
#blog_detail .content .entrybody a:hover {
	text-decoration: none;
}
#blog_detail .nav {
	margin-left: auto;
	margin-right: auto;
	padding-top: 80px;
}
#blog_detail .nav .prev {
	float: left;
	width: 45%;
}
#blog_detail .nav .next {
	float: right;
	width: 45%;
}
#blog_detail .nav a {
	display: block;
	color: #999;
}
#blog_detail .nav p:first-child {font-size: 0.7rem;}
#blog_detail .nav p:first-child span {display: inline-block;}
#blog_detail .nav .category {
	position: relative;
	margin-right: 8px;
	padding-right: 16px;
}
#blog_detail .nav .category:after {
	display: block;
	content: "";
	border-top: 1px solid #999;
	width: 8px;
	right: 0;
	position: absolute;
	top: 50%;
}
#blog_detail .nav a .title {
	font-size: 1.18rem;
	font-weight: bold;
	color: #000;
	margin-top: 10px;
	margin-bottom: 15px;
}
#blog_detail .nav a .read span {
	display: inline-block;
	background: url(images/icon_contact.svg) no-repeat right center;
	padding-right: 60px;
}

.gist-data {
	max-height: 400px;
}



/* ------------------------------------------------------------------
 ****   For Smart Phone
   ------------------------------------------------------------------ */

/* Larger than Desktop HD */
@media (min-width: 1600px) {

}


@media (max-width: 1500px) {



}


@media (max-width: 960px) {

}

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


}


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

	div.page_ttl {margin-top: 50px;margin-bottom: 40px;}
	div.page_ttl h1 {font-size: 3rem; margin-bottom: 20px; font-weight: 700; letter-spacing: -0.01em; }
	div.page_ttl div {display: block;width: auto;}
	.contents {padding: 60px 6%;}
	h2.ttl { font-size: 3rem; font-weight: 700; letter-spacing: -0.01em; }
	#menu {width: 60px;width: 8px;top: auto;}
	.menu-text{ /*display: none;*/ position: relative; left: -30px; top: 12px; }
	header { height: auto; padding: 6% 6% 0; }
	#logo svg { width: 80px!important; }
	.anc_contact { display: none; }
	#header input + label {top: 5%;right: 18px;}
	div.scroll {height: 70px;}
	body input + label{ top: 25px; right: 20px; }
	#bar_menu ul { margin: 95px 0 0; height: auto; }
	#bar_menu ul li { display: block; width: 100%; border-right: none; border-bottom:1px solid #666; }
	#bar_menu ul li a { height: auto; min-height: auto; }
	#bar_menu ul li a div { font-size: 1.2rem; line-height: 1.2; position: relative; height: auto; padding: 4% 5%; left: auto; top: auto; bottom: auto; }
	#bar_menu ul li a div span:nth-child(2) { margin-top: 0; }
	#bar_menu ul li a div span {float: right;padding-top: 7px;display: block;}
	#bar_menu .nav2 {padding: 4%;}
	#bar_menu .nav2 ul {border: 0;margin-top: 40px;}
	#bar_menu .nav2 li {border: 0;display: inline-block;width: auto;vertical-align: middle;margin-right: 6%;}
	#bar_menu .nav2 li a {font-weight: normal;text-decoration: underline;font-size: 118%;}
	#bar_menu .nav2 .facebook {margin-top: 30px;}
	#footer_menu {min-width: initial;text-align: center;}
	footer {font-size: 0.7rem;z-index: 79;}

	#top_home {background: url(images/top_sp_bg.jpg) no-repeat center;background-size: cover;}
	article.topMain { width: 80vw; height: 60vh; margin: 20vh auto; padding: 40px; box-sizing: border-box; -webkit-box-sizing: border-box; background: none; }
	article.topMain .playWrapper {  }
	ul.top_inner li { display: block; height: auto; }
	ul.top_inner li:first-child, ul.top_inner li:last-child { width: 100%!important; }
	ul.top_inner li:first-child .inner {padding: 50px 6%!important;}
	ul.top_box li {
		-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
		-ms-flex: 0 0 100%!important; /* IE10 */
		-webkit-flex: 0 0 100%!important; /* Pc-safari */
		flex: 0 0 100%!important;
		width: 100%!important; /* before Android4.3 iOS6:Safari */
		max-width: 100%!important; /* IE11*/
	}
	#top_about ul li > img {
		left: 0;
		min-height: auto;
		min-width: 100%;
		position: relative;
		top: 0;
		width: 100%;
		transform: none;
	}
	ul.top_service_inner { width: 100%; }
	ul.top_service_inner li {
		-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
		-ms-flex: 0 0 50%; /* IE10 */
		-webkit-flex: 0 0 50%; /* Pc-safari */
		flex: 0 0 50%;
		width: 50%; /* before Android4.3 iOS6:Safari */
		max-width: 50%; /* IE11*/
		padding: 8%;
	}
	#top_team {background: #F0F0F0;}
	#top_team ul.top_inner li:first-child .inner {height: auto;}
	#top_team ul.top_inner li:last-child {padding-top: 60%;}
	#top_news div.news_wrap h2 {text-align: left; margin-top: 100px; }


	footer {padding: 10px;}
	#footer{ position: relative!important; height: auto; color: #1C1C1C!important; }
	#footer_menu { float: none; text-align: center; }
	#copyright { float: none; text-align: center; margin-top: 5px; }

	.works_category { padding-top: 15px; }
	.works_header_btm { padding: 6% 4%; }
	#works_detail_summary {float: none;width: auto;margin-right: 8%;}
	#works_detail_summary.is-fixed {position: static;}
	#works_detail_summary.is-hide {transform: translateY(0);}
	#works_detail_summary h2.works_ttl {margin-top: 20px; letter-spacing: -0.01em; }
	#works_detail_summary div.line {border-right: 0;padding-right: 0; padding-bottom: 15px; overflow-y: initial; height: auto;}
	#works_detail_main main {float: left;width: auto;margin-left: 8%;}
	#works_detail_footer div.detail_footer_ttl {position: static;}
	ul.works_box li {float: none;width: auto;margin-bottom: 0;}

	#about ul {display: block;width: 100%; margin-top: 22px; }
	#about ul li {
		max-width: initial;
		width: auto;
		margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 3px;
	}
	#about_header div.page_ttl h1 {font-size: 3rem;}
	#about_header p { width: 100%; }
	img.img_main {/*top: 110px;*/position: static;width: auto;margin-top: 30px;}
	#threeto ul li {text-align: left;}
	#threeto ul li p {text-align: left;}
	#threeto p.three img { width: 90%; }
	#company h2 {font-size: 2.4rem;line-height: 150%;margin-bottom: 30px;}
	#company .company_profile {padding-left: 2%;padding-right: 2%;}
	#company table th {width: 120px;}

	#branding ul li {float: none;width: auto;margin-right: 0;margin-bottom: 20px;}
	#service .page_ttl { margin-bottom: 0; }
	#service_menu { margin-top: 0;border-bottom: 1px solid #1C1C1C; }
	#service_menu label ul { padding: 20px 15px 15px 0;}
	#service_menu label ul li {padding: 0 0;line-height: auto;}
	#service_menu label ul li:nth-child(1) {width: 20%;margin-right: 15px;text-align: center;}
	#service_menu label ul li:nth-child(2) {width: 220px;}
	#service_menu label ul li:nth-child(4) {width: 50px;margin-top: 0;}
	#service_menu label ul li {line-height: 22px;}
	#service_menu ul.under { margin: 0; width: 100%; }
	#service_menu ul.under h3 { line-height: 1.5; margin-bottom: 12px; margin-top: 12px; }
	#service_menu ul.under li {float: none;width: auto;}
	#service_menu ul.under li:last-child {margin-left: 0;margin-top: 15px;}
	#service_menu #menu_bar01:checked ~ #cont01,
	#service_menu #menu_bar02:checked ~ #cont02,
	#service_menu #menu_bar03:checked ~ #cont03,
	#service_menu #menu_bar04:checked ~ #cont04,
	#service_menu #menu_bar05:checked ~ #cont05,
	#service_menu #menu_bar06:checked ~ #cont06 {max-height: initial;}
	#service_menu ul.under .link1 a {background: #fff;color: #333;}
	#service_menu ul.under .link1 a .link1-txt {position: static;opacity: 1 !important;padding-left: 0;padding-top: 10px;}
	#service_menu ul.under .link1 a .link1-txt span {height: auto;}

	.contact-wrap .page_ttl h1 {font-size: 4rem;}
	.contact-wrap .page_ttl p {font-size: 1.2rem;}

	div.news_wrap { padding: 6vw 3vw; }
	div.news_wrap h2 { padding: 5%; }
	#blog_detail .content .title { font-size: 1.5rem; }
	#blog_detail { padding-top: 80px;padding-bottom: 120px; }
	#blog_detail .block1 .back {float: none;margin-bottom: 15px;}
	#blog_detail .block1 .heading {float: none;margin-right: 0;margin-bottom: 20px;}
	#blog_detail .nav .prev,#blog_detail .nav .next {float: none;width: auto;margin-top: 15px;border-top: 1px dotted #ddd;padding-top: 15px;}
	#blog_detail .nav a .title {margin-top: 3px;margin-bottom: 0;}

	ul.team_box li {float: none;width: auto;margin-bottom: 14%;position: relative;}
	ul.team_box li > div {float: none;width: auto;position: static;}
	ul.team_box li > .img {float: none;width: 60%;left: 4%;}
	ul.team_box li p {margin-top: 25px;padding-right: 0;}
	div.bg_layer {top: 180px;}
	#team_menu h2 {position: absolute;left: 47%;top: 40px;font-size:2.1rem;}

	.thanks-wrap .page_ttl2 h1 {font-size: 1.2rem; margin-top: 50px; margin-bottom: 30px;}

}



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


body { font-size: 12px; }
#blog_detail .content .entrybody {
	font-size: 0.9rem;
}
#blog_detail .content .entrybody h2 {
	font-size: 1.2rem;
}
#blog_detail .content .entrybody h3 {
	font-size: 1.1rem;
}
#cta h3 { font-size: 2rem; }


}


@media screen and (max-width:380px) {
.#bar_menu .nav2 .facebook { margin-top: 5px; }
}

@media screen and (max-width: 767px) {
  .pc_only {
    display: none; } }

.sp_only {
  display: none; }
  @media screen and (max-width: 767px) {
    .sp_only {
      display: block; } }
  .sp_only_inline {
    display: none; }
    @media screen and (max-width: 767px) {
      .sp_only_inline {
		display: inline-block; } }




#works_detail_summary{/*サイドバー全体の箱*/
	position: -webkit-sticky;
	position: sticky;
	top: 0;/*上から離す距離（50pxとか）*/
}

/*  About Page Security	*/
th a {
	color: #1c1c1c;
	text-decoration: underline;
}
th a:hover {
	color: #1c1c1c;
	text-decoration: underline;
}

td .star {
	width: 135px;
	height: 135px;
}
@media screen and (max-width: 767px) {
	td .star {
		width: 100px;
		height: 100px;
	}
}
/*#security {
	padding-top: 30px;
}

#security .security {
	padding-left: 5%;
	padding-right: 5%;
}

#security .security a {
	color: #1c1c1c;
	border-bottom: 1px solid #1c1c1c;
	display: inline-block;
}

#security .security .img {
	padding-top: 20px;
	width: 150px;
	height: 150px;
}*/