section{
	padding-bottom:40px;
}

div.cpi_box {
	padding:30px 0;
	max-width:650px;
	margin:0 auto;
	text-align:center;

	background:url(../img/img05_back.png) right 80px no-repeat;
	background-size:100px;
}

div.cpi_box02 {
	margin:0 auto;
	text-align:center;
	padding:30px 0 ;
}
div.cpi_box02 img{
	vertical-align:bottom;
}

/* X

[v
EM */

section#pro_sec{
	margin:0 auto;
	text-align:center;
	max-width:770px;
	padding: 0 10px;
}

div#pro_ny{
	text-align:left;
	padding:20px;
    background: #F9F9F9;
    border-radius: 20px;
    -o-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-bottom: 1px solid #F1F1F1;
}

div#pro_ny h1{
	font-size: 25px;
	font-weight:500;
}

div#pro_ny p{
	line-height: 1.5;
	font-size: 15px;
}

div#pro_ny div{
	padding-left:10px;
	border-left:1px solid #2BA6E0;
	margin:10px 0;
font-family: "century gothic", "Helvetica Neue", Helvetica, Arial,"q	Mm
pS Pro W3", "Hiragino Kaku Gothic Pro", "
C
I", Meiryo, Osaka, "lr oSVbN", "MS PGothic", sans-serif;
}

div#pro_ny a{
	color:#000;
}
div#pro_ny a:hover{
	text-decoration:underline;
}

div.ksen{
	background:#00B8EE;
	height:20px;
}

/* --lL: */

div#koe_ny{
	margin:0 auto;
	text-align:center;
	max-width:550px;
	background:url(../img/back02.png) center top repeat-y;
	padding:40px 10px;
}

div#koe_ny h1{
	font-size: 30px;
	font-weight:500;
	padding-bottom:30px;
}
div#koe_ny p{
	font-size: 16px;
    line-height: 1.5;
}

div#koe_ny p:last-child{
	padding-bottom:0;
}

div.koe_in{
	background:#fff;
	background-size:contain;
	padding:30px 0;
}

/* ---------------------------------------------
   itv

---------------------------------------------- */

svg {
	pointer-events: none;
	width:100%;
	max-height:300px;
	min-height: 300px;
}

/* Demo 1 */

/*
.demo-drawings figcaption {
	margin: 0 auto 0 auto;
	max-width: 400px;
	width: 95%;
	text-align: center;
}
*/

.demo-drawings figcaption {
    text-align: center;
}

.demo-drawings figcaption.ny_R,
.demo-drawings figcaption.ny_L {
	padding-top:110px;
	overflow:hidden;
	height:300px;
	background: url(../img/back07.png) ;
}
.demo-drawings figcaption.ny_R {
    margin: 0 auto;
}
.demo-drawings figcaption.ny_L {
    margin:0 auto;
}

.demo-drawings figcaption h2 {
	font-weight: 300;
	font-size: 35px;
		font-weight:500;

	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 10px;
}

.demo-drawings figcaption p {
    font-size: 25px;
    line-height: 1.5;}

.drawings {
	position: relative;
	max-height: 300px;
	min-height: 300px;
}

figcaption.ny_R p.itv_ny,
figcaption.ny_L p.itv_ny{
	padding:0 0 10px 0;
}
.itv_neme{
	border-left:1px solid #999;
	border-right:1px solid #999;
	padding:0 10px;
}

