@charset "UTF-8";

/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* https://www.daishowasiko.com/                                */
/* Copyright (C) Daishowa Paper Products Co., Ltd.              */
/*--------------------------------------------------------------*/


/* ========================================================

　投稿ページの共通設定

=========================================================== */

/* 背景色による強調 ▼ */
.text span.bg_yelw {
    padding: 0 0.25rem;
    background-color: rgba(255, 251, 123, 1.00);
}

/* ▲ 背景色による強調 */

.text img[class*="wp-image"] {
}

.text img[class*="size-large"],
.text img[class*="size-full"] {
    width: 100%;
    height: auto;
}

.text img.alignright {
    float: right;
    margin: 0 0 0 2.0rem;
}

.text img.alignleft {
    float: left;
    margin: 0 2.0rem 0 0;
}

.text img.aligncenter {
    display: block;
    margin: 0 auto;
}

.text .table-responsive {
    clear: both;
    border: none;
    text-align: center;
}

.text .table-responsive table {
    white-space: nowrap;
}

.text table,
.text th,
.text td {
    border-width: 0.1rem;
}

.text th,
.text td {
    padding: 0.5rem 1.0rem;
}

.text caption {
    padding: 0.3rem 0.5rem;
    color: rgba(255, 0, 0, 1.0);
    font-size: 1.4rem;
}

/* ボタン横並び+装飾 220725_大昭和西嶋追記 */
.text .btn-conts {
    margin: 4rem 0;
    text-align: center;
}

.text .btn-conts a {
    display: inline-block;
    margin: 1rem;
    padding: 1rem;
    font-size: 1.3rem;
}

.text .btn--yellowgreen,
a.btn--yellowgreen {
    display: block;
    width: 25rem;
    color: #fff;
    background-color: rgba(130, 210, 45, 1.0) !important;
    text-align: center;
    border-radius: .5rem !important;
    padding: 2.5rem 0 !important;
}

.text .btn--yellowgreen:hover,
a.btn--yellowgreen:hover {
    color: #fff;
    background: rgba(130, 210, 45, 0.6);
}

.product .btn-conts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* .leadのフォントサイズ調整 */
.text .lead {
    font-size: inherit;
}

/* リンク付きサムネイル生成 221004_大昭和西嶋追記 */

.embedly-card-hug {
    border: 1px #c6c6c6 solid;
    padding: 10px 30px !important;
    background-color: rgba(252, 252, 251, 1.00);
}


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

    .text img[class*="size-medium"] {
        width: 100%;
        height: auto;
    }

    .text table:not(.noBlk) {
        width: 100%;
    }

    /* 1分で学べる モバイル時のレイアウト調整 
    .text table:not(.noBlk) th,
    .text table:not(.noBlk) td {
        display: block;
    }
*/
    .text table:not(.noBlk) th {
        border-bottom: none;
    }

    .text table:not(.noBlk) tr:nth-last-of-type(n+2) td {
        border-bottom: none;
    }

    .text table:not(.noBlk) tr:last-of-type td:nth-last-of-type(n+2) {
        border-bottom: none;
    }

    /* お買い物ページ ボタン横並び解除_大昭和西嶋追記_220802 */
    .product .btn-conts {
        display: block;
    }

}

@media only screen and (min-width: 992px) {

    .text caption {
        display: none;
    }

}


/* ========================================================

　#reading（読みもの／お知らせ）

=========================================================== */

section .heading h2 {
    color: rgba(0, 164, 105, 1.00);
    font-size: 2.0rem;
    font-weight: 500;
}

section .heading h5 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0;
}

section .heading h5 span {
    background: -o-linear-gradient(transparent 50%, rgba(255, 249, 123, 1.0) 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgba(255, 249, 123, 1.0)));
    background: linear-gradient(transparent 50%, rgba(255, 249, 123, 1.0) 50%);
}

@media only screen and (min-width: 768px) {

    section .heading {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    section .heading h2 {
        font-size: min(3.0vw, 2.7rem);
        line-height: 100%;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    section .heading h5 {
        margin-left: 1.5rem;
        font-size: min(1.4vw, 1.6rem);
        line-height: 100%;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    section .heading h5 span {
        padding-left: 0.75rem;
    }

}

@media only screen and (min-width: 992px) {

    section .heading h5 {
        letter-spacing: 0.15rem;
    }

}

@media only screen and (min-width: 1200px) {

    section .heading h5 {
        letter-spacing: -0.06rem;
    }

}

/*　記事一覧
----------------------------------------------------------- */
#reading .loop a {
    display: block;
}

#reading .loop .inner > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#reading .loop .box {
    width: calc(100% - 38.0vw);
    padding-left: 1.0rem;
}

#reading .loop figure {
    /* サムネイルサイズはデザインに基づく（横142px 高さ88px）　横幅375pxモニタ基準 */
    width: 38.0vw; /* 142px ÷ 375px */
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
}

#reading .loop .date {
    margin-bottom: 1.0rem;
    line-height: 100%;
}

/* 読みものカード内のタグクラウド */
#reading .tags ul {
    width: 100%;
    margin: 0;
    margin-top: 0.5rem;
    padding: 0;
}

#reading .tags li {
    display: inline-block;
    margin: 0;
    border: 0.05rem solid rgba(140, 140, 140, 1.00);
    border-radius: 1.2rem;
    overflow: hidden;
}

#reading .tags a {
    display: block;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
    color: rgba(140, 140, 140, 1.00);
    font-size: 1.0rem;
    font-weight: 500;
    line-height: 2.4rem;
}

@media only screen and (min-width: 576px) {

    #reading .loop .box {
        width: calc(100% - 22.0rem);
    }

    #reading .loop figure {
        width: 22.0rem;
    }

}

@media only screen and (min-width: 768px) {

    #reading div[class^="col-"]:nth-of-type(n+2) {
        margin-top: 0;
    }

    #reading div[class^="col-"]:nth-of-type(n+3) {
        margin-top: 1.0rem;
    }

    #reading .loop .box {
        width: calc(100% - 15.0rem);
    }

    #reading .loop figure {
        width: 15.0rem;
    }

    #reading .box .date {
        margin-top: 0.5rem;
    }

    #reading .tags ul {
        margin-top: 1.0rem;
    }

}

@media only screen and (min-width: 992px) {

    #reading div[class^="col-"]:nth-of-type(n+3) {
        margin-top: 0;
    }

    #reading div[class^="col-"]:nth-of-type(n+5) {
        margin-top: 2.0rem;
    }

    #reading .loop .inner > * {
        display: inherit;
    }

    #reading .loop .box {
        width: 100%;
        padding-top: 0.5rem;
        padding-left: 0;
    }

    #reading .loop figure {
        width: 100%;
    }

    #reading .tags li {
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
        border: 0.1rem solid rgba(140, 140, 140, 1.00);
        border-radius: 1.4rem;
    }

    #reading .tags a {
        font-size: 1.1rem;
        line-height: 2.8rem;
    }

}

@media only screen and (min-width: 1400px) {

    #reading div[class^="col-"]:nth-of-type(n+5) {
        margin-top: 3.0rem;
    }

    #reading .box h3 {
        font-size: min(3.8vw, 1.85rem);
    }

    #reading .tags ul {
        margin-top: 2.5rem;
    }

    #reading .tags li {
        border-radius: 1.5rem;
    }

    #reading .tags a {
        font-size: 1.3rem;
        line-height: 3.0rem;
    }

}

/*　記事詳細
----------------------------------------------------------- */
#reading .metaBox {
    color: rgba(51, 51, 51, 1.00);
}

#reading .metaBox > span {
    display: inline-block;
}

#reading .metaBox .date {
    font-size: 1.2rem;
    font-weight: 300;
    display: inline-block; /* 230519 ※大昭和紙工 西嶋追加*/
}

#reading .metaBox .share {
    display: none;
}

/* タイトル */
#reading h1 {
    margin: 0.5rem 0 1.5rem;
    font-size: 2.4rem; /* 221116 ※大昭和紙工 西嶋修正 3.0rem → 2.4rem*/
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 140%;
    letter-spacing: 0;
}

/* メインビジュアル */
#reading #mainContents > figure {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
    overflow: hidden;
}

#reading #mainContents > figure img {
    width: 100%;
    height: auto;
}

#reading .text {
    padding: 2.0rem 1.6rem;
    border-radius: 0 0 1.0rem 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
    line-height: 175%;
    text-align: justify;
    text-justify: inter-ideograph;
}

.landing #reading .text {
    border-radius: 1.0rem;
}

#reading .text p a {
    color: rgba(0, 164, 105, 1.00);
    border-bottom: 0.1rem solid rgba(0, 164, 105, 1.00);
}

/* 目次上のリード文 */
#reading .intro p {
    color: rgba(0, 164, 105, 1.00);
    font-weight: 400; /* 221116 ※大昭和紙工 西嶋修正 500 → 400*/
    letter-spacing: 0;
}

