/* COMMON ________________________________________*/

@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic');


body{
	font-family:'Didact Gothic','Muli','Lato','YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体','ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height:1.4;
	color: #333;

	background: #f4f4f4;
	opacity: 0;
	transition: 0.3s;
	}

.gothic{
	font-family:'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体','ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	}

.mincyo{
	font-family:'A-OTF A1明朝 Std','A-OTF A1 Mincho Std','ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* 游ゴシックwin対応 */
.win p,
.win a,
.win li,
.win h1,
.win h2,
.win h3,
.win h4,
.win h5,
.win h6,
.win dt,
.win dd,
.win td,
.win th,
.win span,
.win div
{
	font-weight: 500;
}

body,html{
	/*height:100%;*/
	letter-spacing:0.1em;
}

::selection{
	background:#eee;
}

p,
dd,
li,
table{
	line-height:2em;
	/* line-height:1em; */

	font-size:14px;
	letter-spacing:0.12em;
	margin-bottom: 1.5em;
}
.small{
	font-size: 13px;
}
.sp p,
.sp table{
		/* font-size:14px; */
	}

a,
a:after{
	color:#666;
	/* background: #fff; */
	}

a:hover{
	/* border-color: transparent !important; */
	color: #000;
	}

p a{
	color: #000;
	text-decoration: underline;
}

img{
	width:100%;
	}

.anime{
	transition: all 0.3s ease-out;
	}

.pc .onlySP,
.sp .onlyPC{
	display:none;
	}

.relative{
	position:relative;
	}

.caption{
	font-size:11px !important;
	line-height: 1.8;
}

.ate{
	font-size: 11px;
	color: #aaa;
}

strong{
	font-weight: bold;
}

.picR{float:right;margin:0 0 0 30px;display: block;}
.picL{float:left;margin:0 30px 0 0;display: block;}

.nowrap{white-space: nowrap;}

.left{float:left;}
.right{float:right;}
.center{
	margin: 0 auto;
}


.aka{
	color:#f00 !important;
}

.dimg{
	position: relative;
}

.dimg::after{
content:"画像はダミーです";
position: absolute;
right:10px;
top:20px;
color: #555;
color: #ccc;
font-size:11px;
}

.show{
	display: block;
}

.column2 li,
.column2 div,
.column3 li,
.column3 div{
	float: left;
}
.column2 li:nth-of-type(2n),
.column2 div:nth-of-type(2n){
	margin-right:0 !important;
}
.column3 li:nth-of-type(3n),
.column3 div:nth-of-type(3n){
	margin-right:0 !important;
}


/* pjax */

/* 動きのタイミング */
#contents.fadeOut {
    -webkit-animation: fadeOut .5s cubic-bezier(.55,0,.1,1) both;
    animation: fadeOut .5s cubic-bezier(.55,0,.1,1) both;
}
#contents.fadeIn {
    -webkit-animation: fadeIn .5s cubic-bezier(.55,0,.1,1) both;
    animation: fadeIn .5s cubic-bezier(.55,0,.1,1) both;
}

@-webkit-keyframes fadeOut { to { opacity: 0; -webkit-transform: scale(1); }}
@keyframes fadeOut { to { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }}
@-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: scale(1); }}
@keyframes fadeIn { from { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }}



/* owl */
.owl-dots{
	margin:25px 0 0 0;
	/* display: none; */
}
.flow .owl-dots{
/* display: block; */
}

.owl-dot{
	display:inline-block;
	padding:15px 16px 15px 0;

	/* display:none; */
}
.owl-dot span{
	background: #999;
	width: 12px;
	height:12px;
	border-radius: 100px;
	display: block;

}
.owl-dot.active span{
	background: #000;
}




/*pageNav
________________*/
.pageNav{
	text-align: center;
	position: absolute;
	bottom:0;
	right: -130px;
}

.pageNav .pages,
.pageNav .page,
.pageNav .current
{
	display: none !important;
}

.pageNav a{
	display: inline-block;
	/* font-size: 100px; */
	margin-left: 35px;
	background:url("../img/arr.svg") no-repeat;
	width: 18px;
	height: 36px;
	text-indent: -9999px;
}
.pageNav a:hover{
}
.pageNav a.previouspostslink{
	transform: rotate(180deg);
}


/*header*/
header{
	background: #fff;
	height: 90px;
	position: fixed;
	top:0;
	width: 100%;
	z-index: 99;
}

h2{
	width: 120px;
	position: absolute;
	top:40px;
	right:50px;
	right:100px;
	z-index: 2;
}