.itv_more {
	border-bottom:1px solid  #595757;
	border-top:1px solid  #595757;
	padding:3px 5px 5px 5px;
	font-family: "century gothic", "Helvetica Neue", Helvetica, Arial,"q	Mm
pS Pro W3", "Hiragino Kaku Gothic Pro", "
C
I", Meiryo, Osaka, "lr oSVbN", "MS PGothic", sans-serif;
	font-size:13px;
	line-height:1;
}

	.hitoback{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fafafa+0,ebebeb+100 */
background:; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background:-moz-linear-gradient(top,  #fafafa 0%, #ebebeb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* IE10+ */
background:linear-gradient(to bottom,  #fafafa 0%,#ebebeb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ebebeb',GradientType=0 ); /* IE6-8 */
	}

/*
figcaption.back01{
	background:url(../img/img01.png) 200px top no-repeat;
}

figcaption.back02{
background:url(../img/img02.png) -70px 0px no-repeat;
}
figcaption.back03{
	background:url(../img/img03.png) 200px top no-repeat;
}

figcaption.back04{
	background:url(../img/img04.png) -50px 50px no-repeat;
}
*/
.demo-drawings figure:first-child {
	padding-top:;
}

.wid550_L{
	float:left;
	width:55%;
background:-moz-linear-gradient(top,  #fafafa 0%, #ebebeb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* IE10+ */
background:linear-gradient(to bottom,  #fafafa 0%,#ebebeb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ebebeb',GradientType=0 ); /* IE6-8 */
}

.wid550_R{
	float:right;
	width:55%;
background:-moz-linear-gradient(top,  #fafafa 0%, #ebebeb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fafafa 0%,#ebebeb 100%); /* IE10+ */
background:linear-gradient(to bottom,  #fafafa 0%,#ebebeb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ebebeb',GradientType=0 ); /* IE6-8 */
}

.illustration {
	position: absolute;
	top: 50%;
	left: 50%;
	max-height: 100%;
	max-width: 100%;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.show {
	opacity: 1;
}

.hide {
	opacity: 0;
}

.line-drawing,
.illustration {
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.line-drawing path {
	fill: none;
	stroke: #00B8EE;
	stroke-width: 3;
}

path.line-round {
	stroke-linecap: round;
}

path.stroke-medium {
	stroke-width: 2;
}

path.stroke-thin {
	stroke-width: 1;
}

/* Demo 2 and demo 3 */
.demo-loading .show,
.demo-loading .hide {
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.codrops-logo {
	position: relative;
	margin: 0 auto 30px;
	width: 80px;
	height: 80px;
	background: url(../img/codrops_logo.png) no-repeat 50% 50%;
}

.demo-loading .headline {
	position: relative;
	color: #2173a3;
	text-align: center;
}

.demo-loading .headline div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #5ca9d6;
}

.demo-loading .headline h1 {
	margin: 0;
	padding: 3em 0;
	font-size: 3em;
	position: relative;
	z-index: 10;
}

.demo-loading .headline h1 span:last-child {
	display: block;
	font-weight: 300;
	font-size: 50%;
}

.demo-loading section {
	margin: 2em auto 8em;
	max-width: 700px;
	text-align: center;
}

.demo-loading section figure {
	position: relative;
	display: inline-block;
	margin: 0 15px 20px;
	width: 200px;
	text-align: left;
}

.demo-loading section figure img {
	display: block;
	margin: 0 auto 10px;
}

.demo-loading svg.line-drawing {
	position: absolute;
	max-width: 100%;
	z-index: 10;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.demo-loading svg.line-drawing path {
	fill: none;
	stroke-width: 2;
	stroke: #ddd;
}

.demo-loading svg.line-drawing path.darker {
	stroke: #aaa;
}

.demo-loading svg#rectangle {
	width: 100%;
	height: 100%;
}

.demo-loading svg#headline {
	top: 50%;
	margin-top: 2px;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.demo-loading svg#related{
	background:#2BA6E0;
	width: 100%;
	height: 100%;
	max-width: 490px;
}

/* Positions */
#logo {
	top: 39px;
}

#demo-link-1,
#demo-link-2,
#demo-link-3 {
	top: 148px;
}

#demo-link-1 {
	-webkit-transform: translateX(-130px);
	transform: translateX(-130px);
}

#demo-link-3 {
	-webkit-transform: translateX(48px);;
	transform: translateX(48px);;
}

@media screen and (max-width: 800px) {     
        div#pro_ny h1{
            font-size:20px;
        }

        div.ksen{
            height:10px;
        }
        /* --lL: */
        div#koe_ny{
            padding:30px 10px;
        }

            div#koe_ny h1{
                font-size: 25px;
                padding-bottom:20px;
            }
            div#koe_ny p{
                font-size: 14px;
            }

        /* sgv */
        .wid550_L,
        .wid550_R{
            float: none;
            width: 100%;
        }

        svg {
            height: auto;
        }

        .demo-drawings figcaption.ny_R,
        .demo-drawings figcaption.ny_L {
            padding:20px 10px;
            height:auto;
        }

        .demo-drawings figcaption.ny_R {
            margin: 0 auto 0 auto;
            max-width:;
        }

        .demo-drawings figcaption.ny_L {
            margin: 0 auto 0 auto;
            max-width: ;
        }

        .hitoback{
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fafafa+0,ebebeb+100 */
            background:none;
        }

        .demo-drawings figcaption h2{
            font-size: 25px;
        }

        figcaption.ny_R p.itv_ny,
        figcaption.ny_L p.itv_ny{
            width:100%;
            padding:10px;
            .demo-drawings .campaign {
	padding: 7em 0;
}

.campaign{
	background:#2BA6E0;
	text-align: center;
	font-weight: normal;
	font-size:30px;
	clear: both;
	position: relative;
}

.campaign p{
	font-weight: normal;
	font-size:30px;
}