#reading .intro p a {
    color: rgba(51, 51, 51, 1.00);
    border-bottom: 0.1rem solid rgba(51, 51, 51, 1.00);
}

/* 目次 */
#reading .mokuji {
    margin-top: 2.0rem;
    padding: 2.0rem;
    border: 0.1rem solid rgba(187, 187, 187, 1.00);
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
}

#reading .mokuji h5 {
    color: rgba(140, 140, 140, 1.00);
    font-weight: 500;
    font-size: 1.8rem;
}

#reading .mokuji ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#reading .mokuji li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1.5rem 1.0rem;
    color: rgba(51, 51, 51, 1.00);
    font-weight: 500;
    line-height: 2.0rem;
}

#reading .mokuji li:nth-last-of-type(n+2) {
    border-bottom: 0.1rem solid rgba(204, 204, 204, 1.00);
}

#reading .mokuji li::before {
    margin-right: 0.5rem;
    color: rgba(0, 164, 105, 1.00);
    font-size: 1.1rem;
    content: "●";
}

#reading .mokuji a {
    display: block;
    border-bottom: none;
    color: rgba(51, 51, 51, 1.00);
}

/* 本文中の大見出し */
#reading .text h2 {
    margin-top: -3.0rem;
    margin-bottom: 3.0rem;
    padding-top: 10.0rem;
    color: rgba(0, 164, 105, 1.00);
    font-size: 2.2rem; /* 221116 ※大昭和紙工 西嶋修正 2.4rem → 2.3rem*/
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph;
}

/* 本文中の中見出し */
#reading .text h3,
#reading .text h3 em {
    margin-top: 4.0rem; /* 221116 ※大昭和紙工 西嶋修正 6.0rem → 3.0rem*/
    margin-bottom: 2.0rem;
    font-size: 1.9rem;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph;
}

#reading .text h3,
#reading .text h3 em {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding: 0.5rem 0 0.5rem 2.5rem;
    font-size: 2.0rem;
    font-style: normal;
}

#reading .text h3::before,
#reading .text h3 em::before {
    position: absolute;
    left: 0;
    height: 100%;
    border-left: 0.6rem solid rgba(0, 164, 105, 1.00);
    border-radius: 0.3rem;
    content: '';
}

/* 本文中の小見出し */
#reading .text h4 {
    margin-top: 3.0rem;
    margin-bottom: 1.5rem;
    font-size: 1.7rem;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph;
}

#reading .text img[class*="size-large"],
#reading .text img[class*="size-full"] {
    width: 100%;
    height: auto;
    margin: 0;
}



#reading .profile {
    border-radius: 1.0rem;
    background-color: rgba(226, 233, 232, 1.00);
    color: rgba(0, 164, 105, 1.00);
    font-weight: 400;
    text-align: justify;
    line-height: 175%;
    overflow: hidden;

    /* 追加 */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column !important;
    gap: 0.5rem;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.6em;
    box-sizing: border-box;
    align-items: center;
    margin-top: 1.5rem;
}

#reading .profile a {
    color: rgba(51, 51, 51, 1.00);
    border-bottom: 0.1rem solid rgba(51, 51, 51, 1.00);
}

#reading .profile figure {
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline-block;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#reading .profile figure img {
    width: 15.6rem;
    height: 15.6rem;
    margin: 0 auto;
    border-radius: 50.0%;
    -o-object-fit: cover;
    object-fit: cover;
}

#reading .profile h3 {
    margin: 2.0rem 0 1.0rem;
    font-size: 1.4rem;
    font-weight: 500;
}

#reading .profile + .profile h3 {
    margin-top: 0;
}

#reading .profile h4 {
    margin-bottom: 2.0rem;
    font-size: 2.1rem;
    font-weight: 500;
}

#reading .profile p {
    margin-bottom: 0;
    font-weight: 400;
}

#reading .prof-left {
    box-sizing: border-box;
}

#reading .prof-right {
    margin: 0 auto;
    flex: 3 2 0%;
}



/* Youtubeの埋め込み 231213 大昭和紙工 西嶋追記*/
#reading .text iframe.youtube-16-9 {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* SNSボタン */
#shereOn {
    margin-top: 1.5rem;
    padding: 3.0rem 1.6rem;
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
    text-align: center;
}

#shereOn .inner {
    margin-bottom: 2.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 0.1rem solid rgba(203, 203, 203, 1.00);
}

#shereOn aside {
    margin-bottom: 0.5rem;
    font-size: 400;
    text-align: left;
}

#shereOn h2 {
    font-size: 2.0rem;
    font-size: 500;
    text-align: left;
    line-height: 140%;
}

#shereOn h3 {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    font-weight: 500;
}

#shereOn h3::after {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0.25rem;
    width: 2.0rem;
    height: 2.0rem;
    background: url("../img/icon_futaba.png") center center / contain no-repeat;
    vertical-align: top;
    content: "";
}

#shereOn ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#shereOn li {
    display: inline-block;
}

#shereOn li img {
    width: 100%;
    max-width: 8.25rem;
    height: auto;
}

#shereOn .tag ul {
    margin: 2.0rem 0 0;
    padding: 0;
    text-align: left;
}

#shereOn .tag li {
    display: inline-block;
    margin: 0;
    margin-bottom: 0.25rem;
}

#shereOn .tag li a {
    display: block;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    border: 0.05rem solid rgba(140, 140, 140, 0.50);
    border-radius: 1.2rem;
    background-color: rgba(255, 255, 255, 1.00);
    color: rgba(140, 140, 140, 1.00);
    font-size: 1.0rem;
    font-weight: 500;
    line-height: 2.4rem;
}

/* 前の記事・次の記事 */
#pager {
    margin: 0 auto;
    padding-top: 3.0rem;
    text-align: center;
}

#pager > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#pager img {
    max-width: 3.0rem;
    max-height: 3.0rem;
}

#pager a {
    display: block;
    color: rgba(51, 51, 51, 1.00);
    font-size: 1.3rem;
    font-weight: 500;
}

#pager a::before,
#pager a::after {
    color: rgba(0, 164, 105, 1.00);
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
}

#pager div:nth-of-type(1) a::before {
    margin-right: 0.5rem;
    content: "\f060";
}

#pager div:nth-of-type(3) a::after {
    margin-left: 0.5rem;
    content: "\f061";
}

/* カード・バナー */
#reading .products {
    margin-top: 5.0rem;
}

#reading .products h2,
#reading .banner h2 {
    margin-bottom: 2.0rem;
    font-size: 2.0rem;
}

#reading .products h5,
#reading .banner h5 {
    margin-bottom: 1.0rem;
    font-size: 1.1rem;
}

#reading .products h5 span,
#reading .banner h5 span {
    background: -o-linear-gradient(transparent 50%, rgba(255, 249, 123, 1.0) 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgba(255, 249, 123, 1.0)));
    background: linear-gradient(transparent 50%, rgba(255, 249, 123, 1.0) 50%);
}

#reading .products .inner,
#reading .banner .inner {
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
    overflow: hidden;
}

#reading .products .inner:nth-of-type(n+2),
#reading .banner .inner:nth-of-type(n+2) {
    margin-top: 1.5rem;
}

#reading .products .inner img,
#reading .banner .inner img {
    width: 100%;
    height: auto;
}

/* カード */
#reading .products .box {
    padding: 2.0rem 1.6rem;
}

#reading .products .box h3 {
    margin-bottom: 1.0rem;
    font-size: 2.3rem;
    font-weight: 500;
}

#reading .products .box p {
    color: rgba(51, 51, 51, 1.00);
    text-align: justify;
}

/* バナー */
#reading .banner img {
    width: 100%;
    height: auto;
}

#reading .banner img:last-of-type {
    display: none;
}

#reading hr {
    margin: 3.0rem 1.6rem;
}

@media only screen and (min-width: 375px) {

    #shereOn li img {
        max-width: 10.0rem;
    }

    #pager a {
        font-size: 1.6rem;
    }

}

@media only screen and (min-width: 576px) {

    #reading .metaBox .date {
        font-size: 1.0rem;
    }

    #reading h1 {
        margin: 1.0rem 0 1.0rem;
        font-size: 2.8;
    }

    #reading .text {
        padding: 3.0rem;
    }

    #reading .mokuji {
        margin-top: 2.4rem;
    }

    #reading .text h2 {
        font-size: 2.4rem;
    }

    #reading .text h3,
    #reading .text h3 em {
        margin-top: 4.5rem;
        margin-bottom: 2.2rem;
        font-size: 2.0rem;
    }

    #reading .profile {
        padding: 3.0rem;
        flex-direction: row !important;
        gap: 5rem;
    }

    #reading .profile h3 {
        margin: 2.3rem 0 1.0rem;
    }

    #reading .profile h4 {
        margin-bottom: 2.1rem;
    }

    #shereOn {
        padding: 3.0rem;
    }

    #shereOn .inner {
        margin-bottom: 3.0rem;
        padding-bottom: 2.0rem;
    }

    #shereOn h2 {
        font-size: 2.1rem;
    }

    #shereOn h3 {
        margin-bottom: 1.7rem;
        font-size: 2.0rem;
    }

    #shereOn h3::after {
        top: 0.1rem;
        width: 2.2rem;
        height: 2.2rem;
    }

    #shereOn li img {
        max-width: 14.5rem;
    }

    #reading .products .box {
        padding: 3.0rem;
    }

    #reading hr {
        margin: 3.0rem;
    }

}

