.information-right a {
    transition: all .5s;
}

.information-right a:hover {
    opacity: 0.5;
}

.information-right a[href=""] {
    pointer-events: none;
}

/* l-bottom */

.u-container {
    width: 100% !important;
    padding-left: unset !important;
    padding-right: unset !important;
}

.l-bottom {
    display: none;
}

.l-footer {
    margin-top: 0;
    background: #FFF9EE;
}

.l-footer-navi-list__item a {
    color: #475149;
}

.tb-br {
    display: none;
}

.sp-br {
    display: none;
}

body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none !important;
}

h1, h2, h3, h4 {
    line-height: 1;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

p, span, li {
    letter-spacing: .12em;
    margin: 0;
    padding: 0;
}

p, li {
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    font-size: 16px;
}

img {
    width: 100%;
    vertical-align: top;
}

.sp-photo {
    display: none;
}

/* header */
/* .header {
        width: 1200px;
        margin: 0 auto;
        height: 100px;
        display: flex;
    }
    
    .header-link {
        width: 60%;
        margin-left: 8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .header ul {
        display: flex;
        justify-content: space-between;
    }
    
    .header li {
        list-style: none;
        color: #7b8464;
        font-size: 20px;
        font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    }
    
    .logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 130px;
    } */

body {
    animation-name: fadeUpAnime;
    /*アニメーションの定義名*/
    animation-duration: 3s;
    /*アニメーション変化時間 ※デフォルト*/
    animation-fill-mode: forwards;
    /*アニメーションの開始と終了時の状態を指定*/
    opacity: 0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeUpAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


#kv {
    background-repeat: no-repeat;
    overflow: hidden;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/top-fv-back2.jpg);
    background-size: cover;
    background-position-y: bottom;
    padding-top: 120px;
    padding-bottom: 80px;
    position: relative;
    background-position: center;
}

.kv-wrapper {
    display: flex;
    justify-content: space-between;
}

.kv-title {
    width: 21%;
    margin-left: 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.kv-title h2 {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
}

.kv-logo {
    width: 95%;
}

#kv .slider {
    width: 75%;
}

#kv .title {
    text-align: center;
    margin-top: 40px;
}

/* #kv .title h1 {
        font-size: 38px;
        color: #fff;
        text-shadow: 0 0 10px #475149,
            0 0 20px #475149,
            0 0 30px #f4ffd5,
            0 0 40px #f4ffd5,
            0 0 50px #f4ffd5,
            0 0 60px #f4ffd5,
            0 0 70px #f4ffd5;
        letter-spacing: .12em;
        font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    } */
#kv .title h1 {
    max-width: 1100px;
    width: 60%;
    margin: 0 auto;
}

.top-bg-wrapper {
    padding-top: 170px;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/bg-herbtea3.png), url(https://file003.shop-pro.jp/PA01475/848/img/top/bg-herbtea4.png);
    background-repeat: no-repeat;
    background-position-x: 5%, 95%;
    background-position-y: 0%, 0%;
    background-size: 30%;
}


#kv .slider div {
    margin: 0px 5px;
}

.copy {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 150px;
}

/* ボタン類 */
.search {
    position: relative;
}

/* concept */


/*========= スクロールダウンのためのCSS ===============*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

.c-bar {
    width: 100%;
    height: 30px;
    position: relative;
}

/*スクロールダウン全体の場所*/
.scrolldown1 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 30px;
    /*全体の高さ*/
    width: max-content;
    height: 50px;
}

/*Scrollテキストの描写*/

.scrolldown1 p {
    position: absolute;
    top: -30px;
    left: -45px;
    color: #7B982E;
    font-size: 20px;
    letter-spacing: 0.15em;
    font-family: linotype-didot, serif;
    padding-bottom: 0px;
}

/* 線の描写 */
.scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0px;
    /*線の形状*/
    width: 2px;
    height: 30px;
    background: #7B982E;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        height: 0;
        top: 10px;
        opacity: 0;
    }

    30% {
        height: 30px;
        opacity: 1;
    }

    100% {
        height: 0;
        top: 60px;
        opacity: 0;
    }
}

.concept-logo {
    width: 150px;
    margin: 0 auto;
    margin-top: 50px;
}

#concept .title {
    text-align: center;
    margin-top: 20px;
}

/* category */
#category {
    width: 1200px;
    margin: 0 auto;
    margin-top: 80px;
}

#category .title {
    text-align: center;
}

#category .title h2 {
    color: #8b4348;
    font-size: 60px;
    font-style: italic;
    font-family: sheila, sans-serif;
    letter-spacing: .05em;
}

