@charset "UTF-8";
/* CSS Document */

/*-------------------------------------
                UVLP
---------------------------------------*/

#binkanLp{
	font-size: 18px;
}

section .inner{
	width: 1000px;
	margin: 0 auto;
}


section h2.orange{
	text-align: center;
	padding: 22px 0;
	background: url(../img/title_orange_pc.png) repeat-x ;
}

section .inner .left{
	float: left;
	width: 50%;
}
section .inner .right{
	float: right;
}

section.cvArea{
	text-align: center;
	padding: 20px;
	background: #fde3a5;
}

#cont01,#cont02,#cont03{
	margin: 4rem 0;
}

.b20{padding-bottom: 2rem;}
.b40{padding-bottom: 4rem;}



/*201910 oligo renewal */
	
#oligo_renewal {
	width: 100%;
   margin: 0 auto;
   text-align: center;
}

#oligo_renewal img {
	width: auto;
}

#oligo_renewal .text_left {
	text-align: left;
}

#oligo_renewal p{font-size: 80%;}
	
.content_navi {
	width: 1000px;
    margin: 0 auto;
	padding: 40px 0px;
    display: flex;
    justify-content: space-between;
	}
	
.content_navi a {
	padding: 0px 95px;
    height: 62px;
    border: 1px solid #f3a698;
    font-weight: bold;
    color: #f3a698;
    display: flex;
    align-items: center;
	}
	.content_navi a:hover {
		opacity: 0.6;
		text-decoration: none;
	}

.heading_color {
	background-color: #f3a698;
    padding: 15px 0px;
    margin-bottom: 3rem ;
}

.2column {
	display: flex;
    align-items: center;
}

.left_item,.right_item {
	flex: 0 0 50%;
}

.under_line {
	border-bottom: 1px solid #f3a698;
}


.heading_color_oligoline{
	background: #f3a698;
	padding: 0;
	margin: 0;
	margin-top: 3rem;
	margin-bottom: -17px;
	display: block;
	padding: 1%;
	color: #fff;
	letter-spacing: 0.5rem;
}


	
.flex_oligo,.flex_oligo_3column,.flex_oligo_2column{  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 1rem auto;}

.flex_oligo .item {
  width:45%;
  padding: 0　2%;
}

.column_center{

	margin-top: auto;
}

.flex_oligo .item-text{
	text-align: left;
	margin: 1rem 0;
}

.item-name{
	font-weight: bold;
	padding-top: 5%;
	margin-top: auto;
}


.flex_oligo_ttl{
	border: 2px solid #f3a698;
	padding: 3%;
}

.flex_oligo_ttl h3{
	font-weight: bold;
	font-size: 1.6rem;
}


.flex_oligo_3column .item {
  width:34%;
　 padding: 0;
  padding: 2.8rem 0;
  border: 1px solid #f3a698;
  display: flex;
  flex-direction: column;
	
}

.flex_oligo_2column .item{
	width: 50%;
	　padding: 0;
  padding: 3rem 0;
  border: 1px solid #f3a698;
}


.item-btn {
	margin-top: 1rem;
	
}


.item-btn a{
	color: #f3a698;
	text-decoration:none;
	border: 1px solid #f3a698;
    padding:1em 4em;
    font-size: 80%;
    position: relative;
    transition:.3s;
}	

.item-btn a::after{
    content:"";
    position:absolute;
    top:0;
    bottom:.1em;
    right:5%;
    margin:auto;
    width: .3em;
    height: .3em;
    border-top: .05em solid #f3a698;
    border-right: .05em solid #f3a698;
    transform: rotate(45deg);
    transition:1s;
}


.item-btn a:hover{
    opacity:.75;
	background: #f3a698;
	color: #fff;
	text-decoration: none;
}

.item-btn a:hover:after{
    content:"";
    position:absolute;
    top:0;
    bottom:.1em;
    right:5%;
    margin:auto;
    width: .3em;
    height: .3em;
    border-top: .05em solid #fff;
    border-right: .05em solid #fff;
    transform: rotate(45deg);
    transition:1s;
}

.circle_group{
	width: 80%;
	margin: 3rem auto;
}

.circle_group_s{
	width: 80%;
	margin: 1rem auto 0;
}

.circle_group img{
	margin: 2rem 0;
}

.circle_group .text_small{
	font-size: 80%;
	margin-top: 2%;
}

.circle_text{
	display: flex;
	justify-content:left;
	align-content:stretch;
	flex-wrap: wrap;  
	color: #f3a698;
	
}

.circle_text li{
	width: 48%;
	margin: 1%;
	text-align: left;
	list-style-type: square;
	list-style-position: inside;
	font-size: 110%;
}

.circle_text_black{
	display: flex;
	justify-content:left;
	align-content:stretch;
	flex-wrap: wrap;  
}



.circle_text_black li{
	width: 48%;
	margin: 1%;
	text-align: left;
	list-style-type: square;
	list-style-position: inside;
	font-size: 110%;
}
.line_color{
	background: #fdedea;
	padding: 1%;
	margin-top: 2rem;
	text-align: center;
}

#binkanLp section#mv {
	height: 481px;
	background: url(../img/mv_pc_oligo.png) no-repeat center center;
}