@media only screen and (min-width: 768px) {

    #reading .metaBox .date {
        width: 50%;
        font-size: 1.2rem;
    }

    #reading .metaBox .share {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 50%;
        font-size: 1.2rem;
        text-align: right;
    }

    #reading .metaBox .share img {
        width: auto;
        height: 2.0rem;
        margin-left: 1.5rem;
    }

    #reading h1 {
        margin: 1.5rem 0 1.0rem;
        font-size: 3.0rem;
    }

    #reading .text {
        padding: 5.0rem;
    }

    #reading .mokuji {
        margin-top: 3.0rem;
        padding: 2.0rem 4.0rem;
    }

    #reading .text h2 {
        padding-top: 10.0rem;
        font-size: 2.6rem;
    }

    #reading .text h3,
    #reading .text h3 em {
        margin-top: 5.0rem;
        margin-bottom: 2.4rem;
        font-size: 2.1rem;
    }

    #reading .profile {
        padding: 3.0rem 5.0rem;
    }

    #reading .profile h3 {
        margin: 2.6rem 0 1.0rem;
    }

    #shereOn {
        padding: 3.0rem 5.0rem;
    }

    #shereOn .inner {
        margin-bottom: 3.4rem;
        padding-bottom: 2.1rem;
    }

    #shereOn h2 {
        font-size: 2.2rem;
    }

    #shereOn h3 {
        margin-bottom: 1.9rem;
    }

    #shereOn .tag li {
        margin-bottom: 0.75rem;
    }

    #shereOn li:nth-of-type(n+2) {
        margin-left: 0.5rem;
    }

    #shereOn li img {
        max-width: 12.0rem;
    }

    #reading .banner img:first-of-type {
        display: none;
    }

    #reading .banner img:last-of-type {
        display: block;
    }

    #reading .products h5,
    #reading .banner h5 {
        margin-bottom: 2.0rem;
        font-size: 1.3rem;
    }

    #reading .products h2,
    #reading .banner h2 {
        margin-bottom: 3.0rem;
        font-size: 2.3rem;
    }

    #reading .products {
        margin-top: 8.0rem;
    }

    #reading .products a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    #reading .products .inner {
        width: 100%;
        padding: 0;
    }

    #reading .products .inner img {
        width: min(37%, 38.0rem);
    }

    @-moz-document url-prefix() {
        
        #reading .products .inner img {
            min-width: 37%;
            max-width: 38.0rem;
        }
        
    }

    #reading .products .box {
        padding: 3.0rem 5.0rem 3.0rem min(3.0vw, 5.0rem);
    }

    #reading .products .box h3 {
        font-size: 2.5rem;
    }

    #reading hr {
        margin: 3.0rem 0;
    }

}

@media only screen and (min-width: 992px) {

    #reading .container-fluid:last-of-type {
        margin-top: 5.0rem;
        padding-top: 5.0rem;
        border-top: 0.1rem solid rgba(204, 204, 204, 1.00);
    }

    #reading .metaBox .date {
        font-size: 1.2rem;
    }

    #reading .metaBox .share img {
        height: 2.2rem;
        margin-left: 2.0rem;
    }

    #reading h1 {
        margin: 2.4rem 0 1.0rem;
        font-size: 2.8rem;
    }

    #reading .mokuji {
        margin-top: 3.2rem;
        padding: 2.4rem 6.0rem;
    }

    #reading .text h2 {
        font-size: 2.4rem;
    }

    #reading .text h3,
    #reading .text h3 em {
        margin-top: 5.5rem;
        margin-bottom: 2.6rem;
        font-size: 2.0rem;
    }

    #reading .profile h3 {
        margin: 2.9rem 0 1.0rem;
    }

    #reading .profile h4 {
        margin-bottom: 2.2rem;
        font-size: 2.2rem;
    }

    #shereOn .inner {
        margin-bottom: 3.8rem;
        padding-bottom: 2.2rem;
    }

    #shereOn h2 {
        font-size: 2.3rem;
    }

    #shereOn h3 {
        margin-bottom: 2.1rem;
        font-size: 2.1rem;
    }

    #shereOn h3::after {
        top: 0.15rem;
    }

    #shereOn .tag ul {
        margin: 3.0rem 0 0;
    }

}

@media only screen and (min-width: 1200px) {

    #reading .metaBox .date {
        font-size: 1.4rem;
    }

    #reading .metaBox .share {
        font-size: 1.4rem;
    }

    #reading .metaBox .share img {
        height: 2.4rem;
        margin-left: 2.5rem;
    }

    #reading h1 {
        margin: 3.0rem 0 1.0rem;
        font-size: 3.0rem;
    }

    #reading .mokuji {
        margin-top: 4.0rem;
        padding: 2.6rem 8.0rem;
    }

    #reading .text {
        padding: 5.0rem 9.0rem;
    }

    #reading .text h2 {
        font-size: 2.6rem;
    }

    #reading .text h3,
    #reading .text h3 em {
        margin-top: 4.0rem;
        margin-bottom: 2.8rem;
        font-size: 2.2rem;
    }

    #reading .profile {
        padding: 3.0rem 9.0rem;
    }

    #reading .profile h3 {
        margin: 0.3rem 0 1.0rem;
        font-size: 1.5rem;
    }

    #reading .profile h4 {
        margin-bottom: 2.3rem;
        font-size: 2.3rem;
    }

    #shereOn {
        padding: 3.5rem 9.0rem;
    }

    #shereOn .inner {
        margin-bottom: 4.0rem;
        padding-bottom: 2.3rem;
    }

    #shereOn aside {
        margin-bottom: 1.0rem;
    }

    #shereOn h2 {
        font-size: 2.4rem;
    }

    #shereOn h3 {
        margin-bottom: 2.2rem;
        font-size: 2.2rem;
    }

    #shereOn h3::after {
        top: 0.2rem;
        width: 2.4rem;
        height: 2.4rem;
    }

    #shereOn .tag li {
        margin-bottom: 0.75rem;
    }

    #shereOn li img {
        max-width: 14.0rem;
    }

    #reading .products {
        margin-top: 10.0rem;
    }

    #reading .products .box h3 {
        font-size: 2.7rem;
    }

    #reading hr {
        margin: 5.0rem 0;
    }

}

@media only screen and (min-width: 1400px) {

    #reading .container-fluid.adjust {
        max-width: 115.0rem;
    }

    #reading .container-fluid:last-of-type {
        margin-top: 6.5rem;
        padding-top: 6.5rem;
        border-top: 0.1rem solid rgba(204, 204, 204, 1.00);
    }

    #reading .metaBox .date {
        font-size: 1.4rem;
    }

    #reading .metaBox .share {
        font-size: 1.4rem;
    }

    #reading .metaBox .share img {
        height: 2.6rem;
    }

    #reading h1 {
        margin: 3.4rem 0 1.25rem;
        font-size: 3.0rem;
    }

    #reading .mokuji {
        margin-top: 4.5rem;
        padding: 2.8rem 10.0rem;
    }

    #reading .text {
        padding: 5.0rem 10.0rem;
    }

    #reading .text h2 {
        font-size: 2.4rem;
    }

    #reading .text h3,
    #reading .text h3 em {
        margin-top: 5.0rem;
        margin-bottom: 3.0rem;
        font-size: 2.2rem;
    }

    #reading .profile h3 {
        margin: 0.6rem 0 1.0rem;
    }

    #reading .profile h4 {
        margin-bottom: 2.4rem;
        font-size: 2.4rem;
    }

    #shereOn {
        padding: 4.0rem 9.0rem;
    }

    #shereOn .inner {
        margin-bottom: 4.5rem;
        padding-bottom: 2.4rem;
    }

    #shereOn h2 {
        font-size: 2.5rem;
    }

    #shereOn h3 {
        margin-bottom: 2.3rem;
        font-size: 2.3rem;
    }

    #shereOn h3::after {
        top: 0.2rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    #shereOn li img {
        max-width: 16.0rem;
    }

}

