@charset 'utf-8';


/*--------------------------------------------------------------------------------
    introduction 01
--------------------------------------------------------------------------------*/
.section-tout{
    position: relative;
    background: #000;
}
    .section-tout .next-section{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 10;
        padding: 20px 0 0;
        text-align: center;
    }
        .section-tout .next-section a{
            display: inline-block;
            width: 111px;
            height: 44px;
            background: url(../../top/img/bg_next_section.png) no-repeat center;
            opacity: 1;
            -ms-filter: "alpha(opacity=100)"; 
            -webkit-transition: opacity 250ms;
            transition: opacity 250ms;
        }
        .section-tout .next-section a:hover{
            opacity: 0.7;
            -ms-filter: "alpha(opacity=70)"; 
            -webkit-transition: opacity 250ms;
            transition: opacity 250ms;
        }

@media(max-width: 640px){
    .section-tout .next-section{
        padding: 35px 0 0;
    }
        .section-tout .next-section a{
            width: 87px;
            height: 36px;
            background: url(../../top/img/bg_next_section_sp.png) no-repeat center;
            background-size: 100% auto;
        }
}


/*--------------------------------------------------------------------------------
    introduction 02
--------------------------------------------------------------------------------*/
.section-intro{
}
    .intro{
        padding: 150px 0 170px;
        background: #000;
    }
        .intro-inner{
            max-width: 980px;
            margin: 0 auto 0;
            overflow: hidden;
        }
            .intro-lead{
                float: left;
                width: 360px;
                padding-left: 4%;
            }
                .intro-lead-header{
                    margin: 0 auto 35px;
                    padding-top: 22.9%;
                    background: url(../../top/img/bg_intro_header.png) no-repeat center;
                    background-size: 100% auto;
                }
                .intro-lead-body{
                    padding-top: 41.2%;
                    background: url(../../top/img/bg_intro_body.png) no-repeat center;
                    background-size: 100% auto;
                }
                    .intro-lead-body span{
                        display: block;
                        height: 0;
                        text-indent: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                    }

            .intro-image{
                float: right;
                width: 482px;
                margin: 0;
            }
                .intro-image img{
                    max-width: 100%;
                    height: auto;
                    vertical-align: bottom;
                }

@media(max-width: 980px){
    .intro-inner{
        padding: 0 20px;
    }
        .intro-lead{
            float: left;
            width: 30.6%;
        }
        .intro-image{
            float: right;
            width: 46.7%
        }
}

@media(max-width: 640px){
    .intro{
        padding: 103px 0;
    }
        .intro-inner{
            padding: 0 30px;
        }
            .intro-lead{
                float: none;
                width: auto;
                padding: 0;
            }
                .intro-lead-header{
                    margin: 0 auto 54px;
                    padding-top: 58px;
                    background: url(../../top/img/bg_intro_header_sp.png) no-repeat center;
                    background-size: contain;
                }
                .intro-lead-body{
                    padding: 0;
                    background: none;
                }
                    .intro-lead-body span{
                        display: block;
                        height: auto;
                        font-size: 14px;
                        line-height: 27px;
                        color: #fff;
                        text-indent: 0;
                        white-space: normal;
                        overflow: hidden;
                    }
            .intro-image{
                float: none;
                width: auto;
                margin: 0 auto 30px;
            }
}


/*--------------------------------------------------------------------------------
    tout
--------------------------------------------------------------------------------*/
.toutA{
}
    .toutA .tout-btn-container{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
        .toutA .tout-btn-container > div{
            position: relative;
            /*width: 62%;*/
            height: 100%;
            margin: 0 auto;
        }
    .toutA .tout-btn.tout-btn--prev {
        margin: auto auto auto 20px;
        background: url(../../top/img/arrow_left.png) no-repeat center;
    }
    .toutA .tout-btn.tout-btn--next {
        margin: auto 20px auto auto;
        background: url(../../top/img/arrow_right.png) no-repeat center;
    }

@media(max-width: 1045px){
    .toutA .tout-btn-container > div{
        width: auto;
    }
}

@media(max-width: 640px){
    .toutA{
        background: #000;
    }
        .toutA .tout-thumbnail{
            position: static;
            padding: 25px 0 0;
        }
            .toutA .tout-thumbnail ul{
                line-height: 0;
            }
                .toutA .tout-thumbnailItem{
                    width: 10px;
                    height: 10px;
                    margin: 0 6px;
                }
                    .toutA .tout-thumbnailItem a{
                        border-color: #fff;
                        border-width: 1px;
                    }
                    .toutA .tout-thumbnailItem.active a{
                        background: #fff;
                    }
        .toutA .tout-btn-container{
            display: none;
        }
}


@media print{
    .intro-lead-header{
        font-size: 3em;
    }
    .intro-lead-body{
        color: #000;
    }
    .toutA .tout-thumbnail{
        display: none;
    }
}