/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 5em;
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
		padding:0;
	}

	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}


	/* Backgrounds will cover all the section
	* --------------------------------------- */
	#section0,
	#section1,
	#section2,

	{
		background-size: cover;
		background-attachment: fixed;
	}

	/* Defining each sectino background and styles
	* --------------------------------------- */
	#section0{
		background-image: url(images/function1_kanban.jpg);
		background-size: cover;
		padding: 0 0 0 0;
		background-position-y: bottom;
	}
	#section1{
		background-image: url(/racty/images/bg1.jpg);
		background-size: cover;
		padding: 0 0 0 0;
	}
	#section2{
		background-image: url(images/function2_kanban.jpg);
		background-size: cover;
		padding: 0 0 0 0;
		background-position-y: bottom;
	}
	#section3{
		padding: 0 0 0 0;
		background: rgba(250,245,240, 1);
	}
	#section4{
		background-image: url(/racty/images/bg1.jpg);
		background-size: cover;
		padding: 0 0 0 0;	
	}
	#section5{
		background-image: url(images/function3_kanban.jpg);
		background-size: cover;
		padding: 0 0 0 0;	
		background-position-y: bottom;
	}
	#section6{
		background-image: url(/racty/images/kanban_firm2.png);
		background-size: cover;
		padding: 0 0 0 0;	
	}
	#section7{
		background: rgba(250,245,240, 1);
		padding: 0 0 0 0;	
	}



	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}
	
	
	.circle{
			left: 130%;
			position:relative;
		}
		
		
#bigimage{ width:66.6%; float:left;}
#smallimage{ width:33.3%; float:left; }

#section0 .godown, #section1 .godown, #section2 .godown, #section3 .godown, #section4 .godown, #section5 .godown, #section6 .godown, #section7 .godown, #section8 .godown{ position:absolute; left:50%; z-index: 1000;}
#section1 .godown:after, #section4 .godown:after, #section5 .godown:after{ color:rgba(255,255,255, .75);}

/* 各機能の看板セクション */		
.kanban { height:100%; float:none; clear:both; overflow:hidden; position:relative; }	
.kanban .circle{ width:25rem; height:25rem; border-radius:50%; background:rgba(255,85,85, .75); display:inline-flex; left:-50%; top:20%; position:absolute;}
.kanban .circle .intro{ display: block; text-align: center; margin:auto; }
.kanban .circle .logo{ width:50%; display: block; margin:auto auto 1.5rem; width: 35%\9;}
.kanban .circle h2.catch{ color:rgba(255,255,255, 1); font-size:1.75rem; line-height: 2.5rem;}
.kanban .circle .logo{
	margin-top: 100px\9;
}
/* 各機能の詳細セクション */
.details p{ font-size:1rem; line-height:1.75rem; text-align:left; color:rgba(159,118,87, 1); letter-spacing: 0.05rem;}


/* 機能1*/
.function1 .circle{ background:rgba(95,193,199, .75);}

#section1 .details.function1{  background:rgba(95,193,199, .8); width:100%;min-height:100%; }
#section1 .details.function1>div{padding-bottom:5%;}
.function1 .description{ width:90%; display: table;  margin:2rem auto; }
.function1 .description .image { width: 22rem; display: table-cell; overflow: hidden; /*background:rgba(95,193,199, .25);*/ margin-right:1rem;}
.function1 .description .image img{ width:100%; margin:auto;}
.function1 .description .text { display:table-cell; vertical-align:middle;  color:rgba(255,255,255, 1); width: 100%;}
.function1 .attention{ color:rgba(255,255,255, 1); display:block;  }

