@charset "UTF-8";

/* Common ver.1.0.0 last update  17/3/16
	Sugimata CSS for Common
	BootStrap 対応 */

/*===================================================
    Reset
===================================================*/
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,font,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 {
margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }



/*===================================================
     Layout
===================================================*/
					/* 横スクロール対策 */
					.row {
						margin:0;
					}
					.container-fluid {
						padding-left: 0;
						padding-right: 0;
					}

header {
	width: 100%;
}

.row{
	opacity: 0;
	transform: translate(0,60px);
	-webkit-transform: translate(0,60px);
transition: .8s;
}
.mv{
	opacity: 1.0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}



.drawer-menu {
	padding: 2em;
}
.drawer-menu li {
	margin: 1em;
}
nav.drawer-nav {
	color: white;
	background-color: rgba(0,0,0, .7);
}
nav.drawer-nav a {
	color: white;

}
#first_view {
	width: 100%;
	min-height: 100vh;
	margin-bottom: 3em;
}


#first_view h1 {
	font-size: 20px;
	font-weight: bold;
	color: white;
	font-family: 'Sawarabi Gothic', sans-serif;
	line-height: 1.5em;
	letter-spacing: .1em;
}
.sns li {
	float: left;
	margin-left: 1em;
	margin-top: 1em;
	display: inline-block;
}

.logo {
	width: 30%;
	margin-bottom: 2em;
}

h2 {
	font-family: 'Shadows Into Light', cursive;
	font-size: 3.5em;
	margin-bottom: .5em;
}

h3 {
	font-family: 'Shadows Into Light', cursive;
	font-size: 2em;
	margin-bottom: 1em;
}

h4 {
	font-size: 2em;
	font-family: 'Sawarabi Gothic', sans-serif;
	letter-spacing: .1em;
	line-height: 1.4em;
	margin-bottom: 2em;

}
h5 {
	font-size: 1.8rem;
	font-family: 'Sawarabi Gothic', sans-serif;
	letter-spacing: .1em;
	line-height: 1.6em;
	margin-bottom: 3em;
	color: #88BBD6;
}
p {
	font-family: 'Sawarabi Gothic', sans-serif;
	letter-spacing: .15em;
	line-height: 1.7em;
	margin-bottom: 2em;
}
.t11px {
	font-size: 85%;
}
.logo_png {
	width: 250px;
}

.instagram_box {
	background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000);
	padding: 2em 0;
}
.instagram_box ul li {
	margin-bottom: 1em;
}

/*  skew area */
	.rotate_contents_voice {
		background-image: url(../img/photo_kids.jpg);
		background-size: cover;
		height: 80vh;
		overflow: hidden;
	}
	.rotate_contents_voice:after {
		content: "";
		display: block;
		height: 320%;
		background: white;
		transform:  skew(0,177deg) translate(0,20%);
	}
	.rotate_contents_voice:before {
		content: "";
		display: block;
		height: 30%;
		background: white;
		transform:  skew(0,177deg) translate(0,-20%);
	}


.sns_icon_logo {
	width: 7%;
}

.fb_icon_logo {
	width: 15%;
}
ul.bike_thmb li {
	position: relative;
}
a.babby,
a.kissmini,
a.kiss,
a.raffini,
a.hydee,
a.gri,
a.polar,
a.mob,
a.gyutto_mini_ex,
a.gyutto_mini_dx,
a.gyutto_annies_ex,
a.gyutto_annies_dx,
a.gyutto_annies_f_dx,
a.gyutto_stage_22,
a.gyutto {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}
a.gyutto_mini_ex {
	background: url(../img/pana/logo_gyutto_mini_ex.png) 20px 10px no-repeat;
	background-size: auto 18%;
}
a.gyutto_mini_dx {
	background: url(../img/pana/logo_gyutto_mini_dx.png) 20px 10px no-repeat;
	background-size: auto 18%;
}
a.gyutto_annies_dx {
	background: url(../img/pana/logo_gyutto_annies_dx.png) 20px 10px no-repeat;
	background-size: auto 18%;
}
a.gyutto_annies_ex {
	background: url(../img/pana/logo_gyutto_annies_ex.png) 20px 10px no-repeat;
	background-size: auto 18%;
}
a.gyutto_annies_f_dx {
	background: url(../img/pana/logo_gyutto_annies_f_dx.png) 20px 10px no-repeat;
	background-size: auto 18%;
}
a.gyutto_stage_22 {
	background: url(../img/pana/logo_gyutto_stage_22.png) 20px 10px no-repeat;
	background-size: auto 18%;
}

a.gyutto {
	background: url(../img/pana/logo_gyutto.png) 20px 10px no-repeat;
	background-size: auto 18%;
}

