@charset "utf-8";

.mokuji p a:hover {text-decoration: underline!important;}
.mokuji ul li a:hover {text-decoration: underline!important;}
.mokuji ul {padding: 0 20px;}
.mokuji ul li {margin: 5px 0; line-height: 1.4; padding-left: 1em; text-indent: -1em; overflow: hidden;}
.mokuji ul li a {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.row-ar {display: flex; flex-wrap: wrap;}
.col-6-ranking-kakaku {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
.col-6-ranking-left {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.col-6-ranking-right {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}

.afam-waku {border: solid 2px #430b5b; max-width: 645px; margin-top: 30px;}
.afam-waku-header {position: relative; width: 100%; background-color: #f2d5fc; padding-bottom: 10px;}
.afam-waku-header img {position: absolute; top: 5px; left: 10px;}
.afam-waku-header h3 {height: 60px; font-size: 18px; margin: 0; padding-left: 70px; font-weight: 600; line-height: 1.2; max-height: 3.2em; background-color: inherit; overflow: hidden; visibility: visible; word-wrap: break-word; word-break: break-all;}
.afam-waku-header h3 a {text-decoration: none;}
.afam-waku-header h3 a:hover {color: #430b5b;}
.afam-waku-header h3 span {display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; position: relative; z-index: 1; overflow: hidden;}
.afam-waku-header .afam-tag {width: 645px; text-align: center; display: inline-block;}
.afam-waku-header .afam-tag .afam-brand {border: solid 1px #000; width: 148px; display: inline-flex; margin: 0 10px;}
.afam-waku-header .afam-tag .afam-color {border: solid 1px #1b5364; width: 148px; display: inline-flex; margin: 0 10px;}
.afam-waku-header .afam-tag .afam-p_supply {border: solid 1px #49651b; width: 148px; display: inline-flex; margin: 0 10px;}
.afam-waku-header .afam-tag p {text-align: left; font-size: 10px; margin: 0; padding: 2px 5px; width: 74px; line-height: 1.6;}

.col-6-ranking-kakaku p {float: left; margin: 0; padding: 20px 10px;}
.col-6-ranking-kakaku p.kakaku-date {font-size: 14px; padding: 5px 10px;}
.col-6-ranking-kakaku h3 {float: right; margin: 0; padding: 20px 10px; background-color: inherit; font-weight: 600; color: #fe0000;}
.col-6-ranking-kakaku h3 span {font-size: 28px;}
.time-sale-but {background-color: #CC0C3a; color: #fff; border-radius: 4px; font-size: 12px!important; padding: 3px 10px; margin-right: 5px;}
.col-6-ranking-left a img {position: relative; width: 100%; height: auto; margin: 0 auto; max-width: 200px;}
.col-6-ranking-right h4 {margin: 5px 10px 10px;}
.col-6-ranking-right p {margin:0; padding: 0 10px 5px 0; font-size: 16px; line-height: 1.6; text-indent: -1em; padding-left: 1em;}
.afam-buy {text-align: center; margin: 20px 10px;}
.afam-buy a {position: relative; display: inline-block; padding: 5px 30px; text-decoration: none; color: #FFF!important; background: #e1650f; border-bottom: solid 2px #bd4200; border-radius: 2px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);}
#old-pc .afam-buy a {color: #FFF!important;}
.afam-buy a:active {border-bottom: solid 2px #fd9535; box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);}

.border {position: relative;}
.border:before {content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    margin: 0 auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, transparent, #9ccae3 5%, #c8f0f7 95%, transparent);
    background-image: linear-gradient(to right, transparent, #9ccae3 5%, #c8f0f7 95%, transparent);
    background-position: center;
    background-repeat: no-repeat;}
.topmove {width: 100%; text-align: right; font-size: 1.2em; padding-right: 20px; margin-top: 20px; box-sizing: border-box;}

.prologue {border: solid 1px #cccccc; background-color: #fdebeb; padding: 20px;}

#mokuji2 .fright {margin: 20px 10px 10px;}

.title_box {margin-bottom: 15px;}
#old-pc #contents #content_left article section h3 a {font-weight: 600;}

.mokuji {margin: 2em 0; background: #ebecff; border: solid 2px #0b205b;}
.mokuji .mokuji-title {font-size: 1.2em; background: #0b205b; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em;}
.mokuji p {padding: 5px 20px; margin: 0; line-height: 1.4;}
	
h3.orange {background-color: initial; padding: 0; margin: 20px 0 0; font-size: 20px; font-weight: bold;}
	


@media only screen and (max-width: 767px) {
	.afam-waku-header h3 {line-height: 1.2;}
	.afam-waku-header .afam-tag {width: 100%;}
	.col-6-ranking-left {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.col-6-ranking-right {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-left: 10px;}
	.col-6-ranking-kakaku p {float: none; padding: 5px 10px;}
	.col-6-ranking-kakaku h3 {padding: 0 10px;}
	.mokuji ul li a {font-size: 16px;}
	.footer_af .tleft {text-align: center;}
}


/**********************************************
　別パターンＡ
**********************************************/
.change-a {}
.change-a .col-6-ranking-kakaku p.kakaku-date, .change-a .col-6-ranking-kakaku h3 {float: none;}
.change-a .col-6-ranking-kakaku p.kakaku-date {text-align: center;}
.change-a .col-6-ranking-kakaku h3 {text-align: right; font-size: 1.3em;}
.change-a span {font-size: 1.8em;}
.change-a span.time-sale-but {display: block; width: 94px;}
.change-a .col-6-ranking-kakaku {order: 2; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.change-a .col-6-ranking-left {order: 1; padding: 10px;}
.change-a .col-6-ranking-left a img {max-width: 150px;}
.change-a .col-6-ranking-right {order: 3; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 10px;}
.change-a .col-6-ranking-right h4 {background-color: #fcb858; margin: 0 0 1em;; padding: 5px;}
.change-a .col-6-ranking-right p {line-height: 1.4;}

@media only screen and (max-width: 767px) {
	.change-a .afam-waku-header h3 {min-height: 5em; padding: 10px 0 0 70px;}
	.change-a .col-6-ranking-left a img {width: 100px;}
	.change-a .col-6-ranking-kakaku {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.change-a .col-6-ranking-kakaku h3 {text-align: center;}
	.change-a .col-6-ranking-right p {margin: 0 0 0.8em;}
}