@charset "UTF-8";

@media only screen and (min-width : 479px){
	.br-pc { display:block; }
	.br-sp { display:none; }
}
/* 共通 */
html {
	overflow-y: visible;
	height: 100%;
	--outer-height: 100vh;
}

body {
	/*font-family: source-sans-pro;*/
	margin: auto auto 0px;
	font-style: normal;
	font-family: sans-serif;
	font-weight: 300;
	width: 100%;
	height: 100%;
	max-width: 100%;
	background: linear-gradient(#143C64, #2A70A0, #143C64) ;
	background: -webkit-gradient(linear, left top, left bottom, from(#143C64), color-stop(0.5, #2A70A0), to(#143C64)) ;
	background-attachment: fixed;
	-webkit-text-size-adjust: 100%;
}



/* パララックス index */
.num {
	margin: 0px;
	position: fixed;
	right: 10px;
	top: 10px;
}

.parallax {
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	position: fixed;
	top: 0px;
}

.parallax2 {
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	position: fixed;
	top: 500px;
	width: 100%;
	height: auto;
}

.parallax4 {
    position: relative;
    background-image: url('../img3/file3.png');
    height: 84vh;
	height: calc(var(--outer-height) * 0.85);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	display: flex;
	opacity: 0.8;
	align-items: center;
}

.parallax5 {
    position: relative;
    /*background-image: url('../img3/top_3.png');*/
	height: 100%;
    height: var(--outer-height);
	width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	display: flex;
	opacity: 0.8;
	align-items: center;
}

.parallax5 video{
	position: absolute;
    object-fit: cover;
	z-index: -1;
	height: 100%;
	height: var(--outer-height);
	width: 100%;
	opacity: 0.9;
}

#work {
	position: relative;
	background-image: url("../img3/top01.png");
	height: 100%;
	height: var(--outer-height);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	opacity: 0.8;
}


.content {
    padding: 0;
    /*background-color: #7D7DFF;*/
	position: relative;
}

.content2 {
    padding: 0;
    /*background-color: #7FFD7D;*/
	position: relative;
	display: flex;
	align-items: center;
	-webkit-align-items: stretch;
}

#parallax1 {
	background-image: url("../img/bg_b01-2.png");
	width: 450PX;
	height: 3500px;
	right: 0;
	background-attachment: inherit;
	z-index: -1;
}

#parallax2 {
	background-image: url("../img/bg_g01.png");
	width: 450PX;
	height: 3000px;
	right: 0;
	background-attachment: inherit;
	z-index: -1;
}

#parallax3 {
	background-image: url("../img/bg_mizu01.png");
	background-attachment: inherit;
	width: 450px;
	height: 3000px;
	right: 0;
	z-index: -1;
}

/* パララックス work */
.parallax6 {
    position: relative;
	background-color: #000000;
	/*background-image: url('../img3/multi_smartphone.png');*/
    height: 84vh;
	height: calc(var(--outer-height) * 0.85);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	display: flex;
	opacity: 0.8;
	align-items: center;
}

.parallax7, .parallax8, .parallax9, .parallax10 {
    position: relative;
    background-color: #000000;
	height: 100%;
    height: var(--outer-height);
	width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	display: flex;
	opacity: 0.8;
	align-items: center;
}

video{
	position: absolute;
    object-fit: cover;
	z-index: -1;
	height: 100%;
	height: var(--outer-height);
	width: 100%;
	opacity: 0.3;
}

.parallax6 video{
	position: absolute;
    object-fit: cover;
	z-index: -100;
	height: 84vh;
	height: calc(var(--outer-height) * 0.85);
	width: 100%;
	opacity: 0.5;
}

/* Container */
.container {
	width: 100%;
	color: #FFFFFF;
	text-align: left;
	min-height: calc(100vh - 55px);
	/*background-color: #FFFFFF;*/
}

/* Navigation */
header {
	width: 100%;
	height: 200px;
	/*background-color: #FBC4FF ;*/
	position: relative;
	text-align: center;
}

.logo {
	float: none;
	margin: 25px 0px 0px 20px;
}

nav {
	width: 100%;
	margin: 0px;
	display:flex;
	align-items: center;
	justify-content: center;
}

