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

@import 'https://fonts.googleapis.com/css?family=Oswald:300,400,700&subset=latin-ext';

/* clearfix */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* 画像センタリング */

.cr {margin:0 auto;}
.cr5 {margin:10px auto;}
.cr10 {margin:10px auto;}
.cr20 {margin:20px auto;}
.cr30 {margin:30px auto;}

.cr15o {margin:15px auto 0;}
.cr20o {margin:20px auto 0;}

.cr15u {margin:0 auto 15px;}
.cr20u {margin:0 auto 20px;}
.cr50up {margin:0 auto; padding-bottom:50px;}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/* FireFoxFadeブレ防止 */

img { display:block; box-shadow: #000 0 0 0; }


/* 全体・枠作り */

html,body {
	height:100%;
}

html {
	font-size:62.5%;
}

img { display:block; }

.mr32 {margin-right:32px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}
.mr100 {margin-right:100px;}

body {
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, sans-serif;
	text-align:center;
}

#PageWrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
	min-width:1000px;
	background:url(../img/grand_bg.gif) left top repeat;
	animation: grand_bg 40s linear infinite;
}

@keyframes grand_bg {
 0% {background-position: 0 0;}
 100% {background-position: -340px 624px;}
}

#PageWrapper2 {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
	min-width:1000px;
	
}

.page_information {	background:url(../img/sub_bg01.gif) left top repeat;}
.page_product {	background:url(../img/sub_bg02.gif) left top repeat;}
.page_staffroom {	background:url(../img/sub_bg03.gif) left top repeat;}
.page_support {	background:url(../img/sub_bg05.gif) left top repeat;}

.block {
	width:100%;
	position:relative;
}

.menu_block {
	position: fixed;
    top: 0;
    z-index: 999;
	width:100%;
}

body.fixed .product_list {
    position: fixed;
	top:120px;
    z-index: 8888;
}

/* ----------------------------------　ローディング　---------------------------------- */


#loader-bg {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #cbf3e9;
  z-index: 15000;
}

#loader {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #666666;
  z-index: 2;
}
.no-js #loader {display:none;}

#loader img {
  width:122px;
  height:120px;
  margin:0 auto 24px;
}

#loader p {
	font-family: 'Chewy', cursive;
	font-size:2.4rem;
	color:#1d4b25;
	text-align:center;
}

/* ----------------------------------　モーダル入口　---------------------------------- */

.modal { position:fixed; display:none; z-index:9999; top:40%; left:50%; width:400px; height:200px; margin:-120px 0 0 -220px; padding:20px; text-align:center; }
.modal_wrap {width:400px;
height:400px;
border-radius:20px;
border:2px solid #4bbea1;
background:url(../img/check.jpg) center top no-repeat;
background-size:100%;
position:relative;}
.modal a.box {width:150px;height:80px;display:block; transition:all 0.3s;}
.modal a.box img {width:100%; transition:all 0.3s; opacity:0;}
.modal a:hover.box img {width:100%; transition:all 0.3s; opacity:1;}
.b_left {position:absolute; top:295px; left:34px; background:url(../img/check_enter_01.png) left top no-repeat;background-size:100%;}
.b_right {position:absolute; top:295px; left:216px; background:url(../img/check_leave_01.png) left top no-repeat;background-size:100%;}
.modal a { cursor:pointer; }

/* ----------------------------------　ドットアニメーション部　---------------------------------- */

#Mainvisual {
	width:100%;
	height:700px;
	background:url(../img/dot_bg.png) center top repeat-x;
	animation: dot_bg 40s linear infinite;
	position:relative;
}

#Mainvisual_sub {
	width:100%;
	height:140px;
	background:url(../img/dot_bg.png) center -160px repeat-x;
	animation: dot_bg2 40s linear infinite;
	position:relative;
}

header {
	width:100%;
	height:30px;
	background:#00a062;
	position:absolute;
	top:0;
	left:0;
	z-index:10;
}

.head_wrap {
	width:1000px;
	height:30px;
	background:url(../img/head_name.png) left center no-repeat;
	margin:0 auto;
	text-indent:-9999px;
	overflow:hidden;
}

.head_logo {
	background:url(../img/logo.gif) left top no-repeat;
	width:122px;
	height:120px;
	position:absolute;
	left:50%;
	margin-left:-500px;
	top:40px;
	z-index:50;
}

.menu_title {
	background:url(../img/title.gif) left top no-repeat;
	width:541px;
	height:35px;
	position:absolute;
	z-index:50;
	top:550px;
	left:50%;
	margin-left:-41px;
}

