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

body.page-top .pane-contents{
	margin-top:0;
	padding:0;
	background:url(../../img/common/top_mv_bg.gif) repeat-x left 420px;
    overflow-x: hidden;
}
body.page-top .pane-contents > .container{
	position:relative;
	display:block;
	padding-top:590px;
}
.container:after{
	content:"";
	display:block;
	clear:both;
}
.container img{
  vertical-align:top;
}

.container h2{
  margin-bottom:20px;
  padding:0;
  font-size:22px;
  line-height:1.5;
  border:none;
  background:none;
}
.block-top-topic--body{
	margin:0 0 50px 0;
}

/* h2 icons */
h2.block-top-topic--title,
h2.pickup-items--title,
h2.campaign-info--title,
h2.month-ranking--title,
h2.month-ranking--title,
h2.skin-problem--title,
h2.pickup-column--title,
h2.media-publication-info--title{
	position: relative;
	padding-bottom:12px;
    font-size: 20px;
}
h2.block-top-topic--title:after,
h2.pickup-items--title:after,
h2.campaign-info--title:after,
h2.month-ranking--title:after,
h2.month-ranking--title:after,
h2.skin-problem--title:after,
h2.pickup-column--title:after,
h2.media-publication-info--title:after{
	position: absolute;
	left:0;
	bottom:0;
	display: block;
	content: "";
	height: 4px;
	width: 100%;
	background:url(../../img/top/title_line.gif) repeat-x 0 0;
}

h2.block-top-topic--title{
	padding-left:40px;
	background:url(../../img/top/top_icon_news.gif) no-repeat 0 0;
}
h2.pickup-items--title{
	padding-left:40px;
	background:url(../../img/top/top_icon_popular.gif) no-repeat 0 0;
}
h2.campaign-info--title{
	padding-left:40px;
	background:url(../../img/top/top_icon_campaign.gif) no-repeat 0 0;
}
h2.month-ranking--title{
	padding-left:40px;
	background:url(../../img/top/top_icon_ranking.gif) no-repeat 0 0;
}
h3.month-ranking-helthy--title{
	padding-left:35px;
	background:url(../../img/top/top_icon_ranking_helth.gif) no-repeat 10px 0.2em;
	font-size:20px;
	color:#336600;
}
h3.month-ranking-skincare--title{
	padding-left:35px;
	background:url(../../img/top/top_icon_ranking_skincare.gif) no-repeat 10px 0.2em;
	font-size:20px;
	color:#c35e6a;
}
h3.month-ranking-oral--title{
	padding-left:35px;
	background:url(../../img/top/top_icon_ranking_oralcare.gif) no-repeat 10px 0.2em;
	font-size:20px;
	color:#00587c;
}
h2.skin-problem--title{
	padding-left:40px;
	background:url(../../img/top/top_icon_problem.gif) no-repeat 0 0;
}
h2.pickup-column--title{
	padding-left:40px;
	font-size:20px;
	background:url(../../img/top/top_icon_column.gif) no-repeat 0 0;
}
h2.media-publication-info--title{
    padding-left:40px;
	background:url(../../img/top/top_icon_media.png) no-repeat 0 0;
}

/*===== 2019.10 ���Y�݌����lj� =====*/

.block_onayami_menu{
    padding:6px 0;
    font-size: 90%;
    position: relative;

}

.block_onayami_menu:before{
    content: "";
    display: block;
    z-index: -1;
    width:200vw;
    height:34px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: #d7dae2 1px solid;
}

.onayami_wrapper{
    width: 1020px;
    margin: 0 auto;
    display: flex;
}

.onayami-title{
    padding: 5px 8px 3px;
    border: 1px solid #4d95b2;
    background: #4d95b2;
    color: #fff;
    margin-right: 20px;
    position: relative;
    z-index: 10;
}

.onayami-title:after{
    content: "";
    display: block;
    position: absolute;
    right: -11px;
    top:3px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-top: 1px solid #4d95b2;
    border-right: 1px solid #4d95b2;
    background: #4d95b2;
    transform: rotate(45deg);
    z-index: -1;
}

