/*** 全体共通 ***/
.help {
    position: absolute;
    top:      0;
    padding:  0;
    margin:   0;
    width:    100%;
    height:   100%;
    pointer-events:   none;
    -ms-touch-action: none;
    touch-action:     none;
}

.help .clearfix:after {
    display:    block;
    clear:      both;
    content:    "";
    height:     0;
    visibility: hidden;
}

.help * {
    padding: 0;
    margin:  0;
    box-sizing: border-box;
    border:     none;
}

.help a {
    text-decoration: none;
}

/*** 基本構造共通 ***/
.help .help_contents_area {
    width:    100%;
    height:   100%;

    overflow: hidden;
    position: absolute;
    top:      0;
    bottom:   0;

    pointer-events:   auto;
    -ms-touch-action: auto;
    touch-action:     auto;
}

.help .fixed_area {
    width:    720px;
    height:   560px;

    position: absolute;
    top:      0;
    bottom:   0;
    left:     0;
    right:    0;
    margin:   auto;
}

.help .help_center_area {
    width:    720px;
    height:   560px;

    position: absolute;
}

.help .help_description_area {
    width:    720px;
    height:   560px;

    position: absolute;
}

.help .help_background {
    width:    100%;
    height:   100%;

    position: absolute;
    top:      0;
    left:     0;

    background-color: rgba(0, 0, 0, 0.6);

    pointer-events:   auto;
    -ms-touch-action: auto;
    touch-action:     auto;
}

/* 紙芝居 */
.help .slider-pro {
    background-color: #000000;
    min-width: 768px;
    min-height: 617px;
    height: 100%;
}

.help .sp-mask {
    min-width: 768px;
    min-height: 617px;
}

.help .slide_text_area {
    color:      #ffffff;
    text-align: center;
}

.help .sp-slide {
    background-size:     contain;
    background-position: center;
    background-repeat:   no-repeat;
}

.help .sp-buttons {
    position: absolute;
    bottom:   calc(50% - 270px);
}

.help .sp-button {
    background-image: url('../res/slide/Intro_page_off.png');
    background-size:  100%;
    margin-left:      8px;
    width:            8px;
    height:           8px;
}

.help .sp-selected-button {
    background-image: url('../res/slide/Intro_page_on.png') !important;
    background-size:  100%;
}

.help .slide_image_area {
    background-size: contain;
    background-repeat: no-repeat;
    /* width:    1024px;
    height:   768px;

    margin:   auto;
    position: absolute;
    top:      -100%;
    bottom:   -100%;
    left:     -100%;
    right:    -100%; */
    width:    720px;
    height:   560px;

    margin:   auto;
    position: absolute;
    top:      0px;
    bottom:   0px;
    left:     0px;
    right:    0px;
}

.help #help_slide_1 {
    background-color: #81c151;
    min-height: 617px;
}

.help #help_slide_2 {
    background-color: #5ac3ed;
    min-height: 617px;
}

.help #help_slide_3 {
    background-color: #f7941e;
    min-height: 617px;
}

.help #help_slide_image_1 {
    background-image: url('../res/slide/Intro_Screen_iPad_001.png');
}

.help #help_slide_image_2 {
    background-image: url('../res/slide/Intro_Screen_iPad_002.png');
}

.help #help_slide_image_3 {
    background-image: url('../res/slide/Intro_Screen_iPad_003.png');
}

.help .slide_title {
    font-size:  48px;
    margin-top: 185px;
}

.help .slide_description {
    color:      #ffffff;
    font-size:  24px;
    text-align: center;
}

.help #help_slide_1_text {
    margin-top: 30px;
}

.help #help_slide_2_text {
    margin-top: 80px;
}

.help #help_slide_3_text {
    margin-top: 50px;
}

.help .slide_start_button {
    position:   absolute;
    bottom:     50px;
    left:       0;
    right:      0;
    background-color: #ffffff;

    width:        250px;
    height:       60px;
    line-height:  65px;

    font-size:    24px;

    color:        #f7941e;
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
}

/* 空画面 */
.help .plain_touch_area {
    width:  100%;
    height: 100%;
    pointer-events:   auto;
    -ms-touch-action: auto;
    touch-action:     auto;
}

/* Help 1 */
.help_1 .text {
    color:       #ffffff;
    text-align:  left;
    font-size:   24px;
}

.help_1 #help_1_text_title {
    font-size:   48px;
}

.help_1 #help_1_text_description {
    margin-top:    48px;
    margin-bottom: 48px;
}

.help_1 #help_1_f_text_description {
    margin-top:    48px;
    margin-bottom: 48px;
    font-size: 20px;
    width: 420px;
}

.help_1 #help_1_text_underbar {
    text-decoration: underline;
}