.function1.graph{ background:rgba(95,193,199, .8); height:100%;}
.function1.graph p{ text-align:center; color:#FFF; padding:2rem 0; display:block; display:block; margin:auto;}


/* 機能2*/
.function2 .circle{ background:rgba(131,169,216, .75); top:10%; width:24rem; height:24rem;}
.function2 h1{ color:rgba(255,102,102, 1); font-size:2rem; display:block; left:7.5%; bottom:15%; position:absolute;  font-weight:normal;
font-family: 'Lucida Grande',Meiryo,'メイリオ','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ Ｐゴシック',sans-serif;-webkit-font-smoothing: antialiased;}
.function2 h1 span.new{ background:rgba(255,102,102, .8); color:rgba(255,255,255, 1); display:inline-block; line-height:2rem; font-size:1.5rem; padding:0 0.25rem; margin-bottom: 1rem;}


.cyclon{ color:rgba(255,102,102, 1) !important; 
font-family: 'Lucida Grande',Meiryo,'メイリオ','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ Ｐゴシック',sans-serif;-webkit-font-smoothing: antialiased;}
span.font_bigger{font-size:165%;}
span.attention{ font-size:0.8rem; line-height:1rem;}

.function2.details{ background: url(images/function2_details.jpg) no-repeat left bottom; background-size: auto 100%; height: 100%; }
.function2 .description{ width:65%; display: table; margin-bottom:2rem; float:right; }
.function2 .description .image { width:13rem; display: table-cell; overflow: hidden; margin-right:1rem;text-align: left;}
.function2 .description .image img{ width:100%; margin:auto;}
.function2 .description .image .attention{ width:100%; margin:auto; text-align:left; line-height:0.6rem; font-size:0.7rem;}
.function2 .description .text { display:table-cell; vertical-align:middle; /*padding-right: 10%;*/}

.function2 .description.second{ width:45%; display:block;}
.function2 .description.second .image { width:auto; height:12rem; margin:0 auto 1rem; float:none; clear:both; display: block;}
.function2 .description.second .image img{ height:100%; width:auto;}
.function2 .description.second P{ display:block; float:none;}

.function2.graph{ background:rgba(131,169,216, .8); height:auto; color:#FFF; padding-top: 5%; padding-bottom:10%;}
.function2.graph h2{ font-size:2rem; text-align:center; color:#FFF; }
.function2.graph p{ text-align:center; color:#FFF; padding:2rem 0; display:block; display:block; margin:auto;}
.function2.graph .headhikaku{ width:100%; margin-bottom:2rem; overflow:hidden; display:block; }
.function2.graph .headhikaku li{ width:40%; margin:0 2.5%; float:left; padding:2rem 2.5%; background:rgba(255,255,255, .75); border-radius:1rem;}
.function2.graph .headhikaku li h2{ font-family: 'Lucida Grande',Meiryo,'メイリオ','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ Ｐゴシック',sans-serif;-webkit-font-smoothing: antialiased; color:rgba(84,138,202, 1); font-size:1.5rem; margin-bottom:1rem;}
.function2.graph .headhikaku li img{ width:90%; margin:auto;}


/* 機能3*/
.function3 .circle{ background:rgba(255,153,5, .75);}
.function3.details{background: rgba(252,232,161, .9);}
.function3 #smallimage .images { height:90%; position: absolute; left: 10%; top: 5%;}
.function3 #smallimage img{ display:block; margin:auto; overflow:hidden; text-align:center; height:100%; }
.function3 #bigimage {float: right; padding: 5% 0;}
.function3 .description{ width:100%; display: table; margin-bottom:4rem; }
.function3 .description{ width:800px\9; }
.function3 .description .image { width: 15rem; height: 15rem; border-radius:50%; display: table-cell; overflow: hidden; background:rgba(243,185,72, .25); margin-right:1rem;}
.function3 .description .image img{ height:100%; width:auto; margin:auto;}
.function3 .description .text { display:table-cell; vertical-align:middle; padding-right: 10%;}
.function3 h2.more{ color:rgba(255,153,51, 1); text-align:left; font-size:1.75rem; margin-bottom:1rem; font-family: 'Lucida Grande',Meiryo,'メイリオ','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ Ｐゴシック',sans-serif;-webkit-font-smoothing: antialiased; line-height:2rem;}
.function3 .description .image.kabegiwa { width:auto; height: 15rem; border-radius:50%; display: table-cell; overflow: hidden; background:rgba(243,185,72, .25); margin-right:1rem;}


.function3 { float:none; clear:both; overflow:hidden; }
.function3 ul.more {float:none; width:90%; margin:auto; display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display:flex;}
.function3 ul.more li{ overflow:hidden; display: block; text-align:center; padding:0 1.5%; margin:0 auto auto; width: 30.3%;}
.function3 ul.more li .image { width: 15rem; height: 15rem; border-radius:50%; display: block; overflow: hidden; background:rgba(243,185,72, .25); margin:auto auto 1rem;}
.function3 ul.more li .image img{ height:100%; width:auto; margin:auto;}
.function3 ul.more li h2{text-align:center;}


/* タイル */
#tilemenu { height:100%; float:none; clear:both; overflow:hidden; }
#tilemenu ul {float:none; height:100%;}
#tilemenu ul li{ width:33.3%; height:50%; float:left; overflow:hidden; display: block; position: relative;}
#tilemenu ul li img{ min-width: 150%; min-height: 100%; left: -25%; position: absolute; display: block; 
-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition:all .3s ease-in-out;
	  transition: all .3s ease-in-out;
	opacity: 0.7;
    height: 50%;
    overflow: hidden;}
#tilemenu ul li:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	opacity:1;
}

figure {
	margin-bottom:0; padding-bottom:0;
    display: block;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}
figcaption {
	width:100%; height:100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	-webkit-transition:all .3s;
	transition:all .3s;
	color:rgba(255,255,255,1);
	background:rgba(255,143,143, .7);
	display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display:flex;
    -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack:justify;/*--- IE10 ---*/
    -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/
    justify-content:space-between;
	align-items: center; justify-content: center;
}

figcaption h3{margin:auto auto auto auto;
  font-size: 1.25rem;
  line-height:2rem;
  font-weight: 400;
  text-align: center;
  width: 100%;
  height: 2rem;
  color:rgba(255,255,255, 1);
  display:block;
    }


#tilemenu ul li:nth-child(2) figure figcaption, #tilemenu ul li:nth-child(6) figure figcaption {background:rgba(250,245,240, .7);}
#tilemenu ul li:nth-child(3) figure figcaption, #tilemenu ul li:nth-child(4) figure figcaption {background:rgba(249,188,47, .7);}

#tilemenu ul li:nth-child(2) figure figcaption h3, #tilemenu ul li:nth-child(6) figure figcaption h3{ color:rgba(159,118,87, 1);}
#tilemenu ul li:nth-child(3) figure figcaption h3, #tilemenu ul li:nth-child(4) figure figcaption h3{ color:rgba(255,255,255, 1);}

#tilemenu ul li:hover figure figcaption {
	background:rgba(255,255,255, .25);
}
#tilemenu ul li:hover figure figcaption h3  {color:rgba(94,69,51, 1); }

/*===============================================
  画面の横幅が479px以下
===============================================*/
@media screen and (max-width: 768px){
	
#bigimage,#smallimage{ width:100%; float:none; }
#section0, #section2 { background-size: auto 100%; background-position-x: 40%;}
#section5 {background-position-x: right;}	

.kanban .circle,.kanban .circle .intro {
    width: 20rem;
    height: 20rem; top:10%;
	left: 5% !important;}
.kanban .circle .logo {
    margin: 5rem auto 1rem;}
#section2 .kanban .circle .logo {
    margin: 5rem auto 1rem;}
.kanban .circle h2.catch  {
    font-size: 1.25rem;
    line-height: 1.5rem;
}

.function3 .circle{
	margin-top: 10rem;
}

#bigimage,#smallimage{ width:95%; margin: 0 auto; float:none; }

.function3 #smallimage{ display:none;}
.function2.details {
    background-position: top;
    background-size: 100% auto;
    height: auto;
}


.function2 .float_l{
	float: none;
}


.function2 .description {
    display: block;
    float: none;
    margin: auto;
    width: 100%;
}

.function2 .description:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

.function2 .description .image{
	display: block;
	margin: 1rem 0 10rem 50%;
	width: 18rem;
}

.function2 h1 { line-height:2.5rem;}

.function2 .description p.text {    display: block;
    width: 85%;
    padding-right: 0;
    margin: 1rem auto;}

.headhikaku li{
	height: 25rem;
}
.function2.graph h2 { width:85%; margin:auto; line-height:1.75rem; font-size:1.5rem;}
.function2 .description.second {width:90%; margin:auto; display:block;}
.function2 .description.second .image { width:90%; margin:auto; display:block; height:auto;  padding-top:0;}
.function2 .description.second .image img { width:100%; height:auto;}
}
@media screen and (max-width: 479px){
#bigimage,#smallimage{ width:100%;}	
.float_l ,float_r{ float:none;}	
.function3 .circle{
	margin-top: 0;
}
.kanban .circle,.kanban .circle .intro {
    width: 13rem;
    height: 13rem; top:10%;
	left: 5% !important;}
.kanban .circle .logo {
    margin: 2rem auto 1rem;}
#section2 .kanban .circle .logo {
    margin: 3rem auto 1rem;}
