@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);



/*------▼WHOLE STRUCTURE------*/
html{
    -webkit-text-size-adjust: 100%;
}

body {
    color:#5D5C50;
    background:#EEEEE4;
    font:14px/1.4 'futura PT', 'noto sans japanese',sans-serif;
}

/*@media (prefers-color-scheme:dark) {
    body {
        color:#5D5C50;
        background:#EEEEE4;
    } 
}*/

h1,h2,h5 {
    color:#39382D;
}

h2 {
    font-weight: bold;
}

h3,h4 {
    color:#38382A;
    font-size:22px;
    font-weight:normal;
}

a:link,a:visited {
    color:#67611C;
    text-decoration:underline;
}

a:hover,a:active {
    color:#867F28;
    text-decoration:none;
}

/*.container {
    max-width:905px;
    margin:0 auto 0;
}

main > .container {
    background:url(../images/bg.gif) repeat-y 0 0;
}*/

#background {
    background:url(../images/bg.gif) repeat-y 0 0;
    width:905px;
    margin:0 auto 0;
}

@media (max-width: 885px) {
    #background {
        width:623px;
    }
}

@media (max-width: 640px) {
    #background {
        width:380px;
    }
}

.txt10 {
    font-size:10px;
}

/*------▼HEADER------*/

header > .container {
    position:relative;
    display: flex;
    height:21px;
}

@media (max-width: 885px) {
    header > .container {
        width:644px;
    }
}

@media (max-width: 640px) {
    header > .container {
        width:370px;
    }
}

h1#logo {
    position:absolute;
    top:43px;
    left:133px;
    font-size:16px;
    font-weight:normal;
}

@media (max-width: 640px) {
    h1#logo {
        position:absolute;
        top:103px;
        left:133px;
    }
}

h1#logo a {
    outline :0;
    width:227px;
    height:108px;
    display:block;
}

.nav_header {
    margin: 0 0 0 auto;
}

.list_nav_header {
    display: flex;
    align-items: center;
    margin: 0 20px;
}

li.ja ,li.en {
    color:#EEEEE4;
    background-color:#21211E;
}

/*li.ja a,li.en a {
    padding:0 0 0 15px;
    background:url(../images/y-lang.gif) #EEEEE4 no-repeat 9px 10px;
}*/

[class*="btn_ico"] {
    display: flex;
    align-items: center;
    position: relative;
}

[class*="btn_ico"]:before {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: translateY(-50%);
}

[class*="btn_ico"][class*="lung"] {
    height: 0px;
    padding: 0 0 0 0;
}

[class*="btn_ico"][class*="lung"]:before {
    position: absolute;
    top: 50%;
    left: -5px;
    width: 12px;
    height: 10px;
    background: url(../images/y-lang.svg);
}

li.ja a:link,li.ja a:visited,li.en a:link,li.en a:visited {
    color:#67611C;
    text-decoration:underline;
}

li.ja a:hover,li.ja a:active,li.en a:hover,li.en a:active {
    color:#867F28;
    text-decoration:none;
}

.ja span,.en span {
/*    margin:0 9px 0 9px;*/
    padding:4px 9px 5px 9px;
    display:block;
}


/*------▼MAIN------*/

main > .container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

@media (max-width: 885px) {
    main > .container {
        width:642px;
    }
}

@media (max-width: 640px) {
    main > .container {
        flex-direction: column-reverse;
        width:368px;
    }
}

/*------▼PROFILE------*/

p#job {
    font-size:10px;
}

p#hurigana {
    margin:7px 0 0 0;
    padding:0 0 0 0;
    font-size:8px;
}

h2#name {
    /*margin:7px 0 0 0;*/
    font-size:14px;
}

address#mail {
    margin:5px 0 0 0;
    font-size:10px;
    font-style:normal;
}

[class*="btn_ico"][class*="mail"] {
    flex-direction: row;
    justify-content: flex-end;
}

[class*="btn_ico"][class*="mail"]:before {
    position: absolute;
    top: 50%;
    left: 129px;
    width: 14px;
    height: 10px;
    background: url(../images/mailicon.svg) no-repeat;
}

/*#mail a {
    padding:0 0 2px 17px;
    background:url(../images/mailicon.svg) no-repeat 0 3px;
}*/

#profile {
    margin:198px 6px 0 0;
    width:219px;
    text-align:right;
}

