@charset "UTF-8";

/* ------------------------------------------
  BASIC STYLES
--------------------------------------------- */
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(boxsizing.htc); 
	/*pointer-events: none;*/
}
a:active,
a:hover {
  outline: 0;
}
.clearfix:before,
.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {zoom:1;}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }



.container { 
	max-width: 980px;
	margin-right: 1em;
	margin-left: 1em;
}


/*.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}
.row { padding-bottom: 0em;}
.col { 
	display: block;
	float: left;
	width: 100%;
}
.gutters .col {
	margin-left: 2%;
}
.gutters .col:first-child { 
	margin-left: 0; 
}
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
	
	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }*/

@media screen and (min-width: 320px) and (max-width: 959px){
	img{
		max-width: 100%;
    height: auto;
		}
	#pokitomo-header .container{
	margin-right: 0;
	}
	}

@media screen and (min-width: 960px){
	.container{
	margin: 0 auto;
	padding: 0;
	}
	a,
	a img{
	-webkit-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-moz-transition: all .3s ease;
  transition: all .3s ease;
	}
}
/* ------------------------------------------
  LAODING-PAGE
--------------------------------------------- */
.pokitomo-loading{
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23ccc%22%3E%0A%20%20%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200%20A16%2016%200%200%200%2016%2032%20A16%2016%200%200%200%2016%200%20M16%204%20A12%2012%200%200%201%2016%2028%20A12%2012%200%200%201%2016%204%22/%3E%0A%20%20%3Cpath%20d%3D%22M16%200%20A16%2016%200%200%201%2032%2016%20L28%2016%20A12%2012%200%200%200%2016%204z%22%3E%0A%20%20%20%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2016%2016%22%20to%3D%22360%2016%2016%22%20dur%3D%220.8s%22%20repeatCount%3D%22indefinite%22%20/%3E%0A%20%20%3C/path%3E%0A%3C/svg%3E%0A%0A) center center no-repeat;
	background-color:rgba(255,255,255,1);
  -webkit-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}
.pokitomo-loading:after {
	position: fixed;
	top: 50%;
	width: 100%;
	height: 20px;
	margin-top: 30px;
	color: #333;
	text-align: center;
	content: "";
	background: url(../images/header/pokitomo-logo.gif) no-repeat center bottom;
	background-size:70px auto;
}

/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

nav.nav-collapse ul.nav{
  width: 100%;
  display: block;
}

nav.nav-collapse ul.nav li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 960px){
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

#header {
 border-bottom: 1px solid #ccc;
  position: fixed;
  z-index: 3;
  width: 100%;
  left: 0;
  top: 0;
	background-color:#fff;
}

h1.logo {
  text-decoration: none;
  line-height: 70px;
  float: left;
}
h1.logo img{
	vertical-align:middle;
	}




/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

#header.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}
nav.nav-collapse,
nav.nav-collapse ul.nav{
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 959px) {
	.nav-collapse{
		
		height:100%;
		}
	 .nav-collapse > ul{
		 margin-right:1em;
		 margin-top:1em;
		margin-bottom:1em;
		}
	 .nav-collapse > ul > li{
	border-bottom: 1px solid #ccc;
	padding-top: .2em;
	padding-bottom: .2em;
		 }
	}
/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  float: right;
	background-color:#e30000;
}

.nav-toggle:before {
	position: absolute;
	content: "";
	speak: none;
	width: 100%;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	background: url(../images/header/sp-nav.png) no-repeat left center;
}

.nav-toggle.active:before {
  content: "";
	background: url(../images/header/sp-nav.png) no-repeat right center;
}




/* ------------------------------------------
  HEADER STYLES
--------------------------------------------- */
#glico-cp-header{
/*	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
*/	border-bottom: 1px solid #ccc;
	padding-top: 5px;
	padding-bottom: 4px;
	}
#glico-cp-header p img{
	vertical-align:top;
	}
#glico-cp-header p:last-child{
	text-align:right;
	}

#pokitomo-header h1{
	float:left;
	}
#pokitomo-header h1 img{
	vertical-align:top;
	}

.glico-logo,
.glico-msg{
	width:50%;
	}
.glico-logo{
	float:left;
	}
.glico-msg{
	float:right;
	}
.share{
	width: 100px;
	float: left;
	line-height:30px;
	padding: 5px;
	border: 1px solid #ccc;
	}
.share p,
.share ul{
	float:left;
	}
.share p{
	margin-right:10px;
	}
.share ul li{
	float:left;
	width:18px;
	margin-right:5px;
	}
.share ul li:last-child{
	margin-right:0;
	}
.share img{
	vertical-align:middle;}
p.glico-club{
	width:50px;
	float:right;
	}
@media screen and (min-width: 320px) and (max-width: 749px) {
	#glico-cp-header .container{
		margin-left:0;
		}
	#glico-cp-header img{
		width:40%;
		height:auto;
	}
	#pokitomo-header h1{
		line-height:40px;
		}
	#pokitomo-header h1 img{
		width:auto;
		height:1em;
		vertical-align:middle;
	}
}
@media screen and (min-width: 750px){

#pokitomo-header h1{
	line-height:40px;
	}
}
@media screen and (min-width: 750px) and (max-width: 959px) {
	#pokitomo-header h1{
		line-height:40px;
		}
	#pokitomo-header h1 img{
		width:auto;
		height:1.5em;
		vertical-align:middle;
	}
	/*#pokitomo-header h1 img,
	nav.nav-collapse ul.nav li img{
		vertical-align:top;
		}*/
	}
@media screen and (min-width: 960px){
	#pokitomo-header{
	padding-top: 15px;
	padding-bottom: 14px;
	}
	#glico-cp-header a:hover img,
	#pokitomo-header h1 a:hover img,
	#pokitomo-header .share a:hover img,
	#pokitomo-header .glico-club a:hover img{
		opacity:.6;
		}
	nav.nav-collapse{
	float:right;
	width:800px;
	}
nav.nav-collapse ul.nav{
	float:left;
	margin-right:260px;
	width:340px;
	}
nav.nav-collapse ul.nav li{
	line-height:40px;
	float:left;
	width:auto;
	margin-right:20px;
		}
nav.nav-collapse ul.nav li:last-child{
	margin-right:0;
	}
nav.nav-collapse ul.nav li img{
	height:20px;
	width:auto;
	}
	#pokitomo-header h1 img,
	nav.nav-collapse ul.nav li img{
		vertical-align:middle;
		}
	nav.nav-collapse ul.nav li a{
		position: relative;
		}
	nav.nav-collapse ul.nav li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
	-moz-transform: scaleX(0);
  transform: scaleX(0);
	
  background-color: #e30000;
	
  -webkit-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-moz-transition: all .3s ease;
  transition: all .3s ease;
}
nav.nav-collapse ul.nav li a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
	}

footer{
	margin-bottom: 6em;
}
footer address{
	font-size:.7em;
	display:block;
	text-align:center;
	}

@media screen and (min-width: 320px) and (max-width: 749px) {}
@media screen and (min-width: 750px) and (max-width: 959px) {}
@media screen and (min-width: 960px){}