.cat {
	width:100%;
	height:611px;
	background:url(../img/cat.gif) right top repeat-x;
	animation: dot_bg 40s linear infinite;
	position:relative;
}

@keyframes dot_bg {
 0% {background-position: 0 0;}
 100% {background-position: 2150px 0px;}
}

@keyframes dot_bg2 {
 0% {background-position: 0 -160px;}
 100% {background-position: 2150px -160px;}
}

.cloud {
	background:url(../img/cloud.gif) left top repeat-x;
	width:100%;
	height:150px;
	animation: cloud 60s linear infinite;
	position:absolute;
	left:0;
	top:0;
}

@keyframes cloud {
 0% {background-position: 0 0;}
 100% {background-position: 1960px 0px;}
}

.bee {
	background:url(../img/bee.gif) left top repeat-x;
	width:100%;
	height:60px;
	animation: bee 5s linear infinite;
	position:absolute;
	left:0;
	top:150px;
}

@keyframes bee {
 0% {background-position: 0 0;}
 10% {background-position: 192px 30px;}
 20% {background-position: 384px 0px;}
 30% {background-position: 576px 30px;}
 40% {background-position: 768px 0px;}
 50% {background-position: 960px 30px;}
 60% {background-position: 1152px 0px;}
 70% {background-position: 1344px 30px;}
 80% {background-position: 1536px 0px;}
 90% {background-position: 1728px 30px;}
 100% {background-position: 1920px 0px;}
}

.mint_chan {
	width:165px;
	height:233px;
	position:absolute;
	left:50%;
	margin-left:335px;
	top:222px;
}

.dot_pink {
	background:url(../img/dot_pink.gif) left top no-repeat;
	width:15px;
	height:15px;
	position:absolute;
	left:88px;
	top:-6px;
	z-index:20;
}

.dot_yellow {
	background:url(../img/dot_yellow.gif) left top no-repeat;
	width:15px;
	height:15px;
	position:absolute;
	left:132px;
	top:-6px;
	z-index:20;
}

.dot_green {
	background:url(../img/dot_green.gif) left top no-repeat;
	width:15px;
	height:15px;
	position:absolute;
	left:110px;
	top:-21px;
	z-index:20;
}

/* ----------------------------------　メニュー　---------------------------------- */

#Menu {
	background:url(../img/menu_bg.gif) left top repeat;
	width:100%;
	height:100px;
	margin:0 auto 0;
}

.menu_wrap {
	width:1000px;
	height:100px;
	position:relative;
	margin:0 auto;
}

.sub_head {
	background:url(../img/sub_head.png) left top no-repeat;
	width:450px;
	height:210px;
	position:absolute;
	left:0;
	bottom:0;
}

.sub_head a {
	width:450px;
	height:210px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}

.tv_slide {
	width:293px;
	height:202px;
	display: block;
	overflow: hidden;
}

.tv_slide li {
	width:293px;
	height:202px;
	display: block;
}

.tv {
	background:url(../img/tv.gif) left top no-repeat;
	width:368px;
	height:255px;
	padding-top:33px;
	padding-left:40px;
	position:absolute;
	left:0;
	top:-208px;
}

.tv_movie {
	background:#FFF;
	display:block;
	width:293px;
	height:202px;
}

.tv a.tv_thum {
	background:#FFF;
	display:block;
	width:293px;
	height:202px;
}

.tv a img {
	animation:tvblink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes tvblink{
    0% {opacity:0.3;}
    100% {opacity:1;}
}
@-moz-keyframes tvblink{
    0% {opacity:0.3;}
    100% {opacity:1;}
}
@keyframes tvblink{
    0% {opacity:0.3;}
    100% {opacity:1;}
}

.bird {
	width:153px;
	height:122px;
	position:absolute;
	left:230px;
	top:-328px;
}

.bird a {
	background:url(../img/twibird_1.gif) left top no-repeat;
	width:153px;
	height:122px;
	display:block;
}

.bird a:hover {
	background:url(../img/twibird_2.gif) left top no-repeat;
}

.menu_area {
	width:550px;
	height:211px;
	position:absolute;
	right:0;
	top:-111px;
}

.menu_area ul li {
	width:110px;
	height:211px;
	float:left;
}

.menu_area ul li a {
	width:110px;
	height:211px;
	text-indent:-9999px;
	overflow:hidden;
	display:block;
}

.menu01 a {background:url(../img/menu.gif); background-position:0 0;}
.menu02 a {background:url(../img/menu.gif); background-position:-110px 0;}
.menu03 a {background:url(../img/menu.gif); background-position:-220px 0;}
.menu04 a {background:url(../img/menu.gif); background-position:-330px 0;}
.menu05 a {background:url(../img/menu.gif); background-position:-440px 0;}

.menu01 a:hover {background-position:0 -211px;}
.menu02 a:hover {background-position:-110px 211px;}
.menu03 a:hover {background-position:-220px 211px;}
.menu04 a:hover {background-position:-330px 211px;}
.menu05 a:hover {background-position:-440px 211px;}

/* ----------------------------------　プロダクトビジュアル　---------------------------------- */

#Product_visual {
	background:url(../img/blackboard.png) left top no-repeat;
	width:900px;
	height:400px;
	padding:57px 50px;
	position:relative;
	margin:48px auto 32px;
}

