@charset "utf-8";
/* ====================================================

	Tiny Timy　base.css

==================================================== */

/* ************** ページ全体 ************** */
body {
	width: 100%;
	background: #fff;
	color: #333333;
	font-size: 16px;
	font-family: "メイリオ","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", "Arial", "Helvetica", "sans-serif";
	line-height: 140%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	_display: inline;
	_zoom: 1;
}

a {
	text-decoration: none;
	outline: none;
}

a:link {
	color: #333;
}

a:visited {
	color: #333;
}

a:hover {
	color: #333;
}

h1 {
	margin-bottom: 20px;
	font-size: 130%;
	color: #999;
}

h2, h3 {
	margin-bottom: 10px;
}

p {
	margin-bottom: 10px;
}

section {
	margin-bottom: 24px;
}


/* ************** - ************** */
.page-top {
	position: fixed;
	bottom: 12%;
	right: 1%;
}
.fl-l {
	float: left;
}
.center {
	text-align: center;
}

.sp {
	display: none;
}

/* ************** フォント ************** */
.orange {
	color: orange;
}
.attention{
	color: red;
}
.txt-bottom {
	vertical-align:text-bottom;
}
.caption {
	font-size: 80%;
}
.line-through {
	text-decoration: line-through;
}
/*
@font-face {
    font-family: 'districtregular';
    src: url('/font/DistrictRegular.ttf');
    font-weight: normal;
    font-style: normal;
}
*/
/* *********** header *********** */
header {
	max-width: 960px;
	margin : 10px auto;
	text-align: center;
}

#logo {
	margin : 0px auto;
	max-width: 300px;
}
#logo img {
	max-width: 280px;
}

ul.gl_nav {
	width: 100%;
	margin : 20px auto;
	padding: 10px 0px;
	border: 2px solid #333;
}

ul.gl_nav a {
	padding: 5px 0px;
}

ul.gl_nav a:hover {
	border-bottom: solid 1px #1a1a1a;
}

ul.gl_nav li {
	display: inline;
	margin: 0px 15px;
	font-size: 140%;
//	font-family: "districtregular";
}

/*
header aside a.insta {
//	background: url(../images/glyph-logo_May2016_200.png) no-repeat;
//	top: 145px;
//	left: 0px;
}
*/
/* *********** main *********** */
#main {
	max-width: 960px;
	margin : 0px auto;
}

#main article {
	clear: both;
	overflow: auto;
	margin-bottom: 50px;
	padding: 20px 30px;
}

#main aside {
	margin-bottom: 80px;
}

p.lc_shop {
	text-align: center;
	margin-bottom: 40px;
}

img.map {
	max-width: 320px;
	border: 1px solid #ccc;
	margin-left: 1%;
}

div.shop_info {
	margin-top: 10px;
}

.tit01 {
	color: #fa3c8c;
	font-weight: bold;
	line-height: 160%;
}

.top_left {
	margin: 0px 10px 10px 0px;
	float: left;
}

section#space table {
	border: 1px solid #ccc;
}
section#space table th,td {
	padding: 4px 10px;
}
section#space table th {
	text-align: left;
	color: hotpink;
}
section#handmade img {
	max-width: 300px;
}
section#handmade div.flexbox {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-align-content:flex-start;/*--- safari（PC）用 ---*/
  align-content:flex-start;
  -webkit-flex-wrap:wrap;/*--- safari（PC）用 ---*/
  flex-wrap:wrap;
}
.creator {
  margin-right:3%;
  width:33%;
}

p#about {
	background: #ffe4e1;
}
div.about {
	margin: 15px 0px 0px 0px;
}
.insta {
	margin: 0px 2px;
}

/* ************** footer ************** */
footer {
	clear: both;
	text-align: right;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: auto;
	border-top: 1px solid #ccc;
	background: #eee;
}

ul.ft_nav li {
	float: right;
	margin: 1% 2%;
}
ul.ft_nav a {
	border-bottom: solid 1px #1a1a1a;
}

.copy {
	font-size: 80%;
	padding-right: 10px;
}

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


/* ########## 640px 以下 ########## */
@media (max-width: 640px){
body {
	background: #fff;
}
header,main,footer {
	width: 100%;
}

h1,h2,h3 {
	font-size: 120%;
}

ul.gl_nav {
	width: 98%;
}

#main article {
	clear: both;
	overflow: auto;
	margin-bottom: 50px;
	padding: 20px 15px;
}

#main aside img {
	width: 40%;
}
.sp {
	display: inline;
}

/* About */
section#zakka img,
section#space img,
section#workshop img,
section#handmade img,
section#collection img {
	max-width: 100%;
}
.creator,
.goods {
  margin-right:2%;
  width:48%;
}

/* Location */
section#access img {
	max-width: 100%;
}

/* melmag */
section#melmag_ld {
	margin-bottom: 20px;
}
section#melmag_ld h2 {
	font-size: 96%;
}
section#melmag_ld img {
	max-width: 40%;
}

.page-top {
	position: fixed;
	bottom: 14%;
	right: 1%;
}
}