@charset "UTF-8";

/* //////////////////////////////////////////////////
[LAYOUT]
////////////////////////////////////////////////// */

body , #container, #pageLoader {
    background-color: #eff22a;
} 
#pageFooter {
    background-color: #fffddd;
}


/* --------------------------------------------------
    #pageHeader
-------------------------------------------------- */ 

#pageHeader {
    position: relative;
    height: 1150px;
    padding: 185px 0 0;
} 
#pageHeader:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    background-image: url(../../img/all/common/mask_header.png);
    background-repeat: no-repeat;
    background-size: 120% 100%;
    background-position: 50% 0;
}
#pageHeader .bgChara {
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
}
#pageHeader .bgChara .chara_util .innr {
    transform: scale(0.46);
}
#pageHeader h2 {
    position: absolute;
    z-index: 5;    
    top: 43px;
    left: 38px;
    width: 85px;
    height: 85px;
}
#pageHeader h2 a {
    display: block;
}
#pageHeader h2 a img {
    width: 85px;
    height: auto;
}
#pageHeader h1 {
    position: relative;
    z-index: 5;
    text-align: center;
    margin-bottom: 65px;
}
#pageHeader h1 img {
    width: 540px;
    height: auto;
}
#pageHeader .sentence {
    position: relative;
    z-index: 5;
    text-align: center;
} 
#pageHeader .sentence p {
    display: inline-block;
    background-image: url(../../img/index/sp/txt_siteexp.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 562px;
    height: 468px;
    text-indent: -99999px;
}


/* --------------------------------------------------
    blockLinkList
-------------------------------------------------- */ 
#blockLinkList {
    background-color: #fffddd;
} 
#blockLinkList .blockContent {
    width: 670px;
    margin: 0 auto;
    text-align: center;
    padding: 1px 0 120px;
}
#blockLinkListHigh {
    background-color: #ffd1bb;
} 
#blockLinkListHigh .blockContent {
    width: 670px;
    margin: 0 auto;
    text-align: center;
    padding: 76px 0 108px;
}
.unitLinkDetail {
    position: relative;
    display: inline-block;
    width: 600px;
    margin-top: 105px;
}
#blockLinkListHigh .unitLinkDetail {
    margin-top: 114px;
}
.unitLinkDetail .chara {
    position: absolute;
    right: 150px;
    top: 20px;
    width: 340px;
    height: 340px;
    margin-top: -170px;
    margin-right: -170px;
}
.unitLinkDetail .chara_unit {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    transform: scale(0.65);
    transform-origin: 50% 50%;
    animation: charafuwafuwaRotUnit 1.6s ease-in-out infinite alternate;
}
.unitLinkDetail a {
    position: relative;
    z-index: 1;
    display: block;
    height: 652px;
    padding-top: 84px;
    /*background-image: url(../../img/index/common/bg_unit.png);*/
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.unitLinkDetail a h2 {
    float: left;
    text-align: center;
    width: 298px;
} 
.unitLinkDetail a h2 img {
    width: 280px;
    height: auto;
}
.unitLinkDetail a p {
    float: right;
    width: 302px;
    text-align: center;
}
.unitLinkDetail a p img {
    width: 280px;
    height: auto;
}
.unitLinkDetail .unitBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    transform-origin: 50% 90%;
    background-repeat: no-repeat;
}
#blockLinkList .unitLinkDetail:nth-child(1) .unitBg { background-image: url(../../img/index/common/bg_unit_01.png); }
#blockLinkList .unitLinkDetail:nth-child(2) .unitBg { background-image: url(../../img/index/common/bg_unit_02.png); }
#blockLinkList .unitLinkDetail:nth-child(3) .unitBg { background-image: url(../../img/index/common/bg_unit_03.png); }
#blockLinkList .unitLinkDetail:nth-child(4) .unitBg { background-image: url(../../img/index/common/bg_unit_04.png); }
#blockLinkList .unitLinkDetail:nth-child(5) .unitBg { background-image: url(../../img/index/common/bg_unit_05.png); }
#blockLinkListHigh .unitLinkDetail:nth-child(1) .unitBg { background-image: url(../../img/index/common/bg_unit_06.png); }
#blockLinkListHigh .unitLinkDetail:nth-child(2) .unitBg { background-image: url(../../img/index/common/bg_unit_07.png); }



/* --------------------------------------------------
    Animation
-------------------------------------------------- */ 
@keyframes charafuwafuwaRot {
    0%   { transform: rotate(-3deg) scale(0.46); }
    100%   { transform: rotate(3deg) scale(0.46); }
}

@keyframes charafuwafuwaPos {
    0%   { transform: translateY(0px) scale(0.46); }
    50%  { transform: translateY(-5px) scale(0.46); }
    100% { transform: translateY(0px) scale(0.46); }
}


@keyframes charafuwafuwaRotUnit {
    0%   { transform: rotate(-3deg) scale(0.65); }
    100%   { transform: rotate(3deg) scale(0.65); }
}
@keyframes charafuwafuwaPosUnit {
    0%   { transform: translateY(0px) scale(0.65); }
    50%  { transform: translateY(-5px) scale(0.65); }
    100% { transform: translateY(0px) scale(0.65); }