header ul{
	width: 800px;
	/* background: #eee; */
	margin: 0 auto;
	text-align: right;
	box-sizing: border-box;
	position: absolute;
	right:210px;
	top: 30px;
}

header ul li{
	display: inline-block;
	font-size: 14px;
	margin: 0 0 0 28px;
	letter-spacing: 2px;
}

header ul li a{
	padding: 12px 6px;
}
header ul li a:hover
,footer ul li a:hover
,#aboutpage li.navA a
,#pspage li.navP a
,#workstoppage li.navW a
,#gallerypage li.navG a



{
	border-bottom: 1px solid #333;
}



/*wrap*/
#contents{
	margin:160px 0 50px;
	position: relative;
}

.contentsIn{
	width:860px;
	/* margin: 0 auto; */
	margin: 70px auto;
	/* background: red; */
}
.sp .contentsIn{
	/* width: auto;
	margin:30px; */
}

.contentsInW{
	width:1000px;
	margin: 0 auto;
}
.sp .contentsInW{
	/* width: auto; */
}


/* footer ________________________________________*/
footer{
	background: #fff;
	padding: 30px 0;
}

footer p.logo{
	width: 100px;
	margin: 0 auto;
	line-height: 1;
}

footer .info{
	font-size: 12px;
	text-align: right;
	float: right;
	margin-right: 55px;
	margin-top: 15px;
}
footer .info p{
	margin-bottom: 1em;
	line-height: 1.5em;
}
footer .info .copyr{
	margin-bottom: 0em;
	font-size: 11px;
	color: #666;
}
footer .info .copyr a{
text-decoration: none;
}


footer ul {
	float:left;
	margin-left: 55px;
	margin-top: 23px;
	width: 450px;
}
footer ul li{
	width: 9.5em;
	float:left;
	margin-right: 2em;
	margin-bottom: 0.5em;
	font-size: 12px;
}
footer ul li.navP{
	width: auto;
}
footer ul li a{
	padding-bottom: 3px;
}

.pagetop{
	z-index: 2;
	position: fixed;
	bottom:125px;
	right:70px;
	cursor: pointer;
	display: none;
}


.pagetop.scroll{
	display: block;
}

.pagetop a{
	width: 18px;
	height:36px;
	background:url(../img/arr.svg) no-repeat ;
	display: block;
	transform: rotate(-90deg);

}




/* 404 */

.searchgo{
	margin: 150px auto 80px;
}
#searchpage .searchgo{
	margin-top: 0;
}

.notfoundpage .searchform input[type="text"]{
	height: 40px;
	float: none;
	width: 420px;
	font-size: 20px;
	padding: 10px 15px;
}
.sp .notfoundpage .searchform input[type="text"]{
	height: 40px;
	float: none;
	width: 100%;
	font-size: 20px;
	padding: 10px 15px;
}

.searchgo .icon{
	background: url(../img/search.svg) no-repeat;
	width: 40px;
	height: 40px;
	float: left;
	margin-left: 20px;
	margin-top: 9px;
}

/*  page common
__________________*/
.linkA a{
	display: block;
	padding:15px 10px;
	width: 350px;
	border:#999 1px solid;
	text-align: center;
	position: relative;
	font-size: 16px;

	margin: 0 auto;
	text-decoration: none;

	/* transition: 0.1s;
	top:0px;
	left:0px; */
}
.linkA a:after{
	display: block;
	content:"";
	width: 350px;
	height: 20px;
	padding: 10px;
	position: absolute;
	bottom:-5px;
	left: 5px;
	border:#999 1px solid;
	border-top: none;
	border-left: none;
}

.linkA a:hover{
	top:5px;
	left:5px;
}

.linkA a:hover:after{
	content:none;
}

.linkB a{
	display: block;
	border:#999 1px solid;
	padding: 7px;
	text-align: center;
	text-decoration: none;
}
.linkB a:hover{
	/* color: #fff; */
	border-color: #fff;
}


/* TOP ________________________________________*/
#toppage #contents{
	margin-top: 90px;
}
.toppage h1{
	width: 74px;
	position: absolute;
	right: 50px;
	right: 100px;
	top:150px;
}


.mainV{
	margin:0px 250px 0 0;
}
.mainVbox{
	width: calc(100vw - 250px);

}


.mainV .mainVbox img{
	/* width: calc(100% - 250px); */
	}

/* .mainV>div{
	margin:0px 250px 0 0;
} */

.topread{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: absolute;
	right: 88px;
	top:650px;
	z-index: 2;
	background: #f4f4f4;
	line-height:2.2em;

	/* font-size: 14px; */
}
.aboutlink{
	margin: 100px 0;
}

.toppage .linkA{
	/* margin: 100px 0; */
}

