@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;
}

.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;
}

/* ----------------------------------　ページロード　---------------------------------- */


#gpt_loader-bg {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 15000;
}
.no-js #gpt_loader-bg {display:none;}

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

#gpt_loader img {
  width:200px;
}

#gpt_loader p {
	font-family: 'Oswald', sans-serif;
	font-size:1.6rem;
	margin-top:24px;
}

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

.modal { position:fixed; display:none; z-index:9999; top:40%; left:50%; width:612px; height:412px; margin:-206px 0 0 -326px; padding:20px; text-align:center; }
.modal_wrap {width:600px;
height:400px;
border-radius:20px;
border:6px solid #00365c;
background:url(../img/check.jpg) center top no-repeat;
background-color:#FFF;
background-size:100%;
position:relative;}
.modal a.box {width:180px;height:60px;display:table-cell; vertical-align:middle; border-radius:30px; transition:all 0.3s;}
a.box em {font-family: 'Nunito', sans-serif;font-weight:700;font-size:2.7rem;}
a.box span {font-size:1.4rem;}
.b_left {width:180px;height:60px;position:absolute; top:294px; left:50%; margin-left:-200px;}
.b_right {width:180px;height:60px;position:absolute; top:294px; left:50%; margin-left:20px;}
.b_left a {color:#fff;background-color:#ff006b; text-decoration:none;}
.b_right a {color:#fff;background-color:#0078ff; text-decoration:none;}
.b_left a:hover {background-color:#FF82B6;}
.b_right a:hover {background-color:#82BCFF;}
.modal a { cursor:pointer; }

/* ----------------------------------　ヘッダー　---------------------------------- */

header {
	width:100%;
	height:100px;
	position:fixed;
	top:0;
	left:0;
	background-color:rgba(255,255,255,0.9);
	z-index:1000;
}

.menuline {
	width:100%;
	height:6px;
	background-color:#00365c;
	position:relative;
}

.mlcenter {
	width:1000px;
	height:6px;
	margin:0 auto;
}

.mlright {
	width:726px;
	height:6px;
	background-color:#fff;
	padding-left:1px;
	margin-left:273px;
}

.mlright div {
	float:left;
	width:120px;
	height:6px;
	margin-right:1px;
}

.ml1 {background-color:#ff006b;}
.ml2 {background-color:#0078ff;}
.ml3 {background-color:#ace455;}
.ml4 {background-color:#ffb516;}
.ml5 {background-color:#cd45ff;}
.ml6 {background-color:#ff7a38;}

#Menu {
	width:1000px;
	height:88px;
	margin:0 auto;
}

.main_logo {
	float:left;
}

.main_logo a {
	width:274px;
	height:88px;
	background:url(../img/main_logo.png) left center no-repeat;
	text-indent:-9999px;
	overflow:hidden;
	opacity:1;
	transition:all 0.3s;
	display:block;
}

.main_logo a:hover {
	opacity:0.7;
}

#Menu ul {
}

#Menu ul li {
	width:120px;
	height:88px;
	float:left;
	margin-right:1px;
}

#Menu ul li a {
	width:120px;
	height:88px;
	display:table-cell;
	vertical-align:middle;
	text-decoration:none;
}

#Menu ul li a em {
	font-family: 'Nunito', sans-serif;
	font-weight:700;
	font-size:2rem;
}

#Menu ul li a span {
	font-size:1.2rem;
}

.mt1 a {color:#ff006b;background-color:rgba(255,255,255,0);transition:all 0.3s;}
.mt2 a {color:#0078ff;background-color:rgba(255,255,255,0);transition:all 0.3s;}
.mt3 a {color:#ace455;background-color:rgba(255,255,255,0);transition:all 0.3s;}
.mt4 a {color:#ffb516;background-color:rgba(255,255,255,0);transition:all 0.3s;}
.mt5 a {color:#cd45ff;background-color:rgba(255,255,255,0);transition:all 0.3s;}
.mt6 a {color:#ff7a38;background-color:rgba(255,255,255,0);transition:all 0.3s;}

.mt1 a:hover {color:#ffffff;background-color:rgba(255,0,107,1.00);}
.mt2 a:hover {color:#ffffff;background-color:rgba(0,120,255,1.00);}
.mt3 a:hover {color:#ffffff;background-color:rgba(172,228,85,1.00);}
.mt4 a:hover {color:#ffffff;background-color:rgba(255,181,22,1.00);}
.mt5 a:hover {color:#ffffff;background-color:rgba(205,69,255,1.00);}
.mt6 a:hover {color:#ffffff;background-color:rgba(255,122,56,1.00);}

/* ----------------------------------　メインビジュアル　---------------------------------- */

#Mainvisual {
	width:100%;
	height:800px;
	border-bottom:6px solid #ededed;
	position:relative;
}


.mv_bg {
	width:100%;
	height:800px;
	-webkit-filter: blur(5px);
	filter: blur(5px);
	opacity:0.3;
}

.mv_mainspace {
	width:100%;
	min-width:1000px;
	max-width:1200px;
	padding-top:140px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

.mv_mainspace a {
	width:100%;
	height:600px;
	display:block;
	background-size:contain;
	border-radius:15px;
	text-indent:-9999px;
	overflow:hidden;
	opacity:1;
	transition:all 0.3s;
}

.mv5 {
	background:url(../mainvisual/mv_05.jpg) center top no-repeat;background-size:cover;
}

.mv4 {
	background:url(../mainvisual/mv_04.jpg) center top no-repeat;background-size:cover;
}

.mv1 {
	background:url(../mainvisual/mv_01.jpg) center top no-repeat;background-size:cover;
}

.mv2 {
	background:url(../mainvisual/mv_02.jpg) center top no-repeat;background-size:cover;
}

.mv3 {
	background:url(../mainvisual/mv_03.jpg) center top no-repeat;background-size:cover;
}

.mv_mainspace a.mvm5 {
	background:url(../mainvisual/mv_05.jpg) center top no-repeat;
	background-size:cover;
	box-shadow:0 0 10px rgba(255,49,100,0.3);
	transition:all 0.3s;
}

.mv_mainspace a:hover.mvm5 {
	box-shadow:0 0 15px rgba(255,49,100,0.6);
}

.mv_mainspace a.mvm4 {
	background:url(../mainvisual/mv_04.jpg) center top no-repeat;
	background-size:cover;
	box-shadow:0 0 10px rgba(255,49,100,0.3);
	transition:all 0.3s;
}

.mv_mainspace a:hover.mvm4 {
	box-shadow:0 0 15px rgba(255,49,100,0.6);
}

.mv_mainspace a.mvm1 {
	background:url(../mainvisual/mv_01.jpg) center top no-repeat;
	background-size:cover;
	box-shadow:0 0 10px rgba(255,49,100,0.3);
	transition:all 0.3s;
}

.mv_mainspace a:hover.mvm1 {
	box-shadow:0 0 15px rgba(255,49,100,0.6);
}

.mv_mainspace a.mvm2 {
	background:url(../mainvisual/mv_02.jpg) center top no-repeat;
	background-size:cover;
	box-shadow:0 0 10px rgba(49,72,255,0.30);
	transition:all 0.3s;
}

.mv_mainspace a:hover.mvm2 {
	box-shadow:0 0 15px rgba(49,72,255,0.6);
}

.mv_mainspace a.mvm3 {
	background:url(../mainvisual/mv_03.jpg) center top no-repeat;
	background-size:cover;
	box-shadow:0 0 10px rgba(49,72,255,0.30);
	transition:all 0.3s;
}

.mv_mainspace a:hover.mvm3 {
	box-shadow:0 0 15px rgba(49,72,255,0.6);
}

/* ----------------------------------　履歴＆トピックス部　---------------------------------- */

#Topics {
	width:100%;
	height:620px;
	background:url(../img/ct_news.png) center top no-repeat;
}

.topics_area {
	width:1000px;
	height:500px;
	padding-top:60px;
	margin:0 auto 0;
}

.news {
	width:464px;
	height:500px;
	border-left:6px solid #ededed;
	position:relative;
	float:left;
	margin-right:60px;
}

.news h3 {
	width:452px;
	padding-right:12px;
	height:30px;
	line-height:30px;
	display:block;
	text-align:right;
	color:#fff;
	font-family: 'Nunito', sans-serif;
	font-weight:700;
	font-size:2.1rem;
	background-color:#ededed;
}

.newslog {
	width:470px;
	height:450px;
	padding-top:20px;
	position:absolute;
	top:30px;
	left:-6px;
	background:url(../img/rireki_ssom.png) right bottom no-repeat;
}

.logtxt {
	width:470px;
	height:450px;
	overflow:hidden;
	position:relative;
}

.newslog dl {
	width:420px;
}

.newslog dl dt{
	font-family: 'Nunito', sans-serif;
	font-weight:700;
	line-height:24px;
	border-left:6px solid #ff006b;
	font-size:2.1rem;
	color:#00365c;
	text-align:left;
	padding-left:12px;
	margin-bottom:16px;
}

.newslog dl dd{
	font-size:1.5rem;
	color:#828282;
	text-align:left;
	margin-left:18px;
	line-height:28px;
	padding-bottom:12px;
	border-bottom:1px dotted #a5a5a5;
	margin-bottom:18px;
}

.newslog dl dd a {
	text-decoration:none;
	color:#ff006b;
}

.newslog dl dd a:hover {
	text-decoration:underline;
}

.topics {
	width:470px;
	height:500px;
	float:left;
}

.topics ul li {
	width:470px;
	height:100px;
	display:block;
	margin-bottom:33px;
	border-radius:15px;
	position:relative;
	overflow:hidden;
	box-shadow:0 5px 5px rgba(0,0,0,0.1);
}

.topics ul li a figcaption {
	width:470px;
	height:100px;
	background:rgba(255,255,255,0.9);
	color:#4F4F4F;
	font-weight:400;
	text-align:center;
	position:absolute;
	top:-100px;
	left:0px;
	opacity:0;
	transition:all 0.3s;
}

.topics ul li a figcaption p {
	width:470px;
	height:100px;
	display:table-cell;
	vertical-align:middle;
	font-size:1.5rem;
	line-height:24px;
}

.topics ul li a figcaption p span {
	display:block;
	text-align:center;
	width:360px;
	margin:0 auto;
	border-bottom:1px solid #ff006b;
	padding-bottom:5px;
	margin-bottom:8px;
	font-weight:bold;
	color:#ff006b;
	font-size:1.7rem;
}

.topics ul li a:hover figcaption {
	top:0;
	left:0;
	opacity:1;
}

.topics ul li em {
	width:470px;
	height:100px;
	display:block;
	background-color:#eaeaea;
	font-family: 'Nunito', sans-serif;
	font-weight:700;
	font-size:3.6rem;
	color:#bebebe;
	line-height:100px;
}

/* ----------------------------------　バナー部　---------------------------------- */

#Information {
	width:100%;
	height:120px;
	background-color:#fff3f8;
	border-top:1px solid #f0e9ec;
}

#Information ul {
	width:1000px;
	height:60px;
	padding-top:30px;
	margin:0 auto;
}

#Information ul li {
	width:220px;
	height:60px;
	float:left;
	background-color:#fff;
}

#Information ul li a img{
	opacity:1;
	transition:all 0.3s;
}

#Information ul li a:hover img{
	opacity:0.7;
}

/* ----------------------------------　ツイッター格納　---------------------------------- */

#Twitter {
	width:100%;
	height:670px;
	background-color:#f5f8fa;
	border-top:1px solid #edf0f2;
}

.twi_bg {
	width:100%;
	height:670px;
	background:url(../img/ct_twitter.png) center top no-repeat;
}

.twi_wrap {
	width:1000px;
	margin:0 auto;
}

.twibox1 {
	width:288px;
	height:403px;
	padding-top:85px;
	border:6px solid #00365c;
	background:#FFF;
	border-radius:15px;
	float:left;
	position:relative;
	margin-top:120px;
}

.twibox2 {
	width:288px;
	height:403px;
	padding-top:85px;
	border:6px solid #ff1e56;
	background:#FFF;
	border-radius:15px;
	float:left;
	position:relative;
	margin-top:120px;
}

.twibox3 {
	width:288px;
	height:403px;
	padding-top:85px;
	border:6px solid #795035;
	background:#FFF;
	border-radius:15px;
	float:left;
	position:relative;
	margin-top:120px;
}

.twi_icon {
	width:138px;
	height:138px;
	border:6px solid #FFF;
	background:#FFF;
	box-shadow:0 5px 5px rgba(0,0,0,0.1);
	border-radius:15px;
	overflow:hidden;
	position:absolute;
	left:50%;
	margin-left:-75px;
	top:-75px;
}

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

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

.twi_tl {
	width:260px;
	height:390px;
	margin:0 auto;
}

.twi_icon img {
	width:100%;
}

/* ----------------------------------　姉妹ブランド　---------------------------------- */

#Sister {
	width:100%;
	padding-top:60px;
	height:460px;
	background:url(../img/ct_sister.png) center top no-repeat;
}

#Sister ul {
	width:1000px;
	height:400px;
	margin:0 auto;
}

#Sister ul li {
	width:140px;
	height:400px;
	float:left;
	background-color:#fff;
	position:relative;
}

#Sister ul li a {
	width:140px;
	height:400px;
	border-radius:15px;
	display:block;
	transition:all 0.3s;
	overflow:hidden;
	box-shadow:0 5px 5px rgba(0,0,0,0.1);
	opacity:1;
}

#Sister ul li a:hover{
	margin-top:15px;
	opacity:0.7
}


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

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

footer {
	width:100%;
	min-width:1000px;
	background-color:#00365c;
	height:100px;
	position: absolute;
	bottom: 0;
	*left:-1px;
}

.foot_wrap {
	width:1000px;
	height:100px;
	position:relative;
	margin:0 auto;
	background:url(../img/foot_logo.png) left center no-repeat;
}

.copyright {
	width:400px;
	height:40px;
	position:absolute;
	color:#fff;
	right:432px;
	top:30px;
	line-height:20px;
	font-size:1.3rem;
	text-align:right;
}

.copyright a {
	color:#FFF;
	text-decoration:underline;
	transition:all 0.3s;
}

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

.foot_acbanner {
	width:200px;
	height:40px;
	position:absolute;
	background:#FFFFFF;
	right:220px;
	top:30px;
}

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

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

/* ----------------------------------　サブページ　---------------------------------- */

#Contents h2 {
	font-family: 'Nunito', sans-serif;
	font-weight:700;
	font-size:4.6rem;
	margin-top:36px;
	margin-bottom:6px;
}

.contents_head {
	margin-bottom:36px;
}

.contents_head em{
	font-size:1.7rem;
}

.comingsoon {
	margin-top:180px;
	font-family: 'Nunito', sans-serif;
	font-weight:700;
	font-size:6rem;
	color:#D3D3D3;
}

/* ----------------------------------　プロダクトページ　---------------------------------- */

#Product {
	color:#e61c66;
}

#Goods {
	color:#ace455;
}

#Event {
	color:#ffb516;
}

