@charset "UTF-8";
/* CSS Document */
#contents sup {
	font-size: 70%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}
.nowrap {
  white-space: nowrap;
}
div.wap{
  position:relative;
  max-width:100%;
  margin:0 auto;
  padding:0;
}
div.wap div.main{
  margin:0 auto 40px;
  padding:0;
  max-width:100%;
}
div.wap div.main img{
  vertical-align: bottom;
  max-width:100%;
}

div.wap div.main img.pc_only{display:inline-block;}
div.wap div.main img.sp_only{display:none;}

div.wap div.main div.read{
  position:relative;
  z-index:1;
  padding:60px 50px;
}
div.wap div.main div.read p{
  font-size:16px;
  line-height:1.8;
  margin:0;
  padding:0;
}
div.wap div.main div.read p + p{margin-top:1em;}

div.wap div.main div.area.which-use {
	position: relative;
	z-index: 1;
    padding: 75px 40px;
	background: #f3e8ec;
}
div.wap div.main div.area.which-use::before{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  content:"";
  display:inline-block;
  width:100%;
  height:15px;
  background:url(../img/movie/bk.png) center/cover no-repeat;
  z-index:-10;
}
div.wap div.main div.area.which-use h2 {
	z-index: 1;
    font-size: 18px;
}
div.wap div.main div.area.which-use p {
	font-size: 16px;
}
div.wap div.main div.read .sp_only{display:none;}
div.wap div.main div.read .pc_only img{
  display:inline-block;
  max-width:200px;
  vertical-align: bottom;
}
div.wap div.main div.read .pc_only{
  position:relative;
  float:right;
  margin-left:50px;
}
div.wap div.main div.read div::before{
  position:absolute;
  content:"";
  left:-25px;
  bottom:-15px;
  display:inline-block;
  width:100%;
  height:100%;
  background:#780032;
  z-index:-1;
}


div.area h2{
  font-size:18px;
  line-height:1;
  font-weight:600;
  margin:0;
  padding:0 0 10px;
  border-bottom:1px solid #780032;
}
div.area h2 + p{margin-top:0.5em;}


div.area{
  max-width:100%;
  padding:0 40px;
  margin:0 auto;
}
div.area p{
  font-size:16px;
  line-height:1.8;
  margin:0;
  padding:0;
}

div.area + div.area{margin-top:80px;}

div.area .img-title {
  display: flex;
  align-items: center;
  gap: 20px;
  width: fit-content;
  padding: 10px;
  margin-top: 30px;
  background: #790031;
}
div.area .img-title > p {
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
  font-weight: bold;
}
div.area > div.flex.btn{
  display:flex;
  justify-content:space-between;
  margin:20px auto 0;
  padding:0;
}
div.area > div.flex.btn a{
  position:relative;
  display:block;
  flex:49%;
  max-width:49%;
  text-decoration:none;
  font-size:18px;
  font-weight:600;
  padding:15px;
  border:1px solid #790031;
  transition:0.3s ease;
  background: #fff;
}

div.area > div.flex.btn a::before{
  position: absolute;
  content: "";
  display: inline-block;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -7.5px;
}
div.area > div.flex.btn a.is-noarrow{
  text-align: center;
  font-weight: normal;
  &::before {
    display: none !important;
  }
}

div.area > div.flex.btn a:hover{
  color:#fff;
  background:#790031;
}

div.area > div.flex.btn a:hover::before{
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

/*クロノポンプ*/
div.area > div.flex.btn a.chrono {
  max-width:100%;
}

/*クエスチョンエリア*/
div.area div.box.faq{
  max-width:100%;
  margin:15px auto 0;
  padding:0;
}

div.area div.box.faq > div.title{
  position:relative;
  cursor:pointer;
  background:#9a4064;
}

div.box.faq > div.title h3{
display:inline-block;
color:#fff;
font-size:16px;
line-height:1.4;
padding:10px 50px 10px 25px;
margin:0;
}
div.box.faq > div.title .accordion_icon,
div.box.faq > div.title .accordion_icon span {
display: inline-block;
transition: .3s ease;
box-sizing: border-box;

}
div.box.faq > div.title .accordion_icon {
position: absolute;
right: 10px;
top: 50%;
width: 28px;
height: 28px;
margin:0 0 0 auto;
padding: 0;
transform:translate(0,-50%);
}
div.box.faq > div.title .accordion_icon span {
position: absolute;
left: 25%;
width: 50%;
height: 2px;
background: #fff;
}
div.box.faq > div.title .accordion_icon span:nth-of-type(1) {
top: 12px;
transform: rotate(0);
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0)
}
div.box.faq > div.title .accordion_icon span:nth-of-type(2) {
top: 12px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg)
}
div.box.faq > div.title .accordion_icon.active span:nth-of-type(1) {display: none;}
div.box.faq > div.title .accordion_icon.active span:nth-of-type(2) {
top: 12px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg)
}

.mt80 {margin-top: 80px}
#contents br.br{display:inline;}
#contents br.br480{display:none;}