.product {
	width:900px;
	height:400px;
	background:#FFF;
}

.product a img {
	transition:all 0.3s;
	opacity:1;
}

.product a:hover img {
	opacity:0.8;
}

/* ----------------------------------　履歴とツイッター　---------------------------------- */

#Index_contents {
	background:url(../img/log_twiter.png) left top no-repeat;
	width:1000px;
	height:896px;
	position:relative;
	margin:0 auto;
	padding-bottom:72px;
}

.backlog {
	position:absolute;
	left:64px;
	top:97px;
}

.logbox {
	width:330px;
	height:143px;
	margin-bottom:13px;
	padding:0 17px;
}

.logbox p {
	display:table-cell;
	font-size:1.5rem;
	color:#3f3200;
	line-height:24px;
	width:330px;
	height:143px;
	text-align:left;
	vertical-align:middle;
}
.logbox p span {
	font-size:1.8rem;
	line-height:32px;
	margin-bottom:8px;
	width:330px;
	border-bottom:2px solid #ffcc00;
	display:block;
	font-weight:bold;
}

.logbox a {
	color:#00cbb0;
	text-decoration:underline;
}

.logbox a:hover {
	text-decoration:none;
}

.twidget {
	width:220px;
	height:350px;
	position:absolute;
	left:587px;
	top:423px;
}

/* ----------------------------------　フッター　---------------------------------- */

.footspace {
	width:100%;
	height:90px;
}

footer {
	width:100%;
	min-width:1000px;
	background:url(../img/foot_bg.png) left top repeat-x;
	height:90px;
	position: absolute;
	bottom: 0;
	*left:-1px;
}

.foot_wrap {
	width:1000px;
	height:90px;
	position:relative;
	margin:0 auto;
}

.foot_logo {
	width:236px;
	height:35px;
	position:absolute;
	left:0;
	top:12px;
}

.attention {
	width:800px;
	height:30px;
	position:absolute;
	color:#fff;
	left:0;
	top:60px;
	line-height:30px;
	font-size:1rem;
	text-align:left;
}

.copyright {
	width:200px;
	height:30px;
	position:absolute;
	color:#fff;
	right:0;
	top:60px;
	line-height:30px;
	font-size:1rem;
	text-align:right;
}

.foot_banner {
	width:200px;
	height:40px;
	position:absolute;
	background:#FFFFFF;
	right:0;
	top:25px;
}

* html footer {
	bottom:expression(document.getElementById("PageWrapper").offsetHeight % 2 == 0 ? 0 : -1);
}

/* ----------------------------------　インフォメーション　---------------------------------- */

.head_info {
	background:url(../img/head_info.gif) left top no-repeat;
	width:404px;
	height:96px;
	margin:48px auto;
	text-indent:-9999px;
	overflow:hidden;
}

.infobox {
	width:894px;
	padding:50px;
	background-color:#FFF;
	border-left:6px solid #b2b0b0;
	margin:0 auto 36px;
	position:relative;
}

.infobox blockquote {
	width:700px;
	background:#FFF8F3;
	padding:40px;
	border:1px solid #ff8327;
	text-align:left;
	font-size:1.6rem;
	margin:0 auto 24px;
	color:#6a350e;
	line-height:24px;
}

.infobox blockquote em {
	font-weight:bold;
	color:rgba(120,120,120,1.00);
}

.infobox blockquote strong {
	font-weight:bold;
	font-size:2.2rem;
	color:#ff8327;
}

