@charset "utf-8";

/* common | 共通 
------------------------------------------------------- */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}
/* link */
a {
	text-decoration: none;
	color: #000;
	transition: .6s ease; /*色をゆっくりと変える*/
}
a:link {
	text-decoration: none;
}
a:visited {
}
a:hover {
	text-decoration:underline;
}
a:active {
}

@media only screen and (max-width: 540px) {
.pc-only {display:none;}
}

.sp-only {
	display:none;
}
@media only screen and (max-width: 540px) {

.sp-only {display:block;
}
}
p.mid {
  margin-bottom: 2%;
}
p.end {
  margin-bottom: 5%;
}
hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
.red {
	color:#ff0000;
}


h5 {
	font-size:120%;
	text-align: center;
	margin-bottom: 5%;
	color:#4f5f6d;
}

h6 {
  border-bottom: solid 3px #868686;
  font-size: 110%;
  padding-left: 1%;
  padding-bottom: 0.5%;
  font-weight: bold;
  margin: 0 0 2%;
}
@media only screen and (max-width: 820px) {
h6 {
    font-size: 100%;
    padding: 0.5% 1.5%;
    margin: 4% 0 1%;
  }
}

.triple li {
  float: left;
  width: 31.3%;
  margin-right: 3%;
  margin-bottom: 2%;
}
.triple li:nth-child(3n) {
  margin-right: 0;
}

@media only screen and (max-width: 640px) {
	.triple li {
	width:98%;
	margin-right:0;
	margin-bottom:2%;
}
.triple li:nth-child(3n) {
	margin-right:0;
}

}

.more-btn {
  text-align: center;
  margin-top: 3%;
}
.more-btn a {
  display: inline-block;
  width: 70%;
  height: auto;
  font-size: 90%;
  text-align: center;
  white-space: nowrap;
  border-radius: 4px;
  position: relative;
  transition: all .4s;
  text-decoration: none;
  padding: 10px 0;
  margin: 0 auto;
  background: #036ea7;
  color: #fff;
}
.more-btn a:hover {
  background: #1cb6f4;
  color: #fff;
}
@media only screen and (max-width: 820px) {
  .more-btn a {
    width: 70%;
  }
}
.more-btn i {
  font-size: 120%;
  margin-right: 15px;
}
/*  inqueryArea
------------------------------------------------------- */
#inqueryArea{
	margin:5% 0 0;
	text-align: center;
}
@media only screen and (max-width:1024px) {
#inqueryArea {
	margin:0% 0 0%;
	}
}
#inqueryArea h2 {
color:#1870f7;
}
@media only screen and (max-width: 1024px) { 
#inqueryArea h2 {
		font-size:180%;
	}
}
@media only screen and (max-width: 540px) { 
#inqueryArea h2 {
		font-size:150%;
	}
}
#inqueryArea p {
	padding-bottom: 0;
}

#inqueryArea li a {
	float:left;
	width:45.5%;
	margin-right:3%;
	margin-bottom:0;
	border: #1870f7 solid 4px;
				border-radius: 10px;
	background: #fff;
	color: #1870f7;
	padding:1%;
	line-height: 1.75;
	height:auto;
	display: inline-block;
font-size:120%;
	font-weight: bold;
		font-family: "メイリオ","Meiryo"; font-weight: bold,"Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 900;

}

@media only screen and (max-width: 1024px) { 
	#inqueryArea li a {
	width:45%;
		font-size:100%;

	}
}

@media only screen and (max-width: 800px) { 
	#inqueryArea li a {
			float:none;
	width:96%;
		margin-right: auto;
		margin-left: auto;
		height: auto;
		margin-bottom: 1%;
	}
}
#inqueryArea li:last-child a{
	background: #1870f7;
	color :#fff;
			margin-right:0;

}
#inqueryArea li a:hover,#inqueryArea li:last-child a:hover {
	background: #27bfec;
	color :#fff;
	text-decoration: none;
}


#inqueryArea li:last-child a i {
		margin-right:5%;
	font-size:110%;
}
#inqueryArea li p {
	font-size:130%;
		font-weight: bold;
text-align: center;
}

