@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------
card
--------------------------------------------------*/

.medicom-item{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    background:#111;
    border-radius:24px;
    padding:45px;
    margin-bottom:60px;
	transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.medicom-item:hover{
    transform:translateY(-6px);
    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.04) inset;
}

.medicom-item.reverse{
    flex-direction:row-reverse;
}



/*--------------------------------------------------
photo
--------------------------------------------------*/

.item-photo{
    width:58%;
}

.item-photo img{
    width:100%;
    display:block;
}



/*--------------------------------------------------
text
--------------------------------------------------*/

.item-text{
    width:38%;
}

.brand{
    display:inline-block;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    padding:5px 15px;
    font-size:12px;
    letter-spacing:.1em;
    margin-bottom:18px;
}

.item-text h2{
    margin:0 0 18px;
    font-size:34px;
    line-height:1.3;
}

.item-text h2 span{
    display:block;
    margin-top:6px;
    font-size:.55em;
}

.release{
    display:inline-block;
    background:#fff;
    color:#c60018;
    border-radius:999px;
    padding:8px 18px;
    font-size:14px;
    font-weight:bold;
    margin-bottom:25px;
}

.price{
    margin:0 0 25px;
    font-size:28px;
    font-weight:700;
}

.price span{font-size: 20px; display: inline-block; margin-right: 5px;}
.price span.tax{font-size: 16px;}

.item-text ul{
    margin:0;
    padding-left:1.2em;

}

.item-text li{
    margin-bottom:20px; line-height: 1.4;
}

@media screen and (max-width:767px){
.item-text h2{ margin:0 0 18px;font-size:30px;}
.item-text li{font-size: 13px;}
}


/*--------------------------------------------------
copyright
--------------------------------------------------*/

.copyright{
    width:100%;text-align: left;
    margin-top:35px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.15);
    font-size:11px;
    color:#aaa;
    line-height:1.8;
}

.campaign{
width: fit-content;
    margin:40px auto 0;
    padding:25px 30px;
    border:2px solid #FF6B6E;
    border-radius:20px;
    position:relative;
}

.campaign-label{

    display:inline-flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:120px;

    height:58px;

    background:#FF6B6E;

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.25em;

    line-height:1.4;

    border-radius:10px;

    margin-bottom:24px;

}

.campaign h3{
    margin:0 0 20px;
    font-size:22px;

    font-weight:700;

    line-height:1.3;

}

.campaign p{
    margin:0;
    font-size:15px;
    line-height:1.5;
}

.campaign-note{

    margin-top:15px !important;
    font-size:13px !important;
    color:#ddd;
}

.campaign p span{
    color:#FF6B6E; font-size: 18px;
    font-weight:bold;
}




@media screen and (max-width:700px){

.medicom-item{
	display:block; text-align: center;
	padding:25px; max-width: 400px;
	margin:0 auto 35px;
	border-radius:18px;
}

.medicom-item:hover{
	transform:none;
	box-shadow:none;
}

.item-photo{
	width:100%;
	margin-bottom:25px;
}

.item-text{
	width:100%;
}

.brand{
	font-size:11px;
	padding:4px 13px;
}

.item-text h2{
	font-size:30px;
	margin-bottom:15px; font-weight: bold;
}

.release{
	font-size:13px;
	padding:7px 16px;
	margin-bottom:20px;
}

.price{
	font-size:22px;
	margin-bottom:20px;
}

.price span{

	font-size:18px;

}

.price span.tax{

	font-size:14px;

}

.item-text ul{

	padding-left:1em;

}

.item-text li{

	font-size:15px;

	margin-bottom:15px;

}

.copyright{
	font-size:10px;
	line-height:1.6;
	margin-top:25px;
	padding-top:15px;

}

/*------------------------------
Campaign
------------------------------*/

.campaign{

	width:auto;

	margin-top:25px;

	padding:20px;

	border-radius:16px;

}

.campaign-label{

	width:140px;
	height:52px;
	font-size:15px;
	margin-bottom:18px;
}

.campaign h3{

	font-size:18px;

	margin-bottom:15px;

	line-height:1.5;

}

.campaign p{
	font-size:14px;
	line-height:1.6;
text-align: left;
}

.campaign p br{

	display:none;

}

.campaign p span{

	font-size:16px;

}

.campaign-note{

	font-size:12px !important;

	margin-top:10px !important;

}

}


@media screen and (max-width:600px){

.medicom-item{max-width: 300px;
}

}