/* CSS Document */



#biito2 #cool-hero{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1d1b1c+0,333234+36,333234+36,333234+65,1d1b1c+99 */
	background: #1d1b1c; /* Old browsers */
	background: -moz-linear-gradient(left,  #1d1b1c 0%, #333234 36%, #333234 36%, #333234 65%, #1d1b1c 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1d1b1c 0%,#333234 36%,#333234 36%,#333234 65%,#1d1b1c 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1d1b1c 0%,#333234 36%,#333234 36%,#333234 65%,#1d1b1c 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1b1c', endColorstr='#1d1b1c',GradientType=1 ); /* IE6-9 */
}

#biito2 #cool-hero .inner{
	width: 90%;
	max-width: 1000px;
	margin: auto;
	padding: 120px 0 80px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	/*flex-direction:row-reverse;*/
	color: #fff;
}

#biito2 #cool-hero .inner dl{
	width: 45%;
	font-style: italic;
}

#biito2 #cool-hero .inner dt{
	font-size: 30px;
	margin-bottom: 40px;
}

#biito2 #cool-hero .inner dd{
	font-size: 43px;
	font-weight: bold;
}



#biito2 #cool-hero .inner .image{
	width: 52%;
	display: flex;
	flex-wrap: wrap;
	justify-content: right;
	align-items: center;
}

#biito2 #cool-hero .inner .image .item{
	width: 70%;
}

#biito2 #cool-hero .inner .image p{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 30px;
 }

#biito2 #cool-hero .inner .image p sup{
	font-size: 12px;
	vertical-align: top;
}

#biito2 #cool-hero .inner .image p span{
	font-size: 10px;
	writing-mode:horizontal-tb;
	margin-top: 50px;
}


#biito2 #image{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: right;
	color: #fff;
}

#biito2 #image p img{
	object-fit: cover;
	height: 705px;
}

#biito2 #image dl{
	width: 48%;
	position: absolute;
	margint-right: 5%;
	text-align: left;
}

#biito2 #image dd{
	font-size: 20px;
}

#biito2 #image dd p{
	font-size: 25px;
	color: #E48451;
	margin: 10px auto 25px;
}

#biito2 #image dd span{
	font-size: 16px;
}


#biito2.cool #about{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c5d5e1+0,ffffff+69,ffffff+69 */
	background: #c5d5e1; /* Old browsers */
	background: -moz-linear-gradient(top,  #c5d5e1 0%, #ffffff 69%, #ffffff 69%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #c5d5e1 0%,#ffffff 69%,#ffffff 69%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #c5d5e1 0%,#ffffff 69%,#ffffff 69%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5d5e1', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	padding: 85px 0;

}


#biito2.cool #about .border{
	display: flex;
	justify-content: center;
	border: 1px solid #000;
	max-width: 1000px;
	padding: 50px 0;
	box-sizing: border-box;
	margin: auto;
}

#biito2.cool #about .border p{
	width: 40%;
}

#biito2.cool #feature .intro {
	margin-top: 60px;
}

#biito2.cool #feature .intro p{
	text-align: left;
	max-width: 850px;
	margin: auto;
}

#biito2.cool #feature .inner{
	margin-top: 60px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

#biito2.cool #feature .inner .ttl{
	background: #9E776A;
	font-size: 23px;
	color: #fff;
	margin-bottom: 30px;
	width: 100%;
	padding: 5px 0;
	font-weight: bold;
}

#biito2.cool #feature .inner .box{
	width: 32%;
}

#biito2.cool #feature .inner .box p span{
	background: #000;
	display: block;
	color: #fff;
	margin: 15px auto 10px;
	font-size: 20px;
	font-weight: bold;
}

#biito2.cool #feature .inner .text{
	width: 50%;
	text-align: left;
}

#biito2.cool #feature .inner .image{
	width: 46%;
}




#biito2 #point{
	background: #F1EBE9;
	padding: 85px 0;
	margin: 85px auto 0;
	counter-reset: number;
}


#biito2 #point .w1000{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

#biito2 #point .w1000 .box{
	width: 48%;
	background: #fff;
	margin-bottom: 4%;
	padding: 50px 0;
	box-sizing: border-box;
}

#biito2 #point .w1000 .box dl{
	width: 90%;
	max-width: 395px;
	margin: auto;
	counter-increment: number;
}

#biito2 #point .w1000 .box dl:before{
	content: "POINT " counter(number , decimal-leading-zero);
	display: block;
	border-bottom: 1px dotted #000;
	padding-bottom: 5px;
	margin-bottom: 15px;
	font-size: 40px;
	font-weight: 100;
}

#biito2 #point .w1000 .box dt{
	font-size: 23px;
	font-weight: bold;
}

#biito2 #point .w1000 .box dd{
	margin-top: 15px;
	text-align: left;
}

#biito2 #point .w1000 .box dd img{
	margin-top: 35px;
}




#biito2 #howto{
	background: #F1EBE9;
	padding: 85px 0;
}