@media only screen and (max-width:1024px) {
	#inqueryArea li p {
	font-size:110%;
	}
}


/* 代理店募集・求人募集
------------------------------------------------------- */
#agency {
	text-align: center;
	margin: 3% 0 10%;
}
#agency h3 {
	text-align: left;
}

#agency p[title] a {
	font-size:250%;
	font-weight: bold;
	line-height: 1.25;
	color: #000;
}
#agency p[title] span {
	font-size: 50%;
}

#agency p[title] a:hover {
	color: #10a4ae;
	text-decoration: none;
}

@media only screen and (max-width: 540px) {
#agency p{
		text-align:left;
}
	#agency p[title] {
	text-align: center;
			font-size:90%;
	}
}
@media only screen and (max-width: 400px) {
	#agency p[title] {
	text-align: center;
			font-size:75%;
	}
}

#agency img {
	width: 70%;
	margin-bottom: 5%;
}

@media only screen and (max-width: 768px) {
	#agency img {
	width: 80%;}
}
@media only screen and (max-width: 480px) {
	#agency img {
	width: 90%;}
}

#employee p {
	text-align: center;
}

@media only screen and (max-width: 540px) {
#employee p{
		text-align:left;
}
}

/* サービス内容
------------------------------------------------------- */

.box {
    padding: 2%;
    margin:5% auto 10%;
    border: solid 5px #3285bf;
}
.box p {
    margin: 0 !important;
    padding: 0 !important;
	text-align: center;
	font-size:130%;
}
.box p[title] {
	font-size: 170%;
	font-weight: bold;
}

.box p span {
	font-size:170%;
	margin-right: 1%;
}
.box .br-sp {display: none; }

@media only screen and (max-width: 1024px) {
	.box p[title] {
	font-size: 150%;
		margin-bottom: -2%;
	}
	.box p span {
	font-size:150%;
}
}

@media only screen and (max-width: 580px) {
	.box p {
	font-size:100%;
}

	.box p[title] {
	font-size: 120%;
	}
	.box p span {
	font-size:170%;

}
	
.box .br-sp {display:block;}

}
.box i {
	margin-right: 1%;
}
.box hr {
	border-top: 1px solid #bbb;
	width: 25%;
	margin: 0 auto;
}
@media only screen and (max-width: 580px) {
.box hr {
	margin: 0 auto -2%;
}
}

.box p a:hover {
	text-decoration:none;
	color: #1cb6f4;
}
.box .more-btn {
  margin-top: 1.5%;
}
.box .more-btn a {
  width: 50%;
  font-size: 80%;
  background: #036ea7;
}
.box .more-btn a:hover {
  background: #1cb6f4;
  color: #fff;
}
@media only screen and (max-width: 820px) {
 .box .more-btn a {
    width: 70%;
  }
}



.step-wrap1 {
 counter-reset:count;
 margin: 2em 0;
 position: relative;
}
.step-content1 {
 padding: 0 0 1.3em 2em;
 margin: 0;
 position: relative;
}
.step-content1::before {
 content: "";
 display: block;
 width: 13px;
 height: 13px;
 background: #6ab5a5;
 border: solid 3px #ffffff;
 border-radius: 50%;
 position: absolute;
 top: 3px;
 left: 3px;
 box-shadow: 0 0 0 2px #6ab5a5;
}
.step-content1::after {
 content: "";
 display: block;
 height: calc(100% - 35px);
 border-left: dotted 5px #768888;
 position: absolute;
 top: 30px;
 left: 10px;
}
.step-title1 {
 font-weight: bold;
 font-size: 120%;
}
@media only screen and (max-width: 540px) {
	.step-title1 {
 font-size: 100%;
}
}
.step-label1 {
 color: #768888;
 font-weight: bold;
}
.step-label1::after {
 counter-increment:count;
 content:counter(count);
 position: relative;
 left: .3em;
}
.step-body1 {
 margin-top: .5em;
 padding: 0 0 1em;
 border-bottom: dotted 2px #ddd;
}
.step-wrap1 > :last-of-type::after {
 display: none;
}

