@charset "UTF-8";


/*detail-box
------------------------------------------------------------*/
.detail-box { position: relative; width: 100%; max-width: 760px; background: #FFF; padding: 5rem 4.8rem; box-sizing: border-box; box-shadow: 0px 3px 10px 0px rgba(32,32,32,0.15); border-radius: 10px; counter-reset: item; z-index: 1; }
.detail-box > li { counter-increment: item; border-top: solid 1px #f1bece; padding: 2.428rem 0; }
.detail-box > li:last-of-type { border-bottom: solid 1px #f1bece; }
.detail-box > li .ttl { padding-left: 3.8rem; position: relative; color: #e03b6f; font-weight: 600; font-size: 1.428rem; }
.detail-box > li .ttl:before { white-space: pre-wrap; content: counter(item, decimal-leading-zero)' —'; position: absolute; left: 0; top: 0; }
.detail-box > li > div { margin-top: 2.857rem; }
.detail-box > li figure figcaption { display: block; text-align: center; color: #656b73; font-size: 0.928rem; margin-top: 0.5rem; }
.detail-box > li figure figcaption.pink { color: #e03b6f; font-size: 1.142rem; font-weight: 600; }
.detail-box > li figure figcaption.fig-top { margin-top: 0; margin-bottom: 1rem; }
.detail-box > li .list > li { position: relative; }
.detail-box > li .list { margin: 1.142rem 0 0 1.071rem; }
.detail-box > li .list > li { position: relative; padding-left: 1.071rem; font-size: 1.285rem; }
.detail-box > li .list > li + li { margin-top: 0.857rem; }
.detail-box > li .list > li:before { content: ""; position: absolute; top: 0.75rem; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #e03b6f; }
.detail-box > li > .img-box .two-item { text-align: center; }
.detail-box > li > .img-box .two-item img { max-width: 295px; }

@media screen and (min-width: 768px) {
	.detail-box > li > .img-box { display: flex; }
	.detail-box > li > .img-box .two-item { width: 49.5%; }
	.detail-box > li > .img-box .two-item + .two-item { margin-left: 1%; }
}

@media screen and (max-width: 767px) {
	.detail-box { padding: 3rem 2rem; }
	.detail-box > li > .img-box .two-item + .two-item { margin-top: 1rem; }
}

#microneedle .desc { max-width: 960px; margin: auto; font-size: 1.285rem; line-height: 2.142rem;}



/*lead
------------------------------------------------------------*/
#lead { background: url(/img/share_bg.png) left top 16rem / 50% no-repeat,url(/img/lead_bg.png) right top / 17% no-repeat; }
#lead .ttl-box { display: flex; }
#lead .ttl-box .ttl { width: 53%; margin-top: 7.142rem; }
#lead h2.ttl { font-size: 4.285rem; line-height: 6rem; font-weight: 600; color: #416fbb; }
#lead .ttl-box .img { width: 43.417%; height: 100%; margin-top: 3.142rem; margin-left: 3.583%; position: relative;}
#lead .ttl-box .img:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffe9f0; z-index: -1;}

@keyframes Leadimg { 0% { transform: translate(0,0); }to { opacity: 1; transform: translate(30px,20px); }}
#lead .ttl-box .img.animation:after { animation-duration: .5s; animation-fill-mode: both; opacity: 0.6; }
#lead .ttl-box .img.animation.animated:after { animation-delay: .5s; animation-name: Leadimg; transition: .7s ease-out; }


#lead .lead-box { margin: 4.285rem auto 0; max-width: 960px; }
#lead .lead-box dl { margin-top: 4.285rem; display: table; width: 100%; }
#lead .lead-box dl dt { display: table-cell; vertical-align: middle; width: 45%; }
#lead .lead-box dl dd { display: table-cell; vertical-align: middle; width: 55%; padding-left: 10%; }
#microneedle #lead .txt .desc strong { color: #416fbb; font-weight: 600; font-size: 2.142rem;}


#microneedle #lead .txt .desc { text-align: justify; text-justify: inter-ideograph; }
#microneedle #lead .txt .desc + .desc { margin-top: 1rem; }

@media screen and (max-width: 1080px) {
	#lead .ttl-box .ttl { margin-top: 3.142rem;}
	#lead .ttl-box .img { margin-top: 3.142rem;}
}

@media screen and (max-width: 767px) {
	#lead { background: url(/img/share_bg.png) left top 13rem / 50% no-repeat,url(/img/lead_bg.png) right top / 17% no-repeat; }
	#lead h2.ttl { font-size: 3.285rem; line-height: 4rem;}
	#microneedle #lead .txt .desc strong { font-size: 1.8rem;}
}


/*features
------------------------------------------------------------*/
#features{ margin-top: 7.142rem;}
#features .wide-container { padding: 7.142rem 0; background: url(/img/network_bg.png) center bottom / 100% no-repeat #eff1f5;}
#features .lead {margin-top: 4.285rem;}
#features .detail {margin-top: 4.285rem; position: relative; display: flex; justify-content: flex-end;}
#features .detail-box { margin-top: 5.714rem;}
#features .detail .img { position: absolute; top:0; left: 0; width: 50%; z-index: 0;}

@media screen and (max-width: 1000px) {
	#features .detail { justify-content: center;}
	#features .detail .img { left: -15px;}
}

@media screen and (max-width: 767px) {
	#features .detail { margin-top: 2.285rem;}
}

/*study
------------------------------------------------------------*/
#study{ margin-top: 7.142rem;}
#study .wide-container{ margin-top: 4.285rem; padding-bottom: 7.142rem;}
#study .wide-container:after { content: ""; position: absolute; top: 10%; left: 0; width: 100%; height: 90%; background: #fff6f9; z-index: -1;}
#study .detail-box { max-width: inherit;}
#study .detail-box + .detail-box { margin-top: 4.285rem;}
#study .detail-box:last-of-type{ margin-bottom: 4.285rem; }
#study .detail-box > li { border: none; padding: 0; text-align: center;}
#study .detail-box > li .ttl { display: inline-block; padding-left: 0;}
#study .detail-box:nth-of-type(1) > li .ttl:before { content: '1 — '; position: inherit;}
#study .detail-box:nth-of-type(2) > li .ttl:before { content: '2 — '; position: inherit;}
#study .detail-box a { display: block; width: 100%; height: 100%; position: relative;}
#study .detail-box a:before { content: ""; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; width: 100px; height: 100px; background: url(/img/enlarge_icon.png) center / 40% no-repeat rgba(255, 224, 234,.5); border-radius: 100%; opacity: 0; transition: .5s; z-index: 1; }
#study .detail-box a:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0; transition: .3s; z-index: 0; }
#study .detail-box a:hover:before { opacity: 1; }
#study .detail-box a:hover:after { opacity: .35; }
#study i.icon01 { display: inline-block; width: 0.8em; height: 1em; background: url(/img/microneedle/icon_01.png) center top 40% / 100% no-repeat; vertical-align: middle; margin: 0 0.1em; }
#study i.icon02 { display: inline-block; width: 0.8em; height: 1em; background: url(/img/microneedle/icon_02.png) center top 20% / 100% no-repeat; vertical-align: middle; margin: 0 0.1em; }
#study i.icon03 { display: inline-block; width: 0.8em; height: 1em; background: url(/img/microneedle/icon_03.png) center bottom / 100% no-repeat; vertical-align: baseline; margin: 0 0.1em; }
.graph-list { display: flex; justify-content: center; flex-wrap: wrap; }
.graph-1 .graph-list li { width: 32%; }
.graph-1 .graph-list li + li { margin-left: 2%; }
.graph-2 .graph-list li { width: 38%; }
.graph-2 .graph-list li + li { margin-left: 8.4%; }
.desc { text-align: left; }
.inline-contents { padding: 10px; }

@media screen and (max-width: 767px){
#study .detail-box:nth-of-type(1) > li .ttl:before { content: '1'; display: block; margin-bottom: 5px;}
#study .detail-box:nth-of-type(2) > li .ttl:before { content: '2'; display: block; margin-bottom: 5px;}

#graph1.graph-1 .graph-list li { width: 100%;}
#graph1.graph-1 .graph-list li + li { margin-left: 0; margin-top: 1rem;}
#graph2.graph-2 .graph-list li { width: 100%;}
#graph2.graph-2 .graph-list li + li { margin-left: 0; margin-top: 1rem;}
}

/*link-block
------------------------------------------------------------*/
/*link-block
------------------------------------------------------------*/
#link-block{margin:7.142rem 0;}
#link-block ul{display:flex; align-items:center;}
#link-block ul li{width:50%; height:300px; transition:.3s;}
#link-block ul li:hover{opacity:.9;}
#link-block ul li a{width:100%; height:100%; display:flex; align-items:center;}
#link-block ul li.zelostat { background: url(/img/zelostatneedle/link_zelostat_img.png) center right 10% / 30% no-repeat,url(/img/quatron/link_microneedle.jpg) center / cover no-repeat;}
#link-block ul li.quatron { background: url(/img/microneedle/link_quatron_img.png) center right 10% / 30% no-repeat,url(/img/quatron/link_microneedle.jpg) center / cover no-repeat;}
#link-block ul li.microneedle{background:url(/img/quatron/link_microneedle_img.png) center right 5% / 45% no-repeat ,url(/img/quatron/link_microneedle.jpg) center / cover no-repeat;}
#link-block ul li.contact{background:url(/img/quatron/link_contact.jpg) center / cover no-repeat;}
#link-block ul li .ttl{width:50%; padding-left:10%; box-sizing:border-box; font-size:3rem; line-height:3.571rem; font-weight:600; color:#fff;}
#link-block ul li.quatron .ttl{ max-width:240px;}
#link-block ul li.zelostat .ttl{ max-width:282px;}
#link-block ul li.contact .ttl{width:100%;}

@media screen and (max-width:1000px) and (min-width:768px){
	#link-block ul li{height:200px;}
}
@media screen and (max-width:767px){
	#link-block{margin:7.142rem auto; width:90.9090%;}
	#link-block ul{display:block;}
	#link-block ul li{width:100%; height:120px;}
	#link-block ul li + li{margin-top:5px;}
	#link-block ul li.microneedle{background-position:center right;}
	#link-block ul li .ttl{font-size:1.714rem; line-height:2rem; padding-left:7%;}
	#link-block ul li.quatron .ttl { max-width: inherit; height: 45%;}
	#link-block ul li.quatron .ttl img { width: auto; height: 100%; max-width: inherit;}
	#link-block ul li.zelostat .ttl { max-width: inherit; height: 55%;}
	#link-block ul li.zelostat .ttl img { width: auto; height: 100%; max-width: inherit;}
}