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

@import url(//fonts.googleapis.com/css?family=Annie+Use+Your+Telescope);
@import url(//fonts.googleapis.com/css?family=Domine:400,700);

br.sp{
	display: none;
}

html{
	width:100%;
	height:100%;
}
body{
	/*	background:#93C2EC url(http://www.kojimachi-cafe.com/common2016/images/bg.jpg) repeat-x 20% 140px fixed;*/
	background:#FFF;
	margin: 0;
	padding: 0;
	font-size:80%;
	font-family:"游明朝体", "Yu Mincho","ヒラギノ明朝 ProN W6","HiraMinProN-W6","HGP明朝E", "ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	width:100%;
	height:100%;
	background-size:cover;
}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
img{
	border:none;
}

div#header{
	width:100%;
	height:666px;
	overflow: hidden;
	margin:0 auto;
	position: relative;
	background-color: #333;
	z-index: 100;
}
.noimg div#header{
	height:186px;
}
div#header .img,div#header .img .carousel div{ 
	width:100%;
	height:666px;
	overflow: hidden;
}
div#header .img > img{ 
	opacity: 0.4;
	width: 100%;
	min-height: 100%;
}
div#header .carousel > img,div#header .carousel > div > img{ 
	opacity: 0.8;
	width: 100%;
	height: auto;
}

div#header .carousel div{
	float: left;
	position: relative;
}



div#header div#logo{
	position: absolute;
	left: 50%;
	top: 30px;
	width:238px;
	margin:0 auto 0 -119px;
	color: #6992BA;
	z-index: 101;
}
.home div#header div#logo{
	top: 50px;
	width:320px;
	margin:0 auto 0 -160px;
}
div#header div#logo img{
	width: 100%;
}





div#header div#tel{
	position:absolute;
	left:50%;
	top:30px;
	width: 200px;
	margin: 0 0 0 300px;
	font-family: "Times New Roman",serif;
	font-size:12px;
	text-align: right;
	color:#FFFFFF;
	text-shadow:0px 0px 8px rgba(0,0,0,0.7);
	z-index: 102;
}
div#header div#tel p{
	margin:10px 0 5px;
	letter-spacing: 1px;
}
div#header div#tel .big{
	font-size:24px;
	letter-spacing: 0px;
}
div#header div#tel a{
	color:#FFFFFF;
}

div#logo.small{
	width:100px;
	margin:0 auto;
	color: #6992BA;
}



div#navi{
	position: absolute;
	top: -550px;
	width:100%;
	font-family: 'Domine', serif;
	font-size:14px;
	color: #002a42;
	height: 45px;
	position: relative;
	letter-spacing: 1px;
	text-align: center;
	z-index: 103;
}
.home div#navi{
	top: -500px;
}
.noimg div#navi{
	top: -70px;
}
div#navi ul{
	margin:0;
	padding:0;
}
div#navi li{
	display: inline-block;
	margin:0 22px;
	padding:0;
	list-style-type:none;
}

div#navi a{
	display:block;
/*	color: #002a42;*/
	color: #FFFFFF;
	text-shadow:0px 0px 8px rgba(0,0,0,0.7);
	padding:10px 0;
	position:relative;

	text-decoration:none;
}
div#navi a.select{
	color: #FFED22;
}

div#navi div.fb-like{
	position:absolute;
	right:0px;
	top:10px;
}

nav + h2{
	position: absolute;
	width: 100%;
	top: 300px;
	text-align: center;
	z-index: 104;
}

nav + h2 span{
	display: inline-block;
	border:1px solid #FFF;
	padding: 10px 30px;
	font-size: 40px;
	font-family: "Times New Roman",serif;
	color: #FFF;
	font-weight: normal;
	letter-spacing: 4px;
}
.noimg nav + h2{
	position: static;
	margin: -20px 0 30px;
}
.noimg nav + h2 span{
	color: #807b71;
    border-color: #807b71;
}





div#body{
	width:950px;
	margin:0 auto;
	color: #575033;
	text-shadow:0px 0px 10px rgba(255,255,255,1.0);
}


div#body.wide{
	width:100%;
}

div#body div.left{
	float:left;
	width:320px;
	margin:0 10px 0 0;
}
div#body div.main{
	float:left;
	width:640px;
	margin:0 20px 0 0;
}
div#body div.center{
	float:left;
	width:320px;
	margin:0 10px 0 0;
}
div#body div.right{
	float:right;
	width:190px;
	margin:0 0px 0 0;
	position: relative;
}
div#body div.contents{
	width: 950px;
	margin:0 auto;
}
div#body div.half{
	width: 450px;
}

div#body a{
	color: #000;
}


div#body h2{
	line-height: 1.5;
}


div#body h2.ttl{
	font-family: 'Domine', serif;
	font-size:250%;
	margin: 0 0 20px;
}

div#body p{
	line-height:1.8;
	text-shadow:none;
}


header.ttl{
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
	margin: 50px 0;
	min-width: 950px;
}

header.ttl img{
	position: absolute;
	bottom: -20%;
}

