@charset "UTF-8";

/*body {
    background-color: #edeae5;
}*/

/* News ページ固有の上書き */
.descriptionNoMargin {
    margin: 0;
}


/*-- 引用箇所のテキストイタリック体 --*/
.quotation {
    font-style: italic;
}


/* link buttonの色 */
/* 色変更 */
:root {
    --link-btn-bg-a: #fff;
    --link-btn-text-a: #000;
    --link-btn-bg-a-hover: #000;
    --link-btn-text-a-hover: #fff;
    /*--text-secondary-color: #000;*/ /*-- news pageの日付部分や .productInfo など --*/
    /*--text-secondary-color-a-hover: #2b2b2b;*/
}



/* スマホ */
@media (max-width:750px) {

    .gridHalf {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
    }

    .title {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .titleBlock {
        width: 100%;
        height: auto;
        /*padding-bottom: 100px;*/
        position: static;
        padding: 10px 15px 0 15px;
    }

    .titleBlock > h1 {
        font-size: 30px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .titleBlock > h2 {
        font-size: 30px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .newsDate {
        font-size: 15px;
        text-align: left;
        color: var(--text-primary-color);
    }

    .newsImgUnit {
        width: 100%;
        margin: 10px 0 10px 0;
    }

    .newsImgUnit img {
        width: 100%;
    }

    /* Link Button from here */
    .linkBtnWrapper {
        width: 100%;
        height: auto;
        padding-top: 100px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 50px;
    }
    .linkActionBtn {
        width: 100%;
        height: 150px;
        appearance: none;
        cursor: pointer;
        position: relative;
    }

    .textAdjust {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 16px;
        font-family: 'Mincho', serif;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .textAdjust > .linkArrow {
        width: 12px;
        height: 12px;
        margin-top: 3px;
        stroke: var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn .textAdjust > .linkArrow {
        stroke: var(--link-btn-text-a-hover);
    }

    .linkBtnWrapper a .linkActionBtn {
        background: var(--link-btn-bg-a);
        color: var(--link-btn-text-a);
        border:1px solid var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn {
        background: var(--link-btn-bg-a-hover);
        color: var(--link-btn-text-a-hover);
        border: 1px solid var(--link-btn-bg-a-hover);
    }

    /* Link Button ends here */


}


/* スマホ Landscape */
@media (orientation: landscape) and (max-width: 750px) {

    .gridHalf {
        width: 100%;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .title {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .titleBlock {
        width: 100%;
        height: auto;
        padding: 0 20px 73px 0;
        /*padding-bottom: 73px;*/
        position: sticky;
        top: 94px;
    }

    .titleBlock > h1 {
        font-size: 24px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .titleBlock > h2 {
        font-size: 20px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .newsDate {
        font-size: 14px;
        text-align: left;
        color: var(--text-primary-color);
    }

    .newsImgUnit {
        width: 100%;
        margin: 10px 0 10px 0;
    }

    .newsImgUnit img {
        width: 100%;
    }

    /* Link Button from here */
    .linkBtnWrapper {
        width: 100%;
        height: auto;
        padding-top: 100px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 50px;
    }
    .linkActionBtn {
        width: 100%;
        height: 150px;
        appearance: none;
        cursor: pointer;
        position: relative;
    }

    .textAdjust {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 20px;
        font-family: 'Mincho', serif;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .textAdjust > .linkArrow {
        width: 15px;
        height: 15px;
        margin-top: 3px;
        stroke: var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn .textAdjust > .linkArrow {
        stroke: var(--link-btn-text-a-hover);
    }

    .linkBtnWrapper a .linkActionBtn {
        background: var(--link-btn-bg-a);
        color: var(--link-btn-text-a);
        border:1px solid var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn {
        background: var(--link-btn-bg-a-hover);
        color: var(--link-btn-text-a-hover);
        border: 1px solid var(--link-btn-bg-a-hover);
    }

    /* Link Button ends here */


}


/* タブレット Portrait */
@media (min-width:751px) and (max-width:1024px) {

    .gridHalf {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
    }

    .title {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .titleBlock {
        width: 100%;
        height: auto;
        /*padding-bottom: 100px;*/
        position: static;
        padding: 10px 20px 0 20px;
    }

    .titleBlock > h1 {
        font-size: 30px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .titleBlock > h2 {
        font-size: 30px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .newsDate {
        font-size: 15px;
        text-align: left;
        color: var(--text-primary-color);
    }

    .newsImgUnit {
        width: 100%;
        margin: 10px 0 10px 0;
    }

    .newsImgUnit img {
        width: 100%;
    }


    /* Link Button from here */
    .linkBtnWrapper {
        width: 100%;
        height: auto;
        padding-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 50px;
    }
    .linkActionBtn {
        width: 100%;
        height: 150px;
        appearance: none;
        cursor: pointer;
        position: relative;
    }

    .textAdjust {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 30px;
        font-family: 'Mincho', serif;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .textAdjust > .linkArrow {
        width: 18px;
        height: 18px;
        margin-top: 3px;
        stroke: var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn .textAdjust > .linkArrow {
        stroke: var(--link-btn-text-a-hover);
    }

    .linkBtnWrapper a .linkActionBtn {
        background: var(--link-btn-bg-a);
        color: var(--link-btn-text-a);
        border:1px solid var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn {
        background: var(--link-btn-bg-a-hover);
        color: var(--link-btn-text-a-hover);
        border: 1px solid var(--link-btn-bg-a-hover);
    }

    /* Link Button ends here */


}

/* タブレット Landscape */
@media (orientation: landscape) and (min-width:751px) and (max-width:1024px) {

    .gridHalf {
        width: 100%;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .title {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .titleBlock {
        width: 100%;
        height: auto;
        padding: 0 10px 70px 0;
        /*padding-bottom: 70px;*/
        position: sticky;
        top: 94px;
    }

    .titleBlock > h1 {
        font-size: 36px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .titleBlock > h2 {
        font-size: 36px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .newsDate {
        font-size: 15px;
        text-align: left;
        color: var(--text-primary-color);
    }

    .newsImgUnit {
        width: 100%;
        margin: 10px 0 10px 0;
    }

    .newsImgUnit img {
        width: 100%;
    }


    /* Link Button from here */
    .linkBtnWrapper {
        width: 100%;
        height: auto;
        padding-top: 100px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 50px;
    }
    .linkActionBtn {
        width: 100%;
        height: 150px;
        appearance: none;
        cursor: pointer;
        position: relative;
    }

    .textAdjust {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 30px;
        font-family: 'Mincho', serif;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .textAdjust > .linkArrow {
        width: 18px;
        height: 18px;
        margin-top: 3px;
        stroke: var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn .textAdjust > .linkArrow {
        stroke: var(--link-btn-text-a-hover);
    }

    .linkBtnWrapper a .linkActionBtn {
        background: var(--link-btn-bg-a);
        color: var(--link-btn-text-a);
        border:1px solid var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn {
        background: var(--link-btn-bg-a-hover);
        color: var(--link-btn-text-a-hover);
        border: 1px solid var(--link-btn-bg-a-hover);
    }

    /* Link Button ends here */


}


/* PC */
@media (min-width:1025px) {

    .gridHalf {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .title {
        width: 100%;
        height: auto;
        padding: 0 10px 0 0;
        overflow: visible;
    }

    .titleBlock {
        width: 100%;
        height: auto;
        padding-bottom: 75px;
        position: sticky;
        top: 94px;
    }

    .titleBlock > h1 {
        font-size: 36px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .titleBlock > h2 {
        font-size: 36px;
        text-align: left;
        line-height: 120%;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: var(--text-primary-color);
    }

    .newsDate {
        font-size: 15px;
        text-align: left;
        color: var(--text-primary-color);
    }

    .newsImgUnit {
        width: 100%;
        margin: 10px 0 10px 0;
    }

    .newsImgUnit img {
        width: 100%;
    }


    /* Link Button from here */
    .linkBtnWrapper {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        height: auto;
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .linkActionBtn {
        width: 100%;
        height: 150px;
        appearance: none;
        cursor: pointer;
        position: relative;
    }

    .textAdjust {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 30px;
        font-family: 'Mincho', serif;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .textAdjust > .linkArrow {
        width: 20px;
        height: 20px;
        margin-top: 3px;
        stroke: var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn .textAdjust > .linkArrow {
        stroke: var(--link-btn-text-a-hover);
    }

    .linkBtnWrapper a .linkActionBtn {
        background: var(--link-btn-bg-a);
        color: var(--link-btn-text-a);
        border:1px solid var(--link-btn-text-a);
    }

    .linkBtnWrapper a:hover .linkActionBtn {
        background: var(--link-btn-bg-a-hover);
        color: var(--link-btn-text-a-hover);
        border: 1px solid var(--link-btn-bg-a-hover);
    }

    /* Link Button ends here */

}


/*-- 全メディアクエリ共通 --*/
.newsDate {
    color: var(--text-primary-color);
}

.newsDate a {
    color: var(--text-primary-color);
}

.newsDate a:hover {
    color: var(--text-secondary-color-a-hover);
}



/* Online Store　Stockistsページにて
*  .titleBlock の position sticky を無効にする
*/
.noPositionSticky {
    position: inherit;
}