@media (max-width: 640px) {
    #profile {
        margin:32px 6px 0 133px;
    }
}

p.profileTitle,p.profileTitle2 {
    font-size:12px;
    padding:0 0 15px 0;
    position:relative;
}

p.profileTitle:after,p.profileTitle2:after {
    position:absolute;
    top:78%;
    right:0;
    content: '';
    width: 5px;
    height: 1px;
    border-top: solid 1px;
}

p.profileTitle {
    margin:45px 0 0 0;
}

p.profileTitle2 {
    margin:35px 0 0 0;
}

.profileList li {
    margin:0 0 8px 0;
    line-height:1.2;
}

ul.profileList {
    font-size:11px;
}

li.bottomList {
    padding:0 0 15px 0;
    position:relative;
}

li.bottomList:after {
    position:absolute;
    bottom:20%;
    right:0%;
    content: '';
    width: 5px;
    height: 1px;
    border-top: solid 1px;
}



/*main > .container_min {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}*/

/*------▼NEWS------*/

#news {
    margin:72px 0 0 0;
    width:541px;
    height:138px;
    background:url(../images/news_bg_big.svg) no-repeat;
}

h3#newsTitle {
    width:76px;
    height:42px;
    margin:0 9px 5px auto;
}

#newsArea {
    background:#CECEB6;
    width:495px;
    height:70px;
    overflow:auto;
    margin:0 0 0 25px;
}

#newsArea ul {
    margin:6px 0 0 6px;
    padding:0 0 3px 0;
    font-size:10px;
    color:#3D3C32;
}

#newsArea li {
    margin:0 0 8px 0;
    line-height:1.2;
}

@media (max-width: 885px) {
    #news {
        width:282px;
        height:218px;
        background:url(../images/news_bg_standard.svg) no-repeat;
    }

    #newsArea {
        width:235px;
        height:150px;
        margin:0 0 0 27px;
    }
}

@media (max-width: 640px) {
    #news {
        margin:230px 0 0 113px;
        width:255px;
        height:218px;
        background:url(../images/news_bg_small.svg) no-repeat;
    }

    #newsArea {
        width:209px;
        height:150px;
        margin:0 0 0 26px;
        overflow-wrap: break-word
    }
}


/*------▼ARCHIVE------*/

#archive {
    margin:15px 0 0 20px;
    width:525px;
    text-align:left;
}

@media (max-width: 885px) {
    #archive {
        width:263px;
    }
}

@media (max-width: 640px) {
    #archive {
        margin:32px 0 0 133px;
        width:219px;
    }

    /*#archive > section {
        width:368px;
    }*/
}

h4#webTitle {
    clear:both;
    display:block;
    width:67px;
    height:28px;
    margin:0 0 4px 0;
}

/*h4#webTitle {
    clear:both;
    display:block;
    width:67px;
    height:28px;
    margin:0 0 1px 0;
    text-indent:-9999px;
    background:url(../images/web-tit.gif) no-repeat;
}*/

h4#cgTitle {
    clear:both;
    display:block;
    width:57px;
    height:28px;
    margin:0 0 4px 0;
}

h4#graphicTitle {
    clear:both;
    display:block;
    width:98px;
    height:28px;
    margin:0 0 4px 0;
}

h4#paintingTitle {
    clear:both;
    display:block;
    width:102px;
    height:28px;
    margin:0 0 4px 0;
}

h4#sketchTitle {
    clear:both;
    display:block;
    width:90px;
    height:28px;
    margin:0 0 4px 0;
}

.arcSit {
    font-size:10px;
    margin:0 0 0 5px;
    }

.arcDet {
    color:#67611C;
    text-decoration:underline;
}

.arcDetR {
    color:#867F28;
}

.arcDet,.arcDetR {
    font-size:10px;
    margin:0 0 0 5px;
    padding:0 11px 0 0;
    cursor:pointer;
    cursor:hand;
}

.detail {
    margin:5px 0 0 0;
}

.imgArea {
    width:505px;
}

.imgAreaB {
    width:505px;
}

@media (max-width: 885px) {
    .imgArea {
        width:245px;
    }

    .imgAreaB {
        width:245px;
    }
}

@media (max-width: 640px) {
    .imgArea {
        width:219px;
    }

    .imgAreaB {
        width:219px;
    }
}