#step02 {
	margin-bottom: 15%;
}
#step02 img {
	width: 30%;
}
#step03 {
	margin-bottom: 5%;
}

#sday * {
  box-sizing: border-box;
}
#sday body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sday ul {
  padding: 0;
	width: 100%;
	margin: 0 auto 15%;
}
#sday li {
  /*list-style-type: none;*/
}
#sday dd {
  margin-left: 0;
}

#sday img {
	width: 40%;
	margin-top: 3%;
}

.nagare {
  border: 3px solid #c1c1c1;
}
.nagare > li {
  padding: 30px;
}
.nagare > li:not(:last-child) {
  border-bottom: 3px solid #c1c1c1;
  position: relative;
}
.nagare > li:not(:last-child)::before,
.nagare > li:not(:last-child)::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 12%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.nagare > li:not(:last-child)::before {
  border-width: 22px;
  border-top-color: #c1c1c1;
}
.nagare > li:not(:last-child)::after {
  border-width: 18px;
  border-top-color: #fff;
}
.nagare > li dl {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.nagare > li dl dt {
  font-size: 120%;
  font-weight: 600;
  color: rgb(107,144,219);
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-right: 3vw;
  text-align: center;
}
.nagare > li dl dt .icon {
  font-size: 12px;
  color: #fff;
  background: rgb(107,144,219);
  background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
  background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
  padding: 5px 10px;
  margin-bottom: 10px;
  display: block;
  border-radius: 20px;
}
.nagare > li dl dd ol {
	margin-top: 5%;
}
.nagare > li dl dd li {
	list-style-type: decimal;
	margin-left: 10%;
	width: 100%;
	margin-bottom: 1%;
}

@media only screen and (max-width: 1024px) {
	.nagare > li:not(:last-child)::before,
.nagare > li:not(:last-child)::after {
  top: 100%;
  left: 15%;
	}
.nagare > li dl dt {
  margin-right: 6vw;
	  flex-basis: 30%;

	}
}
@media only screen and (max-width: 768px) {
	.nagare > li:not(:last-child)::before,
.nagare > li:not(:last-child)::after {
  top: 100%;
  left: 50%;
	}
	.nagare > li dl {
flex-direction:column;
	}
.nagare > li dl dt {
	margin-bottom: 5%;
	}

}



/* 料金・対応エリア
------------------------------------------------------- */
#areaP {
	margin-bottom: 20%;
	text-align: center;
}
#areaP h5 {
	font-size:300%;
	margin-bottom: 0;
}
@media only screen and (max-width: 1024px) {
#areaP h5 {
	font-size:230%;
}
}
#areaP p {
	font-size:120%;
	margin-bottom: 4%;
}
#areaP p[title] {
	font-weight: bold;
	font-size:160%;
}
#areaP img {
	width: 15%;
	float: left;
	margin-bottom: 2%;
}
@media only screen and (max-width: 540px) {
	#areaP img {
		display: none;}
}
.aInnKans {
	background: rgba(244,229,243,1.00);
	padding: 2% 2% 0%;
	margin-bottom: 2%;
	  border-radius: 25px;

}
.aInnKant {
	background: rgba(229,246,249,1.00);
		padding: 2% 2% 0%;
		  border-radius: 25px;

}
p.aInn {
	margin-left: 20%;
	text-align: left;
}

@media only screen and (max-width: 540px) {
p.aInn {
	margin-left: 2%;}
}


p.aInn span {
	color: #F71CB1;
	font-weight: bold;
	font-size:120%;
}
@media only screen and (max-width: 768px) {
	p.aInn span {
	font-size:100%;
}
}

p.aInn span#knt {
	color:rgba(12,118,205,1.00);
}
.menuT {
	width: 95%;
	border-collapse: separate;
	margin:0 auto 40px;
}
.menuT th,
.menuT td {
	box-sizing:border-box;
	border-bottom: 1px dashed #1f1f1f;
	padding: 1.5% 1%;
	text-align:right;
}

@media only screen and (max-width: 540px) {
table.menuT tr:first-child th {
	border-top: 1px solid #1f1f1f;
}
	.menuT td {
	border-bottom: 1px solid #1f1f1f;
	}
}
.menuT th {
	font-size:16px;
	font-weight:normal;
	text-align:left;
	width: 80%;
}