/*アンサーエリア*/
div.box.faq > div.detail{
display:none;
padding:15px 20px;
background:#edeff1;
}
div.box.faq > div.detail p{
font-size:16px;
line-height:1.8;
padding:0;
margin:0;
}
div.box.faq > div.detail p strong{font-weight:600;}


div.wap > a.more,
div.wap > a.back{
  position:relative;
  display:block;
  max-width:49%;
  text-decoration:none;
  color:#790031;
  font-size:18px;
  line-height:1.4;
  font-weight:500;
  padding:15px;
  margin:40px auto 0;
  border:1px solid #790031;
  transition:0.3s ease;
}
div.wap > a.back{
  color:#111;
  text-align:center;
}
div.wap > a.back + a.more{margin-top:20px;}
div.wap > a.more::before{
  position: absolute;
  content: "";
  display: inline-block;
  top: 50%;
  right: 16px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #790031;
  border-right: 1px solid #790031;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -7.5px;
}

div.wap > a.more:hover,
div.wap > a.back:hover{
  color:#fff;
  background:#790031;
}
div.wap > a.more:hover::before{
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

/*下層*/
#contents div.wap.needle h1 {
  position:relative;
  border-left: 15px solid #790031;
  border-bottom:none;
  color: #111;
  letter-spacing: 3px;
  padding: 50px 0 25px 35px;
  font-size: 34px;
  line-height: 40px;
  text-align: left;
  background:none;
}
#contents div.wap.needle h1::before{
  position:absolute;
  content:"";
  top:0;
  left:0;
  display:inline-block;
  width:100%;
  height:25px;
  background:url(../img/movie/title_bk.png) left top/100% no-repeat;
}
#contents div.wap.needle h1.img_title {
  padding: 0;
  border-left: none;
}
#contents div.wap.needle h1.img_title span.subtitle {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: #790031;
  font-size: 26px;
  color: #fff;
  padding: 10px 20px;
}
#contents div.wap.needle h1.img_title span.subtitle img {
  height: 30px;
}
#contents div.wap.needle h1.img_title span.title {
  display: block;
  line-height: 1.4;
  padding: 14px 20px;
}
#contents div.wap.needle h1.img_title::before {
  content: none;
}
div.wap.needle div.area h2{
  position:relative;
  font-size:18px;
  line-height:1;
  font-weight:600;
  margin:40px auto 0;
  padding:0 0 0 50px;
  border-bottom:none;
}

div.wap.needle div.area h2::before{
  position:absolute;
  left:0;
  top:50%;
  transform:translate(0,-50%);
  display:inline-block;
  content:"";
  width:40px;
  height:28px;
  background:url(../img/movie/num01.svg) left top/40px no-repeat;
}
div.wap.needle div.area h2:not([class]){  padding:0;}
div.wap.needle div.area h2:not([class])::before{content: none;}
div.wap.needle div.area h2.num01::before{background:url(../img/movie/num01.svg) left top/40px no-repeat;}
div.wap.needle div.area h2.num02::before{background:url(../img/movie/num02.svg) left top/40px no-repeat;}
div.wap.needle div.area h2.num03::before{background:url(../img/movie/num03.svg) left top/40px no-repeat;}
div.wap.needle div.area h2.num04::before{background:url(../img/movie/num04.svg) left top/40px no-repeat;}
div.wap.needle div.area h2.num05::before{background:url(../img/movie/num05.svg) left top/40px no-repeat;}
div.wap.needle div.area h2.num06::before{background:url(../img/movie/num06.svg) left top/40px no-repeat;}

div.wap.needle div.area h2 + div.flex{margin-top:15px;}

div.flex.mov{
  display:flex;
  justify-content:space-between;
  margin:0 auto;
  padding:0;
}
div.flex.mov + div.flex.mov{margin-top:20px;}
div.flex.mov > div{
  flex:50%;
  max-width:50%;
  box-sizing:border-box;
}
div.flex.mov > div:last-child{
  position:relative;
  padding:15px;
  border:1px solid #780032;
  overflow:hidden;
}

div.flex.mov > div:last-child::before{
  position: absolute;
  content:"";
  right: -24px;
  bottom: -24px;
  width: 40px;
  height: 40px;
  display: block;
  transform: rotate(135deg);
  background:#ccc;
  z-index: 0;
  box-sizing: border-box;
}

div.flex.mov > div p{
  letter-spacing: 0;
  font-size:16px;
  line-height:1.6;
}
div.flex.mov > div p + p{margin-top:0.5em;}
div.flex.mov > div strong{
  line-height:1.4;
  font-weight:600;
  display:block;
}

div.flex.mov > div p span.step{
  position:relative;
  display:inline-block;
  color:#fff;
  background:#111;
  border-radius:4px;
  padding:4px 5px;
  margin-right:0.25em;
  font-size:14px;
  line-height:1;
}
div.flex.mov div img {
	border-top:#CCC 1px solid;
	border-left:#CCC 1px solid;
	border-bottom:#CCC 1px solid;
}
div.flex.mov > div img{
  display:inline-block;
  max-width:100%;
  vertical-align: bottom;
  cursor: pointer;
  transition:0.3s ease;
}
div.flex.mov > div img:hover{opacity:0.35;}

