/*==================================================
AF GUIDE BOX
HTML4 / HPB20対応
完成版
===============================================*/

/*============================
全体
============================*/

.af-guide-wrap{

    width:889px;

    margin:10px auto 10px;

    overflow:hidden;

}

/*============================
PC
============================*/

.af-guide-box{

    float:left;

    width:270px;

    height:355px;

    margin-right:26px;

    position:relative;

    overflow:hidden;

    box-sizing:border-box;

    border:2px solid #dbeae4;

    border-radius:14px;

    background:
linear-gradient(
180deg,
#ffffff 0%,
#fcfefe 30%,
#f8fcfb 58%,
#f2faf8 82%,
#ecf7f4 100%);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.85) inset,
        0 16px 34px rgba(28,50,42,.08);

    transition:
        transform .25s,
        box-shadow .25s;

}

.af-guide-box:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.92) inset,
        0 24px 46px rgba(28,50,42,.12);

}

/*============================
中身
============================*/

.af-guide-inner{

    position:relative;

    z-index:2;

    padding:30px 10px 18px;

}

/*============================
タイトル
============================*/

.af-guide-title{

    font-size:22px;

    line-height:1.45;

    color:#2b6b54;

    font-weight:bold;

    text-align:center;

    margin:0 0 0px;

    letter-spacing:.02em;

}

.af-guide-title:after{

    content:"";

    display:block;

    width:170px;

    height:2px;

    margin:16px auto 0;

    background:#b8ddd2;

     opacity:.85;

    background:
    linear-gradient(
        90deg,
        rgba(184,221,210,0) 0%,
        rgba(184,221,210,.95) 20%,
        rgba(146,198,181,1) 50%,
        rgba(184,221,210,.95) 80%,
        rgba(184,221,210,0) 100%);

}

/*============================
説明
============================*/

.af-guide-sub{

    font-size:18px;

    line-height:2;

    text-align:center;

    color:#333;

    margin:0 0 35px;

}

/*============================
ボタン
============================*/

.af-guide-btn,
.af-guide-btn:link,
.af-guide-btn:visited{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    width:190px;
text-align:center;

    padding:14px 20px 12px 26px;

    margin-left:auto;
    margin-right:auto;

    box-sizing:border-box;

    color:#2b6b54 !important;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

    border-radius:7px;

    border:1px solid #8eb7a0;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7fcfa 100%);

    transition:
        background .25s,
        border-color .25s,
        color .25s,
        box-shadow .25s,
        transform .25s;

    box-shadow:
        0 1px 0 rgba(255,255,255,.85) inset,
        0 3px 8px rgba(40,70,55,.08);

}

.af-guide-btn-wrap{

    text-align:center;

    margin:0;

}

.af-guide-btn:hover{

    color:#206b49 !important;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #eef8f5 100%);

    border-color:#6ea488;

    transform:translateY(-1px);

    box-shadow:
        0 1px 0 rgba(255,255,255,.95) inset,
        0 6px 16px rgba(40,70,55,.12);

}

.af-guide-btn .arrow{

    display:inline-block;

    font-size:18px;

    font-weight:normal;

    line-height:1;

    color:#2b6b54;

    margin-left:8px;

margin-top:-1p

}


.af-guide-btn:hover .arrow{

    color:#206b49;

}

.af-guide-btn,
.af-guide-btn:link,
.af-guide-btn:visited,
.af-guide-btn:hover,
.af-guide-btn:active{

    text-decoration:none !important;

}

/*============================
背景モチーフ
w270px画像対応
============================*/

.guide-mozuku{

    background-image:url(image/bg-guide-mozuku.png);

}

.guide-bottle{

    background-image:url(image/bg-guide-bottle.png);

}

.guide-laurel{

    background-image:url(image/bg-guide-laurel.png);

 }


/*============================
スマホ
============================*/

@media screen and (max-width:568px){

.af-guide-wrap{

    width:270px;
    margin:10px auto;
    overflow:hidden;

}

.af-guide-box{

    float:none !important;

    display:block;

    width:270px;

    height:355px;

    margin:0 auto 18px !important;

    margin-right:0 !important;

}

.af-guide-inner{

    padding:30px 10px 18px;

}

.af-guide-title{

    font-size:22px;

}

.af-guide-sub{

    font-size:17px;

    margin:0 0 30px;

}

.af-guide-btn{

    width:170px;

}

}