.toppage .worksslide{
	width: 100%;
	margin-top: 130px;
}

.toppage .worksslide div.worksBox{
	/* width: 320px; */
	width: 300px;
	margin:0 20px;
}

.toppage .topbottom{
	margin-top: 80px;
}

.toppage .topbottom .left{
	width: 390px;
	/* background: red; */
}
.toppage .topbottom .btns p{
	margin-bottom: 30px;
}

.toppage .topbottom .map{
	margin-top: 80px;
	position: relative;
}
.map iframe{
	border: #fff 3px solid !important;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.toppage .topbottom .map .linkB{
	width: 120px;
	bottom:40px;
	right: 0;
	position: absolute;
	margin-bottom: 0;
}

.toppage .topbottom .right{
	width: 470px;
	/* background: red; */
}

h3{
	font-weight: bold;
	font-size: 26px;
	line-height: 1.8;
    margin-bottom: 20px;
}

.toppage h3{
	font-size: 20px;
	margin-bottom: 10px;

}


/* pages
_________________ */
#contents{
}


h1{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 33px;
	letter-spacing: 6px;
	position: absolute;
	top:80px;
	right:60px;
}

.coverimg{
	margin-right: 250px;
	/* max-width: 1000px; */
}

.read{
	width: 720px;
	/* position: absolute;
	right:250px; */

	/* margin-right:250px;
	float: right; */
	margin:30px auto;

}

/* about01
_____________________ */
.aboutpage .about01{}

.aboutpage .read div{
	width:150px;
	float:left;
}
.aboutpage .read p{
	width:500px;
	float:right;
}

.aboutpage .line{
	display: block;
    background: #fff;
    height: 2px;
    width: 460px;
    position: absolute;
    top: 800px;
    left: 260px;
    transform: rotate(45deg);}
.aboutpage .artist{
	height: 700px;
	position: relative;
	margin-top: 100px;
}

.portrait{
	width: 360px;
}
.artist .info{
	width: 460px;
    margin-right: 0;
}

.masao.artist .info{
	width: 540px;
	margin-right: -80px;
	}


.artist .info p{
	/* line-height: 2.0; */

}
.artist .info p.job{
	font-size: 15px;
	margin-bottom: 5px;
	/* margin-top: 60px; */
	margin-top: 15px;
}
.artist .info p.name{
	font-size: 30px;
	margin-bottom: 40px;
	font-weight: bold;
}
.artist .info p.name span{
	font-size: 12px;
	margin-left: 15px;
	letter-spacing: 3px;
}

.artist .info p.message{
	font-size: 22px;
	margin-bottom: 15px;
}
.artist .info p.message,
.artist .info p:last-of-type{
	margin-left: 25px;
}


.aboutpage .profile{
	position: absolute;
	top:565px;
	width:240px;
	font-size: 13px;
	line-height: 1.8;
}
.aboutpage .hisako .profile{
	right: 0;
}

.aboutpage .works{
	position: absolute;
	top:530px;
	left:290px;
}
.aboutpage .hisako .works{
	left:0;
}

.works li{
	width: 160px;
	float:left;
	margin-right: 45px;
	line-height: 1;
	position: relative;
}
.works li:hover{
	opacity: 0.7;
}
.works li:after{
	content:"";
	width: 23px;
	height: 23px;
	background:url("../img/zoom.svg");
	display:block;
	position: absolute;
	bottom:-10px;
	right:-10px;
	cursor: pointer;

}

.works li:last-of-type{
	margin-right: 0 !important;
}

.aboutpage .artist p.tl{
	font-size: 20px;
	position: absolute;
	bottom:40px;
	right:-120px;
	letter-spacing:4px;
	color:#ccc;
}
.aboutpage .artist.hisako p.tl{
	right:auto;
	left:-120px;
}

/* ps
________________ */
.psBox01 .pic{
	position: relative;
}
.psBox01 .pic .pic02{
	width: 400px;
	margin:50px 0 0 190px;
	display: block;
}
.psBox01 .pic .pic03{
	width: 450px;
	position: absolute;
	top: 510px;
    right: -140px;
	display: block;

}

.flow>div{
	margin-top: -20px;
	width: 860px;
}
.pspage .flow .flowbox{
	position: relative;
	width:860px;
	padding-top: 40px;
}
.pspage .flow .flowbox img{
	width: 600px;
}

.pspage .flow .flowbox .no{
	font-size: 60px;
	font-weight: bold;
	position: absolute;
	top:0;
	left:560px;
	letter-spacing: 15px;
	line-height: 1;
}

.pspage .flow .flowbox .info{
	position: absolute;
	top:70px;
	left:640px;
}