header nav ul {
	list-style: none;
	float: right;
	margin-top: 20px;
	text-align: center;
	font-size: 20px;
	letter-spacing: 0px;
	transition: all 0.3s linear;
}
nav ul li {
	float: left;
	color: #FFFFFF;
	margin: 10px 25px;
}
nav ul li2 {
	float: left;
}

ul li3 a {
	float: left;
	color: #2C9AB7;
	margin: 10px 25px;
}

ul li a {
	color: #FFFFFF;
	text-decoration: none;
}

ul li:hover a {
	color: #2C9AB7;
}

/*
.fixed{
	position: fixed;
	width: 100%;
	height: 85px;
	top: 0;
	left: auto;
	background-color: rgba( 0, 255, 255, 0.8 );
}

.fixed nav ul{
	margin: 5px auto;
}

.fixed nav ul li{
	line-height: 20px;
}

.fixed .logo{
	float: left;
	margin: 15px 0px 0px 20px;
}
*/

/* Section 共通 */
.display {
	width: 100%;
	height: auto;
	padding: 10px 0px;
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	/*background-color: #639959;*/
}

.contents {
	width: 80%;
	max-width: 1200px;
	margin:  0px auto;
	/*background-color: #939659;*/
}

.contents-c {
	width: 80%;
	max-width: 800px;
	/*background-color: #939659;*/
}

.section_header {
	font-size: 25pt;
	font-weight: normal;
	margin: 0px;
	letter-spacing: 4px;
	/*background-color: #6593E5;*/
}

.section_text {
	/*font-size: 10pt;*/
	/*font-weight: bold;*/
	margin: 15px 0px 0px 10px;
	letter-spacing: 3px;
}

/* フェードの設定 */
.effect {
	width: 80%;
	max-width: 1200px;
}
	

/*以下フェードイン表示の指定*/
.fadein {
    opacity: 0;
    animation: fadein 6s ease forwards;
	margin-bottom: -15;
	animation-duration: 0.8s;
	color: #FFFFFF;
}
@keyframes fadein {
    100% {  opacity: 1;}
}
 
/*以下遅延の指定*/
.txt01 {
	animation-delay: 0.5s;	
}
.txt02 {
	animation-delay: 2s;
}
.txt03 {
	animation-delay: 3.5s;
}
.txt04 {
	animation-delay: 5s;
}
.txt05 {
	animation-delay: 6.5s;
}


/*.fadeOff, .fadeOff2 {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
	transform: translateY(20px);
}
 
.fadeOn, .fadeOn2 {
    opacity: 1;
	transform: translateY(0);
}
*/


/* Section index-work */
.section_header-i {
	font-size: 25pt;
	font-weight: normal;
	margin: -50px 0px 0px 10px;
	letter-spacing: 4px;
	/*background-color: #6593E5;*/
}

.section_text-i {
	/*font-size: 10pt;*/
	/*font-weight: bold;*/
	margin: 20px 0px 0px 10px;
	letter-spacing: 3px;
}

/* Section work 右揃え */
.section_header-ir {
	font-size: 25pt;
	font-weight: normal;
	text-align: right;
	margin: -50px 0px 0px 10px;
	letter-spacing: 4px;
}

.section_text-ir {
	/*font-size: 10pt;*/
	/*font-weight: bold;*/
	text-align: right;
	margin: 20px 0px 0px 10px;
	letter-spacing: 3px;
}

.main {
	width: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	padding: 0px 0px;
	height: 100%;
	/*background-color: #659399;*/
	display: flex;
	align-items: center;
	justify-content: center;
}


/*
#cocept {
	background-image: url("../img3/file3.png");
	height: 100vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	opacity: 0.8;
}

#forte {
	background-image: url("../img3/top_3.png");
	height: 100vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	opacity: 0.8;
}*/

.main img{
	margin: 30px -40px;
	text-align:center;
	width: 100%;

}

.main a {
	padding: 10px 100px;
	border-radius: 5px;/* 枠角丸 */
	background-color: #B3B3B3;
	border-spacing: 0px;
	font-weight: bold;
	font-size: 15px;
	color: #313131;
	-webkit-appearance: none;
	letter-spacing: 1px;
}