@media only screen and (min-width: 1920px) {

    #reading {
        padding-top: 4.0rem;
        padding-bottom: 12.0rem;
    }

    #reading .container-fluid.adjust {
        max-width: 112.0rem;
    }

    #reading .metaBox .date {
        font-size: 1.4rem;
    }

    #reading .metaBox .share {
        font-size: 1.4rem;
    }

    #reading .metaBox .share img {
        height: 2.8rem;
        margin-left: 3.0rem;
    }

    #reading h1 {
        margin: 4.0rem 0 2.5rem;
        font-size: 4.0rem;
        line-height: 150%;
    }

    #reading .text {
        padding: 5.0rem 12.0rem;
    }

    #reading .mokuji {
        margin-top: 5.0rem;
        padding: 3.0rem 11.0rem;
    }

    #reading .mokuji h5 {
        margin-bottom: 1.0rem;
    }

    #reading .text h3,
    #reading .text h3 em {
        margin-top: 8.0rem;
    }

    #reading .profile {
        padding: 3.4rem 11.0rem;
    }

    #reading .profile h3 {
        margin: 4.0rem 0 1.0rem;
        font-size: 1.6rem;
    }

    #reading .profile h4 {
        margin-bottom: 2.5rem;
        font-size: 2.4rem;
    }

    #shereOn .inner {
        margin-bottom: 5.0rem;
        padding-bottom: 2.5rem;
    }

    #shereOn aside {
        margin-bottom: 1.5rem;
    }

    #shereOn h2 {
        font-size: 2.7rem;
        line-height: 130%;
    }

    #shereOn h3 {
        margin-bottom: 2.5rem;
        font-size: 2.4rem;
    }

    #shereOn h3::after {
        top: 0;
        left: 0.25rem;
        width: 3.0rem;
        height: 3.0rem;
    }

    #shereOn li img {
        max-width: 16.8rem;
    }

    #shereOn .tag ul {
        margin: 4.0rem 0 0;
    }

    #shereOn .tag li {
        margin-bottom: 1.0rem;
    }

    #shereOn .tag li a {
        border-radius: 1.6rem;
        font-size: 1.4rem;
        line-height: 3.2rem;
    }

    #pager {
        padding-top: 7.5rem;
    }

    #pager img {
        max-width: 3.4rem;
        max-height: 3.4rem;

    }

    #pager a {
        font-size: 2.0rem;
    }

    #pager a::before,
    #pager a::after {
        position: relative;
        top: 0.4rem;
        font-size: 3.0rem;
    }

    #pager div:nth-of-type(1) a::before {
        margin-right: 1.0rem;
    }

    #pager div:nth-of-type(3) a::after {
        margin-left: 1.0rem;
    }

    #reading .products h5,
    #reading .banner h5 {
        margin-bottom: 2.5rem;
        font-size: 1.6rem;
    }

    #reading .products h2,
    #reading .banner h2 {
        margin-bottom: 4.0rem;
        font-size: 2.7rem;
    }

    #reading .products {
        margin-top: 13.0rem;
    }

    #reading .products .box h3 {
        font-size: 3.0rem;
    }

    #reading hr {
        margin: 7.0rem 0;
    }

}





/* Chat Style Layout ※大昭和紙工 西嶋追記_230425*/
#reading .text .chat table {
    width: 100%;
    margin: 0;
    margin: 2.0rem 0;
}

#reading .text .chat th {
    width: 20% !important;
    margin: 2.0rem 0;
    padding: 0;
    padding-bottom: 1.0rem;
    vertical-align: top;
}

#reading .text .chat td {
    padding: 0;
    padding-bottom: 1.0rem;
    vertical-align: top;
}

/* フキダシ右 */
#reading .text .chat th + td {
    display: inline-block;
    position: relative;
    width: 95% !important;
    margin-left: 5%;
    padding: 1.0rem;
    border: 2px solid rgba(100, 190, 140, 1.0);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 1.0);
}

#reading .text .chat th + td::before,
#reading .text .chat th + td::after {
    position: absolute;
    top: 1.75rem;
    right: 100%;
    content: "";
}

#reading .text .chat th + td::before {
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid rgba(100, 190, 140, 1.0);
    z-index: 1;
}

#reading .text .chat th + td::after {
    margin-top: -9px;
    border: 9px solid transparent;
    border-right: 9px solid rgba(255, 255, 255, 1.0);
    z-index: 2;
}

/* フキダシ左 */
#reading .text .chat tr td:first-child {
    display: inline-block;
    position: relative;
    width: 95% !important;
    margin-right: 5%;
    padding: 1.0rem;
    border: 2px solid rgba(250, 180, 80, 1.0);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 1.0);
}

#reading .text .chat tr td:first-child::before,
#reading .text .chat tr td:first-child::after {
    position: absolute;
    top: 1.75rem;
    left: 100%;
    content: "";
}

#reading .text .chat tr td:first-child::before {
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid rgba(250, 180, 80, 1.0);
    z-index: 1;
}

#reading .text .chat tr td:first-child::after {
    margin-top: -9px;
    border: 9px solid transparent;
    border-left: 9px solid rgba(255, 255, 255, 1.0);
    z-index: 2;
}

#reading .text ul.none {
    margin: 0 0 0 1.1rem;
    list-style: none;
    border: none;
    text-indent: -1rem;
    padding-left: 1rem;
}

@media only screen and (min-width:768px) {

    #reading .text .chat th {
        width: 15% !important;
    }

    #reading .text .chat th + td {
        width: 97.5% !important;
        margin-left: 2.5%;
        padding: 1.5rem;
    }

    #reading .text .chat tr td:first-child {
        width: 97.5% !important;
        margin-right: 2.5%;
        padding: 1.5rem;
    }

}

.says {
    position: relative;
    display: inline-block;
    padding: 1rem 2rem;
    min-width: 120px;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0.5rem;
    border: 2px solid rgba(0, 155, 94, 1.0);
    background-color: rgba(255, 254, 245, 1.0);
}

.says:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid rgba(255, 254, 245, 1.0);
    z-index: 2;
}

.says:after {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;

    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid rgba(0, 155, 94, 1.0);
    z-index: 1;
}

.says p {
    margin: 0;
    padding: 0;
}


/* ========================================================

　#products（商品情報）

=========================================================== */

/*　nav / loops
----------------------------------------------------------- */
section[id*="List"] ul.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 4.0rem;
}

section[id*="List"] ul.nav li:nth-of-type(n+2) {
    margin-left: 1.0rem;
}

section[id*="List"] ul.nav a {
    font-size: 1.6rem; /*221117_大昭和西嶋 修正 2.0rem → 1.6rem*/
    font-weight: 500; /*221117_大昭和西嶋 修正 400 → 500*/
}

section[id*="List"] ul.nav a:not(.active) {
    color: rgba(187, 187, 187, 1.00)
}

section#productsList div.nav .nav-item:nth-of-type(n+3) {
    margin-top: 2.0rem;
}

section#productsList div.nav {
    margin-top: 2.0rem;
    margin-bottom: 2.0rem;
}

section#productsList div.nav > div:nth-of-type(n+2) {
    margin-top: 0.5rem;
}

section#productsList div.nav .inner a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 6.0rem;
    padding: 0;
    border: 0.2rem solid rgba(231, 235, 232, 1.00);
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 0.70);
    color: rgba(51, 51, 51, 1.00);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6rem;
}

section#productsList div.nav > div:first-of-type .inner a {
    padding-left: 3.25rem;
}

section#productsList div.nav .inner a span,
.accordion .toggleBtn span,
.accordion .item > div a span {
    position: absolute;
    left: 9.0rem;
}

section#productsList div.nav .inner a.current,
section#productsList div.nav .accPanel div.current {
    border: 0.2rem solid rgba(0, 164, 105, 1.00);
}

/* アコーディオン */
.accordion .toggleBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 6.0rem;
    border: 0.2rem solid rgba(231, 235, 232, 1.00);
    border-radius: 1.0rem;
    background-color: rgba(250, 250, 250, 1.00);
    color: rgba(51, 51, 51, 1.00);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6rem;
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.accordion .toggleBtn:hover {
    opacity: 0.7;
}

.accordion .toggleBtn span::after {
    display: inline-block;
    position: absolute;
    top: 0.2rem;
    left: 15.0rem;
    color: rgba(0, 164, 105, 1.00);
    font-size: 2.4rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f107";
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.accordion .toggleBtn.open span::after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.accordion .item {
    display: none;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    background-color: rgba(255, 255, 255, 1.00);
    font-weight: 400;
}

.accordion .item > div a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 6.0rem;
    border-bottom: 0.1rem dashed rgba(160, 160, 160, 1.00);
    color: rgba(51, 51, 51, 1.00);
    font-size: 1.4rem;
    line-height: 1.4rem;
}

.accordion .item > div a.current {
    color: rgba(0, 164, 105, 1.00);
    font-weight: 500;
}

section#productsList div.nav img {
    width: 4.0rem;
    height: auto;
}

section#productsList div.nav .inner a img,
.accordion .toggleBtn img,
.accordion .item > div a img {
    position: absolute;
    left: 3.0rem;
}

