/*小カテ用ナビ*/

a.tag {
    display: inline-flex;
    height: 24px;
    line-height: 24px;
    padding: 3px 10px;
    margin-bottom: 10px;
    color: #2860d5;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #2860d5;
    font-size: 1.4em;
    /* Firefox v1.0+ */
    -moz-border-radius: 5px;
    /* Safari v3.0+ and by Chrome v0.2+ */
    -webkit-border-radius: 5px;
    /* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
    border-radius: 5px;
    text-align: center;
}

a.tag img {
    margin-right: 10px;
}

a.tag:visited {
    color: #2860d5;
    text-decoration: none;
}

a.tag:hover {
    color: #fff;
    text-decoration: none;
    background-color: #2860d5;
    cursor: pointer;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    -o-transition: .4s;
    -ms-transition: .4s;
    transition: .4s;
}

.scategory_container p, .scategory_container table, .scategory_container ul, .scategory_container ol {
    font-size: 116%;
}

h2 {
    color: #285AD5;
    font-size: 1.8em;
    padding-bottom: 0px;
    border-bottom: #285AD5 solid 1px;
    margin: 2em 0 1em;
}

h3 {
    color: #2860D5;
    background-color: #DEE9FF;
    font-size: 1.8em;
    padding: 0.3em 0.5em;
    margin: 3em 0 1em;
}

h4 {
    color: #2860D5;
    font-size: 1.5em;
    margin: 2em 0 0.5em;
}

.productimg_container {
    width: 100%;
}

.productimg_container div {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items:baseline;
    margin: 10px 0 20px;
}

h3+.productimg_container div {
    margin: 30px 0 10px;
}

.productimg_container div>a {
    width: 23%;
    margin: 0 1% 2%;
    position: relative;
}

.productimg_container div>img {
    width: 23%;
    margin: 0 1% 2%;
    position: relative;
}

.productimg_container div>a::before {
    display: inline-block;
    position: absolute;
    content: "拡大＋";
    bottom: 0em;
    right: 0;
    background: #285AD5;
    color: #fff;
    padding: 2px 6px;
}

.productimg_container div>a>img {
    width: 100%;
}

@media screen and (max-width: 600px) {
    .productimg_container {
        width: 100%;
        overflow: hidden;
    }
    .productimg_container div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        margin: 0 0 20px;
    }
    .productimg_container div img {
        width: 47%;
        margin-right: 0;
    }
    .productimg_container div a {
        width: 47%;
        margin-right: 0;
        margin-bottom: 10px;

    }
    .productimg_container div a img {
        width: 100%;
        margin-right: 0px;
    }
}

/*キャプションあり画像　ここから*/

.productimg_container_cap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 10px 0 20px;
}

.productimg_container_cap div {
    width: 23%;
    margin: 0 1% 3%;
}

.productimg_container_cap div img {
    width: 100%;
    margin: 0 0 0;
}

a.caption {
    width: 100%;
    position: relative;
}

a.caption::before {
    display: inline-block;
    position: absolute;
    content: "拡大＋";
    bottom: 0;
    right: 0;
    background: #285AD5;
    color: #fff;
    padding: 2px 6px;
}

.productimg_container_cap div p {
    font-size: 80%;
    margin: 8px 0 0;
}

@media screen and (max-width: 600px) {
    .productimg_container_cap {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: stretch;
        margin: 10px 0 20px;
    }
    .productimg_container_cap div {
        width: 47%;
        margin: 0 1% 6%;
    }
    .productimg_container_cap div img {
        width: 100%;
        margin: 0 0 0;
    }
    a.caption {
        width: 100%;
        position: relative;
    }
    a.caption::before {
        display: inline-block;
        position: absolute;
        content: "拡大＋";
        bottom: 0;
        right: 0;
        background: #285AD5;
        color: #fff;
        padding: 2px 6px;
    }
    .productimg_container_cap div p {
        font-size: 80%;
        margin: 8px 0 0;
    }
}
/*キャプションあり画像 ここまで*/