a.polar {
	background: url(../img/bs/logo_polar.png) 20px 10px no-repeat;
	background-size: auto 12%;
}
a.gri {
	background: url(../img/bs/logo_gri.png) 20px 10px no-repeat;
	background-size: auto 12%;
}
a.mob  {
	background: url(../img/bs/logo_mob.png) 20px 10px no-repeat;
	background-size: auto 12%;
}
a.hydee  {
	background: url(../img/bs/logo_hydee.png) 20px 10px no-repeat;
	background-size: auto 7%;
}
a.babby {
	background: url(../img/yamaha/logo_babby.png) 20px 10px no-repeat;
	background-size: auto 8%;
}
a.kissmini {
	background: url(../img/yamaha/logo_kissminiun.png) 20px 10px no-repeat;
	background-size: auto 8%;
}
a.kiss {
	background: url(../img/yamaha/logo_kiss.png) 20px 10px no-repeat;
	background-size: auto 8%;
}
a.raffini {
	background: url(../img/yamaha/logo_raffini.png) 20px 10px no-repeat;
	background-size: auto 8%;
}


.img-banner {
	max-width: 100%;
}


.ul_fb li {
	background: #efefef;
	display: inline-block;
	padding: .25em 1em;
	line-height: 2em;
	height: 2em;
	margin-bottom: 1em;
	box-sizing: border-box;
	border-radius:18px;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
}

#map {
	height: 70vh;
	width: 90%;
	margin: 0 5%;
}

#tamatsukuri {
	padding: 0;

}
.wavyline_contents {
	position: relative;
}
.wavyline_contents:before {
	content: "";
	display: block;
	height: 30px;
	width: 100%;
	background: url(../img/pattern_wavyline.png) repeat-x left top;
	position: absolute;
	top: 0;
}
.wavyline_contents:after {
	content: "";
	display: block;
	height: 30px;
	width: 100%;
	background: url(../img/pattern_wavyline_composit.png) repeat-x left top;
	position: absolute;
	bottom: 0;
}



.googlemap_area {
	background: #efefef;
	margin-bottom: 3em;

}

#brand {
	background: yellow;
	margin: 0 auto 2em auto;
	padding: 2em 0 4em;
}

#brand li img {
	margin-bottom: 1em;
}

#instagram>a {
	display: block;
	float: left;
	width: 22.5%;
	margin-left: 1%;
	box-sizing: border-box;

}
#instagram>a img {
	max-width: 100%;
}


.recommend_box {
	background: #fefecc;
	padding: 3em .75em;
	margin: 1em 1em 1em 0;
	box-sizing: border-box;
	border-radius:18px;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
}

.h3_ah {
	font-size: 3rem;
	height: 3em;
	width: 3em;
	line-height: 3em;
	text-align: center;
	background: white;
		border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	font-family: 'Shrikhand', cursive;
	margin-top: .25em;
}


.float_l_box {
	float: left;
	width: 35%;
	text-align: center;
	margin-top: .5em;
}



.voice_box {
	background: #fafafa;
	border-radius:18px;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	padding: 3em 2em;
	box-sizing: border-box;
	margin: 0 0 1em 0;
	min-height: 300px;

}
.voice_box h5 {
	margin-bottom: 1em;
	font-weight: bold;
	color: #20214b;
	border-bottom: 1px dotted black;
	padding-bottom: .5em;
}

.voice_box li {
	margin-bottom: .75em;
	color: grey;
}
.voice_box li p {
	color: black;
}

.voice_ballon {
	position: absolute;
	left: 30px;
	top: 30px;
	z-index: 999;
	width: 130px;
}



.hl_balloon {
	width: 15%;
}

.dl_address {
	width: 60%;
margin: 0 auto;
}

.dl_address dd {
	margin-bottom: 1em;
	border-bottom: 1px dotted #eee;
}

.ah {
	background: #e9696c;
	color: white;
	padding: .2em 1em;
	border-radius:18px;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;

}

.ah_orange {
	background: #f5cd2b;
	color: grey;
}
.ah_lime {
	background: #6abd79;
}
.ah_pink {
	background: #e95389;
}

strong {
	font-weight: 700;
}

a.link_white {
	color:white;
	text-decoration: none;
}
a.link_white:hover {
	color:yellow;
	text-decoration: underline;
}


