@charset "UTF-8";

@media only screen and (max-width: 900px) {
    .inner {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* HEADER
    ---------------------------------------------------------- */
    .header__nav ul a {
        font-size: 1.3rem;
        letter-spacing: 0;
        padding: 1.8rem 1rem 1.7rem 1rem;
    }
    .header__nav ul li:last-of-type a {
        padding: 1.8rem 2rem 1.7rem 2rem;
        margin-left: 2rem;
    }



}

@media only screen and (max-width: 767px) {
    .inner {
        width: 90%;
    }

    .footer-content {
        padding: 30px 0;
    }
    .footer-address {
        margin-bottom: 2rem;
    }
    .footer-address__logo {
        margin-bottom: 20px;
    }
    .footer-other p {
        font-size: 1.3rem;
    }

    /* トップ
    ---------------------------------------------------------- */
    .top__main-visial .swiper-slide {
        height: 450px;
    }
    .top__main-visial__content {
        padding: 2rem 2rem 2rem 2rem;
    }
    .top__main-visial__content__header .category {
        font-size: 1.3rem;
        min-width: 80px;
    }
    .top__main-visial__content__header .date {
        font-weight: normal;
        font-size: 1.3rem;
    }
    .top__main-visial__content__title {
        font-size: 1.6rem;
    }
    .top__topics__nav {
        font-size: 1.4rem;
        margin-bottom: 3rem;
    }
    .top__topics__list {
        display: block;
    }
    .top__topics__box {
        width: 100%;
        margin: 0 0 4rem 0;
    }
    .btn-addpost {
        padding-bottom: 4rem;
        padding-top: 1rem;
    }
    .top__lineup::before {
        width: 240px;
        height: 240px;
        top: -100px;
        right: -120px;
    }
    .top__lineup::after {
        width: 180px;
        height: 180px;
        top: 200px;
        left: -100px;
    }
    .top__lineup .inner > h2 {
        padding-top: 6rem;
        padding-bottom: 5rem;
        margin-bottom: 4rem;
    }
    .top__lineup .inner > h2,
    .top__topics .inner > h2 {
        letter-spacing: 0;
        font-size: 2.2rem;
        padding-top: 5rem;
        padding-bottom: 5.5rem;
        margin-bottom: 3rem;
    }
    .top__lineup .inner > h2::after,
    .top__topics .inner > h2::after {
        height: 4rem;
    }
    .top__lineup__products {
        display: block;
    }
    .top__lineup__products_box figure img {
        width: auto;
        height: 250px;
    }
    .top__lineup__products_box {
        width: 100%;
        margin: 0 0 6rem 0;
    }
    .top__lineup__products_box figure {
        margin: 0;
    }
    .top__lineup__products_box.tea .top__lineup__products_content {
        background: url(../img/bg_tea.svg) no-repeat right top;
        background-size: 130px auto;
        padding-top: 3rem;
    }
    .top__lineup__products_box.coffee .top__lineup__products_content {
        background: url(../img/bg_coffee.svg) no-repeat right top 10px;
        background-size: 160px auto;
        padding-top: 3rem;
    }
    .top__lineup__products_box.kinkan .top__lineup__products_content {
        background: url(../img/bg_kinkan.svg) no-repeat right top;
        background-size: 180px auto;
        padding-top: 3rem;
    }
    .top__lineup__products_name {
        display: flex;
    }
    .top__lineup__products_name span {
        margin-right: 1rem;
    }
    .top__lineup__products_box nav {
        justify-content: flex-end;
    }
    .link_info {
        margin-right: 2rem;
    }
    .top__lineup__nav {
        margin: 2rem auto 2rem auto;
    }
    .top__lineup__nav > div:first-of-type {
        margin: 0 1rem 0 0;
    }
    .top__lineup__nav > div:last-of-type {
        margin: 0 0 0 1rem;
    }
    .top__lineup__nav a {
        flex-direction: column;
        height: 100%;
        font-size: 1.3rem;
        line-height: 1.5;
        text-align: center;
        padding: 20px 6px 22px 6px;
    }
    .top__lineup__nav a span:first-of-type {
        margin-bottom: 1rem;
    }
    .top__lineup__nav span img {
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
    }


    /* 記事詳細
    ---------------------------------------------------------- */
    .page__topics_detail__header {
        justify-content: center;
    }
    .page__topics_detail__header .category {
        margin-right: 20px;
    }
    .page__topics__detail article > h1 {
        font-size: 1.6rem;
    }
    .page__topics_detail__visual {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .top__topics__share h2 {
        margin-bottom: 2rem;
    }
    .top__topics__share__nav > div {
        margin: 0 1rem;
    }
    .top__topics__share__nav a {
        font-size: 1.4rem;
    }
    .page__topics__related {
        display: block;
    }
    .page__topics__related__post {
        width: 100%;
        margin: 0 0 3rem 0;
    }
    .gotop span {
        margin: 0 auto;
    }
}

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

}