/*************************************/
/*  商品ページLP＆カテゴリーページ用 Css  */
/*************************************/

/* 見出しの英語用WEBフォント */
@import url('https://fonts.googleapis.com/css2?family=Lancelot&display=swap');

/*                        */
/*--        ページ共通   --*/
/*                        */

/*　for Smartphone　*/
@media screen and (max-width:767.99px) {

    .categoryLp,
    .productLp {
        font-size: 1.6rem;
        display: flow-root;
    }

    .categoryLp p,
    .productLp p, {
        font-size: 100%;
        line-height: 160%;
        margin: 0 0 1.8em;
    }

    .categoryLp ul,
    .productLp ul{
        font-size: 100%;
        line-height: 160%;
        margin: 0px;
    }
    
/*
    .visible-sp {
        display: block;
    }

    .visible-pc {
        display: none;
    }
*/
}

/*　for PC　*/
@media screen and (min-width:768px) {

    .categoryLp a,
    .productLp a {
        color: #960;
        text-decoration: underline;
    }

    .categoryLp p,
    .productLp p {
        font-size: 1.8rem;
        line-height: 180%;
        margin: 0 0 1.8em;
    }

    .categoryLp ul,
    .productLp ul{
        font-size: 1.8rem;
        line-height: 180%;
        margin: 0px;
    }
    
    .categoryLp,
    .productLp {
        line-height: 160%;
        max-width: 900px;
        margin: 0 auto 60px;
        letter-spacing: .4px;
        display: flow-root;
    }

/*
    .visible-sp {
        display: none;
    }

    .visible-pc {
        display: block;
    }
*/
}

/*                        */
/*--     文字協調系       --*/
/*                        */

.marker {
    /*    マーカー用（spanで指定）*/
    background-color: #FFFF00;
    font-size: 110%;
    color: #333333;
}

.marker2 {
    /*    マーカー用その２（spanで指定）*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #ffff00));
    background: linear-gradient(transparent 70%, #ffff00 70%);
    /*    font-size: 110%;*/
    color: #333333;
    font-weight: bold;
}

.fontRed {
    /*    強調用フォントカラー*/
    color: #e2133d;
}

.sizeBig {
    /*    強調用フォントサイズ1*/
    font-size: 120%;
    font-weight: bold;
}

.sizeBigger {
    /*    強調用フォントサイズ2*/
    font-size: 180%;
    line-height: 1.1;
}

.sizeBiggest {
    /*    強調用フォントサイズ3*/
    font-size: 220%;
    line-height: 2;
}

.sizeSmall {
    /*    縮小フォントサイズ*/
    font-size: 80%;
    line-height: 1.8;
}

/*                        */
/*--------  見出し --------*/
/*                        */

/*　for Smartphone　*/
@media screen and (max-width:767.99px) {

    /* ページTOPの見出し用H1 */
    .fs-body-category .fs-c-heading.fs-c-heading--page,.fs-body-custom .fs-c-heading.fs-c-heading--page {
        padding: 2.2rem 0 1.2rem;
        font-size: 2rem;
        font-weight: bold;
        letter-spacing: .4px;
    }

    .fs-body-category .fs-c-heading.fs-c-heading--page span,.fs-body-custom .fs-c-heading.fs-c-heading--page span {
        display: block;
        color: #c0c6cc;
        font-size: 2.2rem;
        font-family: 'Lancelot', cursive;
    }

    /* 見出し1（装飾なしで大きいもの） */
    h1.headline-h1 {
        font-size: 1.9rem;
        /*        font-family: Arial, Helvetica, sans-serif;*/
        /*        font-weight: normal;*/
        line-height: 140%;
        color: #000000;
        margin: 0px 0 10px;
    }

    /* 見出し2黒いボーダー囲み */
    h2.headline-h2 {
        /* border-bottom: #990000 solid 4px; */
        font-size: 1.8rem;
        font-weight: 600;
        margin: 25px 0 15px;
        border: #3c3c3c solid 2px;
        padding: 12px 6px;
    }

    /* 見出し3 */
    h3.headline-h3 {
        font-size: 1.7rem;
        margin: 35px 0 15px;
        font-weight: bold;
    }
}