#category .title span {
    color: #8b4348;
    display: block;
    margin-top: 20px;
    font-size: 20px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
}

.cat {
    width: 48%;
}

.cat3, .cat4, .cat5 {
    margin-top: 60px;
}

.cat1 .category-name span {
    color: #ab143e;
}

.cat2 .category-name span {
    color: #334573;
}

.cat3 .category-name span {
    color: #d19844;
}

.cat4 .category-name span {
    color: #b5ac34;
}

.cat5 .category-name span {
    color: #e7bb5e;
}

.category-name {
    display: flex;
}

.category-name .en {
    font-size: 50px;
    font-style: italic;
    color: #7a8075;
    display: block;
    margin-right: 20px;
    letter-spacing: .05em;
    font-family: sheila, sans-serif;
}

.category-name .ja {
    font-size: 20px;
    color: #7a8075;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 8px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.cat-photo {
    transition: all 1s;
    position: relative;
    width: 100%;
}

.cat-photo .normal, .cat-photo .hover {
    transition: all .5s;
}


.cat-photo .hover {
    position: absolute;
    opacity: 0;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    z-index: -1;
}

.cat-photo:hover .hover {
    z-index: 10;
    opacity: 1;
}

/* herbtea */

#herbtea {
    margin-top: 100px;
    background: rgb(239, 191, 75, .1);
    padding: 100px 0px 150px;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/recipe/fv-link-wrapper-bg3.png), url(https://file003.shop-pro.jp/PA01475/848/img/recipe/fv-link-wrapper-bg3.png);
    background-repeat: no-repeat;
    background-position: top -250px left -250px, bottom -250px right -250px;
    background-size: 750px;
}

#herbtea .title {
    text-align: center;
}

#herbtea .title h2 {
    color: #8b4348;
    font-size: 60px;
    font-style: italic;
    font-family: sheila, sans-serif;
    letter-spacing: .05em;
}

#herbtea .title span {
    font-size: 20px;
    color: #8b4348;
    display: block;
    margin-top: 20px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}


.herb-wrapper {
    width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
}

.herb {
    width: 25%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.herb img {
    transition: all .5s;
}

.herb1 {
    background: #ffeee9;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/recipe/fv-link-wrapper-bg1.png);
    background-position-x: 250%;
    background-position-y: 80%;
    background-repeat: no-repeat;
    background-size: 75%;
}

.herb2 {
    background: #f7ffe2;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/single/signle-fv-bg1.png);
    background-position-x: 250%;
    background-position-y: 80%;
    background-repeat: no-repeat;
    background-size: 75%;
}

.herb3 {
    background: #fff4de;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/recipe/fv-link-wrapper-bg3.png);
    background-position-x: 250%;
    background-position-y: 80%;
    background-repeat: no-repeat;
    background-size: 75%;
}

.herb4 {
    background: #e6f8ff;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/recipe/fv-link-wrapper-bg2.png);
    background-position-x: 250%;
    background-position-y: 80%;
    background-repeat: no-repeat;
    background-size: 75%;
}

.herb:hover img {
    transform: scale(1.2);
}

.herb-photo {
    width: 90%;
    margin-right: auto;
    margin-left: 0;
    overflow: hidden;
}


.herb-name {
    width: 90%;
    margin-right: 0;
    margin-left: auto;
    margin-top: 25px;
}

.herb-name h3 {
    font-family: sheila, sans-serif;
    font-style: italic;
    font-size: 40px;
    letter-spacing: .05em;
}

.herb1 .herb-name h3 {
    color: #d67962;
}

.herb2 .herb-name h3 {
    color: #7b982e;
}

.herb3 .herb-name h3 {
    color: #d18d2d;
}

.herb4 .herb-name h3 {
    color: #3190b2;
}

.herb-concept {
    width: 90%;
    margin-right: 0;
    margin-left: auto;
    margin-top: 20px;
}

.herb-concept p {
    font-size: 20px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    letter-spacing: .1em;
}

.herb1 .herb-concept p {
    color: #d67962;
}

.herb2 .herb-concept p {
    color: #7b982e;
}

.herb3 .herb-concept p {
    color: #d18d2d;
}

.herb4 .herb-concept p {
    color: #3190b2;
}

.herb-link {
    margin-top: 25px;
    width: 100%;
    height: 35px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    bottom: 0;
    transition: all .5s;
}

.herb:hover .herb-link {
    opacity: .6;
}

.herb1 .herb-link {
    background: #cb6046;
}

.herb2 .herb-link {
    background: #a4c44f;
}

.herb3 .herb-link {
    background: #d18d2d;
}

.herb4 .herb-link {
    background: #50aecf;
}

.herb-link span {
    font-size: 30px;
    letter-spacing: .05em;
    color: #fff;
    display: block;
    font-family: sheila, sans-serif;
}

/* contents */
section#contents {
    margin-top: 100px;
}

