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

/* base */
* { box-sizing: border-box;}
html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
html, body { height:100%; }
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a:link {
	color: #01751e;
}
a:visited {
	color: #FFCC66;
}
a:hover {
	color: #F60;
}
a:active { color: #09C;}

body,td,th {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	background-position: center;
	background-size: cover;
	background-color:#CCC;
}
.clearfix{ clear:both;}
.clearfix2{ clear:both; height:303px;}
.opp{ filter:alpha(opacity=30)!important; -moz-opacity: 0.3!important; opacity: 0.3!important;}

.stage{ position: relative; width: 100%; padding-top: 56.25%; }
.stage iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.youtube { position: relative; width: 100%; max-width: 902px; margin: 0 auto 60px; font-size: 13px;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
.fb_iframe_widget > span { vertical-align: baseline !important; }
.fb_iframe_widget{ width:90px;}
iframe.twitter-share-button {width: 80px!important;}

.header{ background-image:url(../img/head_bg.jpg); background-position:center top; min-height:850px; background-repeat: no-repeat; background-color:#fcfbff; }
.header .header-inner{ width:100%; max-width:1000px; margin:0 auto; position:relative; text-align:center;}
.header .header-inner img.kt{ position:absolute; width:80%; max-width:250px; top:20px; left:0;}
.header .header-inner img.catch{ position:absolute; right:0; top:30px;}
.header .header-inner img.legion_logo{ padding-top:200px; }

.bgsp img{ width:100%;}

.cover{ text-align:center; background-image:url(../img/cover.png); background-position:center top; background-repeat:no-repeat; margin-top:-320px;}
.cover #prebtn{ margin-top:0px; width:60%; max-width: 600px;}
.cover .news a{ text-decoration:none;}

.wrapper{
	text-align: center;
}
.wrapper .inner{ width:100%; max-width:1000px; margin:0 auto; padding:30px 0; position:relative;}
.wrapper .inner span{ color:#333; display:block; padding:10px 0; font-size:90%;}

.spec{ background-image:url(../img/bg_spec.jpg); background-position:center top; color:#fff; border-bottom: solid 1px #f8b51f; border-top: solid 1px #f8b51f; text-align:center; padding-bottom:30px;}
.spec .inner{ width:90%; max-width:600px; margin:0 auto; padding:40px 0 20px; text-align:left;}
.spec .inner dt{ float:left; display:block; padding-bottom:10px;}
.spec .inner dd{ margin-left:8em; padding-bottom:10px;}
.spec .inner dd .notice2{ font-size:80%; line-height:1.4; color:#DEDCE0;}
.spec img{ width:80%; display:inline-block; max-width:300px; padding:0px 5px 10px;}
.disclaimer{ margin-top:20px;}
.disclaimer div{ text-indent:-1.2em; margin-left:1em; font-size:80%; line-height:1.4; color:#DEDCE0; padding:5px 0;}

.footer{
	background-color: #CCC;
	text-align: center;
	font-size: 66%;
	padding: 30px 0;
	color: #333;
}
.footer img{ padding:5px;}
.footer img.kt{ width:80%; max-width:250px; padding:20px 0;}

/*! Flickity*/
.flickity-enabled { position: relative;}
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%;}
.flickity-slider { position: absolute; width: 100%; height: 100%;}
.flickity-prev-next-button { position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: hsl(188, 58%, 41%); cursor: pointer; /* vertically center */ -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.flickity-prev-next-button:hover { background: white; }
.flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px #09F;}
.flickity-prev-next-button:active { opacity: 0.6;}
.flickity-prev-next-button.previous { left: 0%; }
.flickity-prev-next-button.next { right: 0%; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px;}
.flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px;}
.flickity-prev-next-button:disabled { opacity: 0.3; cursor: auto;}
.flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%;}
.flickity-prev-next-button .arrow { fill: #333;}

/*page dots*/
.flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1;}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot { display: inline-block; width: 15px; height: 15px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer;}
.flickity-page-dots .dot.is-selected { opacity: 1; box-shadow: 0px 0px 15px #369DB1; background: #369DB1;}

/* hero-carousel*/
.hero-carousel { margin-bottom: 80px; width:100%; max-width:1100px; margin: 0 auto 80px;}
.hero-carousel__cell { width: 100%; height: 240px; color: white; }
.hero-carousel__cell__content { width:90%; max-width: 1000px; margin: 0 auto; position: relative;}
.hero-carousel h1 { margin: 0; padding: 30px 0 10px;}
.hero-carousel .tagline { font-size: 1.4rem; line-height: 1.0; margin: 0; color: #444;}
.hero-illustration { display: block; width: 100%; max-width: 200px; margin: 0 auto;}

/*large device styles*/
.hero-carousel__cell { height: 800px; color:#000; text-align:center; overflow:hidden;}
.hero-carousel__cell__content {  padding-top: 0px; }
.hero-carousel .photo { margin-top: 40px; }
.hero-carousel .photo img{ width:100%;}

.textlink { width: 100%; margin: 0 auto; text-align: center; padding: 20px 0; font-size:120%;}
.textlink a{ line-height: 1; padding: 4px; color: #ff6600; text-decoration:none;}
.textlink a:hover{ color:#ffffff;}

.banner{ margin: 0 auto 40px; text-align: center; max-width: 700px; position: relative;}
.banner img{ width: 90%;}
.banner a .over1 {}
.banner img.new{ width:80%; max-width:56px; position: absolute; top:-35px; left:3%; z-index: 100;}
.notice{ padding:2%; font-size:83%; color:#333;}

img.campaign_head{ width:100%;}
.campaign{ background-color: rgba(255, 255, 255, 0.82); padding: 5% 8%; text-align: left; border: solid 2px #666; box-shadow: 0px 3px 5px #000; border-radius:10px;}
.campaign h2{text-align:center; font-size:196%;}
.wrapper .inner .campaign  h2 span{ color:#fefd33; padding:0; display:inline-block; font-size:100%;}
.campaign h3{
	padding-top: 40px;
	padding-bottom: 10px;
	color: #02751d;
	font-size: 140%; margin-bottom: 20px;
    border-bottom: dotted 1px #02751d;
}
.campaign .notice{font-size: 90%; line-height: 1.4; color: #eeeeee;}
.campaign .notice .section{margin-left: 1em; text-indent: -1em; padding: 3px 0;}
.campaign .retweet{ text-align:center; margin:20px auto;}
.campaign .retweet img{ width:95%; max-width:400px;}
.campaign  dt{ float:left;}
.campaign  dd{ margin-left:6em; margin-bottom:20px;}
.wrapper .inner .campaign  dd span{ color:#6ee2f7; padding:0; display:inline-block; font-size:130%;}

.campaign_finish{ border:solid 1px #FF6600; background-color:rgba(255, 255, 255, 0.12); padding:15px; margin-bottom:30px; color:#FF6600;}
.backtotop{ display:inline-block; padding:1% 3%; background-color:#00751d; float:right; border: solid 1px #ccc; border-radius: 7px; position:absolute; right:20px; top:15px;}

.link {
    background: #f00;
    padding: 0 20px;
    font-size: 170%;
    color: #fff;
    font-weight: bold;
    height: auto;
    line-height: 60px;
    display: block;
    text-align: center;
    margin: 20px 0;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 2px 2px 2px #555;}

.link a {
    text-decoration: none;
    color: #FFF;
    width: 100%;
    height: 60px;}

.think {
    background: rgba(255, 123, 0, 0.14);
    padding: 15px 20px;
    color: #ff8703;
    font-weight: bold;
    height: auto;
    line-height: 60px;
    display: block;
    text-align: center;
    margin: 10px 0;
    border-radius: 10px;
    border: solid 1px #ff8603;
    line-height: 1.8;
	}



@media screen and ( min-width: 640px ) and ( max-width: 768px ) {
.header .header-inner img.catch{ position:absolute; right:10px; top:69px; width:70%;}
.hero-carousel__cell { height: 630px; color:#000; text-align:center;}
}

@media screen and ( min-width: 640px ){
.hidepc{ display:none;}
div.accordion li h4{ padding:40px 0 20px;}
div.accordion li h5{ font-size:150%; padding-bottom:20px;}
hr{ border: solid 1px #115161; margin: 80px 0 0;}
.sankaku{ width: 0; height: 0; border-top: 45px solid #f00; border-right: 80px solid transparent; border-bottom: 30px solid transparent; border-left: 80px solid transparent; margin:0 auto;}
.cover .news{
	display: block;
	margin: 30px auto;
	width: 95%;
	background-color: #C00;
	border: solid 2px #FFFFFF;
	max-width: 900px;
	padding: 1% 0;
	border-radius: 40px;
	font-size: 90%;
}

#storeLink{ margin:10px auto 0; width:552px; text-align:center; z-index:20; position:absolute; left:0; right:0;}
#storeLink a{ display:inline-block; width:276px; float:left; padding:13px 20px; }
#storeLink a img{ display:block; width:108px; float:right; }
#storeLink p{ text-align:center; font-size:13px; color:#000; float:left; padding-top:19px; line-height:1.5; }
#storeLink p span{ font-size:16px; font-weight:800; color:#000; }
}

@media screen and ( max-width: 639px ) {
.header{ display:none;}
.hidesp{ display:none;}
.hero-carousel__cell { height: 400px; color:#000; text-align:center;}
.hero-carousel p{ text-align:left;}

.spec .inner dl{ font-size:80%;}
.spec .inner dt{ float:left; display:block; padding-bottom:15px;}
.spec .inner dd{ margin-left:7em; padding-bottom:15px;}

.flickity-prev-next-button.previous,
.flickity-prev-next-button.next  { display:none;}
.hero-carousel h1 { margin: 0; padding: 0px 0 10px;}
.hero-carousel h1 img{ width:100%;}
.cover #prebtn{ margin-top:0px; width:90%; max-width: 600px;}

div.accordion li h2{ padding:0px 0 10px; font-size:110%;}
div.accordion .select li span{ display:block; padding-top:5px; line-height:1.4; font-size:73%;}
div.accordion li h4{ font-size:125%; color:#6ab5c8; padding:20px 0 10px;}
div.accordion li h5{ font-size:110%; padding-bottom:20px;}

hr{ border: solid 1px #115161; margin: 40px 0 0;}
.sankaku{ width: 0; height: 0; border-top: 35px solid #f00; border-right: 60px solid transparent; border-bottom: 30px solid transparent; border-left: 60px solid transparent; margin:0 auto;}

.campaign{ padding: 5%; text-align: left; border-left:none; border-right:none;}
.campaign h2{text-align:center; font-size:135%; padding-top:10%;}
.campaign h3{ font-size: 120%;}
.campaign  dt{ float:none;}
.campaign  dd{ margin-left:0em; margin-bottom:20px; font-size: 90%;}
.campaign .notice{ padding:0; font-size:80%;}
.cover .news{
	display: block;
	margin: 0px auto 15px;
	width: 100%;
	background-color: #C00;
	max-width: 900px;
	padding: 2% 1%;
	font-size: 80%;
}

.get_app{ padding:10px 0 45px; text-align:center; background-image:none; background-color:#FFF;}
.get_app img.gp{ width:43%;}
.get_app img.ios{ width:44%;}

.disclaimer{ font-size:80%;}
.disclaimer div{ font-size:100%;}

.link {font-size: 119%;}

.backtotop{ padding:3% 5%; top:7px;}



/*ACCORDION*/
div.accordion { width: 100%; margin:0 auto; }
div.accordion ul{ list-style:none; word-wrap: break-word;}
div.accordion > ul > li > a { display: block; color: #ffd800; font-size: 140%; text-decoration: none; cursor: pointer; padding: 10px 12px; position: relative; text-align: center;}
div.accordion > ul > li > a:hover{}
div.accordion > ul > li > a:after, div.accordion > ul > li > a.active:after{ font-size: 12px; position: absolute; right: 12px; top: 16px; color: #ffd800; display:none;}
div.accordion > ul > li > a:after{ content: "▼";}
div.accordion > ul > li > a.active:after{ content: "▲";}
div.accordion > ul > li > ul { display: none; padding: 5% 0; background-color: #333; background-image:url(../img/bg_select.jpg); background-repeat:repeat-x;}
div.accordion > ul > li > ul > li > a{ color: #67ab9c; position: relative;}
div.accordion > ul > li > ul > li > a:hover{ color: #ff0000;}
div.accordion li h2{ padding:0px 0 10px;}
div.accordion li h3{ font-weight:normal; padding-bottom:30px;}
div.accordion li h4 img{ width:100%; max-width:676px;}

div.accordion li dl{ padding:10px 0 30px; font-size:90%; word-wrap: break-word; border-bottom:solid 1px #cccccc; margin-bottom:20px;}
div.accordion li dt{ display:block;float:left}
div.accordion li dd{ display:block; margin-left:7em;}

div.accordion .select{ margin:30px auto; width:100%; max-width:800px;}
div.accordion .select li{ display:inline-block; width:30%; text-align:center;}
div.accordion .select li img{ width:80%; max-width:130px;}
div.accordion .select li span{ display:block; padding-top:10px; line-height:1.4;}
div.accordion .present{}
div.accordion .present img{ width:100%; max-width:940px;}