.px10 { font-size:72%; }
.px11 { font-size:79%;}
.px12 { font-size:86%;}
.px13 { font-size:93%;}
.px14 { font-size:100%;}
.px15 { font-size:108%;}
.px16 { font-size:115%;}
.px17 { font-size:122%;}
.px18 { font-size:129%;}
.px19 { font-size:136%;}
.px20 { font-size:143%;}
.px21 { font-size:150%;}
.px22 { font-size:158%;}
.px23 { font-size:165%;}
.px24 { font-size:172%;}
.px25 { font-size:179%;}
.px26 { font-size:186%;}
.px27 { font-size:193%;}
.px28 { font-size:200%;}
.px29 { font-size:208%;}
.px30 { font-size:215%;}
.px31 { font-size:222%;}
.px32 { font-size:229%;}
.px33 { font-size:236%;}
.px34 { font-size:243%;}
.px35 { font-size:250%;}
.px36 { font-size:258%;}
.px37 { font-size:265%;}
.px38 { font-size:272%;}
.px39 { font-size:279%;}
.px40 { font-size:286%;}
.px41 { font-size:293%;}
.px42 { font-size:300%;}
.px43 { font-size:308%;}
.px44 { font-size:315%;}
.px45 { font-size:322%;}
.px46 { font-size:329%;}
.px47 { font-size:336%;}
.px48 { font-size:343%;}
.px49 { font-size:350%;}
.px50 { font-size:358%;}
.px51 { font-size:365%;}
.px52 { font-size:372%;}
.px53 { font-size:379%;}
.px54 { font-size:386%;}
.px55 { font-size:393%;}
.px56 { font-size:400%;}
.px57 { font-size:408%;}
.px58 { font-size:415%;}
.px59 { font-size:422%;}
.px60 { font-size:429%;}
.px61 { font-size:436%;}
.px62 { font-size:443%;}
.px63 { font-size:450%;}
.px64 { font-size:458%;}
.px65 { font-size:465%;}
.px66 { font-size:472%;}
.px67 { font-size:479%;}
.px68 { font-size:486%;}
.px69 { font-size:493%;}
.px70 { font-size:500%;}
.px71 { font-size:508%;}
.px72 { font-size:515%;}


/*===================================================
     Margin
===================================================*/

/* Margin-top
-------------------------------------------------- */
.mt05em { margin-top: 0.5em;}
.mt1em { margin-top: 1em;}
.mt15em { margin-top: 1.5em;}
.mt2em { margin-top: 2em;}
.mt3em {margin-top: 3em;}
.mt4em { margin-top: 4em;}
.mt5em { margin-top: 5em;}


/* Margin-bottom
-------------------------------------------------- */
.m05em { margin-bottom: 0.5em;}
.m1em { margin-bottom: 1em;}
.m15em { margin-bottom: 1.5em;}
.m2em { margin-bottom: 2em;}
.m3em {margin-bottom: 3em;}
.m4em { margin-bottom: 4em;}
.m5em { margin-bottom: 5em;}
.m6em { margin-bottom: 6em;}
.m7em { margin-bottom: 7em;}
.m8em { margin-bottom: 8em;}
.m9em { margin-bottom: 9em;}
.m10em { margin-bottom: 10em;}

/* Margin-Left
-------------------------------------------------- */
.l10px { margin-left: 10px;}
.l15px { margin-left: 15px;}
.l20px { margin-left: 20px;}
.l30px { margin-left: 30px;}
.l40px { margin-left: 40px;}
.l50px { margin-left: 50px;}
.l60px { margin-left: 60px;}

.l1em { margin-left: 1em;}
.l15em { margin-left: 1.5em;}
.l2em { margin-left: 2em;}
.l3em { margin-left: 3em;}
.l4em { margin-left: 4em;}
.l5em { margin-left: 5em;}
.l6em { margin-left: 6em;}

/* Margin-Right
-------------------------------------------------- */
.r10px { margin-right: 10px;}
.r12px { margin-right: 12px;}
.r15px { margin-right: 15px;}
.r20px { margin-right: 20px;}
.r30px { margin-right: 30px;}
.r40px { margin-right: 40px;}
.r50px { margin-right: 50px;}
.r60px { margin-right: 60px;}

.r1em { margin-right: 1em;}
.r15em { margin-right: 1.5em;}
.r2em { margin-right: 2em;}
.r3em { margin-right: 3em;}
.r4em { margin-right: 4em;}
.r5em { margin-right: 5em;}
.r6em { margin-right: 6em;}


/*===================================================
     Padding
===================================================*/

/* padding-top
-------------------------------------------------- */
.pt1em {padding-top: 1em;}
.pt2em {padding-top: 2em;}
.pt3em {padding-top: 3em;}
.pt4em {padding-top: 4em;}
.pt5em {padding-top: 5em;}

/* padding-bottom
-------------------------------------------------- */
.pb1em {padding-bottom: 1em;}
.pb2em {padding-bottom: 2em;}
.pb3em {padding-bottom: 3em;}
.pb4em {padding-bottom: 4em;}
.pb5em {padding-bottom: 5em;}


/* padding-Left
-------------------------------------------------- */
.pl1em {padding-left: 1em;}
.pl2em {padding-left: 2em;}
.pl3em {padding-left: 3em;}
.pl4em {padding-left: 4em;}
.pl5em {padding-left: 5em;}

.pl30px { padding-left: 30px; }
.pl60px { padding-left: 60px; }

/* padding-Right
-------------------------------------------------- */
.pr1em {padding-right: 1em;}
.pr2em {padding-right: 2em;}
.pr3em {padding-right: 3em;}
.pr4em {padding-right: 4em;}
.pr5em {padding-right: 5em;}