.kanban .circle h2.catch  {
    font-size: 1.25rem;
    line-height: 1.5rem;
}
.flexbox {display: block;
    margin: auto;
    float: none;
    clear: both;
	width:100%;}
	
.flexbox > * {
    display: block;
    margin: auto;
    float: none;
    clear: both;
	width:100%;}
	







.function1 .description .image, .function1 .description .text{ display:block; width:95%;}

.function1 .description {
    margin: 0 auto;
	padding-top:2rem;}

.function2 .description {
    width: 100%;
    display: block;
    margin-bottom: 2rem;
    float: none;
	margin:auto;
}

.function2.graph h2 { margin-top: 1rem; font-size:1.2rem;}
.function2 .description .image { display: block;
    width: 50%;
    margin-right: auto;
    margin-left: auto;
	margin-bottom: 0;
	padding-top:60%;}
.function2.details {
    background-position: 4rem top;
    background-size: 100% auto;
    height: auto;
}

.function2 h1 { line-height:2.5rem; left: 0; bottom: 0;}

.function2 .description p.text {    display: block;
    width: 85%;
    padding-right: 0;
    margin: 1rem auto;}


.function2.graph p{ width:85%; margin:auto; text-align:left; }
.function2.graph .headhikaku { width:90%; float: none; margin: auto auto auto auto; display:block;}
.function2.graph .headhikaku li { width:90%; float: none; margin: auto auto auto auto; display:block; margin-bottom:2rem; height: auto;}