.icon{
	margin: 10px;
}

.icon img{
	padding: 15px;
	width: auto;
}

/* Section work */
.main2 {
	width: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	padding: 10px 0px 100px 0px;
	/*background-color: #596399;*/
}

.main2-bt {
	color: aqua;
	font-size: 18pt;
	font-weight: bold;
	margin: 10px 10px -5px;
	letter-spacing: 3px;
	width: auto;
	/*background-color: #659399;*/
}

.thumbnail {
	width: 100%;
	margin: 0px 10px;
	padding: 0px 0px 50px 0px;
}

.thumbnail p {
	text-align: left;
	padding: 0px 0px;
	font-size: 15px;
}

.thumbnail img {
	width: 100%;
}

/* Section Company & Access */
.section_map {
	position: relative;
	text-align: center;
	width: 100%;
	height: 500px;
	float: none;
	margin: 20px 0px 80px;
}

.section_map a {
	padding: 10px 100px;
	border-radius: 5px;/* 枠角丸 */
	background-color: #B3B3B3;
	border-spacing: 0px;
	font-weight: bold;
	font-size: 15px;
	color: #313131;
}
.section_map:hover a {
	color: #FFFFFF;
}

.section_map iframe,
.section_map object,
.section_map embed {
	position:relative;
	top: 0px;
	left: 0;
	width: 80%;
	max-width: 1200px;
	height: 100%;
}



/* Section Recruit */
.main2 h4{
	margin: 5px 0px;
	font-size: 20px;
	text-align: left;
	padding: 5px 0px;
}

.display-r {
	width: 100%;
	height: auto;
	padding: 10px 0px;
	display: -webkit-box;
  	display: -ms-flexbox;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/*background-color: #639959;*/
}


.thumbnail2 {
	width: 400;
	float: left;
	margin: 5px 20px;
	padding: 0px 10px ;
	border-radius: 3px;
	
	background-color: #659399;
}

.thumbnail2 p {
	text-align: left;
	padding: 0px;
	font-size: 15px;
}

.thumbnail2 img {
	width: 100%;
}

/* table */
.table {
	border-collapse: collapse;
  	border-style: none; /* 枠の種類 */
 	border-width: 0px; /* 枠の幅 */
	/*background-color: #F2F2F2;*/
	color: #FFFFFF;
	width: 80%;
	max-width: 1200px;
	margin-top: -20px;
}

.table td{
	padding: 30px 15px 5px;
	line-height: 25px;
	text-align: left;

}

.tr {
	padding: 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 2px inset;
}

.table th {
	width: 20%;
	padding: 30px 10px 10px;
	text-align: left;
	vertical-align: top;
	border-right: none;
	border-right-color: #0065B3;
	font-weight: normal;
}

hr {
	width: 90%;
	height: 2px;
	background-color: #52BAD5;
	border: none;
}

.recruit_p , .recruit_pm {
	width: 94%;
	font-size: 18px;
	text-align: center;
	margin: 30px 0px 0px 3.2%;
}

.recruit_p a {
	padding: 10px 100px;
	border-radius: 5px;/* 枠角丸 */
	background-color: #B3B3B3;
	border-spacing: 0px;
	font-weight: bold;
	font-size: 15px;
	color: #313131;
}

.recruit_pm a {
	padding: 10px 80px;
	border-radius: 50px;/* 枠角丸 */
	background-color: #82CEFF;
	border-spacing: 0px;
	font-weight: bold;
	font-size: 15px;
	color: #313131;
}

.recruit_p:hover a {
	color: #FFFFFF;
}

/* Section Contact */
form {
	height: auto;
	display: block;
	margin: 10px;
	/*background-color: #886622;*/
	padding: 10px 0px;
}

input[type="text"],
input[type="email"],
textarea {
    padding: 5px;
    outline: none;
    border: 1px solid #DDD;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 3px;
	width: 100%;
	max-width: 100%;
}

textarea {
	width: 100%;
	height: 150px;
}