.onayami-link-container{
    display: flex;
    align-items: center;
}

.onayami-link{
    margin-right: 20px;
}

.onayami-link:last-of-type{
    margin-right: 0;
}


/* slick */
#block_of_top_body{
	position:absolute;
	width:100%;
	left:0;
	top:0;
}
#top_slider{
	width:1020px;
	margin:20px 0 0 0;
	padding-bottom:5px;
}
#top_slider .slickImgs{
	height:420px;
}
#top_slider .slick-list{
	height:420px;
	overflow: hidden;
}
#top_slider .slick-block{
	margin:0;
}
#top_slider .slick-wrapper .slick-dots{
	margin:0;
	padding:5px 0 0 0;
}
#top_slider .slick-wrapper .slick-dots li{
	position:relative;
	width:180px;
	margin:5px;
	border:#fbfbfb 1px solid;
	box-shadow:1px 1px 1px rgba(100,100,100,0.1);
}
#top_slider .slick-wrapper .slick-dots li.slick-active{
	border:#c5dbe3 1px solid;
}
#top_slider .slick-wrapper .slick-dots li.slick-active:before{
	content: "";
	position: absolute;
	right: 0;
	top: -7px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: transparent transparent #c5dbe3 transparent;
	border-width: 0 7px 7px 7px;
}
#top_slider .slick-wrapper .slick-dots li img{
	width:100%;
	vertical-align:top;
	border:#fff 3px solid;
	cursor:pointer;
}
#top_slider .slick-wrapper .slick-dots li.slick-active img{
	border:#c5dbe3 3px solid;
}
#top_slider .slick-wrapper .slick-prev,
#top_slider .slick-wrapper .slick-next{
	top:185px;
	margin-top:0;
}
#top_slider .slick-wrapper .slick-dots li img:hover{
	opacity:0.75;
}

#mainWrapper{
	width:1020px;
	margin:0 auto;
}
.pane-main{
	float:left;
	width:760px;
}


/* --- �E���j���[ --- */
.pane-right-menu{
	grid-columns:none;
	grid-rows:none;
	float:right;
	width:240px;
	margin:0;
}