.main_text {
    line-height: 1.8em;
    margin-bottom: 20px;
    text-align: justify;
}

.main_text img {
    max-width: 100%;
    margin: 1em 0;
}

@media screen and (max-width: 600px) {
    .main_text img {
        width: 100%;
    }
}

.main_text>strong {
    font-weight:bold; 
    background:linear-gradient(transparent 0%, #ffef85 0%);
    display: inline;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: 1.8s all ease;
}

.main_text>strong.on {
    background-size: 100% 100%;
}

.main_text>a {
    position: relative;
}

.main_text>a.imgHover::before {
    display: inline-block;
    position: absolute;
    content: "拡大＋";
    bottom: 0em;
    right: 0;
    background: #285AD5;
    color: #fff;
    padding: 2px 6px;
}

.scategory_container ul {
    list-style: disc;
    background-color: #f5f5f5;
    padding: 0.5em 1em 0.5em 0;
    margin: 1em 0 1em;
}

.scategory_container ul li {
    margin:0.8em 0 0.8em 2em;
    text-align: justify;
}

.scategory_container ul li strong {
    color: #333;
    font-weight: bold;
}

.scategory_container div>img {
    max-width: 100%;
    margin: 1em 0;
}

.scategory_container>img, .scategory_container>a>img {
    max-width: 100%;
    margin: 1em 0;
}

/*.scategory_container ul li::before{
    content: '';
    display: inline-block;
    margin-right: .5em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #285AD5;
}*/

.ex_text {
    display: block;
    background-color: #f5f5f5;
    padding: 15px;
    margin: 15px 0 15px;
}

.scategory_container>div>span.ex_text {
    font-size: 116%;
}

.ex_text strong {
    color: #333;
    font-weight: bold;
}

table.pdetail {
    width: 100%;
    margin: 1em 0 2em;
}
table.pdetail td{
    padding:0.5em 0 0.5em 1em;
}

table.pdetail td>table {
    margin-top: 0em;
}

table.pdetail td>strong {
    font-weight: bold;
    background: linear-gradient(transparent 60%, #fff7b7 60%);
}

table.pdetail td a.imgHover {
    max-width: 100%;
    margin: 0px 0;
    position: relative;
}

table.pdetail td a.imgHover::before {
    display: inline-block;
    position: absolute;
    content: "拡大＋";
    bottom: 0;
    right: 0;
    background: #285AD5;
    color: #fff;
    padding: 2px 6px;
}

table.pdetail td img {
    max-width: 100%;
    margin: 10px 0 0;
}

/*①数字*/

span.circle {
    display: inline-block;
    background: #285FD5;
    font-size: 1.2em;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    margin-right: 5px;
}

/*アプリアイコン*/

.pdf::before {
    font-weight: bold;
    display: inline-block;
    content: "P";
    background: #db2618;
    border: 2px solid #db2618;
    color: #fff;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.ai::before {
    font-weight: bold;
    display: inline-block;
    content: "A";
    background: #4a130f;
    border: 2px solid #ff6f00;
    color: #ff6f00;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.psd::before {
    font-weight: bold;
    display: inline-block;
    content: "P";
    background: #001e36;
    border: 2px solid #31a8ff;
    color: #31a8ff;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.indesign::before {
    font-weight: bold;
    display: inline-block;
    content: "I";
    background: #4a130f;
    border: 2px solid #ff2a9f;
    color: #ff2a9f;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.word::before {
    font-weight: bold;
    display: inline-block;
    content: "W";
    background: #0064b1;
    border: 2px solid #0064b1;
    color: #fff;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.powerpoint::before {
    font-weight: bold;
    display: inline-block;
    content: "P";
    background: #ff6f00;
    border: 2px solid #ff6f00;
    color: #fff;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.excel::before {
    font-weight: bold;
    display: inline-block;
    content: "E";
    background: #008f45;
    border: 2px solid #008f45;
    color: #fff;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.photo::before {
    font-weight: bold;
    display: inline-block;
    content: "画";
    background: #ffcc00;
    border: 2px solid #ffcc00;
    color: #555;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.canva::before {
    font-weight: bold;
    display: inline-block;
    content: "C";
    background: #00c4cc;
    border: 2px solid #00c4cc;
    color: #fff;
    text-align: center;
    line-height: 1.2em;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

/*購入ページへのリンクボタン*/

.cv_btn {
    text-align: center;
    font-size: 150%;
    margin-bottom: 4em;
}

.cv_btn a:link, .cv_btn a:visited {
    min-width: 50%;
    display: inline-block;
    padding: 0.5em 1em;
    color: #FFF;
    background-color: #ff6c6c;
    border-radius: 5px;
    text-decoration: none;
}

.cv_btn a:hover, .cv_btn a:active {
    color: #FFF;
    opacity: 0.8;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .cv_btn {
        text-align: center;
        font-size: 125%;
    }
    .cv_btn a:link, .cv_btn a:visited {
        width: 80%;
        display: inline-block;
        padding: 0.5em 0.5em;
        color: #FFF;
        background-color: #ff6c6c;
        border-radius: 5px;
        text-decoration: none;
    }
}

/*レビュー*/

.review__link {
    margin-top: 20px;
}

.review__link a:link, .review__link a:visited {
    font-size: 116%;
    color: #285AD5;
    text-decoration: underline;
}

.review__link a:hover {
    text-decoration: none;
}

table.review {
    width: 100%;
    border: solid 1px #e1e1e1;
    text-align: justify;
    text-align-last: left;
    margin-bottom: 10px;
    font-size: 116%;
}

table.review th {
    padding: 10px;
    background-color: #f3f3f3;
}

table.review th span {
    font-size: 1.2em;
    font-weight: 600;
}

table.review td {
    padding: 10px;
    line-height: 1.8em;
}

h2#review {
    font-size: 146.5%;
    color: #fff;
    width: 686px;
    padding: 6px 12px;
    margin-bottom: 24px;
    background: #285FD5 url(../img/common/sideNavCatTitle_bg.png) repeat-x left top;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

h2#review+div+a {
    font-size: 116%;
}


.wall.caution .cautionTitle {
    font-size: 150%;
    font-weight: bold;
    color: #ff6c6c;
    margin-bottom: 0.5em;
}

.buyList p span {
    font-size: 16px;
    width: 170px;
    height: 130px;
    line-height: 1.4em;
    font-weight: bold;
}

.green-power-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: #E4F8DD;
    align-items: flex-start;
    flex-wrap: wrap;
    /* 狭い時に折り返し */
    max-width: 710px;
    margin: 35px auto 0;
    gap: 20px;
    box-sizing: border-box;
}

.green-power-text {
    flex: 1 1 70%;
    min-width: 300px;
}

.green-power-text h3 {
    font-size: 1.5em;
    color: #007E41;
    margin: 0 0 10px;
    font-weight: bold;
    background: none;
    padding: 0;
}

.green-power-text p {
    text-align: justify;
    margin: 0;
}

.green-power-text .note {
    font-size: 0.8em;
}

.green-power-image {
    flex: 1 1 20%;
    min-width: 120px;
}

.green-power-image img {
    width: 100%;
    height: auto;
}

/* ▼ スマホ対応（画面幅 600px以下） */
@media screen and (max-width: 600px) {
    .green-power-box {
        flex-direction: column;
        align-items: center;
        /* 中央揃えに変更 */
        gap: 10px;
    }

    .green-power-text,
    .green-power-image {
        width: 100%;
    }

    .green-power-text h3 {
        font-size: 1.2em;
    }

    .green-power-text p {
        font-size: 0.95em;
    }

    /* ▼ 追加：スマホ時の画像のサイズ調整 */
    .green-power-image img {
        width: 50%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}