@charset "utf-8";
/*-----------------------------------------------------
common
--------------------------------------------------------*/
	.forPC,
	.forTB{display:none;}
	.forSP{display:inherit;}

/*-----------------------------------------------------
sp
-------------------------------------------------------*/
html{font-size:10px;}
img {max-width:100%; height:auto;}
body{font-size:1.4rem;}
@media screen and (max-width: 374px) {
	body{font-size:1.2rem;}
}
/*--------------------------------------------------------------------
   wrap
---------------------------------------------------------------------*/
.wrapBox,
#ftrIn{
    padding-left:15px;
    padding-right:15px;
}

/*--------------------------------------------------------------------
   footer
---------------------------------------------------------------------*/
footer{padding:0 0 25px;}
footer #ftrIn{
    padding-top:75px;
    padding-bottom:40px;
    background-image:url(../images/pic_ftr_01.png);
    background-repeat:no-repeat;
    background-position: 50% 120px;
    background-size:165px auto;
    overflow:hidden;
}
footer #ftrIn .title{
    font-size:3rem;
    display:inline-block;
    position:relative;}

footer #ftrIn .title::before{
    content:"";
    display:block;
    width:95px;
    height:80px;
    background:url(../images/pic_02.png) 0 0 no-repeat;
    background-size:contain;
    position:absolute;
    left:-115px;
    top:-30px;
}
footer #ftrIn .title::after{
    content:"";
    display:block;
    width:83px;
    height:74px;
    background:url(../images/pic_03.png) 0 0 no-repeat;
    background-size:contain;
    position:absolute;
    right:-120px;
    top:-15px;
}
footer #ftrIn a{
    width:240px;
    height:46px;
    border-radius:23px;
    line-height:46px;
}
footer #page-top{
    position:static;
    width:137px;
    height:76px;
    margin:0 auto 30px;
}

/*--------------------------------------------------------------------
   mainTitle
---------------------------------------------------------------------*/
#mainTitle h1{
    width:100%;
    padding:25px 0 20px;
    font-size:2.5rem;
}
#mainTitle h1 span{
    font-size:1.2rem;
    padding-top:10px;
}
#mainTitle h1::before,
#mainTitle h1::after{background-position:center top;}
#mainTitle.profile h1::before{
    background-position:center bottom;
    width:22%;
    height:63px;
    left:10px;
    bottom:-10px;
}
#mainTitle.profile h1::after{
    width:19%;
    height:94px;
    right:10px;
    top:-10px;
}

#mainTitle.gallery h1::before{
    width:21.8%;
    height:88px;
    left:10px;
    top:-10px;
}
#mainTitle.gallery h1::after{
    background-position:center bottom;
    width:23%;
    height:43px;
    right:10px;
    bottom:-10px;
}

#mainTitle.blog h1::before{
    width:17.8%;
    height:92px;
    left:10ox;
    top:-10px;
}
#mainTitle.blog h1::after{
    background-position:center bottom;
    width:21.2%;
    height:77px;
    right:10px;
    bottom:-10px;
}

#mainTitle.contact h1::before{
    background-position:center bottom;
    width:16.2%;
    height:79px;
    left:10px;
    bottom:-10px;
}
#mainTitle.contact h1::after{
    width:21.6%;
    height:94px;
    right:10px;
    top:-10px;
}

/*--------------------------------------------------------------------
   container
---------------------------------------------------------------------*/
#container{ padding:40px 0 40px;}
#container.second{ padding:40px 15px 50px;}
#container.second.blog{ padding:40px 0 20px;}
/* base
-----------------------*/
div[id="container"].second p + p,
div[id="container"].second p + ul,
div[id="container"].second p + ol,
div[id="container"].second p + dl,
div[id="container"].second p + table,
div[id="container"].second p + div,
div[id="container"].second ul + p,
div[id="container"].second ul + ul,
div[id="container"].second ul + ol,
div[id="container"].second ul + dl,
div[id="container"].second ul + table,
div[id="container"].second ul + div,
div[id="container"].second ol + p,
div[id="container"].second ol + ul,
div[id="container"].second ol + ol,
div[id="container"].second ol + dl,
div[id="container"].second ol + table,
div[id="container"].second ol + div,
div[id="container"].second dl + p,
div[id="container"].second dl + ul,
div[id="container"].second dl + ol,
div[id="container"].second dl + dl,
div[id="container"].second dl + table,
div[id="container"].second dl + div,
div[id="container"].second table + p,
div[id="container"].second table + ul,
div[id="container"].second table + ol,
div[id="container"].second table + dl,
div[id="container"].second table + table,
div[id="container"].second table + div,
div[id="container"].second div + p,
div[id="container"].second div + ul,
div[id="container"].second div + ol,
div[id="container"].second div + dl,
div[id="container"].second div + table{margin-top:15px;}

div[id="container"].second p + h3,
div[id="container"].second ul + h3,
div[id="container"].second ol + h3,
div[id="container"].second dl + h3{margin-top:20px;}

div[id="container"].second * + h3{margin-top:20px;}

/* title
-----------------------*/
div[id="container"].second h2{
    font-size:2rem;
    margin-bottom:20px;    
}
div[id="container"].second h3{
    border-radius:9px;
    font-size:1.6rem;
    margin-bottom:30px;
    padding:5px 20px;
}
/* btn
-----------------------*/
.btn01,
.topCont01In a,
.topCont02In a{
    height:44px;
    border-radius:22px;
    line-height:44px; 
    font-size:	1.2rem;
}

/*--------------------------------------------------------------------
   toppage
---------------------------------------------------------------------*/
/* mainimage
---------------------------------------------------------*/
#mainImageOut,
#mainImage li .inner{padding-top:53.333%;}
#mainImage li #main01,
#mainImage li #main02,
#mainImage li #main03,
#mainImage li #main04{background-size:cover;}