#Support {
	color:#cd45ff;
}

/* ----------------------------------　サポートページ　---------------------------------- */

.support_attention {
	background-color:#FCF4FF;
	border:1px solid #cd45ff;
	padding:24px;
	width:900px;
	font-size:1.6rem;
	margin:0 auto 36px;
	color:rgba(94,94,94,1.00);
}

.support_attention strong {
	color:#cd45ff;
	font-weight:bold;
	font-size:140%;
}

.support_list {
	width:1000px;
	margin:0 auto 36px;
}

.support_title_list {
	width:470px;
	font-size:1.7rem;
	text-align:left;
	color:#cd45ff;
	line-height:36px;
	float:left;
	margin-right:60px;
}

.support_title_list ul li {
	border-bottom:1px dotted #cd45ff;
}


.support_title_list a {
	color:#cd45ff;
	text-decoration:none;
	text-shadow:0 0 0 #cd45ff;
	transition:all 0.3s;
}

.support_title_list a:hover {
	text-shadow:0 2px 5px #cd45ff;
}

.support_howto_list {
	float:left;
	width:470px;
}

.support_howto_list p {
	display:block;
	width:444px;
	padding:12px;
	border:1px solid #cd45ff;
	font-size:1.7rem;
	text-align:left;
	color:#cd45ff;
	line-height:24px;
	margin-bottom:24px;
}