.infobox table {
	width:700px;
	background:#FFF8F3;
	border:1px solid #ff8327;
	margin:0 auto 24px;
	font-size:1.6rem;
	color:#6a350e;
	line-height:24px;
}

.infobox table tr th {
	border:1px solid #ff8327;
	padding:5px;
}

.infobox table tr td {
	border:1px solid #ff8327;
	padding:5px;
	text-align:left;
}

div.infobox:after {
	content:"";
	width:994px;
	height:6px;
	display:block;
	background-color:#b2b0b0;
	position:absolute;
	bottom:-6px;
	left:0;
}

.info_title {
	font-size:1.8rem;
	color:#ff8327;
	text-align:left;
	margin-bottom:36px;
	border-bottom:3px solid #ff8327;
}

.info_title h3 {
	font-weight:bold;
}

.info_title:before {
	content:"";
	width:10px;
	height:10px;
	display:block;
	background-color:#ff8327;
	position:absolute;
	left:10px;
	top:10px;
	z-index:10;
}

.info_title:after {
	content:"";
	width:10px;
	height:10px;
	display:block;
	background-color:#ff8327;
	position:absolute;
	right:10px;
	top:10px;
	z-index:10;
}

.info_image {
	margin:0 auto 24px;
}

.info_image img {
	width:100%;
}

.info_image2 {
	margin:0 auto 24px;
}

.info_image2 img {
	margin:0 auto 0;
}

.info_image a img {
	transition:all 0.3s;
	opacity:1;
}

.info_image a:hover img {
	opacity:0.7;
}

.info_entry {
	font-size:1.6rem;
	line-height:24px;
	color:#6a350e;
	text-align:left;
	margin:0 auto 24px;
}

.info_entry a {
	color:#ff8327;
	text-decoration:none;
}

.info_entry a:hover {
	text-decoration:underline;
}

.info_entry strong {
	font-size:1.9rem;
	font-weight:bold;
	color:rgba(147,47,191,1.00);
}

/* ----------------------------------　製品情報　---------------------------------- */

.head_product {
	background:url(../img/head_product.gif) left top no-repeat;
	width:254px;
	height:96px;
	margin:48px auto;
	text-indent:-9999px;
	overflow:hidden;
}

.productbox {
	width:894px;
	padding:50px;
	background-color:#FFF;
	border-left:6px solid #b2b0b0;
	margin:0 auto 36px;
	position:relative;
}

.product_title {
	font-size:2.4rem;
	color:#ff4d8c;
	text-align:left;
	margin-bottom:36px;
	border-bottom:3px solid #ff4d8c;
	width:894px;
}

.product_title h3 {
	font-weight:bold;
}

.product_title:before {
	content:"";
	width:10px;
	height:10px;
	display:block;
	background-color:#ff4d8c;
	position:absolute;
	left:10px;
	top:10px;
	z-index:10;
}

.product_title:after {
	content:"";
	width:10px;
	height:10px;
	display:block;
	background-color:#ff4d8c;
	position:absolute;
	right:10px;
	top:10px;
	z-index:10;
}

.product_image {
	margin:0 auto 24px;
}

.product_image a img {
	transition:all 0.3s;
	opacity:1;
	width:100%;
}

.product_image a:hover img {
	opacity:0.7;
}

.product_outline dl {
	clear:both;
	width:894px;
	height:32px;
	margin-bottom:12px;
	
}

.product_outline dl dt {
	font-size:1.4rem;
	line-height:32px;
	width:150px;
	background-color:#ff4d8c;
	color:#FFF;
	text-align:center;
	float:left;
}

.product_outline dl dd {
	font-size:1.8rem;
	line-height:32px;
	width:714px;
	padding-left:30px;
	text-align:left;
	float:left;
	color:#ff4d8c;
}

/* ----------------------------------　スタッフルーム　---------------------------------- */

.head_staffroom {
	background:url(../img/head_staff.gif) left top no-repeat;
	width:329px;
	height:96px;
	margin:48px auto;
	text-indent:-9999px;
	overflow:hidden;
}

.staffroombox {
	width:894px;
	padding:50px;
	background-color:#FFF;
	border-left:6px solid #b2b0b0;
	margin:0 auto 36px;
	position:relative;
}

.staffroom_title {
	font-size:2.4rem;
	color:#ff4d8c;
	text-align:left;
	width:894px;
}

.staffroom_title h3 {
	font-weight:bold;
	background:url(../staff/mascot_title.png) center top no-repeat;
	width:894px;
	height:45px;
	text-indent:-9999px;
	overflow:hidden;
	padding-bottom:24px;
}

