@charset "UTF-8";
/* --------------------------------
mv
-------------------------------- */
/* main msg */
.t_m_txt1, 
.t_m_txt2,
.t_m_txt3 {
transform-origin: center left;
transform: scaleX(0);
overflow: hidden;
}
/* 背景表示 */
.t_m_txt1.anime_on, 
.t_m_txt2.anime_on,
.t_m_txt3.anime_on {
animation-name: scale;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}

/* 文字を隠す */
.t_m_txt1 > span,
.t_m_txt2 > span,
.t_m_txt3 > span{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
background-color: white;
}
/* problem */
#problem .t_m_txt1 > span,
#problem .t_m_txt2 > span,
#problem .t_m_txt3 > span{
background-color: #333333;
}
.t_m_txt1.anime_on > span,
.t_m_txt2.anime_on > span,
.t_m_txt3.anime_on > span {
animation-name: scaleInvese;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}

@keyframes scale{
0%{
transform: scaleX(0);
}
50%{
}
100%{
transform: scaleX(1);
}
}
@keyframes scaleInvese{
0%{
transform: translateX(0);
}
50%{
transform: translateX(100%);
}
100%{
transform: translateX(1000%);
}
}

@keyframes appear{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

/* top_nav_area */
#problem .top_nav_area,
.top_nav_area {
background-color: transparent;
border-color: transparent;box-shadow: none;
}

.top_nav_area.anime_on {
animation-name: indexNavBg;
animation-duration: 0.1s;
animation-fill-mode: forwards;
background-color: transparent;
border-color: transparent;box-shadow: none
}
@keyframes indexNavBg{
0%{
background-color: transparent;
border-color: transparent;
border-color: transparent;
box-shadow: none;
}
100%{
background-color: #FFFFFF;
border-color: #FFFFFF;
box-shadow: 32px 21px 18px 1px #efefef;
}
}

#problem .top_nav_area.anime_on {
animation-name: problemNavBg;
animation-duration: 0.1s;
animation-fill-mode: forwards;
background-color: transparent;
border-color: transparent;box-shadow: none
}
@keyframes problemNavBg{
0%{
background-color: transparent;
border-color: transparent;
border-color: transparent;
box-shadow: none;
}
100%{
background-color: #FFFFFF;
border-color: #FFFFFF;
box-shadow: 32px 21px 18px 1px #c7c4bd;
}
}

.top_nav_area li{
opacity: 0;
}

.top_nav_area.anime_on li{
animation-name: appear;
animation-duration: 0.3s;
animation-delay: 0.15s;
animation-fill-mode: forwards;
opacity: 0;
} 

/* --------------------------------
kirigamine
-------------------------------- */

/* kirigamine */
.kiri_title, 
.kiri_sub {
opacity: 0;
}
.kiri_title.anime_on, 
.kiri_sub.anime_on {
animation-name: appear;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
border: none;
}

/*PC・タブレット*/
@media screen and ((min-width: 768px)) {

/* 先に背景色とborder表示 */
.kiri_table .data_cell,
.kiri_table .data_cell_left,
.kiri_table .cross_cell,
.kiri_table .data_cell_right {
background-color: transparent;
border-color: transparent;
}
.kiri_table.anime_on .data_cell,
.kiri_table.anime_on .data_cell_left,
.kiri_table.anime_on .cross_cell,
.kiri_table.anime_on .data_cell_right {
animation-name: tableBgs;
animation-duration: 0.3s;
animation-fill-mode: forwards;
background-color: transparent;
border-color: transparent;
}

/* 中身を後見せ*/
.kiri_table .content,
.kiri_table .content{
opacity: 0;
}
.kiri_table.anime_on .kiri_1st_anime.anime_on .content,
.kiri_table.anime_on .kiri_2nd_anime.anime_on .content {
animation-name: appear;
animation-duration: 0.3s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
opacity: 0;
} 
}

@keyframes disappear{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}


@keyframes tableBgs{
0%{
background-color: transparent;
border-color: transparent;
}
100%{
background-color: #FFFFFF;
border-color: #E6E6E6;
}
}

/*スマホ*/
@media screen and (max-width: 767px) {
/* 背景色を表示 */
.kirigamine_plan_box .kirigamine_plan_box_inner {
background-color: transparent;
border-color: transparent;
}
.kirigamine_plan_box.anime_on .kirigamine_plan_box_inner {
animation-name: basicBg;
animation-duration: 0.3s;
animation-fill-mode: forwards;
background-color: transparent;
border-color: transparent;
}

.kiri_1st_anime,
.kiri_2nd_anime {
opacity: 0;
}

.kiri_1st_anime.anime_on,
.kiri_2nd_anime.anime_on {
animation-name: appear;
animation-duration: 0.5s;
animation-delay: 0.4s;
animation-fill-mode: forwards;
opacity: 0;
}
}

@keyframes basicBg{
0%{
background-color: transparent;
border-color: transparent;
}
100%{
background-color: #FFFFFF;
border-color: #E6E6E6;
}
}



/* --------------------------------
merit
-------------------------------- */

/* merit */
.merit_top, 
.merit_title,
.merit_sub {
opacity: 0;
}
.merit_top.anime_on, 
.merit_title.anime_on,
.merit_sub.anime_on {
animation-name: appear;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}

.merit_block {
opacity: 0;
}

.merit_block.anime_on {
animation-name: appear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}

/* --------------------------------
proposing
-------------------------------- */
#proposing h2,
.pro_anime1,
.pro_anime2,
.pro_anime3 {
opacity: 0;
}

#proposing h2.anime_on,
.pro_anime1.anime_on,
.pro_anime2.anime_on,
.pro_anime3.anime_on{
animation-name: appear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}

/* --------------------------------
product
-------------------------------- */
.product h2,
.product_lineup_link,
.pro2_anime1,
.pro2_anime2,
.pro2_anime3,
.pro2_anime4,
.pro2_anime5,
.pro2_anime6 {
opacity: 0;
}
.product h2.anime_on,
.product_lineup_link.anime_on,
.pro2_anime1.anime_on,
.pro2_anime2.anime_on,
.pro2_anime3.anime_on,
.pro2_anime4.anime_on,
.pro2_anime5.anime_on,
.pro2_anime6.anime_on {
animation-name: appear;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}

/* --------------------------------
infomation
-------------------------------- */
.infomation h2,
.infomation_banner  {
opacity: 0;
}
.infomation h2.anime_on,
.infomation_banner.anime_on {
animation-name: appear;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}

/* --------------------------------
consultation_box
-------------------------------- */
.consultation h2,
.con_anime1,
.con_anime2,
.con_anime3 {
opacity: 0;
}
.consultation h2.anime_on,
.con_anime1.anime_on,
.con_anime2.anime_on,
.con_anime3.anime_on {
animation-name: appear;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}

/* --------------------------------
suggest
-------------------------------- */

/* head */
.suggest_head {
opacity: 0;
}

/* box */
.suggest_box .content{
opacity: 0;
}

.suggest_box.anime_on .content {
animation-name: appear;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}

.suggest_head.anime_on {
animation-name: appear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}

.suggest_box {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}

.suggest_box.anime_on {
animation-name: boxBg;
animation-duration: 0.1s;
animation-fill-mode: forwards;
background-color: transparent;
border-color: transparent;box-shadow: none
}

@keyframes boxBg{
0%{
background-color: transparent;
border-color: transparent;
border-color: transparent;
box-shadow: none;
}
100%{
background-color: #FFFFFF;
box-shadow: 0px 28px 27px -22px #cdc9c0;
}
}