.support_howto_list a {
	color:#cd45ff;
	text-decoration:none;
	text-shadow:0 0 0 #cd45ff;
	transition:all 0.3s;
}

.support_howto_list a:hover {
	text-shadow:0 2px 5px #cd45ff;
}

.support_box {
	width:1000px;
	margin:0 auto 36px;
	text-align:left;
	color:rgba(94,94,94,1.00);
}

.support_box h3 {
	font-size:2rem;
	display:block;
	width:1000px;
	padding-left:20px;
	color:#fff;
	height:36px;
	line-height:36px;
	border-radius:0 18px 18px 0;
	margin-bottom:12px;
}

p.support_title {
	font-size:1.8rem;
	font-weight:bold;
	margin-bottom:12px;
}

.support_box blockquote {
	padding:24px;
	width:900px;
	margin:0 auto;
	background:rgba(245,245,245,1.00);
	border:1px solid rgba(203,203,203,1.00);
	margin-bottom:24px;
	font-size:1.5rem;
}

.support_box blockquote img {
	margin:12px 0;
}

.support_box blockquote strong {
	font-weight:bold;
}

.support_box blockquote a {
	color:rgba(251,47,104,1.00);
	text-decoration:underline;
	line-height:42px;
}

.support_box blockquote a:hover {
	text-decoration:none;
}

