@charset "UTF-8";
#page-top a,
#page-top a:hover,
.snsTable a {
    text-decoration: none
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}
body {
    line-height: 1
}
ol,
ul {
    list-style: none
}
blockquote,
q {
    quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
.clearfix:after {
    content: "";
    clear: both;
    display: block
} /*div,img{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}*/
/*　font-face*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7gjt9h');
  src:  url('fonts/icomoon.eot?7gjt9h#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7gjt9h') format('truetype'),
    url('fonts/icomoon.woff?7gjt9h') format('woff'),
    url('fonts/icomoon.svg?7gjt9h#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-line:before {
  content: "N";
  font-weight:900;
  font-family: verdana;
  font-size:revert
}
.icon-hatebu:before {
  content: "\e901";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-twitter:before {
  content: "\ea96";
}

/*　footer style*/
footer {
	display: block;
	margin: 0;
	padding: 0 0 0 0;
	background-color: #fff;
}

#spec { width: 100%; margin: 0 auto 0;}
#spec ul,#spec ul li {margin: 0; padding: 0; line-height: 1.0; text-align: left;}
#spec ul { padding: 0 10px 0;}
#spec ul.left { float: none;}
#spec ul.right { float: none;}
#spec ul li { font-size: 0.88em; margin: 5px 0; padding: 5px 0; color: #000; border-bottom: 1px solid #666; line-height: 1.4;}

#spec .listbox { padding: 0 10px 0; clear: both;}
#spec .listgroup,#spec .listgroup .list_Left,#spec .listgroup .list_right { margin: 0; padding: 0; line-height: 1.4; text-align: left;}
#spec .listgroup { border-bottom: 1px solid #A4A4A4;}
#spec .listgroup .list_Left,#spec .listgroup .list_right { font-size: 0.95em; color: #000;}
#spec .listgroup .list_Left { display: block; float: left; padding: 5px 0;}
#spec .listgroup .list_right { display: block; float: right; padding: 5px 0;}
#spec .listgroup .list_Left { width: 40%;}
#spec .listgroup .list_right { width: 60%;}



#snsicon { clear: both; display: block; margin: 0; padding: 0;}
ul.snsTable { width: 100%; height: auto; margin: 0; padding: 0; text-align: center;}
.snsBox {
	float: left;
	display: block;
	vertical-align:middle;
	width: 33.3%;
	margin: 0;
	padding: 0;
	background-color: #999;
}

.snsTable a {
	text-decoration: none;
}

.icon-twitter,
.icon-facebook,
.icon-hatebu,
.icon-google-plus,
.icon-line {
	display: block;
	font-size: 2.0em;
	padding: 0;
	color: #000;
	height:70px;
	line-height:70px
}

a .icon-twitter, a .twitter,
a .icon-facebook, a .facebook,
a .icon-hatebu, a .hatebu,
a .icon-google-plus, a .google-plus,
a .icon-line, a .line {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

a .icon-twitter,
a .icon-facebook,
a .icon-hatebu,
a .icon-google-plus,
a .icon-line { color: #FFF;}

a .twitter { background-color: #00aced;}
a .facebook { background-color: #305097;}
a .hatebu { background-color: #008fde;}
a .google-plus { background-color: #db4a39;}
a .line { background-color: #5ae628;}

a:hover .twitter { background-color: #0078A5;}
a:hover .facebook { background-color: #152444;}
a:hover .hatebu { background-color: #006399;}
a:hover .google-plus { background-color: #9A291C;}
a:hover .line { background-color: #3BA913;}

#cp {
	clear: both;
	width: 100%;
	height:50px;
	line-height:50px;
	background-color: #00aee9;
	text-align: center;
	color: #FFF;
	border-top: 1px solid #fff;
	font-size:12px
}

.othercp { display: block; width: 100%;}
.othercp p { display: block;  padding: 0 10px 20px ; font-size: 0.8em; line-height: 1.3; color: #666;}

/* page-top */
#page-top { position: fixed; bottom: 0px; right: 0px; font-size: 100%; z-index: 1;}
#page-top a {
	text-decoration: none;
	color: #fff;
	width: 60px;
	padding: 40% 0;
	text-align: center;
	display: block;
	background-color: #FFDF00;
}
#page-top a:hover { text-decoration: none; background: #C3AB00;}

#pocketlink { clear: both; width: 100%; margin:0 auto; text-align: center; border-top: 1px solid #fff; background-color: #00aee9;}
#pocketlink a { display: block;}
#pocketlink img { width: 30%; height: auto; margin: 0 auto;}

@media screen and (min-width: 667px) {
	#spec .listgroup .list_Left { width: 30%;}
	#spec .listgroup .list_right { width: 70%;}
	ul.snsTable { width: 100%; margin: 0 auto;}
	.icon-twitter,.icon-facebook,.icon-hatebu,.icon-google-plus,.icon-line{font-size: 2.5em; line-height:90px}
	#cp { /*padding: 5.5% 0 5.5%;*/ font-size:15px}
	#pocketlink img { width: 20%;}
	#page-top { font-size: 120%;}
	#page-top a {width: 100px;}
}
@media screen and (min-width: 768px) {
	#spec { width: 95%; margin: 0 auto 0;}
	#spec .listgroup .list_Left,#spec .listgroup .list_right { font-size: 1.25em;}
	.othercp { display: block; width: 680px; margin: 0 auto;}
}
@media screen and (min-width: 980px) {
	#spec { width: 784px; margin: 0 auto 0;}
	#spec .listgroup .list_Left,#spec .listgroup .list_right { font-size: 1,5em;}
	#snsicon { width: 980px; margin: 5% auto 15%;}
	ul.snsTable { width: 80%; margin: 0 auto;}
	.icon-twitter,.icon-facebook,.icon-hatebu,.icon-google-plus,.icon-line{padding: 0; height:90px}
	#pocketlink { border-bottom: 1px solid #fff;}#pocketlink img { width: 10%;}
	#cp { border-top: none;  /*padding: 3.5% 0 3.5%;*/}
	.othercp { display: block; width: 780px; margin: 0 auto;}
}
@media screen and (min-width: 1280px) {
	#spec .listgroup .list_Left,#spec .listgroup .list_right { font-size: 1.5em;}
}

#footer { clear: both; width: 100%; margin: auto; padding:20px 0 ;text-align: center; border-top:1px solid #fff; border-bottom: 1px solid #fff; background-color: #00aee9;}
#footer img {width:auto; height:40px; margin:0}
@media screen and (min-width: 768px) {
#footer img {width:auto; height:auto; margin:0}
}

/* shop */

.shop_bg {background:rgba(1,1,1, 0.7); width:100%; height:100%; position:fixed; top:0; left:0; right:0; bottom:0; z-index:100}

.go_shop {left:10px; bottom:50px; padding-bottom:0; position:fixed; z-index:100; cursor:pointer; }
.go_shop img {width:85px; height:85px}
/*.go_shop.on {margin-bottom:10px}*/

.shop { position:absolute; top:40px; left:50%; width:330px; height:440px;background:url(../img/shop.jpg) no-repeat 0 0; background-size:330px auto; margin-left:-165px; z-index:101; box-sizing:border-box; padding:65px 30px}
.btn_close {width:30px; height:30px; position:absolute; right:0; top:0}

.shop .shop1 img ,
.shop .shop2 img { width:270px !important; height:auto !important}
.shop .shop2 {margin-top:10px; display:block;}
.scroll_y {overflow:hidden;}

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

.shop {width:600px; height:800px; background:url(../img/shop.jpg) no-repeat 0 0; position:absolute; top:100px; left:50%; margin-left:-300px; z-index:101; box-sizing:border-box; padding:120px 55px}
.btn_close {width:55px; height:55px; position:absolute; right:0; top:0}

.shop .shop1 {}
.shop .shop2 {display:block; margin-top:20px}
.shop .shop1 img ,
.shop .shop2 img { width:490px !important; height:auto !important}

.go_shop {position:fixed; bottom:28px; left:30px; z-index:100; padding-bottom:0; cursor:pointer}
.go_shop img {width:140px; height:140px}
/*.go_shop.on {margin-bottom:-45px}*/
}

 .yout {overflow:hidden; width:330px; margin:10px auto}
 .yout .mov {float:left; width:160px; height:160px; opacity:1}
 .yout .mov:first-child {margin-right:10px}
 .yout .mov img {width:160px; height:160px; display:block}
 .yout .mov:hover {opacity:1}


@media screen and  (min-width: 1280px) {
	 .yout {overflow:hidden; width:540px; margin:10px auto}
	 .yout .mov {float:left; width:250px; height:250px; opacity:0.8}
	 .yout .mov:first-child {margin-right:40px}
	 .yout .mov img {width:250px; height:250px; display:block}
	 .yout .mov:hover {opacity:1}
 }