@charset "UTF-8";
/*
Theme Name:MY THEME
Author:My portfolio
Description:This is my original theme日本語テスト
Version:1.0
*/

nav ul {
    list-style: none;
}

body {
    /*
	font-family:'メイリオ',
		'Hiragino Kaku Gothic Pro ',
		'sans-seserif';
*/
    margin: 0;
    background-image: url(images/comic-top.png), url(images/comic-top-x.png), url(images/comic-top-y.png), url(images/comic-yl.png);
    background-image: 100%;
    background-repeat: no-repeat, repeat-x, repeat-y, repeat;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

h1,
h2,
h3,
hr {
    mask-image: url(images/comic-text.png);
    -webkit-mask-image: url(images/comic-text.png);
    -o-mask-image: url(images/comic-text.png);
    -ms-mask-image: url(images/comic-text.png);
}


.all {
    margin-top: 150px;
    margin-left: 150px;
    margin-right: 5px;
}

/*header*/

header {
    overflow: hidden;
}
 h1 {
    float: left;
}
h1 img{
    width: 297px;
}

.nav {
    float: right;
    margin-top: 8%;
    width: 71%;
}

.nav a {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em;
    color: black;
    margin-left: 2%;
}
.bar {
    background-image: url(images/bar.png);
    background-repeat: no-repeat;
    background-position: right;
    color: #ececd0;
        mask-image: url(images/comic-text.png);
    -webkit-mask-image: url(images/comic-text.png);
    -o-mask-image: url(images/comic-text.png);
    -ms-mask-image: url(images/comic-text.png);
    text-indent: 25em;
}
.bar img{
    float: right;
}

/*header*/
.container{
}
/*作品のジャンル囲い*/

.port-box {
    overflow: hidden;
    margin-bottom: 50px;
}
.port-box:nth-of-type(1){
    margin-bottom: 0;
}
/*作品のジャンル囲い*/

/*作品毎囲い*/

.site-box {
    width: 48%;
    height: 48%;
    border: solid 6px #000;
    overflow: hidden;
    padding: 5px;
        box-sizing: border-box;
    margin-bottom: 10px;
    position: relative;
}


.site-box:nth-of-type(odd) {
    float: left;
}

.site-box:nth-of-type(even) {
    float: right;
}


.site-box:nth-of-type(3),
.site-box:nth-of-type(5){
    clear: both;
}

/*作品毎囲い*/
/*banner*/
.banner-box{
    float: left;
    width: 20%;
    margin-right: 3%;
    border: solid 6px #000;
    overflow: hidden;
    padding: 5px;
    position: relative;
        box-sizing: border-box;
}
.banner-thumbnail {
    width: 100%;
}
.banner-thumbnail img {
    width: 100%;
    height: auto;
}
.banner-excerpt p:nth-child(2) {
    width: 100%;
}
.banner-excerpt p:nth-child(2)::after {
    content: "";
    display: block;
    padding-top: 25%;
}
.banner-link {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 3%;
}
/*banner*/
/*card*/
.card-box{
    width: 100%;
    border: solid 6px #000;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}
.card:nth-of-type(odd){
    float: left;
    width: 48%;
}
.card:nth-of-type(even){
    float: right;
    width: 48%;
}
.card h4{
    width: 100%;
    margin-right: 0;
    text-align: center;
}
.card img{
    width: 100%;
}
.card-box p.link{
    position: absolute;
    right: 3%;
    bottom: 0;
}
/*card*/
/*Illustu*/
.Illustu-box{
    float: left;
    width: 20%;
    margin-right: 3%;
    border: solid 6px #000;
    overflow: hidden;
    padding: 5px;
    position: relative;
        box-sizing: border-box;
}
.Illustu-thumbnail {
    width: 100%;
}
.Illustu-thumbnail img {
    width: 100%;
    height: auto;
}
.Illustu-excerpt p:nth-child(2) {
    width: 100%;
}
.Illustu-excerpt p:nth-child(2)::after {
    content: "";
    display: block;
    padding-top: 25%;
}
.Illustu-link {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 3%;
}
/*Illustu*/
/*skill*/
.skill{
    text-align: center;
}
/*skill*/
/*自己紹介*/
.info{
    overflow: hidden;
        border: solid 6px #000;
    overflow: hidden;
    padding: 5%;
        box-sizing: border-box;
    width: 100%;
    height: auto;
}
.info-img{
    width: 48%;
    float: left;
    margin-top: 12%;
}
.info-img img{
    width: 75%;
}
.info div.info-excerpt{
    width: 48%;
    height: auto;
    float: left;
    text-align: center;
}
.excerpt-container{
    width: 100%;
}
.excerpt-container h3,.excerpt-container p{
    width: 100%;
}
.excerpt-container:first-child h3{/*名前*/
    font-weight: bold;
    font-size: 3em;
    margin: 0;
    white-space: nowrap;
}


/*自己紹介*/
/*contact*/
form{
    margin-left: 3px;
}
.chui{
    margin: 0;
    color: #595a5b;
    font-size: 0.8em;
}

/*contact*/
/*概要*/

.excerpt {
    overflow: hidden;
    position: relative;
}

.thumbnail {
    width: 100%;
}

.thumbnail img {
    width: 48%;
    height: auto;
    float: left;
}

.excerpt p:nth-child(2) {
    width: 48%;
    float: right;
}

.excerpt p:nth-child(2)::after {
    content: "";
    display: block;
    padding-top: 25%;
}

.link {
    position: absolute;
    right: 1em;
    bottom: 0;
}
.link a{
    text-decoration: none;
    padding: 0.5em;
    border: 1px solid #000;
    border-radius: 8%;
    font-weight: bold;
    color: black;
}
.link a:hover{
    background-color: white;
    color: blue;
}


/*↑概要↑*/

/*その他*/
hr {
    border-top: dotted 6px black;
    border-bottom: 0px;
}
small{
    display: inline;
}
/*その他*/




/*single*/

body.postid-112,
body.postid-55
{
    margin: 0;
    background-image: url(images/comic-top-rd.png), url(images/comic-top-x-rd.png), url(images/comic-top-y-rd.png), url(images/comic-rd.png);
    background-image: 100%;
    background-repeat: no-repeat, repeat-x, repeat-y, repeat;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
body.postid-112 .bar,
body.postid-55 .bar{
    color: #c89b97;
}
body.postid-117,
body.postid-115,
body.postid-99,
body.postid-96,
body.postid-101{
    margin: 0;
    background-image: url(images/comic-top-gr.png), url(images/comic-top-x-gr.png), url(images/comic-top-y-gr.png), url(images/comic-gr.png);
    background-image: 100%;
    background-repeat: no-repeat, repeat-x, repeat-y, repeat;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
body.postid-117 .bar,
body.postid-115 .bar,
body.postid-99 .bar,
body.postid-96 .bar,
body.postid-101 .bar{
    color: #b9c58e;
}
body.postid-136,
body.postid-134,
body.postid-126,
body.postid-124{
    margin: 0;
    background-image: url(images/comic-top-bl.png), url(images/comic-top-x-bl.png), url(images/comic-top-y-bl.png), url(images/comic-bl.png);
    background-image: 100%;
    background-repeat: no-repeat, repeat-x, repeat-y, repeat;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
body.postid-136 .bar,
body.postid-134 .bar,
body.postid-126 .bar,
body.postid-124 .bar{
    color: #9cbdc1;
}





.single-p{
    border: solid 3px #000;
    width: 100%;
    box-sizing: border-box;
    padding: 5%;
}
.single-h1{
    float: none;
}
.single-p airticle{
    width: 100%;
}


.single-excerpt{/*サイト画像とレスポンシブ画像とテキストの親*/
    text-align: center;
    width: 100%;
    overflow: hidden;
}
.excerpt-img{/*singleの画像*/

}
body > div > div.single-p > article > div > div > a:nth-child(1) > img{/*サイト画像*/
    width: 50%;
    height: auto;
    margin-left: 12.5%;
    float: left;
}
body > div > div.single-p > article > div > div > a:nth-child(3) > img{/*レスポンシブ画像*/
    float: right;
    margin-right: 12.5%;
    width: 12%;
    height: auto;
}
.single-excerpt p.excerpt-text{/*テキストの親*/
        text-align: left;
    display: inline-block;
    font-weight: bold;
}
/*マグマダイゴサイト画像*/
body > div > div.single-p > article.post-241> div > div > p:nth-child(1){
    width: 48%;
    height: auto;
    float: left;
    margin: 0;
}
body > div > div.single-p > article.post-241> div > div > a:nth-child(1) > img{/*マグマダイゴサイト画像*/
    width: 25%;
    height: auto;
}
body > div > div.single-p > article.post-241> div > div > div.magma{/*マグマダイゴサイト画像*/
    width: 48%;
    height: auto;
    float: left;
}
body > div > div.single-p > article.post-241> div > div > div.magma img{/*マグマダイゴサイト画像*/
    vertical-align: bottom;
}
body > div > div.single-p > article > div > div > div > p:nth-child(2) > a:nth-child(2) > img{
    margin-top: 16px;
    margin-left: 16px;
}


.pagenav{
    width:  100%;
    text-align: center;
    position: relative;
    margin-bottom: 10px;
        margin-top: 5%;

}
.old{
    float: left;
    width: 33%;
    text-align: left;

}
.top {
    position: absolute;
    left: 40%;
}
.new{
    float: right;
    width: 33%;
    text-align: right;
}

.old a,.top a,.new a{
    text-decoration: none;
    padding: 0.5em;
    border: 1px solid #000;
    border-radius: 8%;
    font-weight: bold;
    color: black;
}
.old a:hover,.top a:hover,.new a:hover{
    background-color: white;
    color: blue;
}
.top img{
    width: 1em;
    vertical-align:bottom;
}


/*banner-single*/
.banner-single-excerpt{
    overflow: hidden;
    width: 100%;
}
.banner-img{
    float: left;
    width: 48%;
    height: auto;
}
.banner-text{
    float: right;
    width: 48%;
    height: auto;
        display: inline-block;
    font-weight: bold;
            text-align: left;
}
#attachment_66{
    float: left;
/*    clear: both;*/
}
#attachment_66 img{
    width: 50%;
    height: auto;
}


/*card-single*/
body > div > div.single-p > article.post-101 > div > p:nth-child(1) > img.alignnone.size-full.wp-image-103{
    float: left;
    width: 48%;
    height: auto;
}
body > div > div.single-p > article.post-101 > div > p:nth-child(1) > img.alignnone.size-full.wp-image-102{
    float: right;
    width: 48%;
    height: auto;
}
.card-text{
        text-align: left;
    display: inline-block;
    font-weight: bold;
    clear: both;
}


/*illustu-single*/
.illustu-excerpt{
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.illustu-img{
    float: left;
    margin-left: 12.5%;
/*    width: 48%;*/
}
.illustu-text{
    width: 48%;
    float: right;
    margin-right: 12.5%;
        text-align: left;
    display: inline-block;
    font-weight: bold;
}

/*omikiji*/
input#submit{
width: 194px;
    height: 90px;
    background:url(images/buttun.png) no-repeat 0 0;
    border-radius: 8%;
    cursor: pointer;
}
input#submit:active {
  position: relative;
  top: 1px;
}

button.button8:hover {
    /* 透明度を20%に指定 */
    opacity: 0.8;
}
#omikuji >a > img{
    width: 60%;
}
@media screen and (max-width:414px){
   #omikuji >a > img{
    width: 100%;
}
}
#lightbox .lb-container {
    background-color: #fff;
}
@media screen and (max-width:843px){
    header {
/*    overflow: hidden;*/
}
 h1 {
}
h1 img{
    width: 100%;
}

.nav {
    clear: both;
    float: none;
    margin-top: 8%;
    width: 100%;
}
    .bar {
    background-image: url(images/bar.png);
    background-repeat: no-repeat;
    background-position: right;
    color: #ececd0;
    mask-image: url(images/comic-text.png);
    -webkit-mask-image: url(images/comic-text.png);
    -o-mask-image: url(images/comic-text.png);
    -ms-mask-image: url(images/comic-text.png);
    text-indent: 0em;
}
    .nav a:nth-of-type(4){
        margin-right: 4%;
    }
    .site-box {
    width: 100%;
    height: auto;
    border: solid 6px #000;
    overflow: hidden;
    padding: 5px;
        box-sizing: border-box;
    margin-bottom: 10px;
    position: relative;
}


.site-box:nth-of-type(odd) {
    float: none;
}

.site-box:nth-of-type(even) {
    float: none;
}
    .excerpt {
    overflow: hidden;
    position: relative;
}

.thumbnail {
    width: 100%;
}

.thumbnail img {
    width: 100%;
    height: auto;
    float: none;
}

.excerpt p:nth-child(2) {
    width: 100%;
    float: none;
}

.banner-box{
    float: none;
    width: 100%;
    margin-bottom: 10px;
}
    .Illustu-box{
    float: none;
    width: 100%;
    margin-bottom: 10px;
}
.Illustu-thumbnail img {
    width: 50%;
    height: auto;
    margin: 0px 25%;
}
    .info-img{
    width: 100%;
    float: none;
    text-align: center;
}
.info-img img{
    width: 75%;
}
.info div.info-excerpt{
    width: 100%;
    height: auto;
    float: none;
    text-align: center;
}
    .skill img{
    width: 30%;
}
}
@media screen and (max-width:414px){
    body {
    /*
	font-family:'メイリオ',
		'Hiragino Kaku Gothic Pro ',
		'sans-seserif';
*/
    margin: 0;
    background-image: url(images/comic-top.png),url(images/comic-top-y.png), url(images/comic-yl.png);
    background-size: 0%,50%,100%;
    background-repeat: no-repeat,repeat-y,repeat;
    background-position: 21.5% -13.1%,-36.5% -1.1%;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.all {
    margin:0 5%;
	padding-left:10%;
}
    #omikuji > img{
    width: 100%;
}
    .bar{
background-position: 10px;
        text-indent: 4em;
    font-size: .5em;
		margin-top: 10px;
    }
        body > div > div.single-p > article.post-241> div > div > p:nth-child(1){
    width: 48%;
    height: auto;
    float: none;
    margin: 0;
}
    body > div > div.single-p > article > div > div > a:nth-child(1) > img{
        width: 100%;
    height: auto;
        margin-left: 3%;
    }

    body > div > div.single-p > article > div > div > a:nth-child(3) > img {
        display: none;
    }
    .pagenav {
    text-align: center;
        margin-bottom: 20px;
    }
    .old{float: none;}
    .top{float: none;
    position: static;}
    .new{float: none;}
    .old a,.top a,.new a{
    display: block;
    text-align: center;
        margin-bottom: 3%;
    }
    .nav a {
    display: block;
}
    /*magma*/
    body > div > div.single-p > article.post-241> div > div > div.magma{
        float: none;
        text-align: center;
        width: 100%;
    }
    body > div > div.single-p > article.post-241 > div > div > div > p:nth-child(1) > a > img{
        width: 50%;
        height: auto;
    }
    body > div > div.single-p > article.post-241 > div > div > div > p:nth-child(2) > a:nth-child(1) > img{
        margin-left: 0;
        width: 50%;
        height: auto;
    }
    body > div > div.single-p > article.post-241 > div > div > div > p:nth-child(2) > a:nth-child(2) > img{
        margin-left: 0;
        width: 50%;
        height: auto;
    }
    /*magma*/
    /*card*/
    body > div > div.single-p > article > div > p:nth-child(1) > a:nth-child(1) > img.alignnone.size-full.wp-image-103,
    body > div > div.single-p > article > div > p:nth-child(1) > a:nth-child(2) > img.alignnone.size-full.wp-image-102{
        width: 100%;
        height: auto;
    }
    /*illustu*/
    .illustu-img {
    width: 50%;
        margin: 0;
}
    .illustu-text {
        margin: 0;
        width: 100%;
    float: right;
    text-align: left;
    font-weight: bold;
}
body.postid-112,
body.postid-55
{
        margin: 0;
    background-image: url(images/comic-top-rd.png),url(images/comic-top-y-rd.png), url(images/comic-rd.png);
    background-image: 100%;
    background-repeat: no-repeat,repeat-y,repeat;
    background-position: 21.5% -13.1%,-36.5% -1.1%;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
    
body.postid-117,
body.postid-115,
body.postid-99,
body.postid-96,
body.postid-101
{
        margin: 0;
    background-image: url(images/comic-top-gr.png),url(images/comic-top-y-gr.png), url(images/comic-gr.png);
    background-image: 100%;
    background-repeat: no-repeat,repeat-y,repeat;
    background-position: 21.5% -13.1%,-36.5% -1.1%;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
    body.postid-136,
body.postid-134,
body.postid-126,
body.postid-124{
        margin: 0;
    background-image: url(images/comic-top-bl.png),url(images/comic-top-y-bl.png), url(images/comic-bl.png);
    background-image: 100%;
    background-repeat: no-repeat,repeat-y,repeat;
    background-position: 21.5% -13.1%,-36.5% -1.1%;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
    body > div > div.single-p > article > div > div > div > a > img{
            width: 200%;
    height: auto;
        float: none;
    }
    .banner-text {
    display: inline-block;
    font-weight: bold;
            width: 100%;
    text-align: left;
}
}