/*　for PC　*/
@media screen and (min-width:768px) {

    /* ページTOPの見出し用H1 */
    .fs-body-category .fs-c-heading.fs-c-heading--page,.fs-body-custom .fs-c-heading.fs-c-heading--page {
        padding: 2.6rem 0 1rem;
        font-size: 3.4rem;
        font-weight: bold;
        letter-spacing: .4px;
    }

    .fs-body-category .fs-c-heading.fs-c-heading--page span,.fs-body-custom .fs-c-heading.fs-c-heading--page span {
        display: block;
        color: #c0c6cc;
        font-size: 3rem;
        font-family: 'Lancelot', cursive;
    }

    /* 見出し1（装飾なしで大きいもの） */
    h1.headline-h1 {
        font-size: 3.2rem;
        /*        font-family: Arial, Helvetica, sans-serif;*/
        /*        font-weight: normal;*/
        line-height: 140%;
        color: #000000;
        margin: 0px 0 10px;
    }

    /* 見出し2黒いボーダー囲み */
    h2.headline-h2 {
        margin: 50px 0 30px;
        /* padding-bottom: 6px; */
        font-size: 170%;
        line-height: 1;
        /* border-bottom: #990000 solid 4px; */
        /* display: inline-block; */
        /* color: #000; */
        color: #3c3c3c;
        padding: 16px 12px;
        display: block;
        border: #3c3c3c solid 2px;

    }

    /* 見出し3見出し */
    h3.headline-h3 {
        margin: 60px 0 30px;
        font-size: 160%;
        line-height: 1;
        color: #000;
        font-weight: 500;
    }
}

/*                        */
/*--     画像サイズ関連   --*/
/*                        */

.categoryLp img,
.productLp img {
    width: 100%;
    height: auto;
    /*画像は横幅100%で表示*/
}

.categoryLp .width50per,
.productLp .width50per {
    max-width: 50%;
    /*イレギュラーに小さく表示させたい画像用*/
}

.categoryLp .width30per,
.productLp .width30per {
    max-width: 30%;
    /*イレギュラーに小さく表示させたい画像用*/
}


/*                        */
/*------- 配置関連 --------*/
/*                        */
/* 右回り込み */
.floatR {
    float: right;
    padding: 8px;
}

/* 左回り込み */
.floatL {
    float: left;
    padding: 8px;
}

/*    中身を中央寄せ*/
.centerPos {
    text-align: center;
}

/*                        */
/*--  画像の横並びリスト   --*/
/*                        */

.categoryLp ul.img3List,
.productLp ul.img3List {
    /*    写真を横３つのリスト形式で表示*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-size: 70%;
    padding: 0 0 20px 0;
}

.categoryLp .img3List li,
.productLp .img3List li {
    /*    写真を横３つのリスト形式で表示*/
    width: 32%;
    padding: 0.5%;
    list-style-type: none;
    margin: 0;
}

.categoryLp .img3List img,
.productLp .img3List img {
    width: 100%;
}

.categoryLp .img3List li span,
.productLp .img3List li span {
    /*   写真リストにテキストを入れる際、表題に*/
    padding: 2px 4px;
    margin: 0 2px;
    display: block;
    text-align: center;
}

/*                        */
/*-- 背景色を変更したいとき --*/
/*                        */

.boxYellow {
    background-color: #ffffcc;
    padding: 8px;
    margin-bottom: 8px;
}

.boxBeige {
    background-color: #F9F5EC;
    padding: 8px;
    margin-bottom: 8px;

}

/*                                                      */
/*--              おすすめリンク（緑）                   --*/
/*                                                      */

.recommend-link {
    margin-bottom: 30px;
    margin-top: 30px;
}

.recommend-link > p {
    text-align: center;
    font-weight: bold;
}

