@charset "utf-8";
/*-------------------
請求書　demoページ用CSS 202607
/seikyu/demo/index.asp
-------------------*/
#seikyu {
	font-size: 16px;
}
.contents {
	width: 90%;
	max-width: 64em;
	margin: auto;
}
.btn a:hover{
	opacity: 0.85;
	cursor : pointer;
}

main {
    box-sizing: border-box;
    font-size: 13px;
}

main p {
    line-height: 1.5;
    font-size: 1.2em;
}
main img {
    width: 100%;
    vertical-align: bottom;
}
.inline_block {
    display: inline-block;
}

body header.header2022 {
    border-bottom: 1px solid #297F3A;
}

#breadcrumbs {
    margin-top: 57px;
}

@media (min-width: 64em) {
    #breadcrumbs {
        margin-top: 57px;
    }
    main {
        font-size: 16px;
    }
}

@media (min-width: 75em) {
    #breadcrumbs {
        margin-top: 4.5em;
    }
}

.sec_fv {
    padding: 4em 1em;
    background-color: #fff;
    box-shadow: 0 2px 5px #ccc;
}
.sec_fv h1 {
    margin: 3em auto 1em;
    font-size: 2em;
    font-weight: bold;
    color: #297F3A;
    text-align: center;
}
.fv_desc {
    text-align: center;
}

.sec_contents {
    padding: 3em 0;
    background-color: rgba(237, 245, 237, .3);
}

.demo_wrap {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 12px 0 rgba(51, 51, 51, .1);
    padding: 2em 1.5em;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.demo_wrap + .demo_wrap {
    margin-top: 2em;
}

.demo_wrap.c_or {
    border-top: 3px solid #F1A30A;
}

.demo_wrap.c_gr {
    border-top: 3px solid #297F3A;
}

.demo_l {
    width: min(60%, 400px);
    margin: 0 auto 2em;
}

.demo_thumb {
    position: relative;
    z-index: 0;
}

.demo_thumb::before {
    content: "";
    width: min(35%, 100px);
    height: auto;
    aspect-ratio: 1;
    background: url(/web/jp/seikyu/demo/img/demo_ico_play_or.svg) center / contain no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1;
}

.c_gr .demo_thumb::before {
    background: url(/web/jp/seikyu/demo/img/demo_ico_play_gr.svg) center / contain no-repeat;
}

.demo_ttl {
    font-size: 1.5em;
    font-weight: bold;
    padding-bottom: 0.8em;
    border-bottom: 2px solid #F5F5F5;
    margin-bottom: 1em;
}

.c_or .demo_ttl {
    color: #F1A30A;
}

.c_gr .demo_ttl {
    color: #297F3A;
}
.demo_item + .demo_item {
    margin-top: 2em;
}

.demo_item_cat {
    padding: 0.8em;
    background-color: #F5F5F5;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 6px;
    margin-bottom: 0.5em;
}

.demo_link_list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.demo_link_list li a {
    border-radius: 6px;
    padding: 1.2em 2.2em 1.2em 1.2em;
    display: flex;
    align-items: center;
    position: relative;
}

.c_or .demo_link_list li a {
    border: 1px solid #FDE7BE;
    box-shadow: 0px 3px 8px rgba(241, 163, 10, .05);
}

.c_or .demo_link_list li a:hover {
    background-color: rgba(253, 231, 190, .3);
}

.c_gr .demo_link_list li a {
    border: 1px solid #CCE0D1;
    box-shadow: 0px 3px 8px rgba(41, 127, 58, .05);
}

.c_gr .demo_link_list li a:hover {
    background-color: rgba(204, 224, 209, .3);
}

.page_num {
    border-radius: 3px;
    padding: 0.6em 1em;
    font-weight: bold;
    font-size: 0.8em;
    margin-right: 1em;
}

.c_or .page_num {
    color: #F1A30A;
    border: 1px solid #FDE7BE;
    background-color: rgba(253, 231, 190, .3);
}

.c_gr .page_num {
    color: #297F3A;
    border: 1px solid #CCE0D1;
    background-color: rgba(204, 224, 209, .3);
}

.page_ttl {
    font-size: 1.2em;
    font-weight: bold;
}

.page_arrow {
    rotate: 45deg;
    width: 0.6em;
    height: 0.6em;
    position: absolute;
    top: 50%;
    right: 1.5em;
    translate: 0 -50%;
}

.c_or .page_arrow {
    border-top: 2px solid #F1A30A;
    border-right: 2px solid #F1A30A;
}

.c_gr .page_arrow {
    border-top: 2px solid #297F3A;
    border-right: 2px solid #297F3A;
}

.cta_online {
    margin: 3em 0;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 2em 1.5em;
    text-align: center;
}

.cta_online_ttl {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 0.8em;
}

.cta_online_btn {
    border-radius: 999px;
    background-color: #297F3A;
    box-shadow: 0px 3px 8px rgba(41, 127, 58, .3);
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    padding: 1.2em 1.8em;
    display: inline-block;
    margin: 1.5em auto 0;
    transition: .3s ease;
}
.cta_online_btn:hover {
    opacity: .7;
}

@media (min-width: 48em) {
    .demo_wrap {
        grid-template-columns: 2fr 3fr;
        gap: 2em;
        padding: 3em;
    }

    .demo_l {
        width: auto;
        margin: 0;
    }

    .cta_online {
        padding: 3em;
    }

    .cta_online_btn {
        padding: 1.2em 3em;
    }
}