.button {
	width: 150px;
	margin: 0px 10px;
	padding: 10px 0px;
	border-radius: 5px;/* 枠角丸 */
	background-color: #B3B3B3;
	border-spacing: 0px;
	font-weight: bold;
	font-size: 15px;
	color: #313131;
	-webkit-appearance: none;
}

.form-table {
	border-collapse: collapse;
  	border-style: none; /* 枠の種類 */
 	border-width: 0px; /* 枠の幅 */
	/*background-color: #2F2F2F;*/
	color: #FFFFFF;
	width: 100%;
	max-width: 1200px;
	text-align: left;
}

.form-table td {
	border-bottom: none;
	padding: 5px 0px;
}


/*.form-table2 {
	border-collapse: collapse;
  	border-style: none; /* 枠の種類 */
/* 	border-width: 1px; /* 枠の幅 */
/*	border-color: #196CFF;
	background-color: #FFFFFF;
	opacity: 20%;
	margin: 20px 0px;
	width: 100%;
	max-width: 1000px;
}

.form-table2 td {
	border-bottom: none;
	padding: 5px 0px;
	width: 
}
*/

table.form-table2{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.form-table2 td,table.form-table2 th{
	border:1px solid #ccc;
	padding:10px;
	background: rgba(0, 0, 0, 0.4);
	color: #FFFFFF;
}
table.form-table2 th{
	width:30%;
	color: #000000;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}



.kome {
	font-size: 10px;
	vertical-align: super;
	margin-left: 3px;
}


/* Stats Gallery */
.gallery {
	clear: both;
	display: inline-block;
	/*background-color: #FFFFFF;*/
	/* [disabled]min-width: 400px;
*/
	padding-bottom: 35px;
}
.gallery h3 {
	margin: 10px 0px 5px 0px;
	padding: 10px 20px;
	font-size: 20pt;
	color: #FFFFFF;
	text-align: left;
	letter-spacing: 3px;
	background-color: #0074A6;
}

.gallery .thumbnail {
	width: 30%;
	text-align: center;
	float: left;
	border-radius: 3px;
	margin: 20px 0px 15px 3.2%;
	padding: 5px 0px 5px 0px;
	background-color: #659399;
}

.thumbnail h4 {
	margin: 10 10 15 10;
	border-left: 5px solid #FFFFFF;
	font-size: 20px;
	color: #FFFFFF;
	text-align: left;
	padding: 5px 0px 5px 10px;
}

.thumbnail h5 {
	margin: 10px;
	font-size: 14px;
	color: #3D3D3D;
	text-align: left;
	padding: 10px;
	background-color: RGB(255, 255, 255, 80%);
}

.thumbnail p {
	color: #FFFFFF;
	text-align: left;
	padding: 0px 20px;
	font-size: 15px;
}

.thumbnail img {
	padding: 0px;
	width: 95%;
}

.cards {
	width: 97%;
	height: auto;
	max-width: none;
	max-height: none;
	opacity: 0.8;
}


/* ページトップへ戻るボタン */
#page-top {
    position: fixed;
    bottom: 50px;
    right: 5%;
	z-index: 999;
}
#page-top a {
    background-color: rgba(113,112,112,0.80);
	opacity: inherit;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    padding: 15px 11px;
    display: block;
    border-radius: 8px;
}
#page-top a:hover {
    text-decoration: none;
    background-color: rgba(153,153,153,0.80);
}

/* copyright */
footer {
	text-align: center;
	font-size: 15px;
	color: #000000;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 1px 0px;
	background-color: #FFFFFF;
	position: relative;
	height: auto;
}

/* iphone対策 */
.iframe-i {
	position:relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}


/* タブレット用*/
@media only screen and (max-width: 767px) {
	
/* iPad用*/
.iPad .parallax4 {
    background-image: url('../img3/top_s.png');
	background-attachment: scroll;
	}
	
.iPad #work {
    background-image: url('../img3/top01_s.png');
	background-attachment: scroll;
}

.iPad .parallax5 {
    background-image: url('../img3/top_3_s.png');
	background-attachment: scroll;
}
	
/* ここまで */
	
body {
	height: 100%;
	/*height: calc(var(--vh, 1vh) * 100);*/
	}
	
