@charset "utf-8";
/* ------------------------------------------------------------
ライブラリページ用
------------------------------------------------------------ */
:root{

  /* ライブラリ内の余白 */
    --space-ss: 0.7rem;
    --space-s: 1.35rem;/* --contents-marginと同一 */
    --space-m: 2.15rem;/* --contents-paddingと同一 */
    --space-l: 3rem;

    @media (max-width: 767px) {
    --space-ss: 0.35rem;
    --space-s: 0.7rem;
    --space-m: 1.07rem;
    --space-l: 2rem;
    }

    --linkGuideBtn: linear-gradient(#3db9ef 0%, #4aa1f7 100%);
    --linkGuideBtn-active: linear-gradient(#ffbc58 0%, #ffe600 100%);
}
li.link-arrow a::after{ background-image: url(../image/icon_arrow.svg);}

#library{
    @media (max-width: 767px) {
        font-size: 17.1px;

    }
    .mainVisual {
        min-height: 100px;

    }
    #contents1{
        margin-top:0;
        .breadcrumb{
            padding: 1em 3vw 0 calc(3vw + 1%);
            li{
                display: inline-block;
                color:#fff;
                line-height: 1.4;
                &:not(:last-child)::after{
                    content:" > ";
                }
                    @media (max-width: 767px) {
                        font-size:14px;
                    }
                a{
                    color:#fff;
                }
            }
        }
        .inner{
            ul.itemList>li {
                width:100%;
                h3{
                    font-size:200%;
                    line-height: 1.3;
                    height: auto;
                    @media (max-width: 767px) {
                        font-size:160%;
                    }
                    span{
                        font-size:65%;
                    }
                }
                h4{
                    margin-bottom: var(--space-s);
                    padding:0 calc( var(--space-m) + 0.5em);
                    &::before{
                        content:"";
                        display: inline-block;
                        width:5px;
                        height: 1em;
                        background-color: rgb(43, 125, 199);
                        transform: translate( -.5em ,.15em );
                    }
                }
                .base{
                    display:flex;
                    justify-content: space-between;
                    @media (max-width: 767px) {
                        display:block;
                    }
                    .left{
                        width:65%;
                        @media (max-width: 767px) {
                            width:100%;
                            margin-bottom:var(--space-l);
                        }
                    }
                    .right{
                        width:35%;
                        @media (max-width: 767px) {
                            width:100%;
                        }
                    }
                }
                figure.mainThumbnail{
                    padding:0 var(--space-m);
                    img{
                        border-radius: 0;
                    }
                }
                .outsideLink{
                    padding:0 var(--space-m);
                    li{
                        margin-bottom:var(--space-ss);
                        border-radius: 5px;
                        background: var(--linkGuideBtn);
                        position: relative;
                        &:hover{ background: var(--linkGuideBtn-active);}
                        a{
                            font-size:120%;
                            padding:0.75rem 0
                        }
                    }
                }
                .tagSet{
                    margin-bottom:var(--space-l);
                        }
                .codeList{
                    padding:0 var(--space-m);
                    ul{
                        margin-top:15px;
                        li{
                            margin-bottom:10px;
                            &::after {
                                content: '';
                                display: inline-block;
                                box-sizing: border-box;
                                vertical-align: bottom;
                                width: 1em;
                                height: 1em;
                                margin-left: 0.35em;
                                background: url(../image/icon_outlink_bl.svg) center no-repeat;
                                background-size: 85%;
                            }
                            a{
                                color:#2b7dc7;
                            }
                        }
                    }
                }
                .leadText{
                    padding:0 var(--space-m);
                    margin-block:30px;
                    line-height: 1.5;
                }
                .materialList{
                    padding:0 var(--space-m);
                    margin-block:0 var(--space-m);
                    li{
                        display: inline-block;
                        margin-right:var(--space-ss);
                        margin-bottom:var(--space-s);
                        a{
                            color:rgb(43, 125, 199);
                            border:1px solid rgb(43, 125, 199);
                            border-radius: 20px;;
                            display: inline-block;
                            padding:.5em 1em .3em;
                                &::after {
                                    content: '';
                                    display: inline-block;
                                    box-sizing: border-box;
                                    vertical-align: middle;
                                    width: 1em;
                                    height: 1em;
                                    margin-left: 0.35em;
                                    background: url(../image/icon_pdf.svg) center no-repeat;
                                    background-size: 90%;
                                    margin-bottom:.2em;
                                }
                            &:hover{
                                color:#004077;
                                border-color:#004077;
                                text-decoration: underline;
                                &::after {
                                    background: url(../image/icon_pdf_bl.svg) center no-repeat;
                                    background-size: 90%;
                                }
                            }
                        }
                    }
                }
                .workExample{
                    margin: 0 var(--space-m) var(--space-l);
                    a{
                        padding: var(--space-m) 0 0 0;
                        background-color: #ffffff7e;
                        align-items: center;
                        display: flex;
                        justify-content: space-between;
                        & + a{
                            margin-top:var(--space-ss);
                        }
                        figure{
                            width:20%;
                            padding: 0 var(--space-m);
                            margin-bottom: var(--space-m);
                            @media (max-width: 767px) {
                                width:40%;
                                padding: 0 var(--space-ss) 0 var(--space-s);
                            }
                            img{
                                border-radius: 0;
                            }
                        }
                        div{
                            width:80%;
                            @media (max-width: 767px) {
                                width:60%;
                                padding: 0 var(--space-ss);
                            }
                            p{
                                color:rgb(43, 125, 199);
                                &::after {
                                    content: '';
                                    display: inline-block;
                                    box-sizing: border-box;
                                    vertical-align: bottom;
                                    width: .75em;
                                    height: .75em;
                                    padding: 0.75rem;
                                    margin-left: 0.35em;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-image: url(../image/icon_outlink_bl.svg);
                                    background-size: 75%;
                                }
                            }
                        }
                    }
                }
                .conditions{
                    margin-bottom:var(--space-m);
                    p{
                        line-height: 1.5;
                        a{
                            color:rgb(43, 125, 199);
                        }
                    }
                }
                .returnBtn{
                    li{
                        a{
                            padding: 1.5rem;
                        }
                    }
                }
            }
        }
    }
}