.margin25 {
    margin:0 0 25px 0;
}

.margin5 {
    margin:0 0 5px 0;
}

@media (max-width: 640px) {
    .margin25 {
        margin:0 0 35px 0;
    }
}

.imgmL {
    margin:0 0 12px 0;
}

.imgmR {
    margin:0 0 12px 0;
}

.imgL,.imgmL,.imgbL {
    float:left;
}

.imgR,.imgmR,.imgbR {
    float:right;
}

@media (max-width: 885px) {
    /*.imgR,.imgmR,.imgbR {
        float:left;
    }*/

    .margin12 {
        margin:0 0 12px 0;
    }
}

.imgL,.imgR,.imgmL,.imgmR,.imgbL,.imgbR {
    width:245px;
}

.imgL img,.imgR img,.imgmL img,.imgmR img,.imgbL img,.imgbR img {
    border:5px solid #21211E;
}

.imgL h5,.imgR h5,.imgmL h5,.imgmR h5,.imgbL h5,.imgbR h5 {
    font-size:12px;
    font-weight:normal;
    margin:5px 0 0 0;
}

.imgL p,.imgR p,.imgmL p,.imgmR p,.imgbL p,.imgbR p {
    font-size:10px;
}

@media (max-width: 640px) {
    .imgL,.imgR,.imgmL,.imgmR,.imgbL,.imgbR {
        width:219px;
    }

    .imgL img,.imgR img,.imgmL img,.imgmR img,.imgbL img,.imgbR img {
        width:100%;
    }
}



/*------▽OTHERS------*/

#others {
    margin:-425px 0 0 222px;
    width:219px;
    text-align:right;
}

@media (max-width: 885px) {
    #others {
        margin:-1150px 0 0 260px;
    }
}

@media (max-width: 640px) {
    #others {
        margin:0 0 40px 133px;
    }
}

/*------△OTHERS------*/


/*------▼FOOTER------*/

footer > .container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#footer {
    text-align:right;
    width:885px;
    margin:0 20px 0 0;
    font-size:12px;
}

@media (max-width: 885px) {
    footer > .container {
        width:642px;
    }

    #footer {
        width:642px;
    }
}

@media (max-width: 640px) {
    footer > .container {
        width:354px;
        flex-direction: column;
    }

    #footer {
        margin:0 0 0 0;
        width:354px;
    }
}

p#signArea {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin:0 3px 6px auto;
    width:173px;
    height:28px;
    font-size:10px;
}

span#designby {
    margin:12px 5px 0 0;
    display:block;
}

span#sign {
    width:97px;
    height:28px;
    display:block;
    text-align:left;
}

.pageTopArea a {
    margin:0 0 0 auto;
    width:505px;
    height:21px;
    display:block;
}

@media (max-width: 885px) {
    .pageTopArea a {
        width:246px;
    }
}

@media (max-width: 640px) {
    .pageTopArea a {
        width:219px;
    }
}

.pageTopArea a:link,.pageTopArea a:visited {
    color:#EEEEE4;
    background-color:#464534;
    text-decoration:none;
}

.pageTopArea a:hover,.pageTopArea a:active {
    color:#EEEEE4;
    background-color:#504F3B;
    /*background-color:#4C4B39;*/
    text-decoration:none;
}

/*a.pageTop {
    background:url(../images/y-top.gif) no-repeat 491px 5px;
}

a.pageTop span {
    margin:0 5px 0 0;
    padding:2px 11px 0 0;
    display:block;
}

a.pageTop:hover span,a.pageTop:active span {
    background:url(../images/y-top-r.gif) no-repeat right 5px;
}*/

a.pageTop {
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: row;
    justify-content: flex-end;
    padding:0 16px 0 0;
}

a.pageTop:after {
    position: absolute;
    top: 50%;
    left: 491px;
    content: "";
    background-size: contain;
    background-position: center center;
    transform: translateY(-50%);
    width: 14px;
    height: 10px;
    background: url(../images/y-top.svg) no-repeat;
}

@media (max-width: 885px) {
    a.pageTop:after {
        position: absolute;
        top: 50%;
        left: 232px;
    }
}

@media (max-width: 640px) {
    a.pageTop:after {
        position: absolute;
        top: 50%;
        left: 205px;
    }
}

p#copy {
    font-size:10px;
    padding:5px 0 20px 0;
}