@charset "utf-8";
@import url("contact_form_common.css");
/*--京self_publishing.css--*/
/* ##########PC########## */
.content_title_wrapper{
    background-image: url(../shared/content_title_bg/self_publishing.jpg);
}

.page_nav ul li a:hover{
    color: #A14929;
    border-bottom-color: #A14929;
}

.page_nav ul li.current_page_item a{
    border-bottom-color: #A14929;
    background: #A14929;
}

.page_nav ul li a::after{
    background: #A14929;
}

.cost_items_list > ul{
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

    .cost_items_list > ul > li{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        width: calc((100% - 2em) / 2);
        padding: 1.3em 1.5em;
        border: 1px solid rgba(0,0,0,0.2);
        box-shadow: 0.25rem 0.25rem 0 0 rgba(0, 0, 0, 0.1);
    }

    .cost_items_list > ul > li::before{
        content: none;
    }

        .cost_items_list > ul > li > dl{
            display: flex;
            flex-direction: column;
            align-items: center;
        }

            .cost_items_list > ul > li > dl > dt{
                font-weight: 700;
                font-size: 1.5em;
                margin-bottom: 0.5em;
            }

            .cost_items_list > ul > li > dl > dd{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

                .cost_items_list > ul > li > dl > dd .fig{
                    width: 60%;
                    aspect-ratio: 4 / 3;
                    background: #ccc;
                    margin-bottom: 1.3em;
                }

                .cost_items_list > ul > li > dl > dd p{
                    margin-bottom: 0;
                    line-height: 1.6;
                }

.cost_example_list{}

    .cost_example_list > ul{
        display: flex;
        flex-wrap: wrap;
        gap: 2.5em;
        line-height: 1.5;
    }

        .cost_example_list > ul > li{
            box-sizing: border-box;
            padding: 1em;
            margin: 0;
            width: calc((100% - 2.5em) / 2);
            background: rgba(241, 154, 126, 0.2);
        }

        .cost_example_list > ul > li::before{
            content: none;
        }

        .cost_example_list > ul > li .fig_text{
            display: flex;
            margin-bottom: 2.5em;
        }

            .cost_example_list > ul > li .fig_text .fig{
                width: 9rem;
            }

            .cost_example_list > ul > li .fig_text .text{
                flex: 1;
                padding-left: 1em;
            }

                .cost_example_list > ul > li .fig_text .text dl{}

                .cost_example_list > ul > li .fig_text .text dl dt{
                    font-weight: 500;
                    font-size: 1.05em;
                    margin-bottom: 0.3em;
                }

                .cost_example_list > ul > li .fig_text .text dl dd{
                    padding-left: 0.8em;
                    font-size: 0.94em;
                }

                .cost_example_list > ul > li .fig_text .text dl dd ul{
                    margin: 0;
                }

                    .cost_example_list > ul > li .fig_text .text dl dd ul li{
                        padding: 0;
                        margin: 0;
                    }

                        .cost_example_list > ul > li .fig_text .text dl dd ul li::before{
                            content: none;
                        }

        .cost_example_list > ul > li .total_cost{
            background: #fff;
            position: relative;
        }

            .cost_example_list > ul > li .total_cost::before{
                content: "";
                display: block;
                width: 2rem;
                height: 1rem;
                clip-path: polygon(100% 0, 0 0, 50% 100%);
                background: #DA653B;
                position: absolute;
                left: calc(50% - 1rem);
                top: -1.75rem;
            }

            .cost_example_list > ul > li .total_cost dl{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0.3em 0;
                font-weight: 700;
                gap: 1em;
            }

            .cost_example_list > ul > li .total_cost .lbl_num{
                font-size: 1.8em;
            }

            .cost_example_list > ul > li .total_cost .lbl_unit{
                margin-left: 0.3em;
            }

.book_categories_box{
    margin-top: 4em;
}

    .book_categories_box > .box_header{
        margin-bottom: 3em;
    }


    .book_categories_box > .box_inner{}

        .book_categories_box > .box_inner .category_name{
            display: flex;
            justify-content: center;
            margin-bottom: 1.5em;
        }

            .book_categories_box > .box_inner .category_name h4{
                margin: 0;
                font-size: 1.4em;
            }

        .book_categories_box > .box_inner > ul{
            display: flex;
            flex-wrap: wrap;
            gap: 2.5em;
        }

            .book_categories_box > .box_inner > ul > li{
                box-sizing: border-box;
                margin: 0;
                padding: 1.2em 1.5em;
                width: calc((100% - 2.5em) / 2);
                background: rgba(241,154,126,0.2);
            }

                .book_categories_box > .box_inner > ul > li::before{
                    content: none;
                }

                .book_categories_box > .box_inner > ul > li > dl{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                    .book_categories_box > .box_inner > ul > li > dl > dt{
                        font-size: 1.1em;
                        font-weight: 600;
                        margin-bottom: 0.2em;
                    }

                    .book_categories_box > .box_inner > ul > li > dl > dd{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                        .book_categories_box > .box_inner > ul > li > dl > dd .fig{
                            height: 20rem;
                            margin-bottom: 1em;
                        }

                            .book_categories_box > .box_inner > ul > li > dl > dd .fig img{
                                max-width: auto;
                                max-width: initial;
                                height: 100%;
                                width: auto;
                            }

                        .book_categories_box > .box_inner > ul > li > dl > dd .text{
                            line-height: 1.5;
                            display: flex;
                            flex-direction: column;
                            gap: 0.75em;
                        }

                            .book_categories_box > .box_inner > ul > li > dl > dd .text dl{
                                background: #fff;
                                padding: 0.8em 1em;
                                border-radius: 1rem;
                            }

                                .book_categories_box > .box_inner > ul > li > dl > dd .text dl dt{
                                    font-weight: 500;
                                    margin-bottom: 0.2em;
                                }

                                .book_categories_box > .box_inner > ul > li > dl > dd .text dl dd{
                                    font-size: 0.94em;
                                }

                                .book_categories_box > .box_inner > ul > li > dl > dd .text dl dd p{
                                    margin-bottom: 0;
                                }

        .book_categories_box > .box_inner > .goto_books_list{
            margin-top: 3em;
            margin-bottom: 5em;
            display: flex;
            justify-content: center;
        }

            .book_categories_box > .box_inner > .goto_books_list a{
                box-sizing: border-box;
                border: 1px solid var(--base_color1);
                color: var(--base_color1);
                background: #fff;
                padding: 0.2em 2.5em 0;
                line-height: 1;
                display: flex;
                align-items: center;
                height: 3rem;
                border-radius: 100vh;
                text-decoration: none;
                position: relative;
                z-index: 1;
                overflow: hidden;
                transition: .3s all ease;
            }

              .book_categories_box > .box_inner > .goto_books_list a::before{
                    content: "";
                    display: block;
                    width: 100%;
                    height: 100%;
                    background: var(--base_color1);
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    transition: .3s all ease;
                    opacity: 0;
                    transform: skewX(-10deg) scaleX(0);
                    transform-origin: left center;
                }
            
            .book_categories_box > .box_inner > .goto_books_list a:hover{
                color: #fff;
            }

            .book_categories_box > .box_inner > .goto_books_list a:hover::before{
                opacity: 1;
                transform: skewX(-10deg) scaleX(1.1);
            }

.self_publishing_flow{
    margin-top: 2em;
}

    .self_publishing_flow ol{
        list-style: none;
        counter-reset: flow_num;
    }

        .self_publishing_flow ol li{
            display: flex;
            align-items: flex-start;
            padding: 2.5em 0 1.5em;
            margin: 0;
            border-bottom: 1px solid rgba(0,0,0,0.2);
        }

        .self_publishing_flow ol li:last-child{
            border-bottom: none;
        }

        .self_publishing_flow ol li .fig_wrapper{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 12.5rem;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background: rgba(238, 234, 199, 0.5);
            position: relative;
        }

            .self_publishing_flow ol li .fig_wrapper::before{
                counter-increment: flow_num;
                content: counter(flow_num);
                z-index: 1;
                font-size: 3.5em;
                font-weight: 700;
                line-height: 1;
                color: var(--base_color8);
                font-family: var(--font_family2);
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }

            .self_publishing_flow ol li .fig{
                width: 8rem;
            }

        .self_publishing_flow ol li .text{
            flex: 1;
            margin-left: 2em;
        }

            .self_publishing_flow ol li .text h3{
                font-size: 1.3em;
                margin: 0 0 0.3em 0;
            }

.page_body .qa_lead{
    text-align: center;
}

.page_body table.qa_list{
    display: block;
    margin-top: 2em;
}

    .page_body table.qa_list thead{
        display: none;
    }

    .page_body table.qa_list tbody{
        display: block;
    }

    .page_body table.qa_list tbody tr{
        display: flex;
        flex-direction: column;
        background: rgba(218,101,59,0.1);
        margin-bottom: 1.5em;
        padding: 0.5em;
        border-radius: 0.5rem;
    }

        .page_body table.qa_list tbody tr th,
        .page_body table.qa_list tbody tr td{
            border: none;
            box-sizing: border-box;
            position: relative;
        }

        .page_body table.qa_list tbody tr th{
            background: none;
            padding: 0.5em 0.5em 0.5em 3.75rem;
            margin-bottom: 0.5em;
        }

        .page_body table.qa_list tbody tr th::before,
        .page_body table.qa_list tbody tr td::before{
            font-family: var(--font_family2);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            line-height: 1;
            font-size: 1.3em;
            width: 2.5rem;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0.5rem;
            font-weight: 500;
        }

        .page_body table.qa_list tbody tr th::before{
            content: "Q";
            background: rgba(218,101,59,1);
            color: #fff;
        }

        .page_body table.qa_list tbody tr td{
            width: 100%;
            border-radius: 0.5rem;
            padding: 1em 0.5em 1em 3.75rem;
        }

        .page_body table.qa_list tbody tr td::before{
            content: "A";
            background: rgba(218,101,59,0.2);
            color: rgba(218,101,59,1);
            top: 0.5em;
        }

/*フォーム用*/
.page_body .contact_form_box > .input_box h3{
    font-size: 1.2em;
    padding-left: 1.3em;
}

.page_body .contact_form_box > .input_box h3::before{
    font-family: FontAwesome;
    content:"\f111";
    color: var(--base_color8);
    position: absolute;
    top: 0;
    left: 0;
    font-weight: normal;
}

.page_body .contact_form_box > .input_box .radio_horizontal_list{
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1.5em;
}

.page_body .contact_form_box > .input_box .input_other{
    margin-top: 0.5em;
}

    .page_body .contact_form_box > .input_box .input_other input[type="text"]{
        width: 100%;
    }

.page_body .contact_form_box > .input_box .r_genko dd .genko_detail{
    margin: 0.5em 0 0 0;
    background: #fafafa;
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

    .page_body .contact_form_box > .input_box .r_genko dd .genko_detail dl{
        display: flex;
        align-items: center;
    }

        .page_body .contact_form_box > .input_box .r_genko dd .genko_detail dl dt{
            width: 9em;
            position: relative;
        }

        .page_body .contact_form_box > .input_box .r_genko dd .genko_detail dl dt::after{
            font-family: FontAwesome;
            content:"\f0da";
            display: inline-block;
            position: absolute;
            top: -0.1em;
            right: 0;
            color: var(--base_color8);
        }

        .page_body .contact_form_box > .input_box .r_genko dd .genko_detail dl dd{
            flex: 1;
            padding-left: 1em;
        }

    .page_body .contact_form_box > .input_box .r_genko dd .genko_detail input[type="text"]{
        padding: 0.2em 0.3em;
        width: 3.5em;
        text-align: center;
    }

    .page_body .contact_form_box > .input_box .r_kanseijiki dd input[type="text"]{
        width: 3.5em;
        text-align: center;
    }

    .page_body .contact_form_box > .input_box .r_jikantai dd p{
        margin: 0.8em 0 0.3em 0;
    }

    .page_body .contact_form_box > .input_box .r_tel .radio_horizontal_list{
        margin-top: 0.5em;
    }

    .page_body .contact_form_box > .input_box .r_busu input[type="text"]{
        width: 6em;
        text-align: center;
    }

    .page_body .contact_form_box > .input_box .dl_block{
        display: flex;
        gap: 3em;
    }

        .page_body .contact_form_box > .input_box .dl_block > dl{
            display: flex;
        }

            .page_body .contact_form_box > .input_box .dl_block > dl > dt{
                margin-top: 0.6em;
            }

                .page_body .contact_form_box > .input_box .dl_block > dl > dt::after{
                    content: "：";
                }

        .page_body .contact_form_box > .input_box .dl_block input[type="text"]{
            width: 4em;
            text-align: center;
        }

        .page_body .contact_form_box > .input_box .dl_block .satsueiirai{
            display: flex;
            margin-top: 0.5em;
        }

            .page_body .contact_form_box > .input_box .dl_block .satsueiirai dt{

                margin-right: 1em;
            }



    .mw_wp_form_confirm .confirm_display_none_block{
        display: none;
    }

    .page_body .mw_wp_form_confirm .contact_form_box > .input_box .dl_block > dl > dt{
        margin-top: 0;
    }

.jihi_title{
    display: flex;
    flex-direction: column;
    font-weight: 500;
    margin-top: 2em;
}

    .jihi_title dt{
        font-size: 1.2em;
        padding-left: 1.3em;
        font-weight: 700;
        color: #333;
        position: relative;
    }

        .jihi_title dt::before{
            font-family: FontAwesome;
            content: "\f111";
            color: var(--base_color8);
            position: absolute;
            top: 0;
            left: 0;
            font-weight: normal;
        }

    .jihi_title dd{
        padding-left: 1.8em;
    }





@media screen and (min-width:1px) and (max-width:1400px) {
}

/*ipad*/
@media screen and (min-width:1px) and (max-width:1024px){

}

/* ##########SP横向き########## */
@media screen and (min-width:1px) and (max-width:768px) {


}

/* ##########SP########## */
@media screen and (min-width:1px) and (max-width:479px) {
    .book_categories_box{
        margin-top: 2em;
    }

    .book_categories_box > .box_header{
        margin-bottom: 2em;
    }

    .book_categories_box > .box_inner .category_name{
        margin-bottom: 0.5em;
    }

    .book_categories_box > .box_inner > ul{
        flex-direction: column;
        margin: 0;
        gap: 1em;
    }

        .book_categories_box > .box_inner > ul > li{
            width: 100%;
            padding: 1em;
        }

        .book_categories_box > .box_inner > ul > li > dl > dt{
            width: 100%;
        }

        .book_categories_box > .box_inner > ul > li > dl > dd{
            flex-direction: row;
            align-items: flex-start;
        }

            .book_categories_box > .box_inner > ul > li > dl > dd .fig{
                width: 30%;
                height: auto;
                margin-bottom: 0;
            }

                .book_categories_box > .box_inner > ul > li > dl > dd .fig img{
                    max-width: 100%;
                    height: auto;
                }

            .book_categories_box > .box_inner > ul > li > dl > dd .text{
                flex: 1;
                margin-left: 1em;
            }

            .book_categories_box > .box_inner > ul > li > dl > dd .text dl{
                border-radius: 0.5rem;
            }

    .book_categories_box > .box_inner > .goto_books_list{
        margin-top: 2em;
        margin-bottom: 3em;
    }

        .book_categories_box > .box_inner > .goto_books_list a{
            padding-left: 1.5em;
            padding-right: 1.5em;
        }

    .cost_items_list > ul{
        margin: 0;
        gap: 1em;
        flex-direction: column;
    }

        .cost_items_list > ul > li{
            padding: 1em;
            width: 100%;
        }

        .cost_items_list > ul > li > dl{
            flex-direction: row;
            flex-wrap: wrap;
        }

        .cost_items_list > ul > li > dl > dt{
            font-size: 1.3em;
            margin-bottom: 0.2em;
        }

        .cost_items_list > ul > li > dl > dd{
            flex-direction: row;
            align-items: flex-start;
        }

        .cost_items_list > ul > li > dl > dd .fig{
            width: 35%;
            margin-bottom: 0;
        }

        .cost_items_list > ul > li > dl > dd p{
            flex: 1;
            padding-left: 1em;
        }

    .cost_example_list > ul{
        flex-direction: column;
        margin: 0;
        gap: 1em;
    }

        .cost_example_list > ul > li{
            width: 100%;
        }

        .cost_example_list > ul > li .fig_text .fig{
            width: 35%;
        }

    .page_body .qa_lead{
        text-align: left;
    }

        .page_body .qa_lead br{
            display: none;
        }

    .page_body table.qa_list{
        margin-left: 0;
        margin-right: 0;
    }

    .page_body table.qa_list tbody tr{
        margin-bottom: 1em;
    }

    .self_publishing_flow ol li{
        padding: 1.5em 0 0.5em;
    }

    .self_publishing_flow ol li .fig_wrapper{
        width: 6rem;
    }

    .self_publishing_flow ol li .fig_wrapper::before{
        font-size: 1.8em;
        width: 100%;
        text-align: center;
        top: auto;
        bottom: -0.5em;
    }

    .self_publishing_flow ol li .fig{
        width: 75%;
    }

    .self_publishing_flow ol li .text h3{
        font-size: 1.1em;
    }

    /*フォーム用*/
    .page_body .contact_form_box > .input_box h3{
        font-size: 1.15em;
    }

    .page_body .contact_form_box > .input_box .r_genko dd .genko_detail dl{
        flex-direction: column;
        align-items: stretch;
    }

        .page_body .contact_form_box > .input_box .r_genko dd .genko_detail dl dt{
            width: auto;
            padding-left: 0.8em;
        }

        .page_body .contact_form_box > .input_box .r_genko dd .genko_detail dl dt::after{
            left: 0;
            right: auto;
            content:"\f0d7";
        }


        .page_body .contact_form_box > .input_box .r_genko dd .genko_detail dl dd{
            padding-left: 0;
        }

    .page_body .contact_form_box > .input_box .dl_block{
        flex-direction: column;
        gap: 0.5em;
    }

    .jihi_title{
        margin-top: 1em;
    }

        .jihi_title dt{
            font-size: 1.15em;
        }

        .jihi_title dd{
            padding-left: 0;
        }

}

/* ##########印刷用########## */
@media print{

}