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

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
	-webkit-text-size-adjust:100%;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/**/
html { font-size: 125%; visibility: hidden; }
html.wf-active { visibility: visible; }
body { font-size: 1em; }

a { text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }

a:link { color:#000000; }
a:visited { color:#000000; }
a:hover { color:#000000; }
a:active { color:#000000; }

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

*{ 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

img { vertical-align:middle; max-width:100%; }

/*.en { }*/
.jp { font-family: "a-otf-midashi-go-mb31-pr6n",sans-serif; font-style: normal; font-weight: 600; }
.jpmedium { font-family: "a-otf-futo-go-b101-pr6n",sans-serif; font-style: normal; font-weight: 500; }

/*yagou*/
.yagou { width: 100%; padding: 32px 0; text-align: center; }
.yagou h1 { font-size: 1rem; letter-spacing: 0.28rem; }
.med { font-size: 0.707rem; letter-spacing: 0.1rem; }
.sml { font-size: 0.5rem; letter-spacing: 0.07rem; }
.u11 { padding-bottom: 11px; }
#sns_icon {display: grid; grid-template-columns: 20px 10px 20px; grid-template-rows: 20px 10px 20px; position: absolute; top: 32px; right: 32px; margin: 0;}
#houzz {grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2;}
#instagram {grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4;}
/*nav*/
nav { width: 100%; padding-bottom: 32px; }
.mainMenu { text-align: center; font-size: 0.707rem; letter-spacing: 0.1rem; }
.u16 { padding-bottom: 16px; }
/*grid*/
.grid-item { width: 100%; position: relative; }
.thumb_img { width: 100%; text-align: center; }
.num_u { position: absolute; top: 6.875%; left: 6.875%; font-size: 0.666rem; color: #FFFFFF; }
.num_b { position: absolute; top: 10%; left: 10%; font-size: 0.666rem; color: #FFFFFF; }
.main_category {
	width: 71.56%; padding: 2.6% 0; background: #FFFFFF;
	position: absolute; top: 50%; left: 50%;
	transform: translateY(-50%) translateX(-50%);
	font-size:  0.707rem; letter-spacing: 0.1rem; text-align: center;
}
.sub_category {
	width: 51.25%; padding: 1.7% 0; background: #FFFFFF;
	position: absolute;  bottom: 29.76%; left: 50%;
	transform: translateY(-29.76%) translateX(-50%);
	font-size: 0.5rem; letter-spacing: 0.07rem; text-align: center;
}

address { padding: 32px 0 ; text-align: center; font-size: 0.5rem; letter-spacing: 0.07rem;  }

@media screen and (min-width:768px){
	
	#sns_icon {grid-template-columns: 25px 12.5px 25px; right: 3.23%;}
	#houzz {grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;}
	#instagram {grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2;}
	body { padding: 0 3.23%; }
	/*grid*/
	.grid-item { width: 50%; position: relative; float: left; }
	
	address { padding: 3.954% 0 3.919%; text-align: center; }
	
}

@media screen and (min-width:1024px){
	
	/*yagou*/
	.yagou { width: 100%; padding: 2.983% 0 4.162%; text-align: left; }
	.yagou h1 { width: 26.875%; font-size: 1rem; text-align-last: justify; }
	.yagou .med { width: 26.875%; font-size: 0.707rem; text-align-last: justify; }
	.yagou .sml { width: 26.875%; font-size: 0.5rem; text-align-last: justify; }
	.u11 { padding-bottom: 1.666%; }
	#sns_icon {right: 2.983%; margin-bottom: 3.537%;}
	/*nav*/
	nav { width: 100%; padding-bottom: 3.537%; }
	.mainMenu { width: auto; text-align: left; font-size: 0.707rem; letter-spacing: 0.1rem;  }
	.u16 { padding-bottom: 1.525%; }
	/*grid*/
	.grid-item { width: 33.33%; }
	.thumb_img { width: 100%; text-align: center; }
	
}