/* �I�X�X���R���e���c */
.recommend-contents{
	margin-bottom:30px;
}
.recommend-contents li{
	margin-bottom:15px;
}
.recommend-contents li a{
	display:block;
	color:inherit;
	text-decoration:none;
}
.recommend-contents li .recommend-others-panel{
	padding-bottom:3px;
	border-radius:3px;
	background-color:#FFF;
	box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.recommend-contents li img{
	border-radius:3px 3px 0 0;
}
.recommend-contents li .recommend-others-panel p{
	margin:20px 20px 20px 15px;
	padding-left:12px;
	background:url(../../img/common/icon_arw.png) no-repeat 0 0.3em;
}
/* */

/* �ŐV�R���� */
.pickup-column{
	margin-bottom:30px;
}
.pickup-column-list li{
	margin-bottom:20px;
	padding-bottom:20px;
	box-shadow:0 2px 2px -2px rgba(0,0,0,0.2);
}
.pickup-column-panel a{
	display:block;
	color:inherit;
	text-decoration:underline;
}
.pickup-column-panel a:after{
	content:"";
	display:block;
	clear:both;
}
.pickup-column-img{
	float:left;
	position: relative;
	width:50px;
	height: 50px;
	border-radius:50%;
	overflow: hidden;
}
.pickup-column-img img{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 50px;
    width: auto;
    max-width: none;
}
.pickup-column-txt{
	float:right;
	width:180px;
	font-size:16px;
	text-decoration:underline;
}
.pickup-column-link{
	text-align:right;
}
/* */

/* �u�����h�ꗗ */
.brand-list{
	margin-bottom:30px;
}
.brand-list h2{
	background-color:#eaecf0;
	padding:10px 14px;
	font-size:16px;
}
.brand-list-link{
	padding:0 10px;
}
.brand-list-link li{
	margin-bottom:20px;
	padding-bottom:20px;
	box-shadow:0 2px 2px -2px rgba(0,0,0,0.2);
}
.brand-list-link a{
	display:table;
	table-layout:fixed;
	width:100%;
	color:inherit;
	text-decoration:none;
}
.brand-list-link-img,
.brand-list-link--title{
	display:table-cell;
	vertical-align:middle;
}
.brand-list-link-img{
	width:85px;
}
.brand-list-link--title{
	padding:0 30px 0 10px;
	background:url(../../img/common/icon_arw_l.png) no-repeat right 10px center;
}
/* */

/* ���w���T�|�[�g */
.support-info h2{
	background-color:#eaecf0;
	padding:10px 14px;
	font-size:16px;
}
.support-info-contact{
	padding:0 10px;
}
.support-info-contact--catalog{
	margin-bottom:20px;
	padding-bottom:20px;
	box-shadow:0 2px 2px -2px rgba(0,0,0,0.2);
}
.support-info-contact--catalog h3{
	padding-left:32px;
	background:url(../../img/top/top_icon_catalog.png) no-repeat 0 0;
}
.support-info-contact--tel{
	margin-bottom:30px;
}
.support-info-contact--tel h3{
	padding-left:22px;
	background:url(../../img/top/top_icon_tel.png) no-repeat 0 0;
}
.support-info-contact--tel-number{
	border:#bbb 1px solid;
	margin-bottom:10px;
	padding:10px 10px 10px 53px;
	background:url(../../img/top/top_icon_freedial.gif) no-repeat 10px center;
	font-size:18px;
	line-height:1.3;
	font-weight:bold;
}
.support-info-contact--notes{
	margin-bottom:10px;
	font-size:12px;
	color:#999;
}
.support-info-pharmaceutical-wrapper a.btn-normal{
	display:block;
	font-size:14px;
	padding-left:10px;
	padding-right:25px;
	background-position:right 8px center;
	box-shadow:0 3px 3px -3px rgba(0,0,0,0.2);
}
.support-info-pharmaceutical h2{
	background-color: #eaecf0;
	padding: 10px 14px;
	font-size: 16px;
}
/* --- */


/* �V����� */
.block-top-topic--items li{
	position:relative;
	margin-bottom:10px;
	padding:0 0 0 100px;
	border:none;
}
.block-top-topic--items li dl{
	display:table;
}
.block-top-topic--items li dl dt,
.block-top-topic--items li dl dd{
	display:table-cell;
	vertical-align:top;
	padding:2px 0 0 0;
}
.block-top-topic--items li dl dt{
	padding-right:10px;
	color:#999;
}
.block-top-topic--items li a{
	display:block;
	color: inherit;
	text-decoration: none;
    font-size: 16px;
}
.block-top-topic--items li a dd{
	text-decoration:underline;
}
.block-top-topic--items li .block-top-topic--icon{
	position:absolute;
	left:0;
	top:0;
	z-index:2;
	width: 90px;
}
.block-top-topic--next-page{
	display:none !important;
}
/* */


/* �l�C���i */
#pickup_items{
	margin-bottom:30px;
}
.pickup-list-col4{
  clear:both;
  font-size:0;
  line-height:0;
}
.pickup-list-col4 li{
  display:inline-block;
  vertical-align:top;
  width:175px;
  margin:0 0 20px 20px;
  font-size:16px;
  line-height:1.5;
}
.pickup-list-col4 li:nth-child(4n+1){
  margin-left:0;
}
.pickup-list-col4 a{
	display: block;
	color:inherit;
	text-decoration:none;
}
.pickup-img{
	margin-bottom:15px;
	border-radius: 4px;
	width: 100%;
}
.pickup-title{
	margin:0;
	padding-bottom:15px;
	font-weight: bold;
	text-decoration: underline;
}
.pickup-detail,
.campaign-pickup-detail--detail{
	margin:0;
}
.pickup-discount .discount-before-price,
.campaign-pickup-discount .discount-before-price {
    margin-left: 5px;
	text-decoration: line-through;
}