.support_box .support_return {
	text-align:right;
	font-size:1.4rem;
	padding-right:24px;
}

.support_return a {
	color:rgba(251,47,104,1.00);
	text-decoration:underline;
	line-height:42px;
}

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

.product_contents {
	width:1000px;
	margin:0 auto 60px;
}

.product_list {
	width:310px;
	height:60vh;
	padding:24px;
	background:#FFF;
	border-radius:15px;
	box-shadow:0 0 5px rgba(0,0,0,0.3);
	float:left;
}

.product_listwrap {
	width:310px;
	height:60vh;
	overflow:hidden;
}

.product_listwrap ul li {
	width:280px;
	height:80px;
	display:block;
	background-color:#9B3739;
	margin-bottom:16px;
	position:relative;
}

.product_listwrap ul li a {
	width:280px;
	height:80px;
}

.product_listwrap ul li a figcaption {
	width:278px;
	height:78px;
	position:absolute;
	left:-280px;
	top:1px;
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,1.00), rgba(255,255,255,0.7), rgba(255,255,255,0.2));
	background-image: linear-gradient(left, rgba(255,255,255,1.00), rgba(255,255,255,0.7), rgba(255,255,255,0.2));
	transition:all 0.3s;
	font-weight:bold;
}

.product_listwrap ul li a:hover figcaption {
	left:1px;
}