#fee table {
	margin-bottom: 4%;
}
#fee table.end {
	margin-bottom: 10%;
}

/* 取扱製剤
------------------------------------------------------- */
.sei {
	text-align: center;
	margin:5% 0 15%;
}
.sei h2 {
	color: #175d93 !important;
}
.sei h3 {
	text-align: left;
}
.sei img {
	margin-bottom: 5%;
}
.sei h4,.sei h6,.sei li,.sei p {
	text-align: left;
}
.sei p.poi {
	font-size:120%;
}
.sei ol {
	margin: 0 auto 5%;
	width: 96%;
}
.sei ol li {
	list-style-type: decimal;
	margin-left: 4%;
	width: 90%;
	margin-bottom: 1%;
}
.sei ol li.end {
	margin-bottom: 3%;
}
.sei ol img {
	float: right;
	margin-left: 3%;
}

@media only screen and (max-width: 768px) {
	.sei ol {
	margin: 0 5% 5% 2%;
	width: 93%;
		
	}
	.sei ol li {
	margin-left: 0;
		margin-right:5%;
	width: auto;
}
	.sei ol img {
	float: none;
	margin-left: 0%;
		margin-bottom: 2%;
			margin-top: 2%;

}
}
.sei table {
	margin-bottom: 3%;
}

.sei .more-btn {
	margin: 0 auto;
}

.sei img.fl-r {
	float: right;
	margin-left: 2%;
	margin-bottom: 2%;
}
@media only screen and (max-width: 768px) {
.sei img.fl-r {
	float: none;
	margin-left: 0%;
	margin-top: 2%;
}
}
.triangleOut {
	width: 90px;
	margin: 0 auto;
}



/* ご利用の流れ
------------------------------------------------------- */
#flow01 {
	margin: 5% 0 10%;
}
#flow01 ul {
	width: 100%;
}
#flow01 li {
	float: left;
	position: relative;
  height: 400px;
	  background: #5bc8ac;
  letter-spacing: 0.15em;
  color: #fff;
  font-size: 120%;
	padding: 0;
	margin: 2% 4%;
	width: 5%;
}


#flow01 li:first-child {
	margin-left: 21.5%;
}

#flow01 li:not(:last-child):before {
  content: "";
  width: 14px;
  height: 14px;
  /*margin-right: 50px;*/
	margin: 0 50%;
  display: inline-block;
  border-top: 4px solid rgb(102, 213, 233);
  border-right: 4px solid rgb(102, 213, 233);
  position: absolute;
  top: calc(50% - 14px);
  left: 104%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#flow01 li p {
		padding: 0 0 0 4%;
	}

@media only screen and (max-width: 1024px) {
	#flow01 ul {
	width: 80%;
	margin: 0 18%;
}
	#flow01 li {
	width: 15%;
			margin: 2% 1%;
	}
	#flow01 li p {
		padding: 0 0 0 4%;
	}
	#flow01 li:first-child {
	margin-left: 0;
		}
	#flow01 li:not(:last-child):before {
		display: none;
	}

}
@media only screen and (max-width: 640px) {
	#flow01 ul {
	width: 90%;
	margin: 0 10%;
}
	#flow01 li {
	width: 15%;
			margin: 2% 1%;
		  height: 300px;
		font-size:100%;

	}
	#flow01 li p {
		padding: 0 0 0 4%;
	}
}

.numb {
	background: #038f6b;
	color:#fff;
	text-align: center;
	padding: 10%;
	
}


#flowS01 ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}
#flowS01 ol li {
  position: relative;
  padding: 0.5em;
  line-height: 1.5em;
  background: #5bc8ac;
  border-left : solid 35px #038f6b;
  margin-bottom: 5px;
	color: #fff;
}
#flowS01 ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;
}


.vertical {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	padding: 20% 0 0;
}
@media only screen and (max-width: 1024px) {
.vertical {
	padding: 20%;
}
}


