@charset "utf-8";

/*  Reset
-------------------------------------------------- */
div#Container {
overflow: hidden;
}
div#Container div#ContentsLayout.SingleWide:first-child {
padding-top: 0;
}
div#HeaderArea {
margin-bottom: 0;
}
div#MainContent div#MainContentBody > .Section > p:first-child {
margin: 0;
}
/*  --------------------------------------------- */
div#MainContent #FdxPr p {
margin: 0;
}
div#MainContent #FdxPr .FdxPrHdg01 {
font-size: 60px;
font-weight: normal;
}
div#MainContent #FdxPr.Str01 .FdxPrHdg01 {
font-size: 53px;
}
div#MainContent #FdxPr .FdxPrHdg02 {
font-size: 50px;
font-weight: normal;
}
div#MainContent #FdxPr.Str01 .FdxPrHdg02 {
font-size: 45px;
}
div#MainContent #FdxPr .FdxPrTxt01 {
margin: 25px 0 0;
font-size: 22px;
}
div#MainContent #FdxPr.Str01 .FdxPrTxt01 {
font-size: 20px;
}
div#MainContent #FdxPr .FdxPrSeriesTxt {
display: -ms-flexbox;
display: flex;
margin: 70px 0 0;
font-size: 20px;
}
div#MainContent #FdxPr.Str01 .FdxPrSeriesTxt {
font-size: 19px;
}
div#MainContent #FdxPr .FdxPrSeriesTxt + * {
margin-top: 25px;
}
div#MainContent #FdxPr .FdxPrSeriesTxt > .FdxPrIcon {
margin-top: .2em;