.product_listwrap ul li a figcaption p {
	width:268px;
	padding-left:12px;
	height:80px;
	display:table-cell;
	vertical-align:middle;
	color:#00365c;
	font-size:1.5rem;
	text-align:left;
}

.product_lineup {
	width:610px;
	float:right;
}

.software {
	width:610px;
	margin-bottom:36px;
	padding-bottom:36px;
	border-bottom:1px solid #00365c;
	position:relative;
}

.one_title {
	font-size:2rem;
	text-align:left;
	font-weight:bold;
	margin-bottom:18px;
	line-height:36px;
}

.one_title a {
	color:#FFF;
	text-decoration:none;
	padding-left:12px;
	border-radius:0 18px 18px 0;
	display:block;
	background:#00365c;
	transition:all 0.3s;
}

.one_image {
	width:250px;
	height:250px;
	float:left;
	margin-right:20px;
}

.one_image img {
	width:100%;
}

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

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

.one_txt {
	width:340px;
	text-align:left;
	font-size:1.4rem;
	float:left;
	position:relative;
	min-height:250px;
	color:#00365c;
}

.one_txt dl {
	width:340px;
}

.one_txt dl dt {
	width:80px;
	line-height:24px;
	background:#00365c;
	color:#FFF;
	float:left;
	margin-right:12px;
	text-align:center;
	margin-bottom:6px;
	border-radius:3px;
}

.one_txt dl dd {
	width:248px;
	line-height:24px;
	float:left;
	margin-bottom:8px;
}

.pro_jump {
	width:1px;
	height:1px;
	position:absolute;
	top:-120px;
	left:0;
}

.shop_button {
	text-align:right;
	position:absolute;
	right:0;
	bottom:0;
}

a.b_dl {
	padding:6px 18px;
	background:#00cbb0;
	color:#FFF;
	font-size:1.3rem;
	text-decoration:none;
	display:inline-block;
	border-radius:20px;
	margin-right:8px;
	border:2px solid #FFF;
	transition:all 0.3s;
}

a:hover.b_dl {
	color:#00cbb0;
	background-color:#FFF;
	border:2px solid #00cbb0;
}

a.b_mem {
	padding:6px 18px;
	background:#5c8dff;
	color:#FFF;
	font-size:1.3rem;
	text-decoration:none;
	display:inline-block;
	border-radius:20px;
	border:2px solid #FFF;
	transition:all 0.3s;
}

a:hover.b_mem {
	color:#5c8dff;
	background-color:#FFF;
	border:2px solid #5c8dff;
}