#contents .title {
    text-align: center;
}

#contents .title h2 {
    color: #8b4348;
    font-size: 60px;
    font-style: italic;
    font-family: sheila, sans-serif;
    letter-spacing: .05em;
}

#contents .title span {
    font-size: 20px;
    color: #8b4348;
    display: block;
    margin-top: 20px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.contents-wrapper {
    display: flex;
    margin-top: 50px;
}

.content {
    width: calc(100% / 3);
    position: relative;
    overflow: hidden;
}

.content1 {
    background: #e9f5ff;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/recipe/fv-link-wrapper-bg2.png);
    background-position-x: 135%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: 45%;
}

.content2 {
    background: #fff5e4;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/recipe/fv-link-wrapper-bg3.png);
    background-position-x: 135%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: 45%;
}

.content3 {
    background: #faf3ff;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/recipe/fv-link-wrapper-bg3.png);
    background-position-x: 135%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: 45%;
}

.content-text {
    width: 80%;
    margin: 0 auto;
    height: 145px;
    padding-top: 20px;
    padding-bottom: 10px;
}

.content-text p {
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: .1em;
    margin-top: 15px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.content1 .content-text p {
    color: #34668f;
}

.content2 .content-text p {
    color: #d2b079;
}

.content3 .content-text p {
    color: #816c91;
}

.content-photo {
    overflow: hidden;
}

.content img {
    transition: all .5s;
}

.content:hover img {
    transform: scale(1.2);
}

.contents-link {
    width: 100%;
    height: 35px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    bottom: 0;
    transition: all .5s;
}


.contents-link span {
    font-size: 30px;
    letter-spacing: .05em;
    color: #fff;
    display: block;
    font-family: sheila, sans-serif;
}

.content1 .contents-link {
    background: #34668f;
}

.content2 .contents-link {
    background: #F9D396;
}

.content3 .contents-link {
    background: #837191;
}

.content:hover .contents-link {
    opacity: .6;
}

/* voice */

#voice {
    width: 800px;
    margin: 0 auto;
    margin-top: 200px;
}

#voice .title {
    text-align: center;
}

#voice .title h2 {
    color: #8b4348;
    font-size: 60px;
    font-style: italic;
    font-family: sheila, sans-serif;
    letter-spacing: .05em;
}

#voice .title span {
    color: #8b4348;
    display: block;
    font-size: 20px;
    margin-top: 10px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.voice2 {
    background: linear-gradient(to left, transparent 10%, #fffcf9 10%);
}

.voice1, .voice3 {
    background: linear-gradient(to right, transparent 10%, #fffcf9 10%);
}

.voice-inner {
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/voice-bg.png);
    background-repeat: no-repeat;
    background-position-x: 135%;
    background-position-y: -100px;
    background-size: 40%;
    display: flex;
    justify-content: space-between;
    padding: 50px 0px;
}

.voice-inner img {
    transform: scale(1);
    transition: all 1s;
}

.voice-inner:hover img {
    transform: scale(1.2);
}

.voice2 .voice-inner {
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/voice-bg.png);
    background-repeat: no-repeat;
    background-position-x: -35%;
    background-position-y: -100px;
    background-size: 40%;
    display: flex;
    justify-content: space-between;
    padding: 50px 0px;
}

.voice1 {
    margin-top: 60px;
}

.voice2, .voice3 {
    margin-top: 30px;
}

.voice-photo {
    width: 30%;
    overflow: hidden;
}

.voice2 .voice-photo {
    order: 2;
}

.voice-content {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.voice2 .voice-content {
    width: 60%;
    margin-right: 0;
    margin-left: auto;
}

.voice-product-name h3 {
    font-size: 50px;
    font-family: sheila, sans-serif;
    font-style: italic;
    letter-spacing: .05em;
}

.voice-title {
    margin-top: 15px;
}

.voice-title span {
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.8;
}


.voice1 .voice-title span, .voice1 .voice-product-name h3 {
    color: #ae042d;
}

.voice2 .voice-title span, .voice2 .voice-product-name h3 {
    color: #406b92;
}

.voice3 .voice-title span, .voice3 .voice-product-name h3 {
    color: #d18d2d;
}


.voice-text {
    width: 85%;
    margin-top: 30px;
}

.voice-text p {
    font-size: 15px;
    line-height: 2;
    color: #584c4a;
}

.voice-link {
    margin-top: 30px;

}

.voice-link a {
    display: flex;
    transition: all .5s;
}

.voice-link:hover .voice-link-text span {
    color: #7b982e;
}

.voice-link-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.voice-link-text span {
    font-size: 16px;
    color: #536031;
    font-weight: 600;
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    transition: all .5s;
}



.voice-link-circle {
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    border: solid 1px rgb(123, 132, 100, .5);
    margin-right: 30px;
}

.voice-link-circle img {
    width: 15px;
    margin: 0 auto;
}

.voice-link:hover img {
    transform: translate(5px, -5px);
}

/* recommends */

#recommends {
    width: 1200px;
    margin: 0 auto;
    margin-top: 150px;
}