.recommend-link a {
    /*    おすすめワイナリーのリンク用（aタグで指定）*/
    display: block;
    width: 90%;
    margin: 0px auto 10px;
    border: 2px solid #AAD44A;
    border-radius: 3px;
    text-align: center;
    /*    font-family: arial, helvetica, sans-serif;*/
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #663300;
    background-color: #a9db80;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a9db80), to(#96c56f));
    background-image: linear-gradient(to bottom, #a9db80, #96c56f);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#a9db80, endColorstr=#96c56f);
}

.recommend-link a span {
    font-size: 80%;
    display: block;
}

.recommend-link a div,
.orange-link a div {
    padding-top: 10px;
    line-height: 1;
}


/*　for Smartphone　*/
@media screen and (max-width:767.99px) {

    .recommend-link a {
        font-size: 130%;
    }
}

/*　for PC　*/
@media screen and (min-width:768px) {

    .recommend-link > p {
        font-size: 220%;
        padding: 0;
        margin: 0;
    }

    .recommend-link a {
        font-size: 160%;
    }

    .recommend-link a:hover {
        border: 2px solid #bfc4c4;
        background-color: #8ed058;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#8ed058), to(#7bb64b));
        background-image: linear-gradient(to bottom, #8ed058, #7bb64b);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#8ed058, endColorstr=#7bb64b);
    }

    .recommend-link a div {
        font-size: 130%;
    }
}


/*                        */
/*--     生産者訪問時     --*/
/*                        */

.w-comming {
    background-color: #F9F5EC;
    /*    font-family: Meiryo, Tahoma, Verdana, Arial, sans-serif;*/
    padding: 8px;
    color: #333333;
}

.w-comming p.w-comming-date {
    font-weight: bold;
    text-align: right;
    margin-bottom: 0.4em;
}

.w-comming p.w-comming-headline {
    color: #990000;
    line-height: 200%;
    font-weight: bold;
}

.w-comming-name {
    font-size: 150%;
}

.w-comming ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style: none;
    padding: 0px;
    clear: both;
}

.w-comming li {
    width: 24%;
}

/*　for PC　*/
@media screen and (min-width:768px) {
    .w-comming p.w-comming-headline {
        font-size: 120%;
    }

    .w-comming-img img {
        width: 320px;
    }

    /* メイン画像にシャドウ効果 */
    .w-comming-img {
        position: relative;
        float: right;
        background: white;
        /* 背景色を白 */
        padding: 5px 5px 5px;
        /*上 左右 下のパディング */
        margin-left: 5px;
        -webkit-transform: rotate(2.5deg);
        /* 回転 */
        transform: rotate(2.5deg);

    }

    .w-comming-img:before,
    .w-comming-img:after {
        content: "";
        background-color: #333;
        -webkit-box-shadow: 0 18px 6px #333;
        box-shadow: 0 18px 6px #333;
        width: 50%;
        max-width: 270px;
        position: absolute;
        top: 80%;
        bottom: 18px;
        left: 10px;
        transform: rotate(-3deg);
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        z-index: -1;
    }

    .w-comming-img:after {
        left: auto;
        right: 10px;
        transform: rotate(3deg);
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        -o-transform: rotate(3deg);
    }
}



/*                               */
/*--    ワンポイントレクチャー    --*/
/*                               */
.threepoint-lecture {
    border: 3px solid #1f885a;
    margin: 40px 10px 10px;
    border-radius: 10px;
    background-color: #fafff0;
}

.threepoint-lecture h2 {
    background-color: #1f885a;
    padding: 8px 16px;
    color: #fff;
    font-size: 2rem;
}

.threepoint-lecture ul {
    list-style: none;
    margin: 8px 8px 8px 20px;
    padding: 0;
    counter-reset: li;
}

.threepoint-lecture li {
    margin-bottom: 1rem;
    position: relative;
    display: block;
    padding-left: 40px;
    color: #011f12;
}

.threepoint-lecture li:before {
    content: '';
    display: block;
    position: absolute;
    -webkit-box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.2) inset;
    box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.2) inset;
    top: 11px;
    left: 15px;
    height: 0;
    width: 0;
    border-top: 8px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #1f885a;
}

.threepoint-lecture li:after {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    left: -16px;
    top: 2px;
    background: #ffe9b9;
    height: 30px;
    width: 30px;
    line-height: 32px;
    border: 2px solid #1f885a;
    text-align: center;
    font-weight: bold;
    border-radius: 30px;
}