div.mov.all{
  max-width:100%;
  margin:15px auto 0;
  padding:0;
}


/*IEハック*/
@media all and (-ms-high-contrast: none) {

div.flex.mov > div p{line-height:1.8;}
div.flex.mov > div p span.step{top:-1px;}

}



/*************************** 画面サイズが767px以下の場合に適用 ***************************/
@media screen and (max-width: 767px) { /* SP */
  
div.wap div.main img.pc_only{display:none;}
div.wap div.main img.sp_only{display:inline-block;}

div.wap div.main div.read{padding:30px 25px;}
div.wap div.main div.read .pc_only{display:none;}
/*div.wap div.main div.read::before{background:url(../img/movie/bk.png) center bottom 30vw no-repeat;}*/

div.wap div.main div.read div.sp_only img{
  display:inline-block;
  max-width:100%;
  vertical-align: bottom;
}
div.wap div.main div.read div.sp_only{
  position:relative;
  display:table;
  margin:40px auto 0;
}
div.wap div.main div.read div::before{
  position:absolute;
  content:"";
  left:-45px;
  bottom:-15px;
  display:inline-block;
  width:100%;
  height:90%;
  background:#780032;
  z-index:-1;
}

div.area{padding:0 20px;}
div.area + div.area{margin-top:60px;}
/*クエスチョンエリア*/
div.box.faq > div.title h3{padding-left:15px;}

div.box.faq > div.title .accordion_icon {right: 5px;}

div.wap > a.more{
  display:table;
  max-width:initial;
  padding:15px 35px 15px 15px;
}

}

/*************************** 画面サイズが640px以下の場合に適用 ***************************/
@media screen and (max-width: 640px) { /* SP */
	
div.wap div.main div.read div.sp_only img{max-width:250px;}
div.wap div.main div.read div::before{
  left:-25px;
  bottom:-10px;
}


div.area > div.flex.btn{
  flex-wrap:wrap;
  margin-top:10px;
}

div.area > div.flex.btn a{
  flex:100%;
  max-width:100%;
}
div.area > div.flex.btn a + a{margin-top:10px;}

#contents div.wap.needle h1.img_title span.subtitle {
  font-size: 4.5vw;
  gap: 10px;
}

}

/*************************** 画面サイズが480px以下の場合に適用 ****************************/
@media screen and (max-width: 480px) { /* SP */	

div.wap div.main div.read p{font-size:16px;}

div.area > p{font-size:16px;}
div.area > div.flex.btn a{font-size:16px;}
div.area .img-title {width: 100%!important;}
div.box.faq > div.title h3{
  font-size:14px;
  line-height:1.6;
  padding-right:40px;
  font-weight:600;
  letter-spacing:0;
}
div.box.faq > div.detail p{font-size:14px;}
div.wap > a.more,
div.wap > a.back{
  display:block;
  max-width:100%;
  margin:40px 20px 0;
  font-size:16px;
}
#contents br.br{display:none;}
#contents br.br480{display:inline;}

/*下層*/
#contents div.wap.needle h1 {
  padding-left:25px;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 28px;
}
#contents div.wap.needle h1.img_title span.subtitle img {
  height: 24px;
}
div.wap.needle div.area h2{
  font-size:16px;
  padding-left:45px;
  letter-spacing: 0;
}

div.flex.mov > div p{font-size:14px;}

div.wap div.main div.area.which-use {padding-top: 60px;}
div.wap div.main div.area.which-use::before{
	height:13px;
	background: url(../img/movie/bk_sp.png) center/cover no-repeat;
}
div.wap div.main div.area.which-use {
	padding: 50px 20px;		
}
	
}

/*************************** 画面サイズが399px以下の場合に適用 ****************************/
@media screen and (max-width: 399px) { /* SP */		

}


/* =========================================================
  240709追加 ハイゼントラのプレフィルドシリンジ剤形 動画・資材掲載
========================================================= */
div.area .icon-title,
div.needle .icon-title {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 5px solid #790031;
}
div.area .icon-title {
  margin: 40px 0 20px;
}
div.needle .icon-title {
  margin: 0 0 20px;
  background: #f7f7f7;
}
div.area .icon-title + .img-title {
  margin-top: 0;
}
div.area .icon-title h3,
div.needle .icon-title span {
  font-weight: bold;
}
div.area .icon-title h3 {font-size: 2.2rem;}
div.needle .icon-title span {font-size: 2.6rem;}

div.area .icon-title.type-vial img,
div.needle .icon-title.type-vial img {
  height: 36px;
  margin-top: -8px;
}
div.area .icon-title.type-syringe img,
div.needle .icon-title.type-syringe img {
  height: 15px;
}
@media screen and (max-width: 480px) { /* SP */	
  div.area .icon-title h3,
  div.needle .icon-title span {
    font-size: 2rem;
  }  
}