@charset "utf-8";

/*------------------------------------------
	PC
------------------------------------------*/
@media print, screen and (min-width: 768px){

@keyframes arrow{
	0%{ transform: translateX(-5px); }
	100%{ transform: translateX(0); }
}

	/*--------------------------------
		h1
	--------------------------------*/
	h1{
		font-size: 25px;
    	font-weight: normal;
		line-height: 1.8;
		text-align: center;
		position: absolute;
    	top: 105px;
    	left: 55px
	}
	h1 span{
		position: relative;
	}
	h1 span:first-child:before{
	    position: absolute;
	    content: "";
	    top: -40px;
	    left: -40px;
	    width: 27px;
	    height: 28px;
	    background: url(../images/top-visual-drug01.png) no-repeat;
		background-size: cover;
	    opacity: 0;
		animation: fadeup 1.5s ease 0s 1 normal forwards;
	}
	h1 span:nth-of-type(2):after{
	    position: absolute;
	    content: "";
	    bottom: 10px;
	    right: -85px;
	    width: 29px;
	    height: 32px;
	    background: url(../images/top-visual-drug02.png) no-repeat;
		background-size: cover;
		opacity: 0;
		animation: fadeup 1.5s ease 0.5s 1 normal forwards;
	}
	h1 span:last-child:before{
	    position: absolute;
	    content: "";
	    bottom: -155px;
 	    left: -42px;
	    width: 57px;
	    height: 68px;
	    background: url(../images/top-visual-drug03.png) no-repeat;
		background-size: cover;
		opacity: 0;
		animation: fadeup 1.5s ease 1s 1 normal forwards;
	}
	h1 span:last-child:after{
	    position: absolute;
	    content: "";
	    bottom: -200px;
	    left: -56px;
	    width: 326px;
	    height: 238px;
	    background: url(../images/top-visual-druggist.png) no-repeat;
		background-size: cover;
	}
	/*--------------------------------
		visual
	--------------------------------*/
	#visual{
		width: 100%;
		height: 540px;
	}
	.visualinner{
		width: 1100px;
		height: 540px;
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
	}
	#slider{
		position: absolute;
    	top: 10px;
    	right: 20px;
	}
	.bx-wrapper{
    	width: 700px;
		border: none!important;
		background: none!important;
		box-shadow: none!important;
	}

	/*--------------------------------
		title
	--------------------------------*/
	h2{
	    font-size: 26px;
	    font-weight: normal;
	    text-align: center;
	    padding-top: 40px;
		position: relative;
	}
	
	h2:before{
	    position: absolute;
	    content: "";
	    top: 0;
 		left: calc(50% - 21.5px);
	    width: 43px;
	    height: 23px;
	    background: url(../images/top-title-icon.png) no-repeat;
		background-size: cover;
	}

	/*--------------------------------
		contents
	--------------------------------*/
	.guide p.lead{
		font-size: 15px;
		line-height: 2;
		text-align: center;
		margin: 50px 0 65px;
	}
	.guide ol{
    	justify-content: space-between;
	}
	.guide ol li{
		width: 250px;
		height: 250px;
		font-size: 20px;
		line-height: 1.5;
    	text-align: center;
	    background: #ffffff;
	    padding-top: 50px;
	    border-radius: 5px;
	    box-shadow: 2px 3px 0px #cfcec5;
		position: relative;
	}
	.guide ol li:nth-child(2n-1):before{
	    position: absolute;
	    content: "";
	    top: -15px;
 		left: 2px;
	    width: 82px;
	    height: 63px;
	    background: url(../images/top-guide-01base.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(2n):before{
	    position: absolute;
	    content: "";
	    top: -15px;
 		left: 2px;
	    width: 82px;
	    height: 63px;
	    background: url(../images/top-guide-02base.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(1):after{
	    position: absolute;
	    content: "";
	    top: -5px;
 		left: 28px;
	    width: 27px;
	    height: 21px;
	    background: url(../images/top-01-icon.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(2):after{
	    position: absolute;
	    content: "";
	    top: -5px;
 		left: 28px;
	    width: 30px;
	    height: 21px;
	    background: url(../images/top-02bk-icon.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(3):after{
	    position: absolute;
	    content: "";
	    top: -5px;
 		left: 28px;
	    width: 29px;
	    height: 21px;
	    background: url(../images/top-03-icon.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(4):after{
	    position: absolute;
	    content: "";
	    top: -5px;
 		left: 28px;
	    width: 30px;
	    height: 21px;
	    background: url(../images/top-04bk-icon.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(1) span:after{
	    position: absolute;
	    content: "";
	    bottom: 20px;
 	    left: calc(50% - 106.5px);
	    width: 213px;
	    height: 122px;
	    background: url(../images/top-guide-icon01.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(2) span:after{
	    position: absolute;
	    content: "";
	    bottom: 20px;
 	    left: calc(50% - 105.5px);
	    width: 211px;
	    height: 107px;
	    background: url(../images/top-guide-icon02.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(3) span:after{
	    position: absolute;
	    content: "";
	    bottom: 20px;
 	    left: calc(50% - 43px);
	    width: 100px;
	    height: 105px;
	    background: url(../images/top-guide-icon03.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(4) span:after{
	    position: absolute;
	    content: "";
	    bottom: 20px;
 	    left: calc(50% - 43px);
	    width: 100px;
	    height: 95px;
	    background: url(../images/top-guide-icon04.png) no-repeat;
		background-size: cover;
	}
	a.guide-btn{
	    width: 195px;
	    height: 50px;
	    text-align: center;
	    line-height: 50px;
	    margin: 50px auto 0;
	    background: #e9e4c8;
	    border-radius: 5px;
		position: relative;
	}
	a.guide-btn:before{
	    position: absolute;
	    content: "";
	    top: calc(50% - 5px);
 		right: 18px;
	    width: 19px;
	    height: 10px;
	    background: url(../images/arrow.png) no-repeat;
		background-size: cover;
		will-change: transform;
	}
	a.guide-btn:hover {
	    background: #f5ca45;
	    transition-duration: 2s;
	}
	a.guide-btn:hover:before{
		animation: arrow 0.5s linear 0s infinite alternate forwards;
	}
	.merit section{
		height: 194px;
   		margin-bottom: 62px;
		position: relative;
	}
	.merit section:last-child{
   		margin-bottom: 50px;
	}
	.merit section:nth-of-type(1){
		margin-top: 62px;
	}
	.merit section:nth-of-type(2n-1){
		padding-left: 430px;
	}
	.merit section:nth-of-type(1):before{
	    position: absolute;
	    content: "";
	    top: -12px;
 		left: 0;
	    width: 400px;
	    height: 200px;
		background: url(../images/top-merit-image01.png) no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.merit section:nth-of-type(2):before{
	    position: absolute;
	    content: "";
	    top: -12px;
 		right: 10px;
	    width: 400px;
	    height: 200px;
		background: url(../images/top-merit-image02.png) no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.merit section:nth-of-type(3):before{
	    position: absolute;
	    content: "";
	    top: -12px;
 		left: 0;
	    width: 400px;
	    height: 200px;
		background: url(../images/top-merit-image03.png) no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.merit section:nth-of-type(4):before{
	    position: absolute;
	    content: "";
	    top: -12px;
 		right: 10px;
	    width: 400px;
	    height: 200px;
		background: url(../images/top-merit-image04.png) no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.merit section:nth-of-type(2n-1):after{
	    position: absolute;
	    content: "";
	    top: -6px;
 		left: 10px;
	    width: 400px;
	    height: 200px;
		background: #e9e4c8;
	}
	.merit section:nth-of-type(2n):after{
	    position: absolute;
	    content: "";
	    top: -6px;
 		right: 0;
	    width: 400px;
	    height: 200px;
		background: #e9e4c8;
	}
	.merit h3{
		font-size: 20px;
		font-weight: normal;
		margin-bottom: 35px;
		padding-left: 60px;
		position: relative;
	}
	.merit section:nth-of-type(1) h3:before{
	    position: absolute;
	    content: "";
	    top: -12px;
 		left: 0;
	    width: 44px;
	    height: 44px;
	    background: #6fb6cb;
	    border-radius: 50%;
	}
	.merit section:nth-of-type(1) h3:after{
	    position: absolute;
	    content: "";
	    top: -1px;
 		left: 7px;
	    width: 27px;
	    height: 21px;
	    background: url(../images/top-01-icon.png) no-repeat;
		background-size: cover;
	}
	.merit section:nth-of-type(2) h3:before{
	    position: absolute;
	    content: "";
	    top: -12px;
 		left: 0;
	    width: 44px;
	    height: 44px;
	    background: #94c1ce;
	    border-radius: 50%;
	}
	.merit section:nth-of-type(2) h3:after{
	    position: absolute;
	    content: "";
	    top: -1px;
 		left: 7px;
	    width: 30px;
	    height: 21px;
	    background: url(../images/top-02-icon.png) no-repeat;
		background-size: cover;
	}
	.merit section:nth-of-type(3) h3:before{
	    position: absolute;
	    content: "";
	    top: -12px;
 		left: 0;
	    width: 44px;
	    height: 44px;
	    background: #b7d3db;
	    border-radius: 50%;
	}
	.merit section:nth-of-type(3) h3:after{
	    position: absolute;
	    content: "";
	    top: -1px;
 		left: 7px;
	    width: 29px;
	    height: 21px;
	    background: url(../images/top-03-icon.png) no-repeat;
		background-size: cover;
	}
	.merit section:nth-of-type(4) h3:before{
	    position: absolute;
	    content: "";
	    top: -12px;
 		left: 0;
	    width: 44px;
	    height: 44px;
	    background: #c9e0e6;
	    border-radius: 50%;
	}
	.merit section:nth-of-type(4) h3:after{
	    position: absolute;
	    content: "";
	    top: -1px;
 		left: 7px;
	    width: 30px;
	    height: 21px;
	    background: url(../images/top-04-icon.png) no-repeat;
		background-size: cover;
	}
	.merit p{
		font-size: 15px;
		line-height: 1.7;
	}
}
/*------------------------------------------
	sp
------------------------------------------*/
@media only screen and (max-width: 767px){

	/*--------------------------------
		h1
	--------------------------------*/
	h1{
	    width: 250px;
		font-size: 17px;
    	font-weight: normal;
		line-height: 1.8;
	    margin: 0 auto;
		padding: 25px 0 110px;
		text-align: center;
    	top: 105px;
    	left: 20px
	}
	h1 span{
		position: relative;
	}
	h1 span:first-child:before{
	    position: absolute;
	    content: "";
	    top: -10px;
	    left: -45px;
	    width: 27px;
	    height: 28px;
	    background: url(../images/top-visual-drug01.png) no-repeat;
		background-size: cover;
	}
	h1 span:nth-of-type(2):after{
	    position: absolute;
	    content: "";
	    bottom: 5px;
	    right: -60px;
	    width: 29px;
	    height: 32px;
	    background: url(../images/top-visual-drug02.png) no-repeat;
		background-size: cover;
	}
	h1 span:last-child:before{
	    position: absolute;
	    content: "";
	    bottom: -105px;
 	    left: -30px;
	    width: 57px;
	    height: 68px;
	    background: url(../images/top-visual-drug03.png) no-repeat;
		background-size: cover;
	}
	h1 span:last-child:after{
	    position: absolute;
	    content: "";
	    bottom: -114px;
	    left: -26px;
	    width: 200.7px;
	    height: 146.5px;
	    background: url(../images/top-visual-druggist.png) no-repeat;
		background-size: cover;
	}
	/*--------------------------------
		visual
	--------------------------------*/
	#visual{
		width: 100%;
	}
	.visualinner{
		display: flex;
   		flex-direction: column-reverse;
		width: 100%;
		padding: 0 10px;
	}
	.bx-wrapper{
		border: none!important;
		background: none!important;
		box-shadow: none!important;
	}

	/*--------------------------------
		title
	--------------------------------*/
	h2{
	    font-size: 20px;
	    font-weight: normal;
	    text-align: center;
	    padding-top: 40px;
		position: relative;
	}
	
	h2:before{
	    position: absolute;
	    content: "";
	    top: 0;
 		left: calc(50% - 21.5px);
	    width: 43px;
	    height: 23px;
	    background: url(../images/top-title-icon.png) no-repeat;
		background-size: cover;
	}

	/*--------------------------------
		contents
	--------------------------------*/
	.guide p.lead{
		line-height: 1.7;
		margin: 30px 0 35px;
	}
	.guide ol li{
		width: 250px;
		height: 250px;
		font-size: 20px;
		line-height: 1.5;
    	text-align: center;
	    background: #ffffff;
		margin: 0 auto 35px;
	    padding-top: 50px;
	    border-radius: 5px;
	    box-shadow: 2px 3px 0px #cfcec5;
		position: relative;
	}
	.guide ol li:nth-child(2n-1):before{
	    position: absolute;
	    content: "";
	    top: -15px;
 		left: 2px;
	    width: 82px;
	    height: 63px;
	    background: url(../images/top-guide-01base.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(2n):before{
	    position: absolute;
	    content: "";
	    top: -15px;
 		left: 2px;
	    width: 82px;
	    height: 63px;
	    background: url(../images/top-guide-02base.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(1):after{
	    position: absolute;
	    content: "";
	    top: -5px;
 		left: 28px;
	    width: 27px;
	    height: 21px;
	    background: url(../images/top-01-icon.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(2):after{
	    position: absolute;
	    content: "";
	    top: -5px;
 		left: 28px;
	    width: 30px;
	    height: 21px;
	    background: url(../images/top-02bk-icon.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(3):after{
	    position: absolute;
	    content: "";
	    top: -5px;
 		left: 28px;
	    width: 29px;
	    height: 21px;
	    background: url(../images/top-03-icon.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(4):after{
	    position: absolute;
	    content: "";
	    top: -5px;
 		left: 28px;
	    width: 30px;
	    height: 21px;
	    background: url(../images/top-04bk-icon.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(1) span:after{
	    position: absolute;
	    content: "";
	    bottom: 20px;
 	    left: calc(50% - 106.5px);
	    width: 213px;
	    height: 122px;
	    background: url(../images/top-guide-icon01.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(2) span:after{
	    position: absolute;
	    content: "";
	    bottom: 20px;
 	    left: calc(50% - 105.5px);
	    width: 211px;
	    height: 107px;
	    background: url(../images/top-guide-icon02.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(3) span:after{
	    position: absolute;
	    content: "";
	    bottom: 20px;
 	    left: calc(50% - 43px);
	    width: 100px;
	    height: 105px;
	    background: url(../images/top-guide-icon03.png) no-repeat;
		background-size: cover;
	}
	.guide ol li:nth-child(4) span:after{
	    position: absolute;
	    content: "";
	    bottom: 20px;
 	    left: calc(50% - 43px);
	    width: 100px;
	    height: 95px;
	    background: url(../images/top-guide-icon04.png) no-repeat;
		background-size: cover;
	}
	a.guide-btn{
	    width: 195px;
	    height: 50px;
	    text-align: center;
	    line-height: 50px;
	    margin: 50px auto 0;
	    background: #e9e4c8;
	    border-radius: 5px;
		position: relative;
	}
	a.guide-btn:before{
	    position: absolute;
	    content: "";
	    top: calc(50% - 5px);
 		right: 18px;
	    width: 19px;
	    height: 10px;
	    background: url(../images/arrow.png) no-repeat;
		background-size: cover;
	}
	.merit section{
   		margin-bottom: 42px;
		position: relative;
	}
	.merit section:last-child{
   		margin-bottom: 0;
	}
	.merit section:nth-of-type(1){
		margin-top: 42px;
	}
	.merit section:nth-of-type(1):before{
	    position: absolute;
	    content: "";
	    top: 0;
 	    left: calc(50% - 147.5px);
	    width: 295px;
	    height: 150px;
		background: url(../images/top-merit-image01.png) no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.merit section:nth-of-type(2):before{
	    position: absolute;
	    content: "";
	    top: 0;
 	    left: calc(50% - 147.5px);
	    width: 295px;
	    height: 150px;
		background: url(../images/top-merit-image02.png) no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.merit section:nth-of-type(3):before{
	    position: absolute;
	    content: "";
	    top: 0;
 	    left: calc(50% - 147.5px);
	    width: 295px;
	    height: 150px;
		background: url(../images/top-merit-image03.png) no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.merit section:nth-of-type(4):before{
	    position: absolute;
	    content: "";
	    top: 0;
 	    left: calc(50% - 147.5px);
	    width: 295px;
	    height: 150px;
		background: url(../images/top-merit-image04.png) no-repeat;
		background-size: cover;
		z-index: 1;
	}
	.merit section:after{
	    position: absolute;
	    content: "";
	    top: 5px;
 	    left: calc(50% - 142.5px);
	    width: 295px;
	    height: 150px;
		background: #e9e4c8;
	}
	.merit h3{
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
    	padding-top: 170px;
		position: relative;
	}
	.merit section:nth-of-type(1) h3:before{
	    position: absolute;
	    content: "";
	    top: -11px;
		left: calc(50% - 160px);
	    width: 44px;
	    height: 44px;
	    background: #6fb6cb;
	    border-radius: 50%;
    	z-index: 1;
	}
	.merit section:nth-of-type(1) h3:after{
	    position: absolute;
	    content: "";
	    top: 0;
   		left: calc(50% - 153px);
	    width: 27px;
	    height: 21px;
	    background: url(../images/top-01-icon.png) no-repeat;
		background-size: cover;
    	z-index: 2;
	}
	.merit section:nth-of-type(2) h3:before{
	    position: absolute;
	    content: "";
	    top: -11px;
		left: calc(50% - 160px);
	    width: 44px;
	    height: 44px;
	    background: #94c1ce;
	    border-radius: 50%;
    	z-index: 1;
	}
	.merit section:nth-of-type(2) h3:after{
	    position: absolute;
	    content: "";
	    top: 0;
   		left: calc(50% - 153px);
	    width: 30px;
	    height: 21px;
	    background: url(../images/top-02-icon.png) no-repeat;
		background-size: cover;
    	z-index: 2;
	}
	.merit section:nth-of-type(3) h3:before{
	    position: absolute;
	    content: "";
	    top: -11px;
		left: calc(50% - 160px);
	    width: 44px;
	    height: 44px;
	    background: #b7d3db;
	    border-radius: 50%;
    	z-index: 1;
	}
	.merit section:nth-of-type(3) h3:after{
	    position: absolute;
	    content: "";
	    top: 0;
   		left: calc(50% - 153px);
	    width: 29px;
	    height: 21px;
	    background: url(../images/top-03-icon.png) no-repeat;
		background-size: cover;
    	z-index: 2;
	}
	.merit section:nth-of-type(4) h3:before{
	    position: absolute;
	    content: "";
	    top: -11px;
		left: calc(50% - 160px);
	    width: 44px;
	    height: 44px;
	    background: #c9e0e6;
	    border-radius: 50%;
    	z-index: 1;
	}
	.merit section:nth-of-type(4) h3:after{
	    position: absolute;
	    content: "";
	    top: 0;
   		left: calc(50% - 153px);
	    width: 30px;
	    height: 21px;
	    background: url(../images/top-04-icon.png) no-repeat;
		background-size: cover;
    	z-index: 2;
	}
	.merit p{
		line-height: 1.7;
	}
}