/*　content
----------------------------------------------------------- */
section[id*="List"] .loop div[class^="col-"]:not(.postNav) {
    -webkit-animation: 1.0s zoom-in;
    animation: 1.0s zoom-in;
}

section#newsList .nav li:nth-of-type(n+2) {
    margin-left: 2.0rem;
}

section#newsList .nav a[aria-current="page"] {
    color: rgba(0, 164, 105, 1.00);
}

@media only screen and (min-width: 375px) {

    section#productsList div.nav .inner a span,
    .accordion .toggleBtn span,
    .accordion .item > div a span {
        left: 11.0rem;
    }

    section#productsList div.nav .inner a img,
    .accordion .toggleBtn img,
    .accordion .item > div a img {
        left: 5.0rem;
    }

    section#productsList div.nav > div:first-of-type .inner a {
        padding-left: 5.25rem;
    }

    .accordion .toggleBtn span::after {
        left: 17.0rem;
    }

}

@media only screen and (min-width: 576px) {

    section[id*="List"] ul.nav li:nth-of-type(n+2) {
        margin-left: 2.0rem;
    }

    section#newsList .nav li:nth-of-type(n+2) {
        margin-left: 4.0rem;
    }

    section#productsList div.nav .inner a span,
    .accordion .toggleBtn span,
    .accordion .item > div a span {
        left: 14.0rem;
    }

    section#productsList div.nav .inner a img,
    .accordion .toggleBtn img,
    .accordion .item > div a img {
        left: 8.0rem;
    }

    section#productsList div.nav > div:first-of-type .inner a {
        padding-left: 8.25rem;
    }

    .accordion .toggleBtn span::after {
        left: 18.0rem;
    }

}

@media only screen and (min-width: 768px) {

    section[id*="List"] ul.nav {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    section[id*="List"] ul.nav a {
        font-size: 2.0rem; /*221117_大昭和西嶋 追記*/
    }

    section#productsList div.nav > div:nth-of-type(n+2) {
        margin-top: 0;
    }

    section#productsList div.nav > div:nth-of-type(n+3) {
        margin-top: 1.0rem;
    }

    section#productsList div.nav .inner a {
        font-size: 1.5rem;
    }

    .accordion .toggleBtn {
        margin-top: 0;
        font-size: 1.5rem;
    }

    section#productsList div.nav .inner a span,
    .accordion .toggleBtn span,
    .accordion .item > div a span {
        left: 11.0rem;
    }

    section#productsList div.nav .inner a img,
    .accordion .toggleBtn img,
    .accordion .item > div a img {
        left: 5.0rem;
    }

    section#productsList div.nav > div:first-of-type .inner a {
        padding-left: 5.25rem;
    }

    .accordion .toggleBtn span::after {
        left: 15.0rem;
    }

}

@media only screen and (min-width: 992px) {

    section#productsList div.nav > div:nth-of-type(n+3) {
        margin-top: 0;
    }

    .accordion .toggleBtn span::after {
        top: 0.3rem;
    }

    section#productsList div.nav .inner a span,
    .accordion .toggleBtn span,
    .accordion .item > div a span {
        left: 6.0rem;
    }

    section#productsList div.nav .inner a img,
    .accordion .toggleBtn img,
    .accordion .item > div a img {
        left: 1.0rem;
    }

    section#productsList div.nav > div:first-of-type .inner a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-left: 0;
    }

    .accordion .toggleBtn span::after {
        left: 12.0rem;
    }

}

@media only screen and (min-width: 1200px) {

    section#productsList div.nav .inner a span,
    .accordion .toggleBtn span,
    .accordion .item > div a span {
        left: 8.0rem;
    }

    section#productsList div.nav .inner a img,
    .accordion .toggleBtn img,
    .accordion .item > div a img {
        left: 2.0rem;
    }

    .accordion .toggleBtn span::after {
        left: 13.5rem;
    }

}

@-webkit-keyframes zoom-in {

    0% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }

}

@keyframes zoom-in {

    0% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }

}

/*　記事一覧
----------------------------------------------------------- */
.loops {
    padding-top: 2.0rem;
}

.loops div[class^="col-"]:not(.postNav):nth-of-type(n+2) {
    margin-top: 2.0rem;
}

/* 余白確保のためインナーボックス配置 */
.loops .inner {
    position: relative;
    height: 100%;
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 0.70);
}

/* サムネイル部 */
.loops figure {
    margin: 0;
    border-bottom: 0.4rem solid rgba(0, 155, 94, 1.00);
    border-radius: 1.0rem 1.0rem 0 0;
    overflow: hidden;
}

.loops figure a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

/* データ部 */
.loops .box {
    padding: 2.0rem;
}

.loops .post-categories {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.loops .post-categories a {
    display: inline-block;
    margin-right: 1.0rem;
    padding-right: 0.75rem; /* レイアウト調整　210901 大昭和西嶋追記 */
    color: rgba(0, 155, 94, 1.00);
    font-size: 1.3rem;
    font-weight: 500; /* レイアウト調整　210901 大昭和西嶋追記 */
    line-height: 2.0rem;
}

.loops .date {
    color: rgba(0, 155, 94, 1.00);
    font-size: 1.5rem;
    font-weight: 300;
}

/* タイトル */
.loops h3 {
    padding: 1.0rem 0 2.0rem;
}

.loops h3 a {
    color: rgba(51, 51, 51, 1.00);
    font-size: 1.8rem;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 2.4rem;
    letter-spacing: 0;
}

.loops h3 span {
    font-weight: 400;
}

/* 価格 */
.loops .price {
    font-size: 2.0rem;
    font-weight: 500;
    text-align: right;
}

.loops .price span {
    font-size: 70.0%;
}

.loops .price.soldout {
    color: rgba(255, 0, 0, 1.00);
    font-weight: 700;
}

/* タグ */
.loops .tag ul {
    padding: 0;
    list-style: none;
}

.loops .tag li {
    display: inline-block;
    margin-right: 0.5rem;
}

.loops .tag a {
    padding: 0 1.0rem;
    border: 0.1rem solid rgba(0, 155, 94, 1.00);
    border-radius: 0.9rem;
    background-color: rgba(246, 246, 246, 1.00);
    font-size: 1.3rem;
    font-weight: 400;
    height: 1.8rem;
}

/* ありません */
section .none {
    padding: 2.0rem;
    border: 0.1rem solid rgba(204, 204, 204, 1.00);
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
}

/* more */
.loops div[class^="col-"].more {
    margin-top: 0;
}

.loops .more {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 5.0rem;
}

.loops .more a {
    display: block;
    width: 25.0rem;
    border: 0.2rem solid rgba(0, 155, 94, 1.00);
    border-radius: 3.0rem;
    background: rgba(255, 255, 255, 1.00) url("../img/arrow_more_g.png") right 2.5rem center / 1.1rem no-repeat;
    color: rgba(0, 142, 63, 1.00);
    font-weight: 500;
    text-align: center;
    line-height: 6.0rem;
}

.loops .more a:hover {
    border: 0.2rem solid rgba(45, 155, 94, 0);
    background: rgba(0, 155, 94, 1.00) url("../img/arrow_more_w.png") right 1.5rem center / 1.1rem no-repeat;
    color: rgba(255, 255, 255, 1.00);
    opacity: 1.0;
}


@media only screen and (min-width: 768px) {

    .loops div[class^="col-"]:not(.postNav):nth-of-type(-n+2) {
        margin-top: 0;
    }

    .loops div[class^="col-"]:not(.postNav):nth-of-type(n+3) {
        margin-top: 3.0rem;
    }

    .loops h3 {
        margin-bottom: 3.0rem;
    }

    .loops .price {
        position: absolute;
        right: 0;
        bottom: 2.0rem;
        padding-right: 0;
        font-size: 2.0rem;
        text-align: right;
    }

}

@media only screen and (min-width: 992px) {

    .loops div[class^="col-"]:not(.postNav):nth-of-type(-n+3) {
        margin-top: 0;
    }

    .loops .more {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding-top: 7.0rem;
    }

}

@media only screen and (min-width: 1200px) {

    #relation .loops div[class^="col-"]:not(.postNav):nth-of-type(-n+4) {
        margin-top: 0;
    }

}

/*　タグ
----------------------------------------------------------- */
#productsList .tagcloud {
    margin-bottom: 2.0rem;
    text-align: center;
}

#productsList .tagcloud .headding > * {
    display: inline-block;
}

#productsList .tagcloud h2 {
    margin-bottom: 1.5rem;
    color: rgba(0, 164, 105, 1.00);
    font-size: min(5.0vw, 3.0rem);
    font-weight: 500;
}

#productsList .tagcloud .inner {
    padding: 2.0rem;
    border: 0.1rem solid rgba(0, 164, 105, 1.00);
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
    text-align: left;
}

