/*****************************************************

	トップページ

*****************************************************/
/* 共通 */
.font-mincho {
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.top-heading {
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
}
.top-description {
    margin: 0 0 28px;
    padding: 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
}
.top-rank,
.top-recommended,
.top-tastingnote {
    margin-bottom: 60px;
}
/* スライダー */
.top-img--link {
    display: block;
}
.top-img--link img {
    width: 100%;
}
/* ナビゲーション */
.top-nav--list {
    display: flex;
    margin-bottom: 40px;
}
.top-nav--item {
    position: relative;
    width: 20%;
}
.top-nav--link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 55px;
    background-color: #b18008;
    border-top: 5px solid #9f7307;
}
.top-nav--link:link,
.top-nav--link:visited,
.top-nav--link:active {
    color: #ffffff;
}
.top-nav--link:hover {
    text-decoration: none;
    background-color: #efe6ce;
    border-top-color: #d7cfb9;
    color: #664e13;
}
.top-nav--item:not(:first-of-type) .top-nav--link {
    width: calc( 100% - 1px );
    border-left: 1px solid #976d07;
}
.top-nav--link.current {
    height: 50px;
    background-color: #5e4406;
    border-top: 5px solid #543d05;
    border-bottom: 5px solid #76602b;
}
.top-nav--link.current:hover {
    color: #ffffff;
}
.top-nav-sub--list {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    z-index: 20;
}
.top-nav-sub--link {
    display: flex;
    align-items: center;
    height: 50px;
    padding-left: 40px;
    background-color: #e6dcc0;
    border-bottom: 1px solid #cfc6ac;
    transition: .3s;
}
.top-nav-sub--link:link,
.top-nav-sub--link:visited,
.top-nav-sub--link:active {
    color: #664e13;
}
.top-nav-sub--link:hover {
    text-decoration: none;
    background-color: #efe6ce;
}
.top-nav-sub--item:last-of-type .top-nav-sub--link {
    border-bottom: none;
}
.top-nav-sub--link::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    width: 10px;
    height: 5px;
    margin: auto;
    border: 5px solid transparent;
    border-left: 8px solid #87723f;
}
/* ランキング */
.top-rank-nav--list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.top-rank-nav--item {
    width: 215px;
}
.top-rank-nav--link {
    padding: 13px;
    display: block;
    background-color: #ccc;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    transition: opacity 0.3s;
}
.top-rank-nav--link:link,
.top-rank-nav--link:visited,
.top-rank-nav--link:active {
    color: #0c2b0a;
}
.top-rank-nav--link:hover {
    text-decoration: none;
    opacity: .8;
}
.top-rank-nav--link.current {
    background-color: #0c2b0a;
    position: relative;
}
.top-rank-nav--link.current:link,
.top-rank-nav--link.current:visited,
.top-rank-nav--link.current:active {
    color: #fff;
}
.top-rank-nav--link.current::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: calc( 50% - 5px );
    background-color: #0c2b0a;
    border-top: 8px solid #0c2b0a;
    border-bottom:  none;
    border-right: 5px solid #fff;
    border-left: 5px solid #fff;
}
.top-rank--list {
    display: none;
}
.top-rank--list.is-active {
    display: flex;
}
.top-rank--item {
    width: 290px;
}
.top-rank--item:not(:nth-of-type(3n)) {
    margin-right: 10px;
}
.top-rank--link {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 15px;
}
.top-rank--num {
    display: block;
    margin-bottom: 10px;
    text-align: center;
}
.top-rank--name {
    margin-bottom: 10px;
    font-size: 13px;
    text-align: center;
}
.top-rank--price {
    margin-bottom: 30px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.top-rank--more {
    display: block;
    text-align: center;
}
/* おすすめ特集 */
.top-recommended-bnr--list {
    display: flex;
    margin-bottom: 20px;
}
.top-recommended-bnr--item {
    width: 290px;
}
.top-recommended-bnr--item:not(:nth-of-type(3n)) {
    margin-right: 10px;
}
.top-recommended-bnr--link {
    display: block;
}
.top-recommended-bnr--img {
    width: 100%;
}
.top-recommended-main--list {
    display: flex;
}
.top-recommended-main--item {
    width: 440px;
}
.top-recommended-main--item:nth-of-type(odd) {
    margin-right: 10px;
}
.top-recommended-main--link {
    display: flex;
    background-image: url(/assetes/img/pc/top/bg_recommend.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.top-recommended-main--link:hover {
    text-decoration: none;
    opacity: .9;
}
.top-recommended-main--img {
    width: 190px;
    background-color: #fff;
}
.top-recommended-main--textarea {
    width: 190px;
    padding: 45px 30px;
    background-image: url(/assetes/img/pc/top/bg_recommend_text.png);
    background-repeat: no-repeat;
    background-position: top center;
    color: #fff;
}
.top-recommended-main--caption {
    font-size: 13px;
    padding-bottom: 25px;
}
.top-recommended-main--title {
    font-size: 18px;
}
/* テイスティングノート */
.top-tastingnote--list {
    display: flex;
}
.top-tastingnote--item {
    width: 215px;
}
.top-tastingnote--item:not(:nth-of-type(4n)) {
    margin-right: 10px;
}
/* デュオダミ */
.top-duodamis {
    display: flex;
    height: 300px;
    margin-bottom: 40px;
    background-image: url(../img/pc/top/bg_duodamis.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}
.top-duodamis--img {
    width: 300px;
}
.top-duodamis--textarea {
    box-sizing: border-box;
    width: calc( 100% - 300px );
    padding: 34px 34px 0;
}
.top-duodamis--title {
    position: relative;
    font-size: 24px;
    line-height: 1;
    padding-bottom: 15px;
    border-bottom: 1px solid #d2c8af;
}
.top-duodamis--title::after {
    content:'';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 10%;
    height: 1px;
    background-color: #b91e00;
}
.top-duodamis--contents {
    display: flex;
    padding-top: 20px;
}
.top-duodamis--bottle {
    width: 44px;
    height: 176px;
}
.top-duodamis--text {
    box-sizing: border-box;
    width: calc( 100% - 44px );
    padding-left: 30px;
}
.top-duodamis--description {
    margin-bottom: 25px;
}
.top-duodamis--name {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
}
.top-duodamis--box {
    display: flex;
    justify-content: space-between;
}
.top-duodamis--price {
    color: #b91e00;
}
.top-duodamis--price em {
    font-size: 30px;
    font-weight: bold;
}
/* 日本ワインをもっとしる */
.top-japanesewine--list {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-image: url(../img/pc/top/bg_japanesewine.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.top-japanesewine--item {
    width: 420px;
}
.top-japanesewine--imgarea {
    position: relative;
    display: block;
}
.top-japanesewine--caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400px;
    padding: 10px;
    background-color: rgba(12,43,10,0.9);
    color: #fff;
    font-size: 20px;
    text-align: center;
}
.top-japanesewine--text {
    margin-top: 1em;
    font-size: 13px;
}

/* 商品ラインナップ */
.sec-lineup {
    margin-bottom: 65px;
}
.sec-lineup--title {
    position: relative;
    margin-bottom: 20px;
}
.sec-lineup--head {
    width: 100%;
}
.sec-lineup--winery {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
}
.sec-lineup--description {
    margin-bottom: 30px;
}
.sec-lineup--list {
    display: flex;
    flex-wrap: wrap;
}
.sec-lineup--item {
    width: 215px;
}
.sec-lineup--item:not(:nth-of-type(4n)) {
    margin-right: 10px;
}
.sec-lineup--item:not(:nth-last-of-type(-n+4)) {
    margin-bottom: 40px;
}
.sec-lineup--imgarea {
    box-sizing: border-box;
    position: relative;
    display: flex;
    padding: 5px;
    width: 100%;
    height: 215px;
    border: 1px solid #e5e5e5;
}
.sec-lineup--img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sec-lineup--hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.sec-lineup--imgarea:hover {
    border: 1px solid #e6b9b3;
}
.sec-lineup--imgarea:hover .sec-lineup--img {
    opacity: 0;
}
.sec-lineup--imgarea:hover .sec-lineup--hover {
    visibility: visible;
    opacity: 1;
}
.sec-lineup--points {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #e5e5e5;
}
.sec-lineup--name {
    padding-top: 1em;
    padding-bottom: 0.5em;
    font-weight: bold;
    text-align: center;
}
.sec-lineup--price {
    color: #b91e00;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
}
.sec-lineup--link {
    display: block;
    margin: 0 auto;
    width: 160px;
}