.pickup-detail .discount-after,
.campaign-pickup-detail--detail .discount-after {
    text-align: right;
}

.pickup-detail .discount-after-price,
.campaign-pickup-detail--detail .discount-after-price{
    margin-left: 5px;
	color:#ec5050;
    font-weight: bold;
}

.pickup-detail .discount-tax,
.campaign-pickup-detail--detail .discount-tax{
    font-size: 14px;
}

.pickup-icon-category{
	margin-top:5px;
}
.pickup-icon-category img{
	height:28px;
	width:auto !important;
}
/* */


/* ���݃L�����y�[�����̏��i */
.campaign-pickup{
	margin-bottom:50px;
	padding:0 20px;
}
.campaign-pickup .slick-wrapper{
  margin:0 -10px;
} 
.campaign-pickup .slick-wrapper .slick-prev{
  left:-15px;
  margin-top:-25px;
}
.campaign-pickup .slick-wrapper .slick-next{
  right:-15px;
  margin-top:-25px;
}
.slick-campaign .slick-list{
  box-shadow:none;
  border-radius:0;
}
.slick-campaign .slick-slide{
  margin:5px 10px;
  border:#f0f0f1 1px solid;
  border-radius:5px;
  background-color:#FFF;
  box-shadow:0 3px 3px -3px rgba(0,0,0,0.2);
}
.slick-campaign .slick-slide a{
  padding-top:10px;
  text-decoration:none;
  color:inherit;
}
.slick-campaign .campaign-pickup-img{
  display:block;
  width:180px;
  margin:10px auto;
}
.slick-campaign .campaign-pickup-detail{
  padding:20px 10px;
  background-color:#f7fdfe;
  border-radius:0 0 5px 5px;
}
.slick-campaign .campaign-pickup-detail--lead-txt{
  margin-bottom:20px;
  font-size:16px;
  line-height:1.3;
  font-weight:bold;
}
.slick-campaign .campaign-pickup-detail--title{
  margin-bottom:20px;
  font-size:16px;
  line-height:1.3;
  font-weight:bold;
  color:#4d95b2;
  text-decoration:underline;
}
.slick-campaign .campaign-pickup-detail--detail{
  font-size:16px;
}
.slick-campaign .campaign-pickup-price{
  font-weight:bold;
}
.slick-campaign .discount-before{
  text-decoration:line-through;
}
.slick-campaign .discount-price{
  font-weight:bold;
}
.slick-campaign .campaign-tile1,
.slick-campaign .campaign-tile2,
.slick-campaign .campaign-tile3{
  padding:1px 0;
}

.slick-campaign .campaign-pickup-detail2{
    padding: 0 10px 20px;
    background-color:#f7fdfe;
}
.slick-campaign .campaign-pickup-detail--btn a{
  display: block;
  margin:0 0 0 0;
  padding:10px 25px 10px 15px;
  text-align:center;
  border:#f5a44b 2px solid;
  color:#f5a44b;
  font-size:16px;
  line-height:1.3;
  font-weight:bold;
  background:#FFF url(../../img/common/icon_arw_orange.png) no-repeat right 10px center;
  box-shadow:0 3px 3px -3px rgba(0,0,0,0.2);
}

.slick-campaign .campaign-icon{
	margin:0 10px;
}