#productsList .tagcloud ul {
    max-width: 86.0rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#productsList .tagcloud li {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

#productsList .tagcloud a {
    display: block;
    padding: 0 0.75rem;
    border: 0.1rem solid rgba(0, 164, 105, 1.00);
    border-radius: 1.0rem;
    background-color: rgba(246, 246, 246, 1.00);
    font-size: 1.4rem !important;
    font-weight: 400;
    line-height: 2.2rem;
}

/* 検索ボックス */
#productsList .tagcloud .serach input.search {
    margin: 0 auto 1.5rem;
    max-width: 13.0rem;
    height: 3.6rem;
    padding-left: 1.5rem;
    padding-right: 2.6rem;
    border: 0.2rem solid rgba(0, 164, 105, 1.00);
    border-radius: 1.8rem;
    background: rgba(255, 255, 255, 1.00) url("../img/icon_search_k.png") right 1.0rem center / 1.6rem no-repeat;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 3.6rem;
    outline: none;
}

@media only screen and (min-width: 375px) {

    #productsList .tagcloud .serach input.search {
        max-width: 16.5rem;
    }

}

@media only screen and (min-width: 576px) {

    #productsList .tagcloud .serach {
        position: relative;
        top: -0.5rem;
        text-align: center;
    }

    #productsList .tagcloud .serach input.search {
        max-width: 24.0rem;
        margin: 0 auto 2.5rem;
    }

}

@media only screen and (min-width: 768px) {

    #productsList .tagcloud .inner {
        padding: 3.0rem 4.0rem;
    }

}

@media only screen and (min-width: 992px) {

    #productsList .tagcloud .serach {
        left: 2.0rem;
    }

}

/*　詳細ページ
----------------------------------------------------------- */

/* Slick.js */
#slider .slick-vertical .slick-slide {
    border: none;
}

/* スライダー部 */
#slider .slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin: 0;
    padding: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* 画像部 */
#slider .slide {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider .slide img {
    border-radius: 1.0rem;
}

#slider .slide-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4.0rem;
    height: 4.0rem;
    cursor: pointer;
    opacity: 0.7;
    z-index: 100;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

#slider .prev-arrow {
    left: -1.0rem;
}

#slider .next-arrow {
    right: -1.0rem;
}

#slider .slide-arrow:hover {
    opacity: 1.0;
}

/* 画像の高さを固定する場合は生かす
#slider .slide .item {
    position: relative;
    height: 100%;
}

#slider .slide .item a {
    display: block;
}

#slider .slide .item::before {
    display: block;
    padding-top: 39%;
    content: "";
}

#slider .slide .item .box {
    position: relative;
    overflow: hidden;
}

#slider .slide .item img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
}

#slider .slide > .slick-list,
#slider .slide > .slick-list > .slick-track,
#slider .slide > .slick-list > .slick-track > .slick-slide > div {
    position: relative;
    height: 100%;
}
*/

/* サムネイル部 */
#slider .thumbnail {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0.5rem 0;
    line-height: 0;
}

#slider .thumbnail .item {
    cursor: pointer;
}

#slider .thumbnail .item:nth-of-type(n+2) {
    margin-left: 1.0vw;
}

#slider .thumbnail .item .box {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0.3rem solid rgba(0, 155, 94, 0.25);
    border-radius: 1.0rem;
    overflow: hidden;
}

#slider .thumbnail .item .box::before {
    display: block;
    padding-top: 50.0%;
    content: "";
}

#slider .thumbnail .item .box::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1.00);
    content: "";
    opacity: 0.5;
}

#slider .thumbnail .slick-current .box {
    border: 0.3rem solid rgba(0, 164, 105, 1.00);
}

#slider .thumbnail .slick-current .box::after {
    opacity: 0;
}

#slider .thumbnail .item .box img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
}

#slider .thumbnail .slick-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    cursor: pointer;
    opacity: 0.7;
    z-index: 100;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

#slider .thumbnail .prev-arrow {
    left: 0;
}

#slider .thumbnail .next-arrow {
    right: 0.5rem;
}

#slider .thumb-arrow:hover {
    opacity: 1.0;
}

@media only screen and (min-width: 576px) {

    #slider .prev-arrow {
        left: -2.0rem;
    }

    #slider .next-arrow {
        right: -2.0rem;
    }

    #slider .thumbnail .prev-arrow {
        left: 1.0rem;
    }

    #slider .thumbnail .next-arrow {
        right: 1.5rem;
    }

}

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

    #slider .thumbnail .item .box::before {
        padding-top: 50%;
    }

}

@media only screen and (min-width: 768px) {

    #slider .slick-arrow {
        width: 4.0rem;
        height: 4.0rem;
    }

    #slider .prev-arrow {
        left: -2.0rem;
    }

    #slider .next-arrow {
        right: -2.0rem;
    }

    #slider .thumbnail {
        width: 12.0rem;
        margin: 0;
    }

    #slider .thumbnail .item:nth-of-type(n+2) {
        margin-left: 0;
        padding-top: 1.0rem;
    }

    #slider .thumbnail .thumb-arrow {
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        width: 2.4rem;
        height: 2.4rem;
    }

    #slider .thumbnail .thumb-prev-arrow {
        top: -1.0rem;
    }

    #slider .thumbnail .thumb-next-arrow {
        top: inherit;
        bottom: 0;
    }

}

@media only screen and (min-width: 992px) {

    #slider .slick-arrow {
        width: 6.0rem;
        height: 6.0rem;
    }

    #slider .prev-arrow {
        left: -3.0rem;
    }

    #slider .next-arrow {
        right: -3.0rem;
    }

    #slider .thumbnail {
        width: 16.0rem;
        margin-left: 1.0rem;
    }

    #slider .thumbnail .thumb-arrow {
        width: 3.4rem;
        height: 3.4rem;
    }

    #slider .thumbnail .thumb-prev-arrow {
        top: -1.5rem;
    }

    #slider .thumbnail .thumb-next-arrow {
        bottom: -0.5rem;
    }

}

/*　コンテンツ
----------------------------------------------------------- */
section#products {
    margin-top: 2.0rem;
    margin-bottom: 5.0rem;
    padding-top: 0;
}

#products #mainContents .inner {
    padding: 1.5rem 0.5rem;
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
}

#products #mainContents .inner:nth-of-type(n+2) {
    margin-top: 3.0rem;
}

/*　カラーミー読み込み部分
----------------------------------------------------------- */

/* 商品画像非表示 */
/*#products .cartjs_box .cartjs_product_img {
    display: none !important;
}*/

#products .cartjs_box {
    letter-spacing: 0.0625rem;
    line-height: 3.2rem;
}

/* 商品名 */
#products .inner h2 {
    margin-bottom: 4.0rem;
    color: rgba(0, 164, 105, 1.00);
    font-size: 2.5rem !important; /* 221116 ※大昭和紙工 西嶋修正 3.0rem → 2.5rem*/
    font-weight: 500 !important;
    margin-left: 1.3rem; /* 221116 ※大昭和紙工 西嶋追記*/
}

/*#products .cartjs_box .cartjs_product_name {
    background: none !important;
    color: rgba(0, 164, 105, 1.00);
    font-size: 3.0rem !important;
    font-weight: 500 !important;
}*/

/* 本文中の画像 */
#products img[src^="https://img"] {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* 価格・購入数 */
#products .cartjs_box .cartjs_product_table {
    margin-top: 5.0rem;
}

#products .cartjs_box .cartjs_product_table table,
#products .cartjs_box .cartjs_product_table th,
#products .cartjs_box .cartjs_product_table td {
    border: none !important;
}

#products .cartjs_box .cartjs_product_table table {
    margin-bottom: 5rem !important; /*210907_カート周りの表示調整_大昭和西嶋追記*/
}

#products .cartjs_box .cartjs_product_table th,
#products .cartjs_box .cartjs_product_table td {
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;
    padding-left: 1.0rem; /*210907_カート周りの表示調整_大昭和西嶋追記*/
}

#products .cartjs_box .cartjs_product_table th {
    width: 14.0rem !important;
    font-size: 1.5rem;
    font-weight: 500;
    white-space: nowrap; /* テキストを横書きに指定 210806_大昭和西嶋追記 */
}

#products .cartjs_product_explain {
    border-bottom: 2px dotted rgba(204, 204, 204, 1.00); /*210907_カート周りの表示調整_大昭和西嶋追記*/
    padding-bottom: 5rem; /*210907_カート周りの表示調整_大昭和西嶋追記*/
}

#products .cartjs_box .cartjs_sales_price td {
    width: 26.0rem !important;
    color: rgba(0, 155, 94, 1.00) !important;
    font-size: 2.0rem;
}

#products .cartjs_box .cartjs_product_num input {
    width: 8.0rem !important;
    border: 0.1rem solid rgba(112, 112, 112, 1.00);
    border-radius: 0.4rem;
    background-color: rgba(246, 246, 246, 1.00);
    text-align: center;
}

