@charset "UTF-8";

*{
    font-family: Meiryo, メイリオ, 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

body,
html{
	padding:0;
	margin:0;
}
body{
/*	background-color:#FF0000;*/
}
.menu ul{
	list-style:none;
	padding:0;
	margin:0;
}

.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
	.ig-b-v-24 {
		background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px;
	}
}

@media screen and (min-width: 769px){

	h1{
		text-align:center;
	}

	html,
	body{
		height:100%;
	}

	body{
		background-image:url(../images/bk.jpg);
		background-position:bottom right;
		background-size:auto 100%;
		background-repeat:no-repeat;
		background-attachment:fixed;
	}

	.wrap{
		width:1000px;
		margin:0 auto;
	}

	article{
		background-color:rgba(255,255,255,0.8);
		padding:1em;
		margin-bottom:2em;
	}

	h2{
		background-color:#666;
		color:#FFF;
		padding:0.2em;
		margin-bottom:0;
	}

	.menu{
		margin:0;
		padding:1.0em;
		margin-bottom:1.0em;
		background-color:rgba(255,255,255,0.8);
		box-shadow: 0 0 5px rgba(60,60,60,0.4);
	}

	.menu ul{
		font-weight:bold;
		text-align:center;
	}

	.menu ul li{
		display:inline-block;
		width:7em;
		border-right:solid 1px #CCC;
		padding:0.2em;
	}

	.menu ul li:first-child{
		border-left:solid 1px #CCC;
	}

	.menu ul li a{
		text-decoration:none;
		width:5em;
	}

	p.photo{
		width:630px;
		float:left;
	}
	div.image{
		width:310px;
		float:right;
		margin-left:1em;
	}

	p{
		clear:both;
	}

	div.image img{
		width:300px;
		border:solid 1px #CCC;
		padding:5px;
		background-color:#FFF;
	}

	footer{
		text-align:center;
		padding:1em;
	}

/*top*/

	.top ul{
		padding:0;
		margin:0;
		list-style:none;
		width:50%;
		padding-top:10em;;
		margin-left:150px;
	}

	.top ul li{
		background-image:url(../images/arrow.png);
		background-repeat:no-repeat;
		background-size:auto 50%;
		background-position:center right;
		margin:0;
		border-bottom:solid 1px #CCC;
		padding:0.5em;
	}

	.top ul li a{
		color:#000;
		font-weight:bold;
		text-decoration:none;
		font-size:1.5em;
	}

	.top .btn_instagram{
		margin-top:10em;
		margin-left:150px;
	}

	.about .btn_instagram,
	.top .btn_instagram{
		overflow:hidden;
	}
	.about .btn_instagram a,
	.top .btn_instagram a{
		float:left;
	}

	.top .back_image{
		height:92%;
	}

	.top footer{
		padding:0;
		height:8%;
	}
	.top footer span{
		padding:1em;
		display:block;
	}

/*about*/

	.about .btn_instagram{
		width:1000px;
		margin:0 auto;
		margin-bottom:3em;
	}

}
@media screen and (max-width: 768px){

	*{
		word-break: break-all;
	}

	html,
	body{
		width:100%;
		height:100%;
		margin:0;
		padding:0;
	}

	body::before {
		background:url('../images/bk.jpg') no-repeat right top;
		background-size: auto 100%;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: "";
		z-index: -1;
	}

	h1 img{
		width:100%;
		max-width:1000px;
	}

	.btn_menu{
		background:url('../images/btn_menu.png') no-repeat center center;
		background-size: 70% auto;
		padding:0.2em;
		height:30px;
		width:40px;
		position:absolute;
		right:1em;
		border:solid 1px #CCC;
		border-radius:0.2em;
		-webkit-border-radius:0.2em;
		-moz-border-radius:0.2em;

	}

	.wrap{
		width:100%;
	}

	article{
		background-color:rgba(255,255,255,0.8);
		padding:1em;
		margin-bottom:2em;
	}

	h2{
		background-color:#666;
		color:#FFF;
		padding:0.2em;
		margin-bottom:0;
	}

	.menu{
		display:none;
		background-color:#FFF;
		position:absolute;
		top:80px;
		width:100%;
	}

	.menu ul{
		width:100%;
		margin:0;
		padding:0;
	}

	.menu ul li{
		width:100%;
		border-bottom:solid 1px #CCC;
	}

	.menu ul li a{
		display:block;
		padding:0.5em;
		text-decoration:none;
	}

	div.image{
		width:100%;
		float:right;
		margin-left:1em;
	}

	p{
		clear:both;
	}

	div.image img{
		width:95%;
		border:solid 1px #CCC;
		padding:5px;
		background-color:#FFF;
	}

	footer{
		text-align:center;
		padding:1em;
		font-size:12px;
	}

/*top*/
	.top ul{
		padding:0;
		margin:0;
		list-style:none;
		width:50%;
		padding-top:3em;;
	}

	.top ul li{
		background-image:url(../images/arrow.png);
		background-repeat:no-repeat;
		background-size:auto 50%;
		background-position:center right;
		margin:0;
		border-bottom:solid 1px #CCC;
		padding:0.5em;
	}

	.top ul li a{
		color:#000;
		font-weight:bold;
		text-decoration:none;
	}

	.top .btn_instagram{
		margin-top:15em;;
	}

	.about .btn_instagram,
	.top .btn_instagram{
		overflow:hidden;
	}
	.about .btn_instagram a,
	.top .btn_instagram a{
		float:left;
	}

	.top .back_image{
		background:none;
	}

	.top footer{
		position:absolute;
		bottom:0;
	}


/*about*/

	.about .btn_instagram{
		padding:1em;
		margin-bottom:3em;
	}
}