@charset "utf-8";
/* FAサイトの使い方TOP */

/*-------------------------------
    /announce/index.html
--------------------------------*/

.fa_use_contents{ margin-bottom:40px;}

.fa_use_contents h2{ margin-bottom:28px;}

.fa_use_contents .fa_use_box_l{ float:left; width:480px;}
.fa_use_contents .fa_use_box_l a{ margin-top:30px;}

.fa_use_contents .fa_use_box_r{ float:right; width:480px;}
.fa_use_contents .fa_use_box_r p{ text-align:center;}
.fa_use_contents .fa_use_box_r p img {border:1px solid #d0d0d0; box-sizing :border-box;}

/* anim_player */
.anim_player { position: relative; cursor: pointer; display: inline-block; }
.anim_player:before { content:""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition: all .3s; background: rgba(0,0,0,.7); }

.anim_player_control { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; padding-top: 105px; transition: all .3s; }
.anim_player_circle { display: block; border: 2px solid #fff; border-radius: 100px; width: 100px; height: 100px; position: relative; margin: 0 auto; }
.anim_player_circle:before { content:""; display: block; width: 0;height: 0;border-style: solid;border-width: 20px 0 20px 34.6px;border-color: transparent transparent transparent #ffffff; position: absolute; top: 0; bottom: 0; left: 38px; margin: auto; }
.anim_player_btn { margin-top: 40px; display: inline-block; background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #efefef 100%); background: -webkit-linear-gradient(top, #fefefe 0%,#efefef 100%); background: linear-gradient(to bottom, #fefefe 0%,#efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */ border: 1px solid #d0d0d0; padding: 14px 4em; font-size: 133%; }
.anim_player_btn span { color: #000; font-weight: bold; color: #005e8c; display: inline-block; background: url(/fa/shared/img/footer/bg_footer04.gif) no-repeat left 50%; padding-left: 10px; }
.anim_player_btn span:after { content: "スタート" }
.anim_player_text { margin-top: 8px; display: block; text-align: center; font-size: 117%; color: #fff; }

.anim_player_small .anim_player_control { padding-top: 20px; }
.anim_player_small .anim_player_btn { margin-top: 20px; }

.anim_player.is-playing:before,
.anim_player.is-playing .anim_player_control { opacity: 0; }

.anim_player.is-playing .anim_player_circle:before { content:""; width: 38px; height: 38px; border: 0; left: 0; right: 0; background: #fff;}
.anim_player.is-playing .anim_player_btn span:after { content: "ストップ" }
.anim_player.is-playing .anim_player_text { display: none; }
.anim_player.is-hover:hover:before,
.anim_player.is-hover:hover .anim_player_control { opacity: 1; }


/*--------------------------------------------
    /announce/function/how_to_select.html
---------------------------------------------*/

#melfa_contents_2col_a #melfa_main_area h2.fa_how_head-lv2 { margin: 40px 0 45px; padding-bottom: 10px; border-bottom: 2px solid #e70101; background: none; text-align: center; font-size: 1.4em; }

.fa_how_point { overflow: hidden; margin-top: 35px; }
.fa_how_point_txt { float: left; width: 500px; padding-left: 30px; box-sizing: border-box; }
#melfa_contents_2col_a #melfa_main_area h3.fa_how_point_head { position: relative; margin: 0; padding: 15px 0 10px 95px; border-bottom: 1px solid #dbdbdb; background: none; color: #d50000; font-size: 1.2em; }
h3.fa_how_point_head img { position: absolute; top: 0; left: -30px; }
#melfa_main_area .fa_how_point_txt p { padding: 0 20px 0 95px; font-size: 0.82em; }
#melfa_main_area .fa_how_point_img { float: right; width: 275px; padding-bottom: 10px; }
#melfa_main_area .fa_how_point_img p { margin: 0; }
#melfa_main_area .fa_how_point_img img { box-shadow: 6px 6px 6px rgba(73,34,41,0.2); }
.fa_how_point_img .anim_player_control { padding-top: 60px; }
.fa_how_point_img .anim_player_circle { width: 64px; height: 64px; }
.fa_how_point_img .anim_player_circle:before { left: 23px; border-width: 12px 0 12px 23.6px; }
.fa_how_point_img .anim_player.is-playing .anim_player_circle:before { width: 26px; height: 26px; }
.fa_how_point_img .anim_player_btn,
.fa_how_point_img .anim_player_text { display: none; }

.fa_how_btn { display: inline-block; background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #efefef 100%); background: -webkit-linear-gradient(top, #fefefe 0%,#efefef 100%); background: linear-gradient(to bottom, #fefefe 0%,#efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */ border: 1px solid #d0d0d0; padding: 5px 14px; }
.fa_how_btn span { color: #005e8c; display: inline-block; background: url(/fa/shared/img/footer/bg_footer04.gif) no-repeat left 50%; padding-left: 10px; }

.fa_how_model { margin-top: 40px; border: 1px solid #bebcbc; }
.fa_how_model + .fa_how_model { margin-top: 20px; }
#melfa_contents_2col_a #melfa_main_area h3.fa_how_model_head { margin: 0; background: #dbdbdb; text-align: center; font-weight: bold; font-size: 0.9em; }
.fa_how_model_list { overflow: hidden; }
#melfa_main_area .fa_how_model_list dl { float: left; margin: 0; padding: 20px 30px; border: none; box-sizing: border-box; }
#melfa_main_area .fa_how_model_list dl.width23per { width: 23%; }
#melfa_main_area .fa_how_model_list dl.width25per { width: 25%; }
#melfa_main_area .fa_how_model_list dl.width27per { width: 27%; }
#melfa_main_area .fa_how_model_list dt { position: relative; padding-left: 14px; font-size: 1.2em; }
#melfa_main_area .fa_how_model_list dt:before { display: block; content: ''; width: 6px; height: 3px; background: #555555; position: absolute; top: 50%; left: 0; margin-top: -2px; }
#melfa_main_area .fa_how_model_list dd + dt { margin-top: 20px; }
#melfa_main_area .fa_how_model_list dd { padding: 0; background: none; }
#melfa_main_area .fa_how_model_list ul,
#melfa_main_area .fa_how_model_list ul li { margin: 5px 0 0 0; padding: 0; list-style: none; font-size: 1.0em; }
#melfa_main_area .fa_how_model_list ul li ul { overflow: hidden; }
#melfa_main_area .fa_how_model_list ul li ul li { margin-top: 2px; padding-left: 15px; box-sizing: border-box; font-size: 0.95em; white-space: nowrap; }

.fa_how_tips { margin-top: 80px; padding: 45px 90px 80px; background: #fffdeb; }
#melfa_contents_2col_a #melfa_main_area h2.fa_how_tips_head { margin: 0; padding: 0; background: none; text-align: center; font-size: 1.4em; }
#melfa_contents_2col_a #melfa_main_area h3.fa_how_tips_head { position: relative; margin-top: 35px; padding: 4px; background: #d7d5c6; text-align: center; font-size: 1.0em; }
#melfa_main_area .fa_how_tips_txt { font-size: 0.9em; }
#melfa_main_area .fa_how_tips img { box-shadow: 0 10px 20px rgba(73,34,41,0.2); }


.fa_how_use_btn { margin-top: 45px; text-align: center; }
#melfa_main_area .fa_how_use_btn_txt { font-weight: bold; font-size: 0.9em; }
.fa_how_use_btn_link { display: inline-block; margin-top: 15px; padding: 10px 55px; background: #cc0001; text-align: center; font-size: 1.1em; }
.fa_how_use_btn_link:link,
.fa_how_use_btn_link:visited,
.fa_how_use_btn_link:hover,
.fa_how_use_btn_link:active { color:#fff; text-decoration:none; }
.fa_how_use_btn_link span { position: relative;  display: inline-block; padding-left: 12px; }
.fa_how_use_btn_link span:before { position: absolute; top: 50%; left: 0; margin-top: -3px; content: ''; display: block; width: 6px; height: 6px; background: url(/fa/shared/img/module/bullet_link_ov.gif) no-repeat 0 0; }