@charset "utf-8";

/*#######################################################

https://withmedica.com/

#########################################################*/


@media screen and (min-width: 1401px) {
	body {		
		background:url(../img/top_bg_1.jpg) no-repeat top center;
	}		
}



/* mainimage
-------------------------------------------------------------- */
#mainimage {
	margin: 0 auto;
    background:url(../img/top_bg_1_tablet.jpg) repeat -100px center !important;
}
#mainimage .left {
	width:calc(100% - 280px);
	float:left;
	position:relative;
}
#mainimage .left img {
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	
	border-radius: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}
#mainimage .left span {
	position:absolute;
	display:inline-block;
	padding: 30px;
	background:#fff;
	top:50px;
	left:0;
	z-index:10;
	font-size:40px;
	color:var(--deep-blue);
	font-weight:bold;
	text-align:center;

	filter: alpha(opacity=90);
	-moz-opacity:0.9;
	opacity:0.9;
}
#mainimage .left div {
	position:absolute;
	display:inline-block;
	padding: 30px;
	background:#fff;
	top:550px;
	left:0;
	z-index:10;
	font-size:35px;
	font-weight:bold;
	text-align:center;

	filter: alpha(opacity=90);
	-moz-opacity:0.9;
	opacity:0.9;
}


#mainimage .right {
	width:260px;
	float:right;
}
#mainimage .right div {
	margin-bottom:25px;
	padding:18px 22px;
	background:#fff;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}
#mainimage .right div a {
	display:block;
	line-height:0;
}
#mainimage .right div:nth-child(1) a:nth-child(1) {
	display:block;
	margin-bottom:20px;
}
#mainimage .right div img {
	width:100%;
}

@media screen and (max-width: 1400px) and (min-width: 981px) {
	
	#mainimage {
		margin: 0 auto;
		padding:40px 0 0 0;
		background:url(../img/top_bg_1_tablet.jpg) no-repeat center 30px !important;
	}
    #mainimage .in {
        margin-bottom: 0;
    }
	#mainimage .left {
		width:100%;
        height: 340px;
		float:none !important;
	}
	#mainimage .right {
		width:100%;
		float:none !important;
        
        display: grid;
        grid-template-columns: 2.4fr 1fr;
	}
	#mainimage .right div {
        box-shadow: none;
        background: none;
        margin-bottom: 0;
        padding: 10px;
	}
    #mainimage .right div:nth-child(1) {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #mainimage .right div:nth-child(1) a {
        padding-right:  20px;
    }

}

@media screen and (max-width: 980px) {
	
	#mainimage {
		margin: 0 auto 50px;
	}
	#mainimage .left {
		width:96%;
		height:32vw;
		margin: 0 auto;
		float:none;
	}
	#mainimage .left span {
		padding: 1.2vw 3vw 1vw;
		top:3vw;
		font-size:2.5vw;
	}
	#mainimage .left div {
		padding: 2vw 2vw 1.6vw 2vw;
		top:52vw;
		font-size:3vw;
	}
	#mainimage .right {
		display:none;
	}
}






/* 商品を探す
-------------------------------------------------------------- */

#search-item {
    padding-top: 60px;
	background:url(../img/top_bg_2.jpg) repeat-y top center;
}

#itemlist-content1 {
	
	/*
		⇒ common.css  に記述。
		
		以下 o.w.
	*/
}


#itemlist-content1 .unit {
	flex-basis: 23% !important;
}
@media screen and (max-width: 1400px) and (min-width: 981px) {
	#itemlist-content1 .unit {
		flex-basis: 31% !important;
	}
}
@media screen and (max-width: 980px) {
	#search-item {
		padding-top:30px;
	}
	#itemlist-content1 .unit {
		flex-basis: 48% !important;
	}
}




/* 公式ショップから探す
-------------------------------------------------------------- */

#search-mall {
	margin-bottom:50px;
}
#search-mall p {
	padding:0 2% 30px 2%;
	font-size:1rem;
	text-align:center;
}
#search-mall .contents {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#search-mall .contents a,
#search-mall .contents span {
	flex-basis: 17%;
	display:block;
	margin-bottom:15px;
	text-align:center;
	text-decoration:none;
}
#search-mall .contents img {
	max-width:240px;
	width:100%;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}
#search-mall .contents span {
	background:#eee;
}
#search-mall .contents span img {
	filter: alpha(opacity=40);
	-moz-opacity:0.4;
	opacity:0.4;
}
@media screen and (max-width: 980px) {
	#search-mall .contents {
		justify-content:normal;
	}
	#search-mall .contents a,
	#search-mall .contents span {
		flex-basis: 29%;
		margin: 0 2% 20px;
	}
}





/* 目的から探す
-------------------------------------------------------------- */

#search-purpose {
}
#search-purpose .contents {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#search-purpose .contents a {
	flex-basis: 30%;
	text-align:center;
	text-decoration:none;
}
#search-purpose .contents a img {
	max-width:462px;
	width:100%;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 980px) {
	#search-purpose .contents {
		justify-content: normal;
	}
	#search-purpose .contents a {
		flex-basis: 45%;
		margin: 0 2% 20px;
	}
}




/* 健康ライブラリー
-------------------------------------------------------------- */