.help_1 #help_1_f_text_underbar {
    text-decoration: underline;
    font-size: 20px;
}

.help_1 .help_1_B_image {
    width:    408px;
    height:   270px;

    position: absolute;
    bottom:   0px;
    left:     300px;
}

.help_1 .help_nav_arrow {
    text-align: right;
}

.help_1 .help_nav_arrow_text {
    color:      #ffffff;
    font-size:  18px;

    position:   relative;
}

.help_1 #help_nav_arrow_text_C {
    top:        100px;
    right:      295px;
    margin-top: 14px;
}

.help_1 #help_nav_arrow_text_E {
    top: 120px;
    vertical-align: middle;
    height: 50px;
    right: 295px;
}

.help_1 #help_nav_arrow_text_list {
    position: absolute;
    top:      -webkit-calc(50% + 34px);
    right:    207px;
}

.help_1 .help_nav_arrow_image {
    background-image: url('../res/help_arrow_right.png');
    background-size: 100% 100%;
    width:           72px;
    height:          30px;

    position:        absolute;
    top:             113px;
    right:           207px;
}

.help_1 .help_nav_line_image {
    width:            8px;
    height:           -webkit-calc(100% - 100px);

    position:         absolute;
    top:              84px;
    right:            178px;

    border-width:         8px 0px 8px 8px;
    -webkit-border-image: url('../res/nav_line.png') 16 8 16 16 repeat;
    -moz-border-image: url('../res/nav_line.png') 16 8 16 16 repeat;
    -o-border-image: url('../res/nav_line.png') 16 8 16 16 repeat;
    border-image: url('../res/nav_line.png') 16 8 16 16 repeat;
    border-style: solid;
}

.help_1 .plus_button_circle {
    width:    60px;
    height:   60px;

    position: absolute;
    top:      97px;
    right:    97px;

    background-image: url('../res/help_tap_green.png');
    background-size:  contain;

    opacity:  0.0;
}

.help_1 .plus_button_image {
    background-image: url('../res/tag_new.png');
    background-size:  contain;

    width:    24px;
    height:   24px;

    position: absolute;
    top:      116px;
    right:    115.5px;
}

.help_1 .help_1_text_add {
    font-size:   13px;
    color:       #0071f9;

    position:    absolute;
    top:         118px;
    right:       70px;
    padding:2px;
    background-color: #636363;
}

.help_1 .next_button {
    width:            270px;
    height:           60px;
    line-height:      60px;
    text-align:       center;
    font-size:        24px;
    background-color: #FFFFFF;
    color:            #666666;

    position:         absolute;
    bottom:           0px;
}

/* help_2 */
.help_2 .text {
    color:       #ffffff;
    text-align:  left;
}

.help_2 #help_2_text_title {
    font-size:     48px;
    line-height:   48px;
    margin-bottom: 48px;
}

.help_2 #help_2_text_description {
    font-size:   24px;

    position:    absolute;
    left:        32px;
    bottom:      24px;

    color:       #666666;
}

.help_2 .middle_image_back {
  background-image: url('../res/usage_start.gif');
  background-size: 100% 100%;
  background-repeat: no-repeat;

  width:    100%;
  height:   100%;
}

.help_2 .middle_image {
    background-size:  100% 100%;
    background-repeat: no-repeat;

    width:    720px;
    height:   360px;

    position: absolute;
}

.help_2 .middle_image_gif {
    background-size: 100% 100%;

    width:    100%;
    height:   100%;

    position: absolute;
    top:      0;
    left:     0;
}

.help_2 .help_2_start_button {
    width:            270px;
    height:           60px;
    line-height:      60px;
    text-align:       center;
    font-size:        24px;
    background-color: #81C151;
    color:            #FFFFFF;

    position: absolute;
    bottom:   0px;
}

/* Help 3 */
.help_3 .help_3_background {
    width:  320px;
    height:  44px;

    position: absolute;
    bottom:  16px;
    left:    16px;

    background-color: rgba(0, 0, 0, 0.6);

    pointer-events:   auto;
    -ms-touch-action: auto;
    touch-action:     auto;
}

.help_3 .help_3_button {
    pointer-events:   auto;
    -ms-touch-action: auto;
    touch-action:     auto;
}

.help_3 .question_button {
    width:    16px;
    height:   16px;

    position: absolute;
    bottom:   14px;
    left:     16px;
}

.help_3 .batu_button {
    width:    16px;
    height:   16px;

    position: absolute;
    bottom:   14px;
    right:    14px;
}

.help_3 .help_3_text {
    color:           #ffffff;
    font-size:       18px;
    line-height:     18px;
    padding-top:     13px;
    text-decoration: underline;

    position:        absolute;
    left:            40px;
}