/* 割引価格表示_大昭和西嶋追記_221125 */
.postid-8148 #products .cartjs_box .cartjs_sales_price td {
    text-decoration: line-through !important;
}

.postid-8148 #products .cartjs_box .cartjs_sales_price:after {
    content: "1000円（税込）";
}


/* カートに入れるボタン */
#products .cartjs_box .cartjs_cart_in input {
    width: 22.0rem;
    height: 5.4rem;
    border: none;
    border-radius: 0.4rem;
    background: rgba(0, 155, 94, 1.00) url("../img/icon_cart_w.png") left 4rem center / 2.2rem no-repeat; /*210907_デザイン調整_大昭和西嶋修正*/
    color: rgba(255, 255, 255, 1.00);
    font-size: 1.45rem;
    padding-left: 3.5rem; /*210907_デザイン調整_大昭和西嶋追記*/
    font-weight: 400;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#products .cartjs_box .cartjs_cart_in input:hover {
    opacity: 0.7;
}

@media only screen and (min-width: 576px) {

    #products #mainContents .inner {
        padding: 2.5rem 1.5rem;
    }

}

@media only screen and (min-width: 768px) {

    #products .inner h2 {
        margin-left: 2rem; /* 221116 ※大昭和紙工 西嶋追記*/
    }

    #products #mainContents .inner {
        padding: 4.5rem 3.5rem;
    }

    #products strong.cartjs_product_name {
        font-size: 4.0rem !important;
    }

}

@media only screen and (min-width: 992px) {

    section#products {
        margin-bottom: 12.5rem;
    }

    #products .cartjs_box .cartjs_product_name {
        font-size: 3.8rem !important;
    }

}

@media only screen and (min-width: 1200px) {

    #products #mainContents .inner {
        padding: 5.5rem 4.5rem;
    }

    #products strong.cartjs_product_name {
        font-size: 4.0rem !important;
    }

}


/*　#product_review
----------------------------------------------------------- */
#product_review {
    margin-top: 2.0rem;
    padding: 4.0rem 2.0rem;
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
    font-size: 1.6rem;
}

#product_review h3 {
    margin-bottom: 2.0rem;
    font-size: 2.0rem;
    font-weight: 700;
}

#product_review .row {
    padding-bottom: 1.0rem;
    border-bottom: 0.1rem solid rgba(163, 163, 163, 0.50);
}

#product_review .row:nth-of-type(n+2) {
    margin-top: 2.0rem;
}

#product_review .row:last-of-type {
    border-bottom: none;
}

#product_review .name {
    font-weight: 700;
}

#product_review .date {
    color: rgba(163, 163, 163, 1.00);
}

#product_review .stars span::before {
    color: rgba(163, 163, 163, 0.30);
    content: "★";
}

#product_review .star_1 span:nth-of-type(1)::before {
    color: rgba(0, 155, 94, 1.00);
}

#product_review .star_2 span:nth-of-type(-n+2)::before {
    color: rgba(0, 155, 94, 1.00);
}

#product_review .star_3 span:nth-of-type(-n+3)::before {
    color: rgba(0, 155, 94, 1.00);
}

#product_review .star_4 span:nth-of-type(-n+4)::before {
    color: rgba(0, 155, 94, 1.00);
}

#product_review .star_5 span:nth-of-type(-n+5)::before {
    color: rgba(0, 155, 94, 1.00);
}

@media only screen and (min-width: 576px) {

    #product_review .date {
        text-align: right;
    }

}

@media only screen and (min-width: 768px) {

    #product_review {
        padding: 6.0rem 4.0rem;
    }

    #product_review h3 {
        margin-bottom: 4.0rem;
        font-size: 2.2rem;
    }
}

@media only screen and (min-width: 1200px) {

    #product_review {
        padding: 6.0rem 5.0rem;
    }

}

/*　#fund
----------------------------------------------------------- */
#fund {
    margin-top: 2.0rem;
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
    font-size: 1.6rem;
    font-weight: 500;
}

#fund div[class^="col-"]:nth-of-type(2) {
    padding: 2.0rem 3.0rem;
}

#fund img {
    width: 100%;
    border-radius: 1.0rem 1.0rem 0 0;
}

#fund p {
    margin: 0 1.0rem;
    text-align: justify;
}

#fund h5 {
    margin-top: 2.0rem;
    text-align: right;
}

#fund h5 a {
    display: block;
    padding-right: 1.5rem;
    background: url("../img/arrow_more_g.png") right center / 1.0rem no-repeat;
    color: rgba(0, 164, 105, 1.00);
    font-size: 1.6rem;
}

@media only screen and (min-width: 768px) {

    #fund img {
        border-radius: 1.0rem 0 0 1.0rem;
    }

    #fund div[class^="col-"]:nth-of-type(2) {
        padding: 0.75rem 3.0rem 0.75rem 0;
    }

    #fund p {
        margin: 0;
    }

    #fund h5 {
        margin-top: 1.0rem;
    }

}

@media only screen and (min-width: 992px) {

    #fund img {
        max-width: 23.4rem;
    }

    #fund div[class^="col-"]:nth-of-type(2) {
        padding: 3.0rem 6.0rem 1.0rem 0;
    }

    #fund h5 {
        margin-top: 2.0rem;
    }

}

@media only screen and (min-width: 1200px) {

    #fund h5 {
        margin-top: 3.5rem;
    }

}

/*　#review
----------------------------------------------------------- */

#review {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 30.0rem;
    margin-top: 3.0rem;
    border: 0.1rem solid rgba(56, 112, 178, 1.00);
}

/* ========================================================

　#sidebar

=========================================================== */

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

    #sidebar {
        display: none;
    }

}

/* 見出し */
#sidebar h2 {
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 1.0rem;
    background-color: rgba(0, 155, 94, 1.00);
    color: rgba(255, 255, 255, 1.00);
    font-size: 2.0rem;
    font-weight: 500;
    text-align: center;
    line-height: 5.0rem;
}

#sidebar .inner {
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 1.00);
}

#sidebar .inner:nth-of-type(n+2) {
    margin-top: 1.5rem;
}

/* サムネイル部 */
#sidebar figure {
    margin: 0;
    border-bottom: 0.4rem solid rgba(0, 155, 94, 1.00);
    border-radius: 1.0rem 1.0rem 0 0;
    overflow: hidden;
}

#sidebar figure a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    height: 9.0rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

/* データ部 */
#sidebar .box {
    padding: 1.0rem;
}

#sidebar .post-categories {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar .post-categories a {
    display: inline-block;
    margin-right: 1.0rem;
    padding: 0;
    color: rgba(0, 155, 94, 1.00);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.8rem;
}

#sidebar .date {
    color: rgba(0, 155, 94, 1.00);
    font-size: 1.5rem;
    font-weight: 300;
}

/* タイトル */
#sidebar h3 {
    padding: 0.5rem 0 1.0rem;
}

#sidebar h3 a {
    color: rgba(51, 51, 51, 1.00);
    font-size: 1.4rem;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 2.0rem;
    letter-spacing: 0;
}

/* 価格 */
#sidebar .price {
    font-size: 1.6rem;
    font-weight: 500;
    text-align: right;
}

#sidebar .price span {
    font-size: 70.0%;
}

#sidebar .price.soldout {
    color: rgba(255, 0, 0, 1.00);
    font-weight: 700;
}

/* タグ */
#sidebar .tag ul {
    padding: 0;
    list-style: none;
}

#sidebar .tag li {
    display: inline-block;
    height: 1.8rem;
    margin-right: 0.5rem;
}

#sidebar .tag a {
    padding: 0 1.0rem;
    border: 0.1rem solid rgba(0, 155, 94, 1.00);
    border-radius: 0.9rem;
    background-color: rgba(246, 246, 246, 1.00);
    font-size: 1.3rem;
    font-weight: 400;
}

@media only screen and (min-width: 992px) {

    #sidebar figure a {
        height: 12.0rem;
    }


    #sidebar h3 a {
        font-size: 1.5rem;
    }

    #sidebar .price {
        font-size: 1.7rem;
    }

}

@media only screen and (min-width: 1200px) {

    #sidebar figure a {
        height: 14.0rem;
    }

    #sidebar .post-categories a {
        position: relative;
        top: 0;
    }

}


/* ========================================================

　pagenation

=========================================================== */

.postNav {
    margin-top: 5.0rem;
}

.pagination .nav-links {
    margin: 0 auto;
    text-align: center;
    line-height: 5.0rem;
}

