@charset "utf-8";
#bg {
    background: url("../images/pre/bg.jpg") no-repeat center 0 /cover
}
.preorder {
    min-width: 1000px
}
.smooth_hover {
    transition: all 0.3s ease
}
.smooth_hover:hover {
    opacity: .8
}
.pre_modal_style {
    background: url("../images/pre/pre_modal_head.png") no-repeat 0 0, url("../images/pre/pre_modal_bottom.png") no-repeat 0 bottom, url("../images/pre/pre_modal_body.png") repeat-y 0 0;
    box-shadow: 0 0 4px rgba(184, 156, 28, 0.8);
    margin: auto;
    padding: 38px 25px 40px;
    width: 724px
}
.pre_modal_style h4 {
    font-size: 2.4rem;
    font-weight: bold;
    padding: 0 0 55px;
    text-align: center
}
.pre_modal_style li {
    margin: 0 0 5px
}
.pre_modal_style li span {
    font-size: 1.6rem
}
.pre_modal_style li.mb_long {
    margin: 0 0 25px;
}
#pre_main {
    height: 1170px;
    position: relative;
    overflow: hidden;
    width: 100%
}
#pre_main.animated .chara_left,
#pre_main.animated .chara_right,
#pre_main.animated .cv,
#pre_main.animated .icon_achievement,
#pre_main.animated h1,
#pre_main.animated h2,
#pre_main.animated .cv_title,
#pre_main.animated .catchphrase {
    opacity: 1;
    transform: translate(0, 0)
}
#pre_main.animated .cv,
#pre_main.animated .icon_achievement,
#pre_main.animated h1,
#pre_main.animated h2,
#pre_main.animated .cv_title,
#pre_main.animated .catchphrase {
    transition-delay: 0.9s
}
#pre_main.animated .chara_left {
    transition-delay: 0.4s
}
#pre_main.animated .chara_right {
    transition-delay: 0.5s
}
#pre_main .chara_left,
#pre_main .chara_right,
#pre_main .cv,
#pre_main .icon_achievement,
#pre_main h1,
#pre_main h2,
#pre_main .cv_title,
#pre_main .catchphrase {
    position: absolute;
    left: 50%;
    opacity: 0;
    transition: all 1.8s ease
}
#pre_main h1 {
    top: 9px;
    margin: 0 0 0 75px;
}
#pre_main h2 {
    top: 470px;
    margin: 0 0 0 -312px;
}
#pre_main .catchphrase {
		width:644px;
    top: 420px;
    margin: 0 0 0 -312px;
}
#pre_main .chara_left {
    top: 20px;
    margin: 0 0 0 -393px;
    transform: translate(0, 15px)
}
#pre_main .chara_right {
    top: 35px;
    margin: 0 0 0 -195px;
    transform: translate(0, -15px)
}
#pre_main .icon_achievement {
    top: 287px;
    margin: 0 0 0 -358px
}
#pre_main .cv_title{
	top:704px;
	margin:0 0 0 -120px;
	width:255px;
}
#pre_main .cv {
    display: flex;
    top: 775px;
    margin: 0 0 0 -239px;
    width: 478px;
}
#pre_main .cv li {
    margin: 0 10px;
}
section {
    opacity: 0;
    position: relative;
    transition: opacity 0.5s ease;
    width: 742px
}
section h3 {
    padding: 0
}
section .btn > p {
    height: 52px;
    width: 232px;
    margin: auto
}
section.animated {
    opacity: 1
}
.block_01 {
    margin: -260px auto 56px
}
.block_01 .compensation {
    text-align: center
}
.block_01 .compensation li {
    position: relative
}
.block_01 .compensation li.clear::after {
    background: url("../images/pre/icon_clear.png") no-repeat 0 0;
    content: '';
    position: absolute;
    top: 0;
    right: 19px;
    height: 125px;
    width: 127px
}
.block_01 .btn {
    background: url("../images/pre/img_0106.png") no-repeat center 0;
    padding: 19px 0 65px
}
.block_02 {
    margin: 0 auto 56px
}
.block_02 .follow {
    background: url("../images/pre/img_0201.png") no-repeat center 0;
    padding: 360px 0 77px 51px
}
.block_02 .follow p {
    height: 42px
}
.block_02 .retweet {
    background: url("../images/pre/img_0202.png") no-repeat center 0;
    height: 589px;
    padding: 176px 0 0 49px
}
.block_02 .retweet li {
    display: inline-block;
    height: 42px;
    margin: 0 161px 0 0;
    vertical-align: top;
    width: 182px
}
.block_02 .retweet li:nth-child(1),
.block_02 .retweet li:nth-child(2) {
    margin: 0 161px 229px 0
}
.block_02 .btn {
    background: url("../images/pre/img_0203.png") no-repeat center 0;
    padding: 17px 0 65px
}
.block_03 {
    margin: 0 auto
}
.block_03 .retweet {
    background: url("../images/pre/img_0301.png") no-repeat center 0;
    padding: 468px 0 39px
}
.block_03 .retweet p {
    height: 42px;
    margin: auto;
    width: 182px
}
.block_03 .btn {
    background: url("../images/pre/img_0302.png") no-repeat center 0;
    padding: 39px 0 63px
}
footer {
    background: 0;
    padding: 50px 0 0
}
footer .sns {
    color: #5d3100
}
footer ul li a {
	color:#ffffc4;
}
footer ul.pc {
	text-align: center;
	position:static;
}
footer ul.pc li {
	display:inline;
}
footer .copyright p {
	text-align:center;
	padding-top:10px;
}