.pspage .flow .flowbox .tl{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0.6em;
	margin-top: 30px;
}

.pspage .owl-nav{
	position: absolute;
	top:0;
	width: 100%;
}

.pspage .owl-prev,
.pspage .owl-next{
	position: absolute;
	right: 0;
	top:10px;
	/* text-indent: -9999px; */
	font-size: 0;
	color:transparent;
	background: red;
	width: 22px;
	height:42px;
	background:url(../img/arr.svg) no-repeat ;

}
.pspage .owl-prev{
	right: 60px;
	transform: rotate(180deg);
}

.pspage .masao .pic{
	margin-left: 140px;
	position: relative;
	margin-top: 20px;
}
.pspage .masao .pic .pic01{
	width:420px;
}
.pspage .masao .pic .pic02{
	width:270px;
	position: absolute;
	top:0;
	right:0;
}
.pspage .masao .pic .pic03{
	width:270px;
	position: absolute;
	top:200px;
	right:0;
}

/* gallerypage
__________________ */
.gallerypage h1 span{
	position: relative;
}

.gallerypage h1 span:after{
	content:"ふう";
	display: block;
	position: absolute;
	right:-15px;
	top:3px;
	font-size: 12px;
}

.gallerypage .contentsIn>div p{
	float: right;
	width: 270px;
}
.gallerypage .contentsIn img.main{
	width: 550px;
	float: left;
}
h4{
	font-size: 20px;
	margin-bottom: 25px;
	margin-top: 35px;

}
.gallerypage .student,
.gallerypage .otherschool{
margin-left: 30px;
width: 860px;
}

.gallerypage .student li{
	width: 265px;
	margin:0 30px 30px 0;
	line-height: 1;
}

.gallerypage .otherschool div{
	width: 245px;
	margin:0 60px 30px 0;
	border-top: 1px solid #555;
	padding-top: 20px;
}
.gallerypage .otherschool div p{
	font-size: 13px;
}

.contentsIn.anchor{
	padding-top: 140px;
	margin-top: -90px;
}

.gallerypage .column2{
	margin-top: 30px;
}
.gallerypage .column2 li{
	width: 400px;
	margin-left: 30px;
}
.gallerypage .coffee .column2{
	/* margin-top: 30px; */
}

/* workspage
_________________*/

.workstoppageblock,
.buytext{
	width: 580px;
	margin: 0 auto 30px;
}
.workstoppage .keisuke
,.workstoppage .hisako
{
width: 160px;
float:left;
margin: 20px auto;
}
.workstoppage .hisako{
	float: right;
}
.workstoppageblock p{
	font-size: 18px;
	/* font-weight: bold; */
	margin-bottom: 20px;
}

.workstoppageblock li{
	/* width: 160px; */
	margin-bottom: 20px;
}
.workstoppageblock li:hover{
	opacity: 0.7;
}




#workspage #contents {
    margin-top: 40px;
}
#workspage header
/* ,#workspage footer */
{
	display: none;
}
p.close{
	position:absolute;
	top:0;
	right:30px;
}
p.close a{
	width:38px;
	height: 38px;
	display: block;
	position: relative;
}
p.close a span{
	height: 1px;
	background: #999;
	width: 40px;
	display: block;
	transform: rotate(45deg);
	position: absolute;
	top:15px;
}
p.close a span:last-of-type{
	transform: rotate(-45deg);
}

p.next,
p.back{
	width: 17px;
	position:absolute;

}
p.next{
	top:70px;
	right:38px;
}
p.back{
	top:135px;
	right:40px;
	transform: rotate(180deg);
}




.worksimg{
	width: 1100px;
	margin: 0 auto;
}
.worksimg.tate{
	width: 800px;
}

.workspage h1{
	font-size: 22px;
	top:10px;
	right:-125px;
	/* right: 0; */
}
.workspage h3{
	font-size: 32px;
	letter-spacing: 3px;
	margin-bottom: 0.1em;
}
.workspage p.year{
	font-size: 18px;
	/* position: absolute;
	right:0;
	top:10px; */
}
.otherworks{
	margin: 100px auto 0;
	width: 660px;
	position: relative;
}

.otherworks .works li{
margin-right: 90px;}

.otherworks .works li:after{
	content:none;
}

.addinfo{
	margin: 50px auto;
	width: 660px;
	border-top: 1px solid #999;
	padding-top: 20px;
}
.addinfo p:first-of-type{
	width: 500px;
	float: left;
	font-size: 12px;
}
.addinfo p.linkB{
	width: 150px;
	float: right;
	margin-top: 3px;
}