@charset "Shift_JIS";

html {
    font-size: 62.5%;
}

body {
    font-family: 'Noto Sans JP', 'Yu Gothic black', sans-serif, 'メイリオ';
    font-weight: 500;
    color: #333;
}

/***************************
全体
***************************/
.media_base {

    & .pc_none {
        display: none;
    }

    & img {
        width: 100%;
    }

    & .header {
        & h1 {
            font-size: 3rem;
            margin-bottom: 2rem;
        }
    }

    /***************************
導入文
***************************/
    & .int_text {
        font-size: 1.6rem;
        margin-top: 2rem;
        line-height: 33px;

        & span {
            background: linear-gradient(transparent 50%, #f7e874 50%);
            font-size: 1em;
            font-weight: 500;
        }
    }

    /***************************
目次...自動付与
***************************/
    & #agenda {
        margin-block: 4rem;

        & p {
            font-size: 1.8rem;
            background-color: #333;
            padding-block: 1.4rem;
            padding-left: 1rem;
            color: #fff;
        }

        & ol {
            counter-reset: item;
            list-style-type: none;
            padding: 1.4rem;
            background-color: #f5f5f5;

            & li {
                padding-block: 1.6rem;
                padding-left: 1rem;
            }


            & a {
                font-size: 1.5rem;
                text-decoration: underline;
                color: #2662c1;
            }
        }

        & li:before {
            counter-increment: item;
            content: counters(item, "-")". ";
        }
    }

    /***************************
関連記事
***************************/
    & .article_more {
        display: grid;
        grid-template-columns: 0.5fr 1fr;
        padding: 1.8rem;
        margin-block: 3rem;
        border: 1px solid #333;
        position: relative;
        transition-duration: 0.3s;

        & span {
            position: absolute;
            top: -10px;
            left: 5%;
            background-color: #fff;
            padding-inline: 1rem;
        }

        & .article_inner {
            width: 80%
        }

        & .article_caption {
            a {
                display: block;
                font-size: 1.4rem;
                margin-bottom: 1rem;
            }

            & a::before {
                content: "";
                position: absolute;
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
            }

            & p {
                font-size: 1.3rem;
                color: #5a5959;
                line-height: 2.2rem;
            }
        }

        & .buy_btn {
            position: absolute;
            bottom: 8%;
            right: 3%;
            z-index: -10;

            & p {
                background-color: #333;
                padding: 0.8rem 2.2rem;
                border-radius: 50px;
                color: #fff;
                font-size: 1.4rem;
            }
        }
    }

    & .article_more:hover {
        box-shadow: 0px 8px 21px -3px #dbdbdb;
    }

    & .article_more+.article_more {
        margin-top: 1.8rem;
    }

    & .more_item {
        text-align: right;
        margin-right: 1rem;

        & a {
            margin-top: 1rem;
            color: #2662c1;
            position: relative;
            display: inline-block;
            padding-bottom: 0.5rem;
            padding-right: 2rem;
            border-bottom: 1px solid #2662c1;
        }

        & a::before {
            content: '';
            width: 10px;
            height: 10px;
            border-top: solid 2px #2662c1;
            border-right: solid 2px #2662c1;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
        }
    }

    /***************************
関連イベント
***************************/
    & .event_more {
        display: grid;
        grid-template-columns: 0.8fr 1fr;
        padding: 1.8rem;
        margin-block: 3rem 5rem;
        border: 1px solid #333;
        position: relative;
        transition-duration: 0.3s;

        & span {
            position: absolute;
            top: -10px;
            left: 5%;
            background-color: #fff;
            padding-inline: 1rem;
        }

        & .event_inner {
            width: 80%
        }

        & .event_caption {
            & a {
                display: block;
                font-size: 1.4rem;
                margin-bottom: 1rem;
            }

            & a::before {
                content: "";
                position: absolute;
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
            }

            & p {
                font-size: 1.3rem;
                color: #5a5959;
                line-height: 2.2rem;
            }
        }

        & .buy_btn {
            position: absolute;
            bottom: 8%;
            right: 3%;
            z-index: -10;

            & p {
                background-color: #333;
                padding: 0.8rem 2.2rem;
                border-radius: 50px;
                color: #fff;
                font-size: 1.4rem;
            }
        }
    }

    & .event_more:hover {
        box-shadow: 0px 8px 21px -3px #dbdbdb;
    }

    & .event_more+.event_more {
        margin-top: 1.8rem;
    }

    & .more_item {
        text-align: right;
        margin-right: 1rem;

        & a {
            margin-top: 1rem;
            color: #2662c1;
            position: relative;
            display: inline-block;
            padding-bottom: 0.5rem;
            padding-right: 2rem;
            border-bottom: 1px solid #2662c1;
        }

        & a::before {
            content: '';
            width: 10px;
            height: 10px;
            border-top: solid 2px #2662c1;
            border-right: solid 2px #2662c1;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
        }
    }

    /***************************
各ブロック
***************************/
    & section.agenda:before {
        content: "";
        display: block;
        height: 6rem;
        margin-top: -4rem;
        visibility: hidden;
    }

    & div.agenda:before {
        content: "";
        display: block;
        height: 2.5rem;
        margin-top: -2.5rem;
        visibility: hidden;
    }

    & section:not(.int) {
        margin-bottom: 10%;

        & h2.sub_title {
            font-size: 2.2rem;
            background-color: #f5f5f5;
            border-left: 7px solid #00cbe7;
            padding-block: 1.2rem;
            padding-left: 2.4rem;
        }

        & h3 {
            font-size: 1.8rem;
            margin-block: 1rem;
            background-color: #f5f5f5;
            padding-block: 1rem;
            padding-left: 1rem;
        }

        & h4 {
            font-size: 1.8rem;
        }

        & .inner_block {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 15px;
        }

        & p.inner_text {
            font-size: 1.6rem;
            margin-bottom: 1rem;
            line-height: 3.2rem;
            font-weight: normal;

            span {
                background: linear-gradient(transparent 50%, #f7e874 50%);
                font-size: 1em;
                font-weight: 500;
            }
        }

        & .text_area_inner+.text_area_inner {
            margin-top: 3rem;
        }

        & .text_inner_area {

            & div.col2+div.col2,
            .list_content+.list_content {
                margin-top: 3rem;
            }
        }

        & .midashi_border {
            font-weight: 500;
            border-bottom: 1px solid #333;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }
    }


    /***************************
チェックポイント
***************************/
    & .check_point {
        border: 3px solid #ffe940;
        position: relative;
        background-color: #fffeed;
        padding: 2.2rem 1.8rem 1.8rem 1.8rem;
        margin-top: 6rem;
        font-size: 1.6rem;

        & p {
            position: absolute;
            top: -16px;
            left: 2%;
            background-color: #ffe940;
            border-radius: 15px;
            padding: 0.1rem 2rem;
        }

        & ul {
            display: flex;
            flex-direction: column;
            gap: 15px;

            & li span {
                margin-right: 0.8rem;
            }
        }
    }

    /***************************
よくある質問
***************************/
    & section.faq_area {

        & ul {
            & li {
                background-color: #fafafa;

                & dl {
                    & p {
                        font-size: 1.6rem;
                        font-weight: normal;
                        padding-block: 1.4rem;
                        padding-left: 5rem;
                    }

                    & dt {
                        border-bottom: 1px solid #33333326;
                        position: relative;

                        & p {
                            font-weight: 500;
                            line-height: 3.2rem;
                        }
                    }

                    & dd {
                        position: relative;
                    }

                    & dt:before {
                        content: "Q";
                        position: absolute;
                        top: 50%;
                        left: 1%;
                        transform: translateY(-50%);
                        font-size: 2.4rem;
                        color: #235cce;
                        font-weight: 600;
                    }

                    & dd:before {
                        content: "A";
                        position: absolute;
                        top: 50%;
                        left: 1%;
                        transform: translateY(-50%);
                        font-size: 2.4rem;
                        color: #ce2323;
                        font-weight: 600;
                    }
                }
            }

            & li:not(:last-child) {
                margin-bottom: 2rem;

            }
        }
    }

    /***************************
表
***************************/
    & .table-wrap {
        /*20250801 ASANO [デザイン修正] MOD STA
        overflow-x: scroll;*/
        overflow-x: auto;
        /*20250801 ASANO [デザイン修正] MOD END*/

        /*20250801 ASANO [デザイン修正] ADD STA*/
        margin-bottom: 2rem;
        /*20250801 ASANO [デザイン修正] ADD END*/

        & .table {
            width: 100%;
            border-collapse: collapse;
            white-space: nowrap;

            /*20250801 ASANO [デザイン修正] ADD STA*/
            & .table_row {

                & th {
                    font-weight: 600;
                    background-color: #f9f9f9;
                }
            }

            /*20250801 ASANO [デザイン修正] ADD END*/
        }

        /*20250801 ASANO [不要のため削除] DEL STA
        & .table {
            & .table_title {
                & tr, & td {
                    background-color: #f9f9f9;
                }
            }
        }

        & th {
            background-color: #f9f9f9;
        } 
        20250801 ASANO [不要のため削除] DEL END*/

        & .table th,
        & .table td {
            border: 2px solid #eee;

            /*20250801 ASANO [デザイン修正] MOD STA
            padding: 2.4rem;*/
            padding: 2rem;
            /*20250801 ASANO [デザイン修正] MOD END*/

            text-align: center;

            /*20250801 ASANO [デザイン修正] ADD STA*/
            font-weight: normal;
            font-size: 1.6rem;
            /*20250801 ASANO [デザイン修正] ADD END*/
        }
    }


    /***************************
商品リスト
***************************/

    & section.item_list {
        & .item_area {
            & h3.item_title {
                border-bottom: 6px double #333;
                background-color: transparent;
            }

            & ul {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;

                & li {
                    border: solid 1px #dddddd;

                    & dd {
                        color: #333;
                        margin-block: 1.4rem;
                        text-align: center;
                    }

                    & p {
                        border-radius: 50px;
                        background-color: #333;
                        color: #fff;
                        text-align: center;
                        padding-block: 1rem;
                    }

                    & a {
                        display: block;
                        padding: 1.6rem;
                    }

                    & a:hover {
                        opacity: 0.8;
                    }
                }
            }
        }
    }

    & .item_area+.item_area {
        margin-top: 2rem;
    }
}

/* 20260302 K.MOMMA 【追加】ADD STR */
.media_base img {
    width: 100%;
    height: auto;
    display: block;
}
/* 20260302 K.MOMMA 【追加】ADD END */