@media only screen and (max-width:768px) { 
/*	#biito2 .w1000 {
		width: 90%;
	  padding: 45px 0;
	}
	#biito2 h2 {
	  font-size: 21px;
	 }
	#biito2 h3 {
	  font-size: 60px;
	}
	 .series ul li {
	  width: 32%;
	}*/
	#biito2 #cool-hero .inner dd {
	  font-size: 32px;
	}
	#biito2 #cool-hero .inner .image p {

	  font-size: 22px;
	}
/*	#biito2 #intro{
		width: 90%;
	}*/
	#biito2 #image p img {
	  height: 440px;
	  object-position: 45%;
	}
	#biito2 #image dl{
		margin-right: 2%;
	}
	#biito2 #image dd {
	  font-size: 16px;
	}
	#biito2 #image dd p {
	  font-size: 20px;
	  margin: 10px auto 15px;
	}
/*	#biito2.cool #about .block{
		padding: 85px 0 0;
	}
	#biito2.cool #about .block .box {
	  width: 100%;
	  max-width: 499px;
	  margin: 0 auto 50px;
	}
	#biito2.cool #about .block .text{
	  width: 100%;
	  max-width: 499px;
	  margin: 0 auto;
	}
	#biito2.cool #about .border{
		width: 90%;
	  max-width: 499px;
		margin: 50px auto;
	}
	#biito2.cool #about .border p {
	  width: 47%;
	}*/
	#biito2.cool #feature .intro{
		margin: 60px auto;
	}
	#biito2.cool #feature .inner .ttl {
	  font-size: 20px;
	}
	#biito2.cool #feature .inner .box p{
	  font-size: 15px;
	}
	#biito2.cool #feature .inner .box p span {
	  font-size: 17px;
	}
	#biito2 #point {
	  padding: 60px 0;
	}
	#biito2 #point .w1000{
		width: 90%;
	}
	#biito2 #point .w1000 .box {
	  padding: 30px 0;
	}
	#biito2 #point .w1000 .box dl::before {
	  font-size: 34px;
	}
	#biito2 #point .w1000 .box dt {
	  font-size: 20px;
	}
	#biito2 #point .w1000 .box dd img {
	  margin-top: 10px;
	}
	#biito2 #voice{

	}
}




@media only screen and (max-width:640px) { 
/*	.series ul li dt span img {
	  max-height: 185px;
	}
	.series ul li p a{
		font-size: 12px;
		padding: 7px 0;
	}
	.series ul li p a::after {
	  content: "";
	  width: 6px;
	  height: 6px;
	}
	#biito2 h2 {
	  font-size: 20px;
	}
	#biito2 h3 {
	  font-size: 50px;
	}*/
	#biito2 #cool-hero .inner{
		padding: 80px 0;
	}
	#biito2 #cool-hero .inner dl {
	  width: 100%;
	  margin-bottom: 30px;
	}
	#biito2 #cool-hero .inner dt {
	  font-size: 28px;
	  margin-bottom: 5px;
	}
	#biito2 #cool-hero .inner dd {
	  font-size: 25px;
	}
	#biito2 #cool-hero .inner .image {
	  width: 60%;
	  margin: auto;
	}
	#biito2 #cool-hero .inner .image p:last-child{
		width: 100%;
	}

	#biito2 #cool-hero .inner .image p span{
		margin-top: 20px;
	}
	#biito2 #image{
		position: static;
		display: block;
	}
	#biito2 #image p img {
	  height: 300px;
	  object-position: 16%;
	}
	#biito2 #image dl{
		width: 100%;
		position: static;
		background: #0E0914;
		padding: 20px;
		box-sizing: border-box;
	}
/*	#biito2.cool #about{
		padding: 50px 0;
	}
	#biito2.cool #about .block {
	  padding: 45px 0 0;
	}
	#biito2.cool #about .block .box {
	  margin: 0 auto 30px;
	}
	#biito2.cool #about .block .text dl dt {
	  font-size: 22px;
	}
*/	#biito2.cool #feature .intro {
	  margin: 30px auto;
	}
	#biito2.cool #feature .inner .box {
	  width: 100%;
	  width: 310px;
	  margin-bottom: 50px;
	}
	#biito2.cool #feature .inner .ttl{
		margin-bottom: 15px;
	}
	#biito2.cool #feature .inner .text {
	  width: 100%;
	  margin-bottom: 30px;
	}
	#biito2.cool #feature .inner .image {
	  width: 100%;
	}
	#biito2 #point .w1000 .box {
	  width: 100%;
	}

/*	#biito2 #voice ol li {
	  width: 100%;
	}
	#biito2 #howto .inner{
		margin-top: 0;
	}
	#biito2 #howto .inner .ttl {
	  font-size: 18px;
	}
	#biito2 #howto .inner .box {
	  width: 48%;
	}
	#biito2 #howto .inner .box p:nth-of-type(1) {
	  margin-top: 10px;
	}
	#faq {
	  margin: 60px auto;
	}
	#faq .inner dl {
	  width: 100%;
	}
	#faq .inner dt{
		line-height: 1.6;
		font-size: 15px;
	}
	#faq .inner dt::before {
	  font-size: 45px;
	  margin: 0 15px 7px 0;
	}
	#spec .inner {
	  margin: 70px auto 50px;
	}
	#spec .inner .image {
	  width: 40%;
	  margin: 0 auto 30px;
	}
	#spec .inner dl {
	  width: 100%;
	}*/



}