.function2.graph .headhikaku li h2{font-size: 1.2rem; width: 100%; font-weight: bold;}
.function1 .attention { display:block; width:85%; margin:auto; text-align:left;}

.function2 .description.second {width:90%; margin:auto; display:block;}
.function2 .description.second .image { width:90%; margin:auto; display:block; height:auto;  padding-top:0;}
.function2 .description.second .image img { width:100%; height:auto;}
#section4,#section6  {background-image:none;}

#section5 .kanban .circle { top: 30%; width: 11rem; height: 11rem;}
#section5 .kanban .circle .intro { width: 11rem; height: 11rem;}



.function3 .description .image {
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    background: rgba(243,185,72, .25);
    margin-right: auto;
    margin: auto auto 1rem;
    float: none;
}
.function3 h2.more {
	font-size:1.5rem;}
.function3 .description .text {
    display: block;
    padding-right: 0;
	width:85%; margin:auto;
}

#section2{
		background-image: url(images/function2_kanban.jpg);
		background-position:-80% -60% ;
		padding: 0 0 0 0;
		
	}
}
/*===============================================
  画面の横幅が480px以上
===============================================*/
@media screen and (min-width: 480px){

}
/*ワイド画面用分岐　1600px*/
@media screen and (min-width: 1600px)
{

}


/* iPad Portrait(縦) */
@media only screen and (min-device-width:768px)
    and (max-device-width:1024px)
{
	
}

/* iPHone4,iPhone5,iPhone5s,iPhone6,iPhone6 Plus */
@media screen and (min-width: 320px) and (max-width: 499px)
{
	
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .foo { color: red } /* IE11 */
  *::-ms-backdrop, .kanban .circle .logo{ width: 35%;}
  *::-ms-backdrop, .kanban .circle .logo{
	margin-top: 100px;
}
  *::-ms-backdrop, .function3 .description{ width:800px; }
  *::-ms-backdrop, .function2 .description {
    width: 600px;
	margin-right: 60px;
}
	*::-ms-backdrop, .ie_box{
		width: 70%;
		margin: 0 15%;
	}
	
	*::-ms-backdrop, .function2 .wrap:after:after{
  		content: "."; 
  		display: block; 
  		height: 0; 
  		font-size:0;	
  		clear: both; 
  		visibility:hidden;
}
}