.staffroom_title:before {
	content:"";
	width:10px;
	height:10px;
	display:block;
	background-color:#00cbb0;
	position:absolute;
	left:10px;
	top:10px;
	z-index:10;
}

.staffroom_title:after {
	content:"";
	width:10px;
	height:10px;
	display:block;
	background-color:#00cbb0;
	position:absolute;
	right:10px;
	top:10px;
	z-index:10;
}

a.bloglink {
	width:200px;
	height:200px;
	margin:0 auto 12px;
	display:block;
	position:relative;
	border-radius:100px;
	background:#B1B1B1;
	box-shadow:0 0 5px rgba(0,0,0,0.2) inset;
}

a.bloglink img {
	transition:all 0.3s;
	position:absolute;
	left:0;
	top:0;
}

a:hover.bloglink img {
	margin-top:-10px;
}

.staffroom_stand img{
	margin:0 auto;
}

.staffroom_entry {
	font-size:1.6rem;
	line-height:24px;
	color:#6a350e;
	text-align:center;
	margin:0 auto 24px;
}

.staffroom_entry a {
	color:#ff8327;
	text-decoration:none;
}

.staffroom_entry a:hover {
	text-decoration:underline;
}

.staffroom_entry strong {
	width:300px;
	margin:12px auto 0;
	font-size:1.9rem;
	font-weight:bold;
	color:#00cbb0;
	display:block;
	line-height:36px;
	border-radius:18px;
	border:1px solid #00cbb0;
}


.staffroom_block {
	width:407px;
	float:left;
	padding:0 20px;
}



/* ----------------------------------　サポート　---------------------------------- */

.head_support {
	background:url(../img/head_support.gif) left top no-repeat;
	width:329px;
	height:96px;
	margin:48px auto;
	text-indent:-9999px;
	overflow:hidden;
}

.staffroombox {
	width:894px;
	padding:50px;
	background-color:#FFF;
	border-left:6px solid #b2b0b0;
	margin:0 auto 36px;
	position:relative;
}



.supportbox {
	width:894px;
	padding:50px;
	background-color:#FFF;
	border-left:6px solid #b2b0b0;
	margin:0 auto 36px;
	position:relative;
}

.supportbox p {
	font-size:1.5rem;
	margin-bottom:36px;
	color:dimgray;
}

.supportbox blockquote {
	width:700px;
	background:#FFF8F3;
	padding:40px;
	border:1px solid #880ae0;
	text-align:left;
	font-size:1.6rem;
	margin:0 auto 24px;
	color:#2A143A;
	line-height:24px;
}

.supportbox blockquote em {
	font-weight:bold;
	color:rgba(120,120,120,1.00);
}

.supportbox blockquote strong {
	font-weight:bold;
	font-size:2.2rem;
	color:#2A143A;
}

.supportbox table {
	width:700px;
	background:#F9EEFF;
	border:1px solid #880ae0;
	margin:0 auto 24px;
	font-size:1.3rem;
	color:#2A143A;
	line-height:24px;
}

.supportbox table tr th {
	border:1px solid #880ae0;
	padding:5px;
}

.supportbox table tr td {
	border:1px solid #880ae0;
	padding:5px;
	text-align:left;
}

div.supportbox:after {
	content:"";
	width:994px;
	height:6px;
	display:block;
	background-color:#b2b0b0;
	position:absolute;
	bottom:-6px;
	left:0;
}

.supportbox h4 {
	font-size:2.2rem;
	font-weight: bold;
	color:#c066ff;
	border-bottom:2px solid #c066ff;
}

a.patch_download {
	display: block;
	width:500px;
	height:40px;
	line-height: 40px;
	background-color:#c066ff;
	color:#fff;
	border-radius: 7px;
	border-bottom: 4px solid #880ae0;
	margin:36px auto;
	text-decoration: none;
	text-align: center;
	font-size:1.6rem;
	font-weight: bold;
	transition: all 0.3s;
}

a:hover.patch_download {
	background-color:#880ae0;
}

.patchbox {
	width:96%;
	border:1px solid #B1B1B1;
	text-align: left;
	padding:20px;
	margin-bottom:24px;
	font-size:90%;
}

.patchbox span {
	display: block;
	margin:0 auto 24px;
	width:60%;
	line-height: 32px;
	border-radius: 16px;
	background-color:#c066ff;
	color:#fff;
	text-align: center;
	font-size:1.8rem;
}