.pagination .nav-links a.page-numbers {
    display: inline-block;
    width: 5.0rem;
    height: 5.0rem;
    border-radius: 50%;
    color: rgba(51, 51, 51, 1.00);
    font-size: 2.4rem;
    font-weight: 500;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.pagination .nav-links a.page-numbers:hover {
    background-color: rgba(45, 155, 94, 0.25);
    color: rgba(0, 164, 105, 1.00);
}

.pagination .nav-links .current {
    display: inline-block;
    width: 5.0rem;
    height: 5.0rem;
    border-radius: 50%;
    background-color: rgba(0, 164, 105, 1.00);
    color: rgba(255, 255, 255, 1.0);
    font-size: 2.4rem;
    font-weight: 500;
}

.pagination .nav-links .dots {
    display: inline-block;
    line-height: 3.0rem;
}

.pagination .nav-links a.prev.page-numbers,
.pagination .nav-links a.next.page-numbers {
    width: auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: rgba(0, 0, 0, 1.0);
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.pagination .nav-links a.prev.page-numbers:hover,
.pagination .nav-links a.next.page-numbers:hover {
    color: rgba(0, 164, 105, 1.00);

}

.pagination h2 {
    display: none;
}

@media only screen and (min-width: 992px) {

    .postNav {
        margin-top: 7.0rem;
    }

}

@media only screen and (min-width: 1200px) {

    .postNav {
        margin-top: 9.0rem;
    }

}

@media only screen and (min-width: 1920px) {

    .postNav {
        margin-top: 12.0rem;
    }

}


/* ========================================================

　#relation

=========================================================== */

#relation {
    padding-bottom: 10.0rem;
    background: url("../img/bg_body_deco.png") right 0.5rem bottom / 7.0rem no-repeat;
}

/* 余白とボーダーライン */
#re-products,
#re-special,
.search #re-column,
.tagcloud #re-column {
    padding-top: 5.0rem;
    border-top: 0.1rem solid rgba(204, 204, 204, 1.00);
}

.products #re-special,
.specials #re-products,
.columns #re-products,
.news #re-special,
.search #re-special,
.tagcloud #re-special {
    margin-top: 5.0rem;
}

#re-column {
    margin-top: 5.0rem;
}

/* 見出し部 */
#relation .heading {
    margin-bottom: 1.0rem;
}

#relation .heading h4 {
    font-size: 2.4rem;
    font-weight: 500;
}

#relation .heading h4::before {
    display: inline-block;
    width: 2.5rem;
    height: 5.0rem;
    margin-right: 1.0rem;
    background-image: url("../img/bg_heading01.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: bottom;
    content: '';
}

/* 内部ブロック */
#re-special .inner {
    background: none;
}

#re-special .box {
    padding: 1.0rem 0;
}

/* サムネイル部 */
#re-special figure,
#re-column figure {
    border-bottom: none;
}

#re-products figure a,
#re-column figure a {
    height: 50.0vw;
}

#re-special figure {
    border-radius: 1.0rem;
}

/* 記事タイトル部 */
#relation .box h3 a {
    font-size: 1.5rem;
    line-height: 2.0rem;
}

#relation .box .price {
    font-size: 1.7rem;
}

#relation .box .price.soldout {
    color: rgba(255, 0, 0, 1.00);
    font-weight: 700;
}

/* 検索結果とタグ検索結果　調整 */
.search #relationSub,
.tagcloud #relationSub,
.search #columnSub,
.tagcloud #columnSub {
    padding-top: 0;
}

/* more */
#relation .more {
    display: inherit;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 0;
}

#relation .more a {
    border: 0.2rem solid rgba(45, 155, 94, 0);
    background: rgba(0, 155, 94, 1.00) url("../img/arrow_more_w.png") right 2.5rem center / 1.1rem no-repeat;
    color: rgba(255, 255, 255, 1.00);
    text-align: center;
}

#relation .more a:hover {
    border: 0.2rem solid rgba(0, 164, 105, 1.00);
    background: rgba(255, 255, 255, 1.00) url("../img/arrow_more_g.png") right 1.5rem center / 1.1rem no-repeat;
    color: rgba(0, 142, 63, 1.00);
}

@media only screen and (min-width: 576px) {

    #relation {
        background: url("../img/bg_body_deco.png") right 1.5rem bottom / 7.0rem no-repeat;
    }

    #re-products figure a,
    #re-column figure a {
        height: 24.0rem;
    }

}

@media only screen and (min-width: 768px) {

    #relation {
        padding-bottom: 15.0rem;
        background: url("../img/bg_body_deco.png") right 1.5rem bottom / 10.0rem no-repeat;
    }

    #relation .heading h4 {
        font-size: 3.0rem;
    }

    #relation .heading h4::before {
        width: 3.0rem;
        height: 6.0rem;
    }

    .search #re-column,
    .tagcloud #re-column {
        margin-top: 8.0rem;
    }

    .products #re-products,
    .specials #re-special,
    .columns #re-special,
    .news #re-products {
        margin-top: 5.0rem;
    }

    .products #re-special,
    .specials #re-products,
    .columns #re-products,
    .news #re-special,
    .search #re-special,
    .tagcloud #re-special {
        margin-top: 10.0rem;
    }

    #re-products figure a,
    #re-column figure a {
        height: 19.0rem;
    }

    #re-special .box h3,
    #re-column .box h3 {
        margin-bottom: 0;
    }

    #relation .more {
        padding-top: 3.0rem;
    }

}

@media only screen and (min-width: 992px) {

    #relation {
        padding-bottom: 20.0rem;
        background: url("../img/bg_body_deco.png") right 3.0rem bottom / 15.0rem no-repeat;
    }

    #re-products figure a,
    #re-column figure a {
        height: 16.0rem;
    }

}

@media only screen and (min-width: 1200px) {

    #re-products .loop div[class^="col-"]:not(.more):nth-of-type(-n+4),
    #re-column .loop div[class^="col-"]:not(.more):nth-of-type(-n+4) {
        margin-top: 0;
    }

    #re-products figure a,
    #re-column figure a {
        height: 14.0rem;
    }

}

@media only screen and (min-width: 1920px) {

    #relation {
        background: url("../img/bg_body_deco.png") right 15.0% bottom / 15.0rem no-repeat;
    }

}



/* Campaign Style Layout ※大昭和紙工 西嶋追記_220628*/
#reading .text .campaign-container {
    padding: 3.0rem 2.0rem !important;
    background-color: rgba(250, 238, 0, 1.0);
    border-radius: 0.3rem;
}

#reading .text .campaign-container02 {
    padding: 3.0rem 2.0rem !important;
    background-color: rgba(240, 255, 230, 1.0);
    border-radius: 0.3rem;
}

#reading .dl-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#reading .dl-conts,
#reading .prize-conts,
#reading .staff-mission-container {
    width: 100%;
    text-align: center;
    margin-bottom: 4rem;
}

#reading .dl-conts img {
    border: 2px solid rgba(252, 251, 246, 1.0);
}

#reading .prize-conts img {
    border: 2px solid rgba(0, 155, 94, 1.0);
}

#reading .application-container,
#reading .staff-mission-conatiner {
    margin-bottom: 5.0rem;
}

#reading .application-conts {
    margin: 2.0rem 0;
}

#reading .dl-conts p {
    margin: 0 0 1.6rem;
}

#reading .dl-conts p,
#reading .prize-conts p,
#reading .apprication-conts p {
    line-height: 2.0rem;
}

#reading a.btn,
#column a.btn,
#special a.btn {
    display: inline-block;
    background: rgba(0, 155, 94, 1.0);
    font-size: 1.6rem;
    color: #fff;
    padding: 16px 40px;
    text-decoration: none;
    border: none;
    border-radius: 30px;
}


#reading .application-conts .btn {
    width: 20rem;
    border-radius: 1rem;
    background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; /*グラデーション①*/
}

#reading .application-conts .btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: -o-linear-gradient(75deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
    background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

#reading .application-conts a.btn:hover {
    background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}

#reading .staff-mission-conatiner p {
    margin-bottom: 2rem;
}

#reading .staff-mission-conatiner a.btn {
    display: block;
    width: 25rem;
    margin: 0 auto;
}

#reading .ehon-kamikame {
    position: relative;
    padding-top: 40%;
    text-align: center;
}

#reading .ehon-kamikame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#reading .application-container a.btn {
    display: block;
    width: 80%;
    max-width: 25rem;
    margin: 3rem auto;
    padding: 1rem 2.5rem;
}

#reading .btn--orange,
a.btn--orange {
    display: block;
    width: 25rem;
    color: #ffffff;
    background-color: rgba(235, 135, 25, 1.0) !important;
    text-align: center;
    border-radius: .5rem !important;
    padding: 2.5rem 0 !important;
}

#reading .btn--orange:hover,
a.btn--orange:hover {
    color: #fff;
    background: rgba(235, 135, 25, 0.6);
}

#reading .application-container {
    padding: 1rem 2rem;
    border: 2px solid rgba(0, 155, 94, 1.0);
    border-radius: 0.5rem;
    background-color: rgba(255, 254, 245, 1.0);
}

/* ここまで　Campaign Style Layout */



/* ---- End of file --------------------------------------- */