/*====================================

	----------------------------------
  		Structure
  	----------------------------------

  	0. General
  	1. Header
  	2. Main
  	3. Footer
  	4. Page

  	----------------------------------
  		Change Log
  	----------------------------------
	
	-2017/2/28	 Fixed all

====================================*/

/*====================================

	0. General

====================================*/
@import url('https://fonts.googleapis.com/css?family=Marcellus+SC|Noto+Sans');
@import url('http://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

body { -webkit-animation: fadeIn 2s ease 0s 1 normal; animation: fadeIn 2s ease 0s 1 normal; }
@keyframes fadeIn {
    0% {opacity: 0; }
    100% {opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0; }
    100% {opacity: 1; }
}


html { font-size: 62.5%; }
body { position: relative; background: #ffffff; color: #333333; font-size: 1.0rem; font-family: "Noto Sans", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
img { vertical-align: bottom; }
a { color: #333333; text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }

div.inner { display: block; overflow: hidden; margin: 0 auto; min-width: 1200px; zoom: 1; }
.pcOnly { display: none; }
#page-top { position: fixed; right: 20px; bottom: 20px; z-index: 100; }
#page-top a { display: block; width: 50px; height: 50px; background: url(../img_20180710/icon_pagetop.svg) no-repeat 0 0; text-indent:-9999px; }
.w100 { width: 100%; height: auto; }


/*====================================

	1. Header

====================================*/
header { margin-bottom: 4.8vw; padding: 5.8vw 6vw; background: url(/lovela-bandai/w_de_otoku/img_20180710/header_bg.gif) repeat-y 50% 0 / 100% auto; text-align: center; }



/*====================================

	2. Main

====================================*/
main { font-size: 1.4rem; line-height: 1.4; }


/*====================================

	3. Footer

====================================*/
footer { padding: 6.2vw 0; text-align: center; font-size: 1.2rem; }
footer p { margin-top: 5vw; }

/*====================================

	4. Page

====================================*/
section.block01 { margin: 0 1.4vw 4vw; }
section.block01 h2 { margin: 0 10vw 3.2vw; text-align: center; }
section.block01 nav { text-align: center; }
section.block01 nav li { display: inline-block; width: 46vw; margin: 0 1.4vw 0 0; }

section.block02 { padding: 5.8vw; background: #00a0e9 url(../img_20180710/pc_img16.png) no-repeat 50% 0 / 150% auto; text-align: center; }
section.block02 h2 { margin-bottom: 5vw; }
section.block02 figure { margin-bottom: 5vw; }
section.block02 div { margin: 0 auto; padding-bottom: 5vw; background: #ffffff; }
section.block02 div h3 { margin-bottom: 5vw; padding: 3vw 0; background: #fff100; color: #00a0e9; font-size: 2rem; line-height: 1; }
section.block02 div p { margin-bottom: 5vw; font-size: 1.6rem; }
section.block02 div ul.app { margin-bottom: 5vw; text-align: center; }
section.block02 div ul.app li { margin-bottom: 5vw; }
section.block02 div ul.app dt { margin: 0 auto 2vw; padding: 1.7vw 0; width: 80vw; border-radius: 1em; color: #ffffff; font-size: 1.8rem; line-height: 1; }
section.block02 div ul.app li.android dt { background: #ec6d56; }
section.block02 div ul.app li.iPhone dt { background: #004986; }
section.block02 div ul.notice { margin: 0 5vw; text-align: left; font-size: 1.6rem; }
section.block02 div ul.notice li { padding-left: 1.5em; text-indent: -1.5em; line-height: 1.5; }

section.block03 { padding: 5.8vw; background: #62b852 url(../img_20180710/pc_img17.png) no-repeat 50% 0 / 150% auto; text-align: center; }
section.block03 h2 { margin-bottom: 5vw; }
section.block03 figure { margin-bottom: 5vw; }
section.block03 div { margin: 0 auto; padding-bottom: 5vw; background: #ffffff; }
section.block03 div h3 { margin-bottom: 5vw; padding: 3vw 0; background: #fff100; color: #59ae4a; font-size: 2rem; line-height: 1; }
section.block03 div p { margin: 0 3vw 3vw; font-size: 1.8rem; }
section.block03 div p small { font-size: 1.4rem; }
section.block03 div p figure { display: block; margin-top: 0px; }
section.block03 ul.step { margin: 0 3vw; background: url(../img_20180710/line_dot_green.gif) repeat-x 0 0; text-align: left; }
section.block03 ul.step > li { margin: 0; padding: 4vw 0 3vw; background: url(../img_20180710/line_dot_green.gif) repeat-x 0 100%; }
section.block03 ul.step li p { font-size: 1.6rem; }
section.block03 ul.step li strong { position: relative; display: block; margin-bottom: 1vw; color: #59ae4a; font-size: 1.7rem; }
section.block03 ul.step li strong:before { display: inline-block; margin-right: 10px; width: 8vw; border-radius: 50%; background: #59ae4a; color: #ffffff; text-align: center; font-size: 1.6rem; line-height: 8vw; }
section.block03 ul.step li:nth-child(1) strong:before { content: "1"; }
section.block03 ul.step li:nth-child(2) strong:before { content: "2"; }
section.block03 ul.step li:nth-child(3) strong:before { content: "3"; }
section.block03 ul.step li:nth-child(4) strong:before { content: "4"; }
section.block03 ol li { margin: 2vw 3vw 3vw; padding: 3vw 4.5vw; background: #eee; }
section.block03 ol li figure { display: block; margin-top: 20px; text-align: center; }
section.block03 ol dt { display: inline-block; margin-bottom: 2vw; padding: 1vw; background: #59ae4a; color: #ffffff; font-size: 1.8rem; line-height: 1; }
section.block03 ol dd { font-size: 1.6rem; }