/* ranking */
.month-ranking{
	margin-bottom:60px;
}
.month-ranking div[class$="goods_"] ul{
	font-size:0;
}
.month-ranking div[class$="goods_"] li{
	display:inline-block;
	width:242px;
	margin-left:16px;
	vertical-align:top;
	font-size:14px;
	background-color:#FFF;
	border:#f0f0f1 1px solid;
	border-radius:4px;
	box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.month-ranking div[class$="goods_"] li:nth-child(3n+1){
	margin-left:0;
}
.month-ranking div[class$="rank_"]{
	height:44px;
	overflow:hidden;
	text-indent:-9999px;
	background-color:#ddd;
	background-repeat:no-repeat;
	background-position:center center;
	border-radius:3px 3px 0 0;
}
.month-ranking div[class$="tile_item_"]{
	padding-bottom:1px;
}
.month-ranking div[class$="tile_item_"]:after{
	content:"";
	display:block;
	clear:both;
}
.month-ranking div[class$="img_"]{
	display: inline-block;
	width:100px;
	margin:15px 5px 10px 10px;
	vertical-align: middle;
}
.month-ranking div[class$="desc_"]{
	display: inline-block;
	width:110px;
	margin:15px 10px 10px 0;
	vertical-align: middle;
}
.month-ranking div[class$="icon_"]{
	margin-bottom:10px;
}
.month-ranking div[class$="icon_"] img{
	height:28px;
	width:auto !important;
}
.month-ranking div[class$="name_"] a{
	color:inherit;
	font-weight:bold;
}
.month-ranking div[class$="price_"]{
	font-weight:bold;
}
.month-ranking div[class$="price_"] small{
	font-weight:normal;
}

.month-ranking-helthy,
.month-ranking-skincare,
.month-ranking-oral{
	margin-bottom:30px;
}

.month-ranking-helthy div[class$="rank_"]{
	background-color:#ecf5e0;
}
.month-ranking-helthy #rank1 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_helthy_01.png);
	background-size:56px;
}
.month-ranking-helthy #rank2 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_helthy_02.png);
	background-size:56px;
}
.month-ranking-helthy #rank3 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_helthy_03.png);
	background-size:56px;
}

.month-ranking-skincare div[class$="rank_"]{
	background-color:#fdf0f0;
}
.month-ranking-skincare #rank1 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_skincare_01.png);
	background-size:56px;
}
.month-ranking-skincare #rank2 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_skincare_02.png);
	background-size:56px;
}
.month-ranking-skincare #rank3 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_skincare_03.png);
	background-size:56px;
}


.month-ranking-oral div[class$="rank_"]{
	background-color:#e1f1f8;
}
.month-ranking-oral #rank1 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_oral_01.png);
	background-size:56px;
}
.month-ranking-oral #rank2 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_oral_02.png);
	background-size:56px;
}
.month-ranking-oral #rank3 div[class$="rank_"]{
	background-image:url(../../img/icon/icon_ranking_oral_03.png);
	background-size:56px;
}
/* */


/* ���Y�݂���T�� */
.skin-problem{
	margin-bottom:50px;
}
.skin-problem-list{
  font-size:0;
}
.skin-problem-panel{
  display:inline-block;
  width:370px;
  vertical-align:top;
  margin:0 0 20px 20px;
  padding:10px;
  background:#e4eeda url(../../img/common/bg_dot.gif) repeat 0 0;
  box-shadow:2px 2px 2px rgba(0,0,0,0.2);
}
.skin-problem-panel:nth-child(2n+1){
  margin-left:0;
}
.skin-problem-panel--body{
  padding:20px 20px 15px 20px;
  font-size:16px;
  background-color:#FFF;
}
.skin-problem-panel--body h3{
  margin:0 0 20px 0;
  padding-left:28px;
  font-size:20px;
  color:#4d95b2;
}
.skin-problem-panel--body h3.skin-problem--body{
  background:url(../../img/top/top_icon_problem_body.png) no-repeat 0 2px;
}
.skin-problem-panel--body h3.skin-problem--skin{
  background:url(../../img/top/top_icon_problem_skin.png) no-repeat 0 2px;
}
.skin-problem-panel--body h3.skin-problem--hair{
  background:url(../../img/top/top_icon_problem_hair.png) no-repeat 0 2px;
}
.skin-problem-panel--body h3.skin-problem--oral{
  background:url(../../img/top/top_icon_problem_oral.png) no-repeat 0 2px;
}
.skin-problem-panel--body li{
  margin-bottom:10px;
}
.skin-problem-panel--body li a{
  display:inline-block;
  color:inherit;
  padding-left:30px;
  background:url(../../img/top/top_icon_problem_link.png) no-repeat 0 2px;
}