#flow02 p {
	padding: 0;
}
 .s_work_flow .s_work_flow_step{
   display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap:wrap;
   margin-bottom:50px;
 }
 .s_work_flow .s_work_flow_step .s_work_flow_number{
   width:20%;
   font-size:32px;
   background:#3285bf;
   color:#fff;
   display: flex;
    display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
   align-items: center;
   justify-content: center;
 }

@media only screen and (max-width: 768px) {
	 .s_work_flow .s_work_flow_step .s_work_flow_number{
   font-size:25px;
	}
}
@media only screen and (max-width: 480px) {
	 .s_work_flow .s_work_flow_step .s_work_flow_number{
   font-size:20px;
	}
}
 .s_work_flow .s_work_flow_step .s_work_flow_content{
    width:72%;
    padding:3%;
    border:1px solid #ccc;
    display: flex;
     display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
 }
 .s_work_flow .s_work_flow_step:not(:last-child){
    position:relative;
    margin-bottom:100px;
 }
 .s_work_flow .s_work_flow_step:not(:last-child):before{
   position: absolute;
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 25px 25px 0px 25px;
    bottom: -63px;
    left: 50%;
    margin-left: -25px;
    border-color: #c1c1c1 transparent transparent transparent;
 }

.s_work_flow .s_work_flow_step .s_work_flow_content p {
	float: left;
	width: 73% !important;
}

@media only screen and (max-width: 1024px) {
	 .s_work_flow .s_work_flow_step:not(:last-child){
    margin-bottom:10px;
 }
	 .s_work_flow .s_work_flow_step:not(:last-child):before{
		 display: none;
	}
}


#flow02 .more-btn {
  margin-top: 5%;
}
#flow02 .more-btn a {
  width: auto;
  font-size: 100%;
  padding: 6% 20%;
  margin: 0;
  background: #f79465;
  color: #fff;
}
#flow02 .more-btn a:hover {
  background: #f6b38d;
  color: #fff;
}
@media only screen and (max-width: 820px) {
 #flow02 .more-btn a {
    width: auto;
  }
}

#flow02 .more-btn i {
  font-size: 100%;
  margin-left: 5%;
}

@media only screen and (max-width: 768px) {
	#flow02 .more-btn a {
  width: auto;
  font-size: 90%;
  padding: 3% 10%;
	}
}


#flow02 img {
	width:25%;
	float: right;
	margin-left: 2%;
}

/* プライバシポリシ、sitemap
------------------------------------------------------- */
#pp,#stm,#faq{
	margin:5% 0 0;
}
#stm ul li {
  margin-bottom: 1.5em;
  list-style-type: circle;
}
#stm ul li ul {
  margin-top: .5em;
  margin-bottom: .75em;
  margin-left: 48px;
}
#stm ul li ul li {
  margin-bottom: .75em;
  position: relative;
  list-style-type: none;
}
#stm ul li ul li::before {
  content: "";
  position: absolute;
  top: -0.5em;
  left: -16px;
  width: 10px;
  height: calc(100% + .75em);
  border-left: 1px solid #3972b2;
}
#stm ul li ul li:last-child::before {
  height: calc(1em + .25em);
}
#stm ul li ul li::after {
  content: "";
  position: absolute;
  top: .75em;
  left: -16px;
  width: 10px;
  border-bottom: 1px solid #3972b2;
}
#sitemapL {
  float: left;
  width: 45%;
  margin-left: 5%;
}
#sitemapR {
  float: right;
  width: 50%;
}
@media only screen and (max-width: 540px) {
  #sitemapL, #sitemapR {
    float: none;
    width: 90%;
    margin-left: 10%;
  }
}

/* form
------------------------------------------------------- */
#contactArea {
  text-align: center;
	margin: 5% 0 0;
}
#contactArea dd {
  text-align: left;
}
#contact-txt {
  margin-bottom: 5%;
}
#thanks h4 {
  text-align: center;
  font-size: 150%;
}
#thanks p {
  text-align: center;
}
@media only screen and (max-width: 540px) {
  #thanks p {
    text-align: left;
  }
}


/* 404 
------------------------------------------------------- */
#nf {
  margin: 5% auto 5%;
	text-align: center;
}