@charset "UTF-8";
/* CSS Document */

.cc-applicator .inner{
	width:840px;
}

/* メインビジュアル
-----------------------------------------------------------------*/
.cc-applicator .mainimg01 {
    position: relative;
    height: 240px;
    padding: 0;
    border: none;
	margin-bottom: 80px;
	background-color: #e6e9f0;
	overflow: hidden;
}
.cc-applicator .mainimg01 .ttl img{
    margin-left: -700px;
    max-width: 1400px;
    position: absolute;
    left: 50%;
}

/* タイトル
-----------------------------------------------------------------*/
.cc-applicator .ttl-02{
	text-align: center;
	margin-bottom: 30px;
}
.cc-applicator .ttl-03{
	font-size: 142%;
	font-weight: normal;
	color: #000;
	margin-bottom: 80px;
}



/* リスト
-----------------------------------------------------------------*/
/*ご使用の前に*/
.cc-applicator .list-01{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 65px;
}
.cc-applicator .list-01 li{
	width: 375px;
}
.cc-applicator .list-01 li .photo{
	width: 189px;
	margin: 0 auto 10px;
}
.cc-applicator .list-01 li .text{
	color: #555;
}

/*使い方*/
.cc-applicator .list-02{
	margin-bottom: 40px;
}
.cc-applicator .list-02 li{
	position: relative;
	min-height: 162px;
	margin-bottom: 40px;
}
.cc-applicator .list-02 li .photo{
	width: 189px;
	position: absolute;
	top: 0;
	left: 0;
}
.cc-applicator .list-02 li .text{
	color:#555;
}
.cc-applicator .list-02 li .ttl-step{
	margin-bottom: 15px;
}
.cc-applicator .list-02 li .ttl-step,
.cc-applicator .list-02 li .text,
.cc-applicator .list-02 li .chuui,
.cc-applicator .list-02 li .attn{
	margin-left: 219px;
}
.cc-applicator .list-02 li .attn{
	font-weight: bold;
}
.cc-applicator .list-02 li .text{
	margin-bottom:1em;
}
.cc-applicator .list-02 li .attn .attn-text{
	background: linear-gradient(to bottom, transparent, transparent 50%, #fcd8d7 50%, #fcd8d7 100%);
}

/*臨床試験データ*/
.cc-applicator .list-03{
	display: flex;
	flex-wrap:wrap;
	margin-right: -4%;
}
.cc-applicator .list-03 li{
	width: 46%;
	margin-right: 4%;
	margin-bottom: 50px;
}
.cc-applicator .wrap-01 .list-03 li .photo{
	width: 90%;
	margin: 0 auto;
}
.cc-applicator .wrap-03 .photo-02{
	width: 342px;
	margin: 0 auto 30px;
}

/* section_02
-----------------------------------------------------------------*/
.cc-applicator .section_02_bg{
	background: linear-gradient(#fff8f8, #feebeb);
	padding-top: 90px;
	padding-bottom: 130px;
	margin-bottom: 120px;
}
.cc-applicator .section_02{
	width: 756px;
	margin: 0 auto;
}
.cc-applicator .section_02 .bg-box-01{
	margin-bottom: 10px;
}
.cc-applicator .section_02 .bg-box-01 .cnt-bg-box-01{
	text-align: center;
	padding: 50px 40px 40px;
}
.cc-applicator .section_02 .bg-box-01 .btn-01{
	width: 408px;
	margin: 30px auto 0;
}
.cc-applicator .section_02 .bg-box-01 .btn-01 a{
	font-size: 1.286em;
}

/* section_03
-----------------------------------------------------------------*/
.cc-applicator .section_03 .ttl-01{
	color: #555;
	background: url(/~/Media/com/flady/fladycc/cc-applicator/200319/sec03-ttl-eng.png) no-repeat;
	background-position: center bottom;
	padding-bottom: 38px;
	margin-bottom: 8px;
}
.cc-applicator .section_03 .ttl-01 .cnt-ttl-bg-01{
	padding-top: 10px;
	padding-bottom: 10px;
}
.cc-applicator .section_03 .txt-lead{
	text-align: center;
	font-size: 1.286em;
	margin-bottom: 46px;
}
.cc-applicator .section_03 .txt-lead .txt-01{
	margin-bottom: 40px;
}
.cc-applicator .section_03 .bg-box-01{
	margin-bottom: 20px;
}
.cc-applicator .section_03 .source{
	text-align: right;
	color:#999;
	font-size: 0.714em;
	line-height: 1.5em;
}
.cc-applicator .section_03 .wrap-03.bg-box-01 .cnt-bg-box-01{
	padding-bottom:20px;
}
.cc-applicator .section_03 .wrap-04{
	margin-top: 40px;
	margin-bottom: 120px;
}
.cc-applicator .section_03 .wrap-04 .data dd{
	margin-bottom: 40px;
}
.cc-applicator .section_03 .wrap-04 .data .cnt-01{
	display:flex;
	justify-content: space-between;
}
.cc-applicator .section_03 .wrap-04 .data .cnt-01 .text{
	width: 450px;
}
.cc-applicator .section_03 .wrap-04 .data .cnt-01 .photo{
	width: 302px;
}

/****************************** BREAK POINT *******************************
タブレット Layout
******************************* BREAK POINT ******************************/
@media screen and (max-width: 768px) {
	
	#wrapper .cc-applicator{
		font-size: 3.92vw;
		line-height: 1.75em;
	}
	.cc-applicator .inner{
		width: 90%;
	}
	
/* メインビジュアル
-----------------------------------------------------------------*/
	.cc-applicator .mainimg01 {
		position: static;
		height: auto;
	}
	.cc-applicator .mainimg01 .ttl img{
		margin-left: 0;
		max-width: 100%;
		position: static;
		left: 0;
	}

/* タイトル
-----------------------------------------------------------------*/
	.cc-applicator .mainimg01{
		margin-bottom: 10%;
	}
	.cc-applicator .ttl-02{
		margin-bottom: 6%;
	}
	.cc-applicator .ttl-03{
		margin-bottom: 9%;
		font-size: 4.5vw;
	}
	.cc-applicator .ttl-03 .cnt-ttl-03{
		padding-left: 12%;
		padding-right: 12%;	
	}
	.cc-applicator .ttl-03::after,
	.cc-applicator .ttl-03::before{
		width: 7.8%;
		height: 15vw;
	}
	
/* リスト
-----------------------------------------------------------------*/
	.cc-applicator .list-01{
		display: block;
		margin-bottom: 10%;
	}
	.cc-applicator .list-01 li{
		width:100%;
		margin-bottom: 9%;
	}
	.cc-applicator .list-01 li .photo{
		width: 59%;
		margin-top: 3.4%;
	}
	
	.cc-applicator .list-03{
		display: block;
		margin-right: 0;
	}
	.cc-applicator .list-03 li{
		width:100%;
		margin-right: 0;
		margin-bottom: 10%;
	}
	.cc-applicator .wrap-01 .list-03 li .photo{
		width: 100%;
	}
	.cc-applicator .wrap-03 .photo-02{
		width: 100%;
		margin-bottom: 5.8%;
	}
	.cc-applicator .section_03 .wrap-04{
		margin-bottom: 30%;
		margin-top: 10%;
	}
	.cc-applicator .section_03 .wrap-04 .data .cnt-01 .text{
		margin-bottom: 7.8%;
	}
	.cc-applicator .section_03 .wrap-04 .data .cnt-01 .photo{
		width: 73%;
		margin: 0 auto;
		min-width: 288px;
		max-width: 564px;
	}
	
	
/* section_02
-----------------------------------------------------------------*/
	.cc-applicator .section_02_bg{
		padding-top: 13%;
		padding-bottom: 15.6%;
		margin-bottom: 15.6%;
	}
	.cc-applicator .list-02 li .ttl-step,
	.cc-applicator .list-02 li .text,
	.cc-applicator .list-02 li .chuui,
	.cc-applicator .list-02 li .attn{
		margin-left: 0;
	}
	.cc-applicator .list-02 li .photo{
		width:59%;
		position: static;
		margin: 0 auto 3.4%;
	}
	.cc-applicator .list-02 li .ttl-step{
		margin-bottom:2%;
	}
	.cc-applicator .list-02 li.use-1 .photo-02{
		margin-bottom: 9%;
	}
	.cc-applicator .section_02 .bg-box-01 .cnt-bg-box-01{
		padding: 11% 5.7% 7%;
	}
	.cc-applicator .section_02 .bg-box-01{
		margin-bottom: 4.5%;
	}
	.cc-applicator .section_02 .btn-01{
		margin-bottom:7.8%;
	}

/* section_03
-----------------------------------------------------------------*/
	.cc-applicator .section_03 .ttl-01{
		background-size: 53%;
		padding-bottom: 0;
		padding-top: 6%;
		background-position: top right 10%;
		margin-bottom: 10%;
	}
	.cc-applicator .section_03 .ttl-01 .cnt-ttl-bg-01{
		padding-top: 5.125%;
		padding-bottom: 5.125%;
	}
	.cc-applicator .section_03 .txt-lead{
		text-align: left;
		margin-bottom: 15.6%;
		font-size: 3.7vw;
	}
	.cc-applicator .section_03 .txt-lead .txt-01{
		margin-bottom: 1.5em;
	}
	.cc-applicator .section_03 .txt-lead .txt-02{
		width: 87.6%;
		min-width: 288px;
	}
	.cc-applicator .section_03 .wrap-04 .data .cnt-01{
		display: block;
	}
	.cc-applicator .section_03 .wrap-04 .data .cnt-01 .text,
	.cc-applicator .section_03 .wrap-04 .data .cnt-01 .photo{
		width:100%;
	}
}



/****************************** BREAK POINT *******************************
SP Layout
******************************* BREAK POINT ******************************/
@media screen and (max-width: 480px) {

}