#library {
	padding-top:230px;
	background:url(../img/top_bg_3.jpg) no-repeat top center;
}
#library .to-list {
	padding:30px 0;
}
#library-in .contents {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#library-in .contents a {
	flex-basis: 22%;
	margin-bottom:50px;
	text-align:center;
	text-decoration:none;
}
#library-in .contents a img {
	max-width:320px;
	width:100%;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 980px) {
	#library {
		margin-bottom:0;
		padding-top:0px;
		padding-bottom:30px;
		background:url(../img/top_bg_splite_smp.jpg) repeat;
		background-size:1%;
	}
	#library .to-list {
		padding:15px 0;
	}
	#library-in .contents {
		justify-content: normal;
		padding: 0 2%;
	}	
	#library-in .contents a {
		flex-basis: 46%;
		margin: 0 2% 20px;
	}	
}





/* 動画ライブラリー
-------------------------------------------------------------- */

#movie {
	padding:50px 0;
}
#movie .contents {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#movie .contents a {
	flex-basis: 17%;
	padding:15px;
	text-align:center;
	text-decoration:none;
	background:#fff;

	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}
#movie .contents a img {
	max-width:250px;
	width:100%;
}
#movie .contents span {
	display:block;
	padding:5px 10px 0;
	text-align:left;
}





/* 記事ライブラリー
-------------------------------------------------------------- */

#kiji {
	padding:50px 0;
	background:url(../img/top_bg_5.jpg) no-repeat top center;
}
.health.kiji ul li {
	
	/*
		⇒ common.css  に記述。
		
		以下 o.w.
	*/
	
	flex-basis: 18%;
}


@media screen and (max-width: 1400px) and (min-width: 981px) {
	.health.kiji ul li {
		flex-basis: 31%;
	}
}
@media screen and (max-width: 980px) {
	#kiji {
		margin:0;
		padding-top:0px;
		background:url(../img/top_bg_splite_smp.jpg) repeat;
		background-size:1%;
	}
	.health.kiji ul li {
		flex-basis: 48%;
	}

}





/* ウィズメディカ倶楽部
-------------------------------------------------------------- */

#club {
	padding:180px 0 50px ;
	background:url(../img/top_bg_4.jpg) no-repeat center -800px;
}
#club-in .contents {
	width:100%;
	margin: 0 0 100px;
	padding: 0 150px 94px;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	background:url(../img/top_club_shelf.jpg) no-repeat bottom center;
}
#club-in .contents a {
	flex-basis: 25%;
	text-decoration:none;
	text-align:center;
}
#club-in .contents a img {
	display:block;
	width:100%;
}

@media screen and (max-width: 1400px) and (min-width: 981px) {
	#club-in .contents {
		margin: 0 0 50px;
		padding: 0 0 94px;
	}
	#club-in .contents a {
	}
}
@media screen and (max-width: 980px) {
	#club {
		padding:0 0 50px;
		background:none;
		background-color:#F8F8F8;
	}
	#club-in .contents {
		margin: 0 0 50px;
		padding: 0;
		background:none;
	}
	#club-in .contents a {
		flex-basis: 25%;	
	}
}





/* バナー
----------------------------------------------------------------- */

#banner .contents {
	width:100%;
	padding-top:100px;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#banner .contents a {
	flex-basis: 40%;
	margin-bottom:60px;
	text-decoration:none;
	text-align:center;
}
#banner .contents a img {
	display:block;
	max-width:716px;
	width:100%;
	box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.05);

	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;	
}
@media screen and (max-width: 1400px) and (min-width: 981px) {
	#banner .contents {
		padding-top:50px;
	}
	#banner .contents a {
		flex-basis: 45%;
		margin-bottom:40px;
		text-decoration:none;
	}
}
@media screen and (max-width: 980px) {
	#banner .contents {
		padding-top:20vw;
		background:url(/common/img/top_bg_contents_smp.jpg) no-repeat;
		background-size:cover;
	}
	#banner .contents a {
		flex-basis: 46%;
		margin-bottom:30px;
	}
	
}





/* お知らせ
----------------------------------------------------------------- */

#news {
	padding-top:100px;
}
#news .contents {
	width:100%;
}
#news .contents .unit {
	margin-bottom:20px;
}
#news .contents .unit .head {
	padding:25px 50px 20px;
	background:#eee;
	
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
}
#news .contents .unit .head span.date {
	display:inline-block;
	border-right:solid 1px #333;
	margin-right:30px;
	padding-right:30px;
	font-size:1.2rem;
	font-weight:bold;
	line-height:100%;
}
#news .contents .unit .head span.ttl {
	color:#3378C6;
	font-size:1.2rem;
	font-weight:bold;
	line-height:100%;
}
#news .contents .unit .content {
	padding:30px;
	line-height:180%;
	font-size:1.1rem;
}

@media screen and (max-width: 980px) {
	#news {
		padding-top:40px;
	}
	#news .contents {
		width:96%;
		margin: 0 auto;
	}
	#news .contents .unit .head {
		padding:12px 25px 8px;
	}
	#news .contents .unit .head span.date {
		display:block;
		margin:0 0 10px 0;
		padding-right:0;
		border:none;
		font-size:4vw;
	}
	#news .contents .unit .head span.ttl {
		font-size:4vw;
	}
	#news .contents .unit .content {
		padding:2%;
		line-height:160%;
		font-size:3vw;
	}	
}