@charset "utf-8";
/* CSS Document */

/* ---------------------------------------
	WORKS
--------------------------------------- */

html{
    scroll-behavior: auto;
}

:target {
  scroll-margin-block: 3ex;
}



section#ourworks div.contents{
    max-width:920px;
}

section#ourworks h2{
    margin-bottom:1.2em;
}

div.folder_header{
    width:100%;
    height:calc(28ch * 0.4);
    background: url("../img/works/folder_header_bg.svg") no-repeat left bottom;
    background-size:25ch auto;
    font-size:0.7em;
    letter-spacing:0.15em;
    font-family:"din-2014",sans-serif;
    font-weight:700;
    padding-top:2.8em;
    padding-left:9.8ch;
    margin-bottom:-0.5em;
}


div.folder_header>span{
    font-size:2em;
    margin-left:0.2em;
}

section#ourworks div.contents h4{
    font-size:1.2em;
    text-align: center;
    letter-spacing:0.1em;
    line-height:1.5em;
}

section#ourworks div.contents h3{
    border-top:solid 1px #000;
    border-bottom:solid 1px #000;
    padding:1em 0;
    margin:1.5em 0 2em;
    font-size:1em;
    letter-spacing:0.125em;
}

section#ourworks div.contents h3 span.from{
    display:block;
    font-size:0.7em;
    font-weight:500;
    margin-top:1em;
}

div.folder_contents{
    background:#FFF;
    padding:1rem 1rem 0.8rem;
    border-radius:0 0.5rem 0 0;
}

div.cont_area{
    width:auto;
    background:#e4e3d1;
    border-radius:0 0.5rem 0 0;
    margin:0 auto;
    padding:3em 0 2em;
    text-align: justify;
    text-justify: inter-ideograph; /* Edge */
    line-break: strict;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

div.work_thumb{
    margin-top:3em;
}

div.cont_area p.description{
    margin-top:2em;
    font-weight:600;
}

div.cont_area ul{
    margin-top:2em;
}

div.cont_area ul > li + li{
    margin-top:0.5em;
}

div.cont_area ul li{
    background:#f4f4ed;
    padding:0.6em 1em;
}

div.cont_area ul li >p{
    font-size:0.7em;
}

div.folder_footer{
    background:#FFF;
    font-size:0.7em;
    text-align:center;
    /*margin-top:-1px;*/
    padding-bottom:1rem;
    border-radius:0 0 0.5rem 0.5rem;
}

div.folder_footer a{
    display:inline-block;
    text-decoration: none;
    transition:0.5s;
}

div.folder_footer a:hover{
    text-decoration: underline;
    color:#bebeaa;
}

div.folder_footer a::before{
    content:"";
    display:inline-block;
    width:1.6em;
    height:1.6em;
    margin-right:0.5em;
    vertical-align: bottom;
    background:url("../img/common/icon_link.svg") no-repeat center;
    background-size:contain;
}

/* =======================================
	SMPH
======================================= */
@media screen and (max-width: 640px) {
    
    div.cont_area{
        text-align: auto;
    line-break: auto;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;
    }
    
    section#ourworks div.contents h4{
        font-size:1.1em;
    }
    
    div.cont_area p.description{
    margin-top:2em;
    font-size:0.85em;
    font-weight:600;
    }
    
    div.cont_area ul li >p{
    font-size:0.8em;
}
    
    div.folder_footer{
    margin-top:-3px;
    }
    
    header.yel nav ul li::before{
    background:  url("../img/common/nav_dot.svg") no-repeat;
}
    
}