#mainImage .bx-prev,
#mainImage .bx-next{ display:none; }

/* box
----------------------------------------------------*/
/*top01*top02*/
#topCont01,
#topCont02{
    padding:0 15px 50px;
    background:none;
    overflow:hidden;
}
.topCont01In{
    width:auto;
    max-width:none;
    margin-right:0;
    padding-top:0;
    float:none;
}
.topCont02In{
    width:auto;
    max-width:none;
    margin-left:0;
    padding-top:0;
    float:none;
}
.topCont01In h2,
.topCont02In h2,
#topCont03 .title h2{font-size:3rem; margin-bottom:20px;}
#container .topCont01In h2 span,
#container .topCont02In h2 span,
#container #topCont03 .title h2 span{font-size:1.2rem;}
.topCont01In h3,
.topCont02In h3{font-size:1.5rem;}

.topCont01In p,
.topCont02In p{
    position:relative; 
    padding-bottom:55% !important;
    margin-bottom:30px;
}
.topCont01In p::before{
    content:"";
    display:block;
    width:100%;
    padding-top:50%;
    background-image:url(../images/img_top_01.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center bottom;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

.topCont02In p::before{
    content:"";
    display:block;
    width:100%;
    padding-top:50%;
    background-image:url(../images/img_top_02.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center bottom;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

/*top03*/
#topCont03{
    padding:0px 0 20px;
}
#topCont03 .title,
#topCont03 .btnArea{
    width:auto;
    float:none;    
}
#topCont03 .btnArea{padding-top:15px;}
#topCont03 .newsList{
    width:auto;
    float:none;    
}
#topCont03 .newsList li{
    padding:0 15px 30px;
    text-align:left;
}
#topCont03 .newsList li a{
    display:block;
    width:100%;
    margin:0 auto;
}
#topCont03 .newsList li img{margin-bottom:0;}
#topCont03 .newsList li span{margin-bottom:0;} 
#topCont03 .btnArea ul{margin:25px auto 0;}

/*--------------------------------------------------------------------
   local second
---------------------------------------------------------------------*/
/* profile
----------------------------------------------------*/
.boxProfile01{
    padding-bottom:60px;
    overflow:hidden;
    position:relative;
}
.boxProfile01 img{width:41.5%; margin-bottom:30px;}
.boxProfile01 .txt{width:52.5%;}
.boxProfile01 .txt span.name{
    margin-top:-5px;
    margin-bottom:10px;
    font-size:2rem;
    display:block;
}
.boxProfile01 .txt span.name span{
    padding-top:0;
    margin-top:-10px;
    margin-left:0;
    display:block;
    font-size:1.4rem;
}
.boxProfile01 .txt ul{margin-bottom:30px;}
.boxProfile01 .txt ul li{line-height:1.5; font-size:1.2rem;}
.boxProfile01 .txt ul li + li{margin-top:15px;}

.boxProfile01 > p{
    width:auto;
    float:none;
    clear:both;
    margin-top:0px;}
.bookList .item{width:50%;}

.boxWorks ul{border-top:#e5e1d7 1px solid;}
.boxWorks li{
    padding:15px 0;
    border-bottom:#e5e1d7 1px solid;
    }

/* gallery
----------------------------------------------------*/
.lNav{padding-bottom:40px;}
.lNav li{
    width:150px;
    max-width:45%;
    margin:0 5px;
    padding-bottom:15px;
}
.lNav li a{
    height:40px;
    border-radius:20px;
    line-height:40px;
    font-size:1.1rem;
}
.lNav li a::after{right:10px;}
.galleryIndex{padding-bottom:50px;    
}
.galleryIndex .galleryOuter a{
    display:block;
    width:30%;
    margin-right:5%;
    }
.galleryIndex .galleryOuter a.nth05{margin-right:5%;}
.galleryIndex .galleryOuter a.nth03{margin-right:0 !important;}

/* contact
----------------------------------------------------*/
#container .txtContact01{ padding:15px; margin-bottom:15px;}

/* form
----------------------------------------------------*/
#form table{margin-bottom:40px;}
#form table th,
#form table td{
    display:list-item;
    list-style:none;
    padding-left:0;
    padding-right:0;
}
#form table th{
    width:auto;
    border-bottom:none;
    padding:10px 15px;
}
#form table input[type="text"],
#form table input[type="email"],
#form table input[type="url"],
#form table textarea{
    width:100%;
}
#form .btn{padding-top:0;}
#form .btn input,
.btnThanks a{
    height:44px;
    border-radius:22px;
    line-height:44px;
}
#form .btn input
.btnThanks a{max-width:80%;}

/* blog
----------------------------------------------------*/
/*layout*/
#container.blog article{
    width:100%;
    margin-left:0;
    padding-left:0;
    float:none;
}
#container.blog aside{
    width:auto;
    float:none;
    padding:50px 15px 0;
}
/*side*/

#container.blog aside .sidebox01 select{
    background:#e9e7e3 url(../images/select.svg) 98% 50% no-repeat;
    background-size:10px auto;
}

/* article
--------------*/
article section{
    padding-left:15px;
    padding-right:15px;    
}
article section + section{
	margin-top:50px;
    padding-top:50px;
}
article .title{margin-bottom:20px;}
article .title span{margin-right:1em;}
#container.second article .title h2{font-size:2rem;}
#container.second article .post p + p{margin-top:15px;}
#container.second article .post > img{ margin:15px auto;}
.pageNav{
    padding-left:15px;
    padding-right:15px;
}


@media screen and (max-width: 374px) {
    /*iphone5*/
}