#recommends .title {
    text-align: center;
}

#recommends .title h2 {
    color: #8b4348;
    font-size: 60px;
    font-style: italic;
    font-family: sheila, sans-serif;
    letter-spacing: .05em;
}

#recommends .title span {
    color: #8b4348;
    display: block;
    font-size: 20px;
    margin-top: 10px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.recommend-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.leaf-text {
    text-align: center;
}

.leaf-text p {
    font-size: 22px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    line-height: 2em;
    letter-spacing: .12em;
    color: #7b8464;
}

.leaf-explain {
    text-align: left;
    margin-top: 15px;
}

.leaf-explain p {
    font-size: 18px;
    color: #333;
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

.leaf3, .leaf4, .leaf5, .leaf6 {
    margin-top: 50px;
}

.leaf {
    width: 31%;
    margin: 0 auto;
}

.leaf img {
    transform: scale(1);
    transition: all 1s;
}

.leaf:hover img {
    transform: scale(1.1);
}

.leaf-photo {
    overflow: hidden;
}

.leaf-text2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 80px;
    position: relative;
    margin-top: 20px;
}

.worry-point {
    text-align: center;
}

.worry-point span {
    font-size: 14px;
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

.leaf-name {
    text-align: center;
    margin-top: 10px;
}

.leaf-name h3 {
    font-size: 30px;
    letter-spacing: .12em;
    /* font-family: sheila, sans-serif; */
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    font-style: italic;
}

.leaf1 .worry-point span, .leaf1 .leaf-name h3, .leaf1 .price p, .leaf1 .price p span {
    color: #464F3E;
}

.leaf2 .worry-point span, .leaf2 .leaf-name h3, .leaf2 .price p, .leaf2 .price p span {
    color: #E9B674;
}

.leaf3 .worry-point span, .leaf3 .leaf-name h3, .leaf3 .price p, .leaf3 .price p span {
    color: #69464C;
}

.leaf4 .worry-point span, .leaf4 .leaf-name h3, .leaf4 .price p, .leaf4 .price p span {
    color: #5D6D94;
}


.price {
    text-align: center;
    margin-top: 10px;
}


.price p {
    font-size: 24px;
}

.price p span {
    font-size: 16px;
}

.leaf-link {
    width: 250px;
    height: 50px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #445146;
}

.link-button span {
    font-size: 18px;
    color: #fff;
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

/* information */

#information {
    width: 100%;
    margin: 0 auto;
    margin-top: 150px;
}

.information-over {
    background: rgb(202, 221, 153, .2);
    padding: 60px 0 60px;
}

.information-wrapper {
    width: 1200px;
    margin: 0 auto;
    display: flex;
}

.information-left {
    width: 25%;
}

.information-right {
    max-width: 70%;
}

#information .title h2 {
    font-size: 50px;
    color: #8b4348;
    font-style: italic;
    font-family: sheila, sans-serif;
    letter-spacing: .05em;
}

#information .title span {
    font-size: 22px;
    display: block;
    margin-top: 15px;
    color: #8b4348;
    display: block;
    letter-spacing: .12em;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.information-bar1 {
    border-top: solid 1px #d2dbca;
    margin-bottom: 5px;
}

.information-bar2 {
    border-top: solid 1px #d2dbca;
    margin-top: 5px;
}

.information-inner {
    display: flex;
    margin-bottom: 20px;
}

.information-inner:last-child {
    margin-bottom: 0px;
}

.date {
    margin-right: 30px;
}

.date span {
    font-size: 16px;
    line-height: 2.2;
    color: #c77142;
    font-family: linotype-didot, serif;
    letter-spacing: .2em;
    padding-top: 3px;
    display: block;
}