-ms-flex-item-align: start;
align-self: flex-start;
}
div#MainContent #FdxPr .FdxPrIcon {
display: inline-block;
margin: 0 10px 0 0;
padding: 1px 8px;
vertical-align: text-top;
color: #fff;
background: #d40001;
font-size: 15px;
}
div#MainContent #FdxPr .FdxPrImgList01 {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 42px 0 0;
}
div#MainContent #FdxPr .FdxPrImgList01 > li {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
background: none;
}
div#MainContent #FdxPr .FdxPrImgList01 > li .FdxPrImgListCaption {
margin: 10px 0 0;
text-align: center;
font-size: 16px;
}
div#MainContent #FdxPr.Str01 .FdxPrImgList01 > li .FdxPrImgListCaption {
font-weight: bold;
}
div#MainContent #FdxPr .FdxPrImgList01 > li .FdxPrImgListCaption + * {
-ms-flex-order: -1;
order: -1;
}
div#MainContent #FdxPr .FdxPrImgList01.Ptn01 > li {
position: relative;
}
div#MainContent #FdxPr .FdxPrImgList01.Ptn01 > li .FdxPrImgListCaption + * {
-ms-flex-order: 0;
order: 0;
margin-top: 30px;
}
div#MainContent #FdxPr .FdxPrImgList01.Ptn01 > li::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -50%;
left: -90px;
width: 656px;
height: 656px;
background: url(../../img/landing_page/fd-x_pr/bg_05.png) no-repeat;
}
div#MainContent #FdxPr .FdxPrMediaBox {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
div#MainContent #FdxPr .FdxPrMediaBox > .FdxPrMediaBoxContent {
-ms-flex: 0 1 auto;
}
div#MainContent #FdxPr .FdxPrMediaBox .FdxPrMediaBoxTxtSubTxt {
font-size: 25px;
}
div#MainContent #FdxPr.Str01 .FdxPrMediaBox .FdxPrMediaBoxTxtSubTxt {
font-size: 20px;
}
div#MainContent #FdxPr .FdxPrMediaBox .FdxPrMediaBoxTxt {
margin: 10px 0 0;
font-size: 45px;
font-weight: bold;
}
div#MainContent #FdxPr.Str01 .FdxPrMediaBox .FdxPrMediaBoxTxt {
font-weight: normal;
}
div#MainContent #FdxPr .FdxPrMediaBox .FdxPrMediaBoxImgWrap {
-ms-flex-order: -1;
order: -1;
position: relative;
}
div#MainContent #FdxPr .FdxPrMediaBox .FdxPrMediaBoxImgWrap .FdxPrMediaBoxImg02 {
position: absolute;
top: 0;
left: 0;
}
div#MainContent #FdxPr .FdxPrDlTxt {
padding: 6px 0;
text-align: center;
color: #fff;
background: linear-gradient(#3f3f3f 0%, #171717 100%) #3f3f3f;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#171717',GradientType=0 );
font-size: 2.08333em;
}
div#MainContent #FdxPr .FdxPrDlTxt > .FdxPrDlTxtInner {
display: inline-block;
position: relative;
padding: 0 84px;
}
div#MainContent #FdxPr .FdxPrDlTxt > .FdxPrDlTxtInner:before, div#MainContent #FdxPr .FdxPrDlTxt > .FdxPrDlTxtInner:after {
content: "";
display: block;
position: absolute;
top: 50%;
width: 24px;
height: 25px;
margin: -12px 0 0;
background: url(../../img/landing_page/common/icon_btn_arrow.png);
}
div#MainContent #FdxPr .FdxPrDlTxt > .FdxPrDlTxtInner:before {
left: 15px;
}
div#MainContent #FdxPr .FdxPrDlTxt > .FdxPrDlTxtInner:after {
right: 15px;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrMv .FdxPrMvContent > * {
transform: translateY(10px);
opacity: 0;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrMv .FdxPrMvContent > *:nth-child(1), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrMv .FdxPrMvContent > *:nth-child(2) {
transition: transform .3s ease-in 0s, opacity .3s ease-in 0s;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrMv .FdxPrMvContent > *:nth-child(3) {
transition: transform .3s ease-in .4s, opacity .3s ease-in .4s;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec01 .FdxPrHdg02, div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec01 .FdxPrTxt01 {
transition: transform .3s ease-in 1s, opacity .3s ease-in 1s;
transform: translateY(10px);
opacity: 0;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec04 {
transition: opacity .3s ease-in 0s;
opacity: 0;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec04 .FdxPrMediaBoxImg02 {
transition: opacity .5s ease-in 1s;
opacity: 0;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec01 .FdxPrImgList01 > li, div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec02 .FdxPrImgList01 > li, div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec03 .FdxPrImgList01 > li {
transform: translateY(10px);
opacity: 0;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec01 .FdxPrImgList01 > li:nth-child(1), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec02 .FdxPrImgList01 > li:nth-child(1), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec03 .FdxPrImgList01 > li:nth-child(1) {
transition: transform .3s ease-in 0s, opacity .3s ease-in 0s;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec01 .FdxPrImgList01 > li:nth-child(2), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec02 .FdxPrImgList01 > li:nth-child(2), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec03 .FdxPrImgList01 > li:nth-child(2) {
transition: transform .3s ease-in .2s, opacity .3s ease-in .2s;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec01 .FdxPrImgList01 > li:nth-child(3), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec02 .FdxPrImgList01 > li:nth-child(3), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec03 .FdxPrImgList01 > li:nth-child(3) {
transition: transform .3s ease-in .4s, opacity .3s ease-in .4s;
}
div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec01 .FdxPrImgList01 > li:nth-child(4), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec02 .FdxPrImgList01 > li:nth-child(4), div#MainContent #FdxPr:not(.is-not-animation) .FdxPrSec03 .FdxPrImgList01 > li:nth-child(4) {
transition: transform .3s ease-in .6s, opacity .3s ease-in .6s;
}
div#MainContent #FdxPr .FdxPrMv {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-align: center;
align-items: center;
position: relative;
height: 628px;
padding: 0 0 0 463px;
background: linear-gradient(to bottom, #e8ecef 0%, #dfe5e8 50%, #c8d1d8 100%);
}
div#MainContent #FdxPr .FdxPrMv::before {
content: "";
display: block;
position: absolute;
z-index: 0;
top: 0;
left: -100%;
width: 300%;
height: 100%;
background: linear-gradient(to bottom, #e8ecef 0%, #dfe5e8 50%, #c8d1d8 100%);
}
div#MainContent #FdxPr .FdxPrMv::after {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 1800px;
height: 630px;
margin-left: -50%;
background: url(../../img/landing_page/fd-x_pr/bg_01.png) no-repeat top left;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContent {
position: relative;
z-index: 6;
padding: 50px;
}
div#MainContent #FdxPr.Str01 .FdxPrMv .FdxPrMvContent {
padding: 50px 0;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea {
position: absolute;
z-index: 2;
top: 0;
left: 220px;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrMvContentImgAreaInner {
position: relative;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrMvContentImgAreaInner .FdxPrMvContentImgAreaImg {
z-index: 5;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrMvContentImgAreaInner::before {
content: "";
display: block;
position: absolute;
z-index: -1;
left: 38px;
width: 24px;
height: 24px;
animation: drop_animation01 3s ease-in infinite;
opacity: 0;
background: url(../../img/landing_page/fd-x_pr/bg_02.png) no-repeat;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrDropImg02, div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrDropImg03 {
display: block;
position: absolute;
top: 426px;
right: -314px;
width: 710px;
height: 294px;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrDropImg02 img, div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrDropImg03 img {
max-width: 100%;
transform: scale(0, 0);
opacity: 0;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrDropImg02 img {
animation: drop_animation02 3s ease-out infinite;
}
div#MainContent #FdxPr .FdxPrMv .FdxPrMvContentImgArea .FdxPrDropImg03 img {
animation: drop_animation02 3s ease-out infinite .2s;
}
div#MainContent #FdxPr .FdxPrMv.is-show .FdxPrMvContent > * {
transform: translateY(0);
opacity: 1;
}
div#MainContent #FdxPr .FdxPrSec01 {
position: relative;
z-index: 2;
padding: 90px 0 105px;
border-top: 1px solid #fff;
background: #f7f7f7;
}
div#MainContent #FdxPr .FdxPrSec01::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: -100%;
width: 300%;
height: 100%;
background: #f7f7f7;
}
div#MainContent #FdxPr .FdxPrSec01::after {
content: "";
display: block;
position: absolute;
z-index: -1;
bottom: 0;
left: -50%;
width: 1800px;
height: 96px;
background: url(../../img/landing_page/fd-x_pr/bg_04.jpg) no-repeat center;
}
div#MainContent #FdxPr .FdxPrSec01.is-first .FdxPrHdg02, div#MainContent #FdxPr .FdxPrSec01.is-first .FdxPrTxt01 {
transform: translateY(0);
opacity: 1;
}
div#MainContent #FdxPr .FdxPrSec02 {
position: relative;
z-index: 2;
padding: 100px 0;
border-top: 1px solid #fff;
background: #f0f2f4;
}
div#MainContent #FdxPr .FdxPrSec02::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: -100%;
width: 300%;
height: 100%;
background: #f0f2f4;
}
div#MainContent #FdxPr .FdxPrSec02 .FdxPrImgList01 {
position: relative;
z-index: 1;
}
div#MainContent #FdxPr .FdxPrSec02 *:not(.FdxPrImgList01) {
position: relative;
z-index: 2;
}
div#MainContent #FdxPr .FdxPrSec03 {
position: relative;
padding: 100px 0;
border-bottom: 1px solid #d6d6d6;
}
div#MainContent #FdxPr .FdxPrSec03::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: -100%;
width: 300%;
height: 100%;
border-bottom: 1px solid #d6d6d6;
}
div#MainContent #FdxPr .FdxPrSec04.is-show {
opacity: 1;
}
div#MainContent #FdxPr .FdxPrSec04.is-show .FdxPrMediaBoxImg01 {
opacity: 1;
}
div#MainContent #FdxPr .FdxPrSec04.is-show .FdxPrMediaBoxImg02 {
opacity: 1;
}
div#MainContent #FdxPr .FdxPrSec01.is-show .FdxPrImgList01 > li, div#MainContent #FdxPr .FdxPrSec02.is-show .FdxPrImgList01 > li, div#MainContent #FdxPr .FdxPrSec03.is-show .FdxPrImgList01 > li {
transform: translateY(0);
opacity: 1;
}

