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

* { margin: 0; padding: 0; }
html { height: 100%; }
body { background: #FFF; font-family: source-han-sans-japanese, sans-serif; font-size: 16px; color: #333; letter-spacing: 0.05em; text-align: justify; }
hr { display: none; }
ul { list-style: none; }
section, nav, article, footer { display: block; }
img { vertical-align: bottom; }

/*リンク設定
----------------------------------------------*/
a { color: #FFF; text-decoration: none; }
a:hover { text-decoration: underline; opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; background:none!important; transition: 0.5s; }

/*全体設定
----------------------------------------------*/
.cen { text-align: center; }
.lef { text-align: left; }
.rig { text-align: right; }
h2 { margin-bottom: 20px; }


/*体験版
----------------------------------------------*/
.hhTrial { max-width: 500px; margin: 0 auto 30px; background: #006; border: 5px solid #006; }
.hhTrial > .coution { padding-top: 10px; color: #FFF; font-size: small;}
.hhTrial ul { padding: 10px 0 5px; display: flex; }
.hhTrial > ul > li > a { display: block; background: #de1654; padding: 5px 15px; border-radius: 3px; }
.hhTrial a:hover { background: #ee3f76 !important; }
#inline-content { margin: 20px; }


/*トップ設定
----------------------------------------------*/
#top { width: 100%; min-height: 100vh; position: relative; }
#topA { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
#topA h1 { margin-bottom: 50px; }
#topA ul { background: url(../img/index/btn_share.png) no-repeat; width: 125px; padding-top: 45px; display: flex; justify-content: center; }
#topA ul li { padding: 0 8px; }

#topB { width: 100%; min-height: 100vh; position: absolute; top: 0; z-index: -1; }
#topBimg1 { background: url(../img/index/hh_app1.jpg) 50% 0 no-repeat; background-size: cover; min-height: 100vh; }
#topBimg2 { background: url(../img/index/hh_app2.jpg) 50% 0 no-repeat; background-size: cover; min-height: 100vh; }
#topBimg3 { background: url(../img/index/hh_app3.jpg) 50% 0 no-repeat; background-size: cover; min-height: 100vh; }


/*メニュー設定
----------------------------------------------*/
#menu { clear: both; position: fixed; top: 50px; right: 0; z-index: 9999; }
#menuIn { display: none; }

/*News
----------------------------------------------*/
#news { width: 100%; padding: 35px 0; background: #094c9e; text-align: center; color: #FFF; }
#news ul { max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
#news ul li { padding: 5px; }
#news ul li img { border: 3px solid #006; }

/*Intro
----------------------------------------------*/
#intro { background: url(../img/index/bg_cloud.jpg) 50% 0 no-repeat; background-size: contain; text-align: center; padding: 50px 0 80px; }
#introMain { max-width: 500px; margin: 50px auto 0; text-align: left; font-weight: 300; font-size: 16px; line-height: 1.6; text-align: justify; font-feature-settings : "palt"; }

/*Story
----------------------------------------------*/
#story { background: #094c9e url(../img/index/bg_sky.jpg) 50% 0 no-repeat; background-size: contain; text-align: center; padding: 50px 0 80px; }
#storyMain { margin-bottom: 80px; }
#story h2 { margin-bottom: 50px; }
#story ul { display: flex; max-width: 960px; margin: 0 auto; flex-wrap: wrap; justify-content: space-between; }
#story ul li { max-width: 460px; color: #FFF; font-size: 14px; border: 1px solid #FFF; background: #2e67ac; padding: 20px; border-radius: 10px; box-sizing: border-box; text-align: left; margin-bottom: 40px; }
#story ul li h3 { margin-bottom: 10px; }
#story ul li p { text-align: justify; font-feature-settings : "palt"; }

/*Chara
----------------------------------------------*/
#chara { background: url(../img/index/bg_cloud.jpg) 50% 0 no-repeat; background-size: contain; text-align: center; padding: 50px 0 80px; }
#charaIn { background: url(../img/index/chara.png) no-repeat; width: 960px; margin: 20px auto 0; position: relative; }

#charaMain { text-align: left; color: #094c9e; }
.charaName { position: absolute; top: 162px; left: 435px; }
.textArea { width: 480px; position: absolute; top: 370px; left: 447px; font-size: 14px; }
.charaPro { font-size: 12px; border-top: 1px solid #094c9e; margin-top: 20px; padding-top: 20px; }
.charaPhoto { margin-top: 20px; }
#charaSub { top: 450px; }

.charaVoice { display: flex; margin: 15px 0 0; }
.charaVoice li { margin-right: 10px; }
.charaVoice li:last-child { margin-right: 0; }
.charaVoice a { display: block; color: #FFF; padding: 5px 15px; border-radius: 50%; text-align: center; }
.charaVoice .jp-play { background: #094c9e; }
.charaVoice .jp-play:hover { background: #094c9e !important; }
.charaVoice .jp-pause { background: #ff1d87; }
.charaVoice .jp-pause:hover { background: #ff1d87 !important; }

.charaList { display: flex; position: absolute; top: 30px; right: 30px; z-index: 9999; }
.charaList li img { max-width: 70px; height: auto; margin-left: 5px; }
.charaList li { position: relative; }
.charaList li span { position: absolute; top: 3px; right: -5px; background: #F36; padding: 0 5px; color: #FFF; font-size: 8px; border-radius: 2px; }

.charaInterview { width: 300px; height: 50px; background: #094c9e url(../img/index/special_li.png) 0 50% no-repeat; text-align: left; display: flex; justify-content: center; align-items: center; position: relative; margin: 15px 0 0 0; }


/*Scene
----------------------------------------------*/
#scene { background: #96e3ff; text-align: center; padding: 50px 0 80px; }
#charaPhoto { display: flex; flex-wrap: wrap; justify-content: center; }
#charaPhoto li { padding: 5px; }

/*Music
----------------------------------------------*/
#music { background: #5fd4ff; text-align: center; padding: 50px 0 80px; }
#music p { margin-top: 50px; }
#movie { width: 95%; max-width: 960px; margin: 0 auto; }
.youtube { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 15px; }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; border-radius: 5px; }

/*Special
----------------------------------------------*/
#spe { background: #00baff; text-align: center; padding: 50px 0 80px; }
#speTest { display: flex; max-width: 960px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
#speTest li { width: 400px; height: 50px; background: #094c9e url(../img/index/special_li.png) 0 50% no-repeat; text-align: left; display: flex; justify-content: center; align-items: center; margin: 10px; position: relative;  }
#speTest li span { position: absolute; top: 3px; right: -5px; background: #F36; padding: 0 5px; color: #FFF; font-size: 8px; border-radius: 2px; }

#speBtn { max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
#speBtn li { padding: 5px;}

#speTrial { max-width: 960px; margin: 0 auto 5px; display: flex; flex-wrap: wrap; justify-content: center; }


/*Product
----------------------------------------------*/
#prod { background: url(../img/teaser/bg2.jpg) 50% no-repeat; background-size: cover; text-align: center; padding: 50px 0 80px; }
#prod table { background-color: rgba(255,255,255,0.8); width: 100%; margin: 50px 0; color: #094c9e; padding: 20px 0; }
#prod table th , #prod table td { width: 50%; padding: 5px; }
#prod table th { text-align: right; }
#prod table td { text-align: left; }


/*フッター
----------------------------------------------*/
#gotop { text-align: center; position: relative; top: -69px; margin-bottom: -69px; }
footer { background: #00baff; text-align: center; color: #FFF; font-size: 10px; padding: 50px 0 0; }
footer ul { margin: 50px 0; display: flex; justify-content: center; }
footer ul li { padding: 0 20px; }
#copy { background: #222d64; padding: 30px 0 50px; }


/*----- フェードイン -----*/
.inviewfadeIn { opacity: 0; transform: translate(0, 60px); -webkit-transform: translate(0, 60px); transition: 1.5s; }
.fadeIn { opacity: 1.0; transform: translate(0, 0); -webkit-transform: translate(0, 0); }


/*
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
SP用タグ
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/
@media screen and (max-width: 720px) {
	img { max-width: 95%; height: inherit; }

	/*トップ設定
	----------------------------------------------*/
	#topA { }
	#topB { background: #009; }
	#topBimg1,#topBimg2,#topBimg3 { background-size: contain; background-position: 50%; }

	/*Intro
	----------------------------------------------*/
	#introMain { width: 95%; }

	/*Story
	----------------------------------------------*/
	#story ul li { width: 95%; margin: 0 auto 20px; }

	/*Chara
	----------------------------------------------*/
	#charaIn { width: 100%; height: auto; background: none; }

	.charaName { position: static; }
	.textArea { width: 95%; margin: 0 auto 20px; position: static; }

	.charaList { position: static; width: 95%; margin: 0 auto; }
	.charaList li { padding: 2px; }
	.charaList li img { width: 100%; }

	/*Product
	----------------------------------------------*/
	#prod table { background-color: #FFF; }
}