.information-title span {
    font-size: 20px;
    color: #445146;
    line-height: 2;
    letter-spacing: .16em;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.information-link {
    width: 1200px;
    margin: 0 auto;
}

.information-link a {
    width: 65%;
    margin-right: 0;
    margin-left: auto;
}

.information-link-wrapper {
    display: flex;
    justify-content: right;
    margin-top: 30px;
}

.information-link-icon {
    width: 70px;
    margin-right: 20px;
}

.information-link-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.information-link-text span {
    font-size: 16px;
    color: #536031;
    font-weight: 600;
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}


/* FAQ */

#qa {
    background-color: #f7f4ec;
    background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/qa-bg.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    padding: 80px 0px;
    margin-top: 150px;
}

#qa .title {
    text-align: center;
}

#qa .title h2 {
    font-size: 60px;
    color: #8b4348;
    letter-spacing: .05em;
    font-family: sheila, sans-serif;
    font-style: italic;
}

#qa .title span {
    color: #8b4348;
    display: block;
    margin-top: 15px;
    letter-spacing: .12em;
    font-size: 22px;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

.question-wrapper {
    width: 1200px;
    margin: 0 auto;
    margin-top: 80px;
}

.accordion {
    /* margin: 3em auto; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.toggle {
    display: none;
}

.option {
    position: relative;
    margin-bottom: 1em;
    width: 48%;
}


.qa-title, .answer {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}

.qa-title {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    padding: 1em 0px;
    display: flex;
    color: #445146;
    font-weight: 600;
    letter-spacing: .2em;
}

.qa-title::after, .qa-title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 0;
    bottom: 0;
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
    margin: auto;
}

.qa-title::after {
    transform: rotate(90deg);
}

.answer {
    max-height: 0;
    overflow: hidden;
}

.answer p {
    margin: 0;
    padding: 2em 4em;
    font-size: 0.9em;
    line-height: 2.2;
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    color: #584c4a;
    font-size: 16px;
}

.toggle:checked+.qa-title+.answer {
    max-height: 500px;
    transition: all 1.5s;
}

.toggle:checked+.qa-title::before {
    transform: rotate(90deg) !important;
}

.q {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    margin-left: 40px;
    background: #7b982e;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding-top: 2px;
    line-height: 1em;
    font-family: sheila, sans-serif;
}

.q-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 75%;
}

span.q-text {
    font-size: 18px;
    line-height: 1.6em;
}

.under-line {
    font-weight: 600;
    background: linear-gradient(to bottom, transparent 60%, rgb(123, 152, 46, .2) 60%);
}

.slider-sp {
    display: none !important;
}

.top-sp-scroll {
    display: none;
}

.top-sp-text {
    display: none;
}

.sp-normal {
    display: none;
}

.sp-hover {
    display: none;
}

@media screen and (max-width:1200px) {
    .pc-br {
        display: none;
    }

    .tb-br {
        display: block;
    }


    /* kv */
    #kv {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        background-size: cover;
        background-position: center;
    }

    #kv .title h1 {
        width: 90%;
    }

    #kv .slider {
        width: 100%;
        margin-top: 30px;
    }

    #kv .title {
        margin-top: 40px;
    }

    .copy {
        width: 120px;
    }

    .kv-wrapper {
        display: block;
        overflow: hidden;
    }

    .kv-title {
        width: 100%;
        margin: 0 auto;
    }

    .kv-logo {
        width: 40%;
        margin: 0 auto;
    }

    .top-bg-wrapper {
        background-position-y: 0%;
        background-size: 40%;
        background-position-x: 0%, 100%;
        padding-top: 24%;
    }

    .kv-title h2 {
        text-align: center;
        width: 50%;
        margin: 0 auto;
        margin-top: 30px;
    }

    /* concept */
    .concept-wrapper {
        width: 95%;
    }

    /* category */
    #category {
        width: 95%;
        margin-top: 30px;
    }

    .category-name .en {
        font-size: 34px;
        padding-top: 10px;
    }

    /* contents */

    .contents-link {
        position: unset;
        width: 100%;
        margin-right: 0;
        margin-left: auto;
        border-radius: unset;
        height: 30px;
    }

    .contents-link span {
        margin-bottom: 0;
    }

    .content-text p {
        font-size: 18px;
    }

    /* herb */

    #herbtea {
        padding: 50px 0;
        background-position: top -200px left -200px, bottom -200px right -200px;
        background-size: 480px;
        margin-top: 60px;
    }

    section#contents {
        margin-top: 50px;
    }

    .content1, .content2, .content3 {
        background-position-x: 155%;
        background-position-y: 78%;
        background-size: 60%;
    }

    .herb-concept {
        margin-top: 10px;
    }

    .herb-wrapper {
        width: 90%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .herb {
        width: 47%;
        margin-bottom: 40px;
    }

    .content-text {
        width: 100%;
        padding-top: 0px;
        height: 110px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 0;
    }

    .content-text p {
        margin-top: 0;
    }

    /* recommend */
    #recommends {
        width: 90%;
        margin: 0 auto;
        margin-top: 100px;
    }

    .leaf-link {
        width: 100%;
    }

    .leaf-explain p {
        font-size: 16px;
    }

    /* voice */
    #voice {
        width: 100%;
        margin-top: 100px;
    }

    .voice1 {
        margin-top: 40px;
    }

    .voice-inner {
        width: 90%;
        padding: 50px 5% 30px;
    }

    .voice-title span {
        font-size: 18px;
        letter-spacing: .1em;
    }

    .voice-text {
        width: 95%;
        margin-top: 30px;
    }

    .voice-text p {

        font-size: 16px;
    }

    .voice-photo {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .voice-link-circle {
        margin-right: 20px;
    }


    /* information */
    .information-wrapper {
        width: 90%;
        display: block;
    }

    .information-left {
        width: 100%;
    }

    .information-right {
        max-width: 100%;
        margin-top: 30px;
    }

    .information-link {
        width: 90%;
    }

    .information-title span {
        font-size: 20px;
    }

    /* question */

    #qa {
        margin-top: 100px;
    }

    .question-wrapper {
        width: 90%;
    }

    .q {
        margin-left: 0px;
    }

    .q-text {
        width: calc(90% - 60px);
    }

    span.q-text {
        font-size: 16px;
    }

    .answer p {
        padding: 2em 1em;
        line-height: 2;
    }

    .leaf-name h3 {
        font-size: 26px;
    }

    .price p {
        font-size: 18px;
    }

    .kv-logo {
        display: none;
    }


}

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

    .pc-normal {
        display: none;
    }

    .sp-normal {
        display: block;
    }

    .pc-hover {
        display: none;
    }

    .sp-hover {
        display: block;
    }

    .c-bar {
        display: none;
    }

    .sp-scroll-photo1 span {
        color: #8b4348;
        font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
        background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/top-herbtea2.png);
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position-x: left;
        padding-left: 30px;
        font-weight: 600;
        line-height: 1.4;
    }

    .sp-scroll-photo2 span {
        color: #536031;
        font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
        background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/top-herbtea3.png);
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position-x: left;
        padding-left: 20px;
        padding-left: 30px;
        font-weight: 600;
        line-height: 1.4;
    }

    .top-sp-scroll {
        display: flex;
        justify-content: center;
        width: 90%;
        margin: 0 auto;
    }

    .top-sp-scroll a {
        width: max-content;
        max-width: 46%;
    }

    .top-sp-scroll a:first-child {
        margin-right: 8%;
    }

    .top-sp-text {
        display: block;
        text-align: center;
    }

    .top-sp-text span {
        font-family: "sheila", sans-serif;
        font-size: 26px;
        color: #d19844;
        line-height: 1em;
        letter-spacing: .02em;
    }

    .top-under-triangle {
        width: max-content;
        margin: 0 auto;
        margin-top: 10px;
    }

    .top-under-triangle span {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #d19844 transparent transparent transparent;

    }


    .tb-br {
        display: none;
    }

    .sp-br {
        display: block;
    }

    #kv {
        padding-top: 50px;
        padding-bottom: 30px;
        background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/top-fv-back-sp.png);
    }


    #kv .title {
        margin-top: 0px;
    }

    #kv .title h1 {
        width: 90%;
        margin-top: 35px;
    }

    .kv-title h2 {
        width: 65%;
        margin-top: 0px;
        filter: drop-shadow(2px 4px 6px #9b8b6f);
    }

    #kv .slider {
        width: 102%;
        margin-top: 15px;
    }

    #kv .slider div {
        margin: 0px 2px 0 0;
    }



    .copy {
        width: 80px;
        top: 10px;
        right: 10px;
    }

    .kv-logo {
        width: 50%;
    }



    /* concept */
    .concept-photo {
        width: 90%;
        top: -60px;
    }

    .concept-text {
        width: 100%;
        padding-bottom: 15px;
    }

    #concept .title {
        margin-top: 10px;
    }

    #concept h1 {
        font-size: 22px;
    }

    .concept-inner {
        margin: 0 auto;
        padding-top: 150px;
        padding-bottom: 50px;
    }

    .concept-text p {
        font-size: 14px;
    }

    .concept-treat2 {
        width: 55%;
        right: -10%;
        bottom: -5%;
    }

    /* category */
    .categories {
        margin-top: 15px;
    }

    #category .title h2 {
        font-size: 40px;
    }

    .cat {
        width: 45%;
        margin: 0 auto;
        margin-bottom: 15px;
    }

    .cat3, .cat4 {
        /* margin-bottom: 0; */
    }

    .cat5 {
        width: 95%;
    }

    .category-name {
        display: block;
    }

    .category-name .en {
        margin-top: 0;
        font-size: 22px;
        line-height: 1em;
    }

    .category-name .ja {
        margin-top: 3px;
        font-size: 14px;
        letter-spacing: .05em;
    }

    #category .title span {
        margin-top: 10px;
        font-size: 16px;
    }

    /* herbtea */
    #herbtea {
        padding: 30px 0;
        margin-top: 30px;
        background-position-x: -200px, 200px;
        background-position-y: -8%, 108%;
    }

    #herbtea .title h2 {
        font-size: 40px;
        margin-bottom: 0px;
    }

    #herbtea .title span {
        font-size: 16px;
        margin-top: 0;
        line-height: 1.6;
    }

    .herb {
        width: 48%;
        height: auto;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    .herb3, .herb4 {
        margin-bottom: 0;
    }

    .herb-wrapper {
        margin-top: 15px;
        width: 90%;
    }

    .herb-photo img {
        height: 150px;
        object-fit: cover;
    }

    .herb-name {
        width: 100%;
        margin-top: 15px;
        text-align: center;
    }

    .herb-name h3 {
        font-size: 20px;
    }

    .herb-concept {
        width: 100%;
        margin-top: 5px;
        text-align: center;
    }

    .herb-concept p {
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: .05em;
    }

    .herb-link {
        height: 25px;
        position: unset;
        margin-top: 8px;
    }

    .herb-link span {
        font-size: 22px;
    }

    .herb {
        margin-top: 0;
    }

    .herb-photo {
        width: 100%;
    }

    .recommend-wrapper {
        display: block;
    }

    .leaf {
        width: 85%;
    }

    .leaf-text2 {
        margin-top: 0px;
        padding-bottom: 35px;
    }

    .leaf:nth-of-type(2), .leaf:nth-of-type(3) {
        margin-top: 30px;
    }

    .herb4 .herb-name h3 {
        margin-left: -20px;
    }

    .leaf-link {
        width: 95%;
        height: 45px
    }


    /* contents */
    #contents {

        width: 100%;
        margin: 0 auto;
        margin-top: 0;
    }

    section#contents {
        margin-top: 30px;
    }

    #contents .title h2 {
        font-size: 40px;
        margin-bottom: 0px;
    }

    .contents-wrapper {
        margin-top: 10px;
    }

    #contents .title span {
        font-size: 16px;
        margin-top: 0;
        line-height: 1.6;
    }

    .contents-link span {
        font-size: 22px;
    }

    .contents-link {
        height: 25px;
    }

    .contents-wrapper {
        justify-content: space-between;
    }

    .content {
        width: calc(100% / 3);
        margin-top: 0px;
    }

    .content-text {
        width: 100%;
        height: 50px;
        padding: 10px 0;
    }

    .content1, .content2, .content3 {
        background-position-x: 155%;
        background-position-y: 85%;
        background-size: 60%;
    }

    .content-text p {
        margin-top: 0px;
        font-size: 11px;
        line-height: 1.4;
        letter-spacing: .05em;
    }

    /* voice */
    #voice {
        margin-top: 40px;
    }

    #voice .title h2 {
        font-size: 40px;
    }

    #voice .title span {
        margin-top: 0px;
        font-size: 16px;
    }

    .voice-inner {
        display: block;
        width: 100%;
        padding: 30px 0;
    }

    .voice1 {
        margin-top: 20px;
    }

    .voice1, .voice2, .voice3 {
        background: #fffcf9;
    }


    .voice-product-name {
        text-align: left;
    }

    .voice-product-name h3 {
        font-size: 24px;
        letter-spacing: .05em;
        margin-top: 0;
    }

    .voice-title span {
        font-size: 14px;
        line-height: 1.6em;
        letter-spacing: .05em;
    }

    .voice-content {
        width: 85%;
        margin: 0 auto;
    }

    .voice-photo {
        width: 40%;
        margin: 0 auto;
    }

    .voice-text {
        width: 100%;
        margin-top: 5px;
    }

    .voice-inner {
        background-position-x: 210%;
        background-position-y: -70px;
        background-size: 80%;
        padding: 15px 0;
    }

    .voice2 .voice-inner {
        background-position-x: -50%;
        background-position-y: -45px;
        background-size: 75%;
        display: block;
        padding: 15px 0;
    }

    .voice2 .voice-content {
        width: 85%;
        margin: 0 auto;
    }

    .voice1, .voice2, .voice3 {
        margin-top: 10px;
    }

    .voice-product-name {
        margin-top: 20px;
    }

    .voice-link {
        margin-top: 5px;
    }

    .voice-link a {
        justify-content: right;
    }

    .voice-link-circle {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }

    .voice-link-circle img {
        width: 10px;
    }

    .voice-title {
        margin-top: 5px;
    }

    .voice-text p {
        letter-spacing: .05em;
        text-align: left;
        font-size: 12px;
        line-height: 1.8;
    }

    .voice-link-text span {
        font-size: 12px;
        letter-spacing: .1em;
    }

    /* information */

    #information {
        margin-top: 30px;
    }

    #information .title h2 {
        font-size: 30px;
    }

    #information .title span {
        font-size: 16px;
        margin-top: 5px;
    }

    .information-over {
        padding: 25px 0;
    }

    .information-inner {
        display: block;
        margin-bottom: 10px;
    }

    .information-wrapper {
        width: 90%;
    }

    .information-right {
        margin-top: 10px;
    }

    .information-title span {
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: .08em;
    }

    .information-link {
        width: 85%;
    }

    .date span {
        font-size: 14px;
        line-height: 1.8;
    }

    /* recommends */

    #recommends {
        margin-top: 30px;
    }

    .recommend-wrapper {
        margin-top: 10px;
    }

    #recommends .title h2 {
        font-size: 40px;
    }

    #recommends .title span {
        font-size: 16px;
        margin-top: 0;
    }

    .link-button span {
        font-size: 16px;
    }

    .leaf-photo {
        width: 45%;
        margin: 0 auto;
    }

    .leaf-name {
        margin-top: 5px;
    }

    .leaf-name h3 {
        font-size: 20px;
    }

    .leaf-link {
        width: 60%;
        height: 35px;
    }

    .link-button span {
        font-size: 14px;
    }

    .price {
        margin-top: 5px;
    }

    .price p {
        font-size: 12px;
    }

    .price p span {
        font-size: 12px;
    }

    img.slick-arrow.next-arrow {
        width: 25px;
        position: absolute;
        top: 0;
        bottom: 200px;
        right: 25px;
        margin: auto;
        z-index: 100;
        height: 25px;
    }

    img.slick-arrow.prev-arrow {
        width: 25px;
        position: absolute;
        top: 0;
        bottom: 200px;
        left: 25px;
        margin: auto;
        z-index: 100;
        height: 25px;
    }

    img.slick-arrow2.next-arrow2 {
        width: 25px;
        position: absolute;
        top: 0;
        bottom: 70px;
        right: 5px;
        margin: auto;
        z-index: 100;
        height: 25px;
    }

    img.slick-arrow2.prev-arrow2 {
        width: 25px;
        position: absolute;
        top: 0;
        bottom: 70px;
        left: 5px;
        margin: auto;
        z-index: 100;
        height: 25px;
    }

    .slick-next {
        right: 5px !important;
    }

    .slick-prev {
        left: 5px !important;
    }

    /* qa */

    #qa {
        margin-top: 30px;
        background-size: 550px;
        padding: 20px 0px;
    }

    #qa .title h2 {
        font-size: 40px;
    }

    #qa .title span {
        font-size: 16px;
        margin-top: 0px;
    }

    .accordion {
        display: block;
    }

    .option {
        width: 100%;
    }

    .q {
        width: 25px;
        height: 25px;
        margin-right: 15px;
        font-size: 12px;
    }

    .q-text {
        width: calc(90% - 50px);
    }

    .qa-title {
        padding: 0.3em 0px;
    }

    .question-wrapper {
        margin-top: 20px;
    }

    span.q-text {
        font-size: 12px;
    }

    .answer p {
        padding: 0.8em 0.5em 0em;
        line-height: 1.8;
        font-size: 12px;
        letter-spacing: .08em;
    }

    .tb-br, .pc-photo {
        display: none;
    }

    .sp-photo {
        display: block;
    }

    .under-line {
        letter-spacing: .1em;
    }

    .slider-pc {
        display: none !important;
    }

    .slider-sp {
        display: block !important;
    }

}

@media screen and (max-width:400px) {
    .top-bg-wrapper {
        background-image: url(https://file003.shop-pro.jp/PA01475/848/img/top/top-herbtea4.png);
        background-size: 95%;
        background-position: top 0px left 50%;
        padding-top: 150px;
        margin-bottom: 20px;
    }
}