header {
	width: 100%;
	height: 110px;
	/*background-color: #FF22FF;*/
}
	
.logo {
	float: left;
	text-align: center;
	margin: 5px 0px 0px 0px;
	/*background: #BC4B4D;*/
}

/*About Section*/

.contents, .contents-c {
	width: 90%;
	/*background-color: #939659;*/
}
	
nav {
	width: 100%;
	display:flex;
	align-items: baseline;
	justify-content: center;
	/*background: #52bad5;*/
	margin: 10px 15px 0px 0px;
}
	
header nav ul {
	margin: 10px 0px 0px 0px;
	letter-spacing: 1px;
	/*background-color: #FFF22F;*/
	font-size: 18px;
	
}
	
nav ul li {
	margin: 15px 0px;
	width: 100%;
	text-align: left;
	/*background-color: #317A40;*/
}

ul li a {
	color: #5F6060;
}	
	
ul li3 a {
	margin: 15px 0px;
	width: 100%;
	text-align: left;
}
	
/* Content Text */
.section_header {
	font-size: 25pt;
}
/* Section accece */
.section_banner_a {
	padding-top: 10px;
	}

.section_text_a {
	font-size: 10pt;
	}

.section_map iframe,
.section_map object,
.section_map embed {
	width: 90%;
}
	
.table {
	width: 90%;
}

/* iPhone用
.iPhone .ios-bg{	
	position: relative;
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 2;
}*/
	
}

@media only screen and (min-width : 479px) {
	
	
}

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

.br-pc { display:none; }
.br-sp { display:block; }


	
	
/* iPhone用*/
.iPhone .pc { display: none !important; }
.iPhone .sp-i { display: block !important; }


/* ここまで */
	
.contents {
	width: 90%;
}

.parallax4 {
    background-image: url('../img3/top_s.png');
}
	
#work {
    background-image: url('../img3/top01_s.png');
	background-position: center center;
}

.parallax5 {
    background-image: url('../img3/top_3_s.jpg');
}


.parallax6 {
    background-image: url('../img3/shoot_s.png');
}
	
.parallax7 {
    background-image: url('../img3/cg_s.jpg');
}
	
.parallax8 {
    background-image: url('../img3/animation_s.png');
}
	
.parallax9 {
    background-image: url('../img3/uiux_s.jpg');
}
	
.parallax10 {
    background-image: url('../img3/multi_s.jpg');
}
	
	
.section_header, .section_header-i, .section_header-ir {
	font-size: 20pt;
	margin-bottom: 0px;
	text-align: left;
}

#work_h_ui{
	font-size: 18pt;
}

.section_text, .section_text-i, .section_text-ir {
	margin: 15 10 0 10;
	font-size: 12pt;
	letter-spacing: 1px;
	line-height: 25px;
	text-align: left;
	position: inherit;
}
	
.main a {
	padding: 10px 50px;
	text-align: center;
}

.main img{
	text-align:center;
	width: 120%;
}

.icon img{
	width: 30px;
}

	
/* google map size */
.section_map {
	height: 300px;
}
	
.section_map a {
	padding: 10px 50px;
}

/* Recruit text */	
.table {
	font-size: 15px;
	width: 90%;
}
	
	

.table th {
	width: 95%;
	display: block;
	letter-spacing: 1px;

	font-size: 18px;
	padding: 20px 10px 0px;
}
	
.table td {
	width: 90%;
	display: block;
	letter-spacing: 0px;
	padding: 5px 20px;
}
	
.display-r {
	clear: both;
	display: inline-block;
	width: 100%;
	man-width: 400px;
	/*background-color: #F369FF;*/
	padding-bottom: 35px;
}
	
.thumbnail2 {
	width: 80%;
	margin: 10px 6.5%;
}

.recruit_p {
	font-size: 15px;
}
	
.button {
	width: 110px;
	margin: 0px 5px;
	font-size: 13px;
}
	
/* Contact text */
table.form-table2 td,table.form-table2 th{
	width:auto;
	display:block;
	border: none;
}

table.form-table2 th{
	background:rgba(239,239,239,0.8);
}
	
	
/* copyright */
.footer-mail {
	height: 55px;
}
}