header.ttl h2{
	position: absolute;
	width: 100%;
	top: 100px;
	left: 0px;
	text-align: center;
	z-index: 104;
}
header.ttl h2 span{
	display: inline-block;
	border:1px solid #FFF;
	padding: 10px 30px;
	font-size: 40px;
	font-family: "Times New Roman",serif;
	color: #FFF;
	font-weight: normal;
	letter-spacing: 4px;
	text-shadow:none;
}
header.ttl.half{
	float:right;
	width: 560px;
	height: auto;
	min-width: 560px;
	margin:0;
}
header.ttl.half img{
	position: static;
}






div#body div.blog{
	float: left;
	background:url(http://www.kojimachi-cafe.com/common2016/images/bg_paper.png) repeat 0% 0%;
	background-size:contain;
	box-sizing:border-box;
	padding:17px;
	line-height:17px;
	border:1px solid #DDD;
	width:32%;
	height: 470px;
	margin:0 0.5% 20px;
}
div#body div.blog.wide{
	float: none;
	width:80%;
	height: auto;
	margin: auto;
	border: none;
}


div#body div.blog h2{
	margin:17px 0;
	font-size: 120%;

}







div#body div.photo{
	padding:10px;
	background-color:#FFFFFF;
	margin:0 0 10px;
	border: 1px solid #DDD;

	background:url(http://www.kojimachi-cafe.com/common2016/images/bg_photo.gif);
	background-size:cover;
}
div#body div.photo.even{
}
div#body div.photo h2{
	font-size: 90%;
	float:left;
	font-family: 'Domine', serif;
	color: #9EC5EC;
	line-height: 100%;
}
div#body div.photo h3{
	font-size: 100%;
	text-align:right;
	padding: 0 0 0 100px;
}
div#body div.photo h3 a{
	text-decoration:none;
	color:#002a42;
}
div#body div.photo img.cover{
	width:290px;
	position:absolute;
	margin:-10px 0 0 -10px;
	
}
div#body div.photos div.photo img.cover{
	width:200px;
	position:absolute;
	margin:-10px 0 0 -10px;
	
}
div#body div.center div.photo img.cover{
	width:220px;
	position:absolute;
	margin:-10px 0 0 -10px;
	
}
div#body div.about div.photo{
	width:290px;
	display: inline-block;
	padding: 0px;
	text-align: center;
    transform: rotate(0deg); /* 回転:45度傾ける */
    -webkit-transform: rotate(0deg); /* 回転:WebKit用 */
    -moz-transform: rotate(0deg); /* 回転:Mozilla用 */
    -o-transform: rotate(0deg); /* 回転:Opera用 */
	margin: 0 10px 20px;
}




div#body div.catering div.photo h3{
	text-align:left;
	padding:0 0 0 10px;
}
div#body div.photos div.photo h3{
	text-align:left;
	padding:0;
	font-size:90%;
}

div#body div.center div.photo{
	width:200px;
	margin:0 0 20px auto;
	position:relative;
	left:100px;
	top:50px;
}























div#footer{
	margin:100px 0 0 0;
	padding:50px 0 50px;
	background-color:#f4f4f4;
	color:#000;
	font-family:"Times New Roman","ヒラギノ明朝 ProN W6","HiraMinProN-W6","HGP明朝E","游明朝体", "Yu Mincho", YuMincho, "ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	font-size:14px;
}
div#footer a{
	color:#000;
}
div#footer .logo{
	width:230px;
	margin:0 0 20px;
}

div#footer ul,
div#footer .contents{
	position:relative;
	width:950px;
	margin:0 auto 10px;
	padding:0;
	list-style-type:none;
	text-align:left;
}

div#footer ul li,
div#footer p{
	margin:0;
	padding:2px 0;
	line-height:1.5;
}
div#footer p.inline{
	display: inline-block;
	margin: 10px 30px 0 0;
}

div#footer ul a{
	color:#000;
	text-decoration:none;
}
div#footer .footerlogo{
	padding:10px 0 0;
	margin-left: -10px;
	width: 500px;
}
div#footer .footerlogo + .footerlogo{
	padding:10px 0 20px;
	border-top:1px solid #DDD;
}
div#footer .footerlogo a{
	display: inline-block;
	padding:0 10px;
	text-align: center;
	font-size: 11px;
	text-decoration: none;
	line-height: 1.2;
}
div#footer .footerlogo a.big{
	font-family: "Annie Use Your Telescope";
	font-size: 21px;
}


div#footer .footerlogo img{
	height:70px;
	width:auto;
	display: block;
	margin: 0 0 5px;
}
div#footer #tripadviser{
	position:absolute;
	bottom:110px;
	right:0px;
}

div#footer #sns{
	position:absolute;
	bottom:50px;
	right:0px;
}
div#footer #sns iframe{
	position:relative;
	top:-15px;
	margin-left:10px;
}



div#opening{
	width:100%;
	height:100%;
	position:absolute;
	background-color:#fff26b;
	top:0px;
	left:0px;
	z-index: 100;
	text-align: center;
	vertical-align: middle;
}























.big{
	font-size:160%;
}
.bold{
	font-weight:bold;
}
.arial{
	font-family:Arial, Helvetica, sans-serif;
}


span{
}