/* footer */
.others-links:after,
.official-sns:after,
.related-links:after,
.index-links-body:after{
  content:"";
  display:block;
  clear:both;
}
.others-links-body{
	width:1020px;
	margin:0 auto;
}
.others-links{
  margin-bottom:50px;
  padding:10px 0 1px 0;
  border:#dfe2e8 1px solid;
  border-width:1px 0;
  font-size:0;
}
.official-sns,
.related-links{
  float:left;
  margin-bottom:10px;
}
.official-sns{
  width:260px;
}
.official-sns-header,
.official-sns-list,
.official-sns-list li,
.related-links-header,
.related-links-list,
.related-links-list li,
.brand-links-list{
  display:inline-block;
  vertical-align:middle;
}
.brand-links-list{
  font-size:14px;
  line-height:1.4;
}
.official-sns--title,
.related-links--title{
  font-size:14px !important;
  margin:0 10px 0 0 !important;
}
.official-sns-list li{
  width:40px;
  margin-left:10px;
}
.official-sns-list a,
.related-links-list a{
  display:block;
}
.related-links-list li{
  margin-left:10px;
}
.brand-links-list{
  margin-left:20px;
}

#index_links{
  width:1020px;
  margin:0 auto 70px auto;
}
.index-links h2{
  margin:40px 0 20px 0 !important;
  font-size:14px !important;
}
.index-links h3,
.index-links h4{
  margin:0 0 15px 0 !important;
  font-size:14px !important;
  color:#4e94b1;
  font-weight:normal;
}
.index-links h4{
  margin-bottom:10px !important;
}
.index-links-body{
  margin-left:-20px;
  margin-bottom:10px;
}
.index-links-body .col2{
  float:left;
  width:500px;
  margin-left:20px;
}
.index-links-body .col4{
  float:left;
  width:240px;
  margin-left:20px;
}
.index-links-body li{
  margin-bottom:10px;
}

.index-links-body li a{
  display:inline-block;
  padding-left:12px;
  background:url(../../img/common/icon_arw.png) no-repeat 0 0.3em;
  color:inherit;
  text-decoration:none;
}


/* inicial bnr */
ul.inicial-bnr{
	margin-bottom:30px;
	font-size:0;
}
ul.inicial-bnr li{
	width:370px;
	display:inline-block;
	vertical-align:top;
	margin:0 0 20px 20px;
	padding:5px;
	font-size:14px;
	background:#e1f1f8 url(../../img/common/bg_dot.gif) repeat 0 0;
	border-radius:4px;
	box-shadow:0 2px 2px rgba(0,0,0,0.2);
}
ul.inicial-bnr li:nth-child(2n+1){
	margin-left:0;
}



/*======= 202003 掲載情報 追加 =======*/

.media-publication-info{
    position: relative;
    padding-bottom: 20px;
}


.media-publication-info ul.media-publication-info_list{
    width: 100%;
}

.media-publication-info ul.media-publication-info_list li{
    margin-bottom: 20px;
}

.media-publication-info ul.media-publication-info_list li span{
    display: inline-block;
    vertical-align: top;
    margin-right: 3%;
}

.media-publication-info ul.media-publication-info_list li span:last-of-type{
    margin-right: 0;
}

.media-publication-info ul.media-publication-info_list li span.media_img{
    width: 10%;
}

.media-publication-info ul.media-publication-info_list li span.media_day{
    width: 12%;
}

.media-publication-info ul.media-publication-info_list li span.media_contents{
    width: 70%;
}

.media-publication-info ul.media-publication-info_list li span.media_contents a{
    color: #444;
}

.media-publication-info a.media-publication-info_more{
    color: #444;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
}


/*======= 202003 掲載情報 追加 =======*/

/*======= 202010 サラナモニターバナー  =======*/

#block_of_top_free1 .contents_top_bnr{
        margin-bottom: 10px;
}

/*======= 202010 サラナモニターバナー  =======*/