#binkanLp section#mv .inner{
	position: relative;
}

#binkanLp section#mv .inner h1{
	position: absolute;
	top: 20px;
	left: -34px;
}

#binkanLp #page{
	padding: 10px 0;
	background: #fbc74c;
	text-align: center;
}

#binkanLp #page a{
	display: inline-block;
	margin: 0 5px;
}


footer{
  background: url(../img/ft_bg_top.png) repeat-x top center;
  padding: 100px 0 50px;
  font-size: 14px;
  text-align: center;
}

#itemIcn.fixed{
  position: fixed;
  top: 140px;
  right: 20px;
  z-index: 1000;
}


/*-- PC版表示CSS  --*/
.pc{
  display:block;
}
.sp{
  display:none;
}


	

@media screen and (max-width: 640px) {
	
	#cont01,#cont02,#cont03{
		margin: 1rem 0;
		padding: 2%;
	}
	
	
	.p{
		padding: 2%;
	}
	
	
	
  #binkanLp{
  	font-size: 16px;
  }
  section .inner{
  	width: auto;
  	margin: 0 auto;
	padding: 2%;
  }

  section h2.orange{
  	text-align: center;
  	padding: 10px 5%;
  	background: url(../img/title_orange_sp.png) repeat-x center center ;
  }
  section .inner .left{
  	float: none;
  }
  section .inner .right{
  	float: none;
  }
	
  .content_navi{
		flex-direction: column;	
	width: 90%;
    margin: 0 auto;
	padding: 40px 0px;
	
	}
	
	.content_navi a{
		padding: 0;
		padding: 2%;
		flex-direction:column;
		display: block;
		margin-top: 2%;
		text-align: center;
		height: auto;
		position: relative;
	}
	
	
	.content_navi a::after{
    content:"";
    position:absolute;
    top:0;
    bottom:3%;
    right:1rem;
    margin:auto;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid #f3a698;
    border-right: 2px solid #f3a698;
    transform: rotate(135deg);
    transition:1s;

	}

	
	.left_item,.right_item {
	flex-direction: column;
	width:auto;
}
	
	.flex_oligo_2column .item{
	flex-direction: column;
	width:auto;	
	}
	
	#oligo_renewal img{
	
	}
	
	.heading_color{
		margin-bottom: 1.8rem;
		padding: 4%;
	}
	
	.flex_oligo, .flex_oligo_3column, .flex_oligo_2column{
		flex-direction: column;
		width: 90%;
		margin: 0 auto;
	}
	
	.flex_oligo .item{
		width: 100%;
	}
	
	.flex_oligo_3column .item{
		width: 100%;
	}
	
	
	#cont03 .flex_oligo_2column .item{
		border: none;
		
	}
	
	
.circle_group{
	width: 90%;
	margin: 1rem auto 0;
}

.circle_group_s{
	width: 90%;
	margin: 1rem auto ;
	font-size: 90%;
}

.circle_group img{
	margin: 1rem 0 0;
}

.circle_group .text_small{
	margin-top: 1rem;
}

.circle_text{
	display: flex;
	justify-content:left;
	align-content:stretch;
	flex-wrap: wrap;  
	color: #f3a698;
	
}

.circle_text li{
	width: 100%;
	margin: 1%;
	text-align: left;
	list-style-type: square;
	list-style-position: inside;
	font-size: 110%;
}

.circle_text_black{
	display: flex;
	justify-content:left;
	align-content:stretch;
	flex-wrap: wrap;  
}



.circle_text_black li{
	width: 100%;
	margin: 1%;
	text-align: left;
	list-style-type: square;
	list-style-position: inside;
}
	
	.line_group{
		width: auto;
		padding: 2%;
	}
	
	
	.line_color{
		margin: 0;
	}
	
	.line_ttl{
		background:#f3a698;
		padding:2%;
		color: #fff;
	}
	
	
	.flex_2column{
		display: flex;
		width: 100%;
		align-items:stretch;  
		border: 1px solid #f3a698;
		padding: 1rem 1rem 2rem;
	}
	
	.flex_2column .item{
		width: 50%;
		align-self: center;
		
	}
	
	.item-btn{
		width: auto;
	}
	
	.item-name{
		text-align: left;
		margin-left: 1rem;
		padding: 0;
		margin-bottom: 1rem;
	}
	
	.item-btn a{
		padding: 1rem 1.3rem;
	}
	

}



@media screen and (max-width: 640px) {
	

	#binkanLp section#mv {
		height: auto;
		background: none;
	}
  #binkanLp section#mv .inner{
    width: 100%;
  }
	#binkanLp section#mv .inner h1{
		position: relative;
		top: 0;
		left: 0;
	}
}





@media screen and (max-width: 640px) {
  #binkanLp #page{
  	padding-bottom: 7px;
  }
	#binkanLp #page a{
		width: 30%;
		margin: 0 1%;
	}
}





@media screen and (max-width: 640px) {
  #itemIcn.fixed{
    position: fixed;
    top: auto;
    bottom: 90px;
    right: 10px;
    width: 70px;
  }
	
	
	
  .pc{
    display:none;
  }
  .sp{
    display:block;
  }
	
	
	.sp p{
		padding: 2%;
	}
	
} 
	

	
	
	
	
	
	
	
	