@keyframes drop_animation01 {
0% {
top: 419px;
opacity: 0;
background: url(../../img/landing_page/fd-x_pr/bg_02.png) no-repeat center;
}
30% {
top: 437px;
background: url(../../img/landing_page/fd-x_pr/bg_02.png) no-repeat center;
}
30.1% {
background: url(../../img/landing_page/fd-x_pr/bg_03.png) no-repeat center;
}
32% {
opacity: 1;
}
33%, 99% {
top: 540px;
opacity: 0;
}
100% {
top: 419px;
opacity: 0;
background: url(../../img/landing_page/fd-x_pr/bg_03.png) no-repeat center;
}
}
@keyframes drop_animation02 {
0% {
transform: scale(0, 0);
opacity: 0;
}
30% {
opacity: 1;
}
31% {
transform: scale(0, 0);
}
95% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}

#MainContent #FdxPr:not(.is-not-animation) .FdxPrMv .FdxPrMvContent.Ptrn1 > *:nth-child(1) {
    transition: transform .3s ease-in 0s, opacity .3s ease-in 0s;
}

#MainContent #FdxPr:not(.is-not-animation) .FdxPrMv .FdxPrMvContent.Ptrn1 > *:nth-child(2) {
    transition: transform .3s ease-in .4s, opacity .3s ease-in .4s;
}

#MainContent #FdxPr .FdxPrMvContent.Ptrn1 .cmnLpAncrBtn03 {
    margin-top: 25px;
}