@charset "UTF-8";
@import "reset5.css";

body { color:#fff; line-height:1; background-color: #050505; padding: 0; position: relative; min-height: 100%; text-align: center; overflow: hidden;
font-family: Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
	_font-family: 'ＭＳ Ｐゴシック', sans-serif;/* IE6では最初に日本語フォントを指定しないと指定より大きくなる */
	font-size: 12px;
	*font-size: 82%;
	-webkit-text-size-adjust:none;/* iPhoneとかで横向きにすると文字サイズが自動調整をやめる */
	word-spacing: 0.4em;
	letter-spacing: 0.04em;
	}
	
html { min-height: 100%; }

* html body { font-family: "Helvetica Neue", Helvetica, Arial "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif }
*:first-child+html body { font-family:"Helvetica Neue", Helvetica, Arial ,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 12px default setting */
body { font-size:12px; line-height: 1 }
body p { line-height: 1.8; }
*:first-child+html body { font-size:77%;}
* html body { font-size:77%;}

iframe { overflow: hidden }

/* !clearfix */
hr { display: none; }

.cfix { /zoom : 1; }
.cfix:after { content : ''; display : block; clear : both; }

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}

h1, h2, h3, h4, h5 { letter-spacing: 0.05em }

/* margin-bottom
=========================================*/
.mb0 { margin-bottom:0 !important; }
.mb3 { margin-bottom:3px !important; }
.mb4 { margin-bottom:4px !important; }
.mb5 { margin-bottom:5px !important; }
.mb7 { margin-bottom:7px !important; }
.mb10 { margin-bottom:10px !important; }
.mb12 { margin-bottom:12px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb80 { margin-bottom:80px !important; }

.tx9 { font-size: 9px !important; }
.tx10 { font-size: 10px !important; }
.tx11 { font-size: 11px !important; }
.tx12 { font-size: 12px !important; }
.tx13 { font-size: 13px !important; }
.tx14 { font-size: 14px !important; }
.tx15 { font-size: 15px !important; }
.tx16 { font-size: 16px !important; }
.tx18 { font-size: 18px !important; }
.tx20 { font-size: 20px !important; }
.tx24 { font-size: 24px !important; }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }

/* !Links */
a:link { color: #1e1e1e; text-decoration: none  }
a:visited { color: #1e1e1e; text-decoration: none }
a:hover { color: #e64219; text-decoration: none }
a:active { color: #e64219; text-decoration: none }
/*p a:link, td a:link { border-bottom: 1px dotted; text-decoration: none  }
p a:hover, td a:hover { color: #e60012; border-bottom: 0px; text-decoration: none }*/


html { margin: 0; padding: 0}
body { margin: 0; padding: 0 }

#wrapper { position: relative; padding-bottom: 65px }
#wrapper .copy { position: absolute; left: 28.5%; top: 24.8%; }
#wrapper .copy img { opacity: 0; position: relative; top: -20px }
#wrapper .copy img:nth-child(odd){ top: 20px }

.kv { position: relative; opacity: 0; transform: scale(1.2); transition: opacity 2s linear, transform 1.6s cubic-bezier(0.19, 1, 0.22, 1); z-index: 0 }
.kv.active { opacity: 1; transform: scale(1) }
.mov { position: absolute; left: 0; top: 0; }
.bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; /*background: url( ../img/bg.png)*/ }

/*.title { position: absolute; left: 50%; top: 50%; margin: -230px 0 0 -180px; display: none }*/
.title { position: absolute; left: 30px; top: 20px; width:280px; }
.btn { margin-top: 15px }
.btn a { display: block; padding: 12px 0; border: solid 2px #f7f7f7; }
.btn a:hover { background-color: #e70f14; border: solid 2px #e70f14; }

#footer { position: fixed; left: 0; bottom: 0; width: 100%; text-align: left; background: url(../img/blk75.png) }
#footer .inner { padding: 20px 30px; position: relative }
#footer p.copyright { position: absolute; left: 140px; top: 14px; color: #fff; line-height: 1.4 }
#footer .sns_ico { position: absolute; right: 0; top: 17px; width: 350px }
#footer .sns_ico li { float: left; margin-right: 20px;　}
#footer .sns_ico li:last-child { border-left: solid #575757 1px; padding-left: 15px }
#footer .sns_ico li a { display: block }

#play { position: fixed; right: 74px; top: 20px; cursor: pointer }
#snd { position: fixed; right: 20px; top: 20px; cursor: pointer }

#loader { position: fixed; left: 50%; top: 50vh; margin: -25px 0 0 -40px; z-index: 100 }

#lang { position: fixed; right: 40px; top: 40px; width: 120px; height: 32px; font-size: 14px; text-align: center; cursor: pointer; z-index: 99 }
#lang .selected { display: block; width: calc(100% - 8px); padding-right: 8px; font-size: 13px; line-height: 32px; border-radius: 16px; background: rgba(242,239,235,0.25); border: solid 1px #fff; font-weight: 500; transition: all 0.2s }
#lang .selected:hover { background: rgba(242,239,235,0.5) }
#lang::after { content: ""; position: absolute; right: 12px; top: calc(50% - 3px); width: 6px; height: 6px; background: url("../img/lang_tri.png") no-repeat; background-size: contain }
#lang ul { position: absolute; left: 0; top: 34px; width: 100%; background: #fff; border-radius: 12px; box-shadow: 4px 4px 12px rgba(0,0,0,0.15); display: none }
#lang ul li { line-height: 40px; border-bottom: solid 1px #d9cfc5; color: #18385c; font-weight: 600; }
#lang ul li.current { background: #d9cfc5 }
#lang ul li a { display: block }

.pc { display: block; }
.sp { display: none; }

/*===============================================
●smart.css  画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
	
#wrapper { padding-bottom: 0 }

#footer { position: relative; left: inherit; bottom: inherit; width: 100%; text-align: left; background: url(../img/blk75.png) }
#footer .inner { padding: 40px 20px 20px; position: relative; text-align: center }
#footer p.copyright { position: relative; left: inherit; top: inherit; margin-top: 1em }
#footer .sns_ico { position: relative; right: inherit0; top: inherit; width: 100%; text-align: center; margin-bottom: 3em }
#footer .sns_ico li { float: none; margin: 0 10px; display: inline-block }
#footer .sns_ico li:last-child { border-left: none; padding-left: 0 }
#footer .sns_ico li:last-child { margin-top: 1em }
#footer .sns_ico li:last-child img { height: 32px }
    
#lang { position: fixed; right: 15px; top: 15px; width: 80px; height: 24px; font-size: 14px; text-align: center; cursor: pointer; }
#lang .selected { display: block; width: calc(100% - 8px); padding-right: 8px; font-size: 10px; line-height: 24px; border-radius: 16px; background: rgba(242,239,235,0.25); border: solid 1px #fff; font-weight: 500; transition: all 0.2s }
#lang::after { content: ""; position: absolute; right: 6px; top: calc(50% - 3px); width: 6px; height: 6px; background: url("../img/lang_tri.png") no-repeat; background-size: contain }
#lang ul { position: absolute; left: 0; top: 26px; width: 100%; background: #fff; border-radius: 12px; box-shadow: 4px 4px 12px rgba(0,0,0,0.15); display: none }
#lang ul li { line-height: 32px; border-bottom: solid 1px #d9cfc5; color: #18385c; font-weight: 600; }
#lang ul li.current { background: #d9cfc5 }
#lang ul li a { display: block; font-size: 12px }

.pc { display: none; }
.sp { display: block; }
}