@charset 'utf-8';

/*--------------------------------------------------------------------------------
    gallery & tips
--------------------------------------------------------------------------------*/
.section-gallery{
    padding: 0 0 80px;
}
    .hero{
        margin: 0 auto;
        background: #000;
    }
        .hero-inner{
            max-width: 980px;
            height: 460px;
            margin: 0 auto;
            background: url(../img/hero.png) no-repeat center;
        }
            .hero-body{
                position: relative;
                max-width: 980px;
                height: 100%;
                margin: 0 auto;
            }
                .hero-header{
                    position: absolute;
                    top: 95px;
                    left: 0;
                }
                    .hero-header:before{
                        content: url(../img/bg_header.png);
                        display: block;
                        width: 300px;
                        height: 136px;
                    }
                .hero-caption{
                    position: absolute;
                    bottom: 40px;
                    right: 2%;
                }
                    .hero-caption:before{
                        content: url(../img/bg_hero_caption.png);
                        display: block;
                        width: 186px;
                        height: 75px;
                    }

    .slideshow{
        padding: 65px 0 56px;
        background: #000;
    }

    .tips{
        max-width: 980px;
        margin: 50px auto 0;
    }
        .tips-lead{
            margin: 0 auto 70px;
            padding: 10px 40px;
            background: #000;
        }
            .tips-lead-inner{
                display: table;
                width: 100%;
            }
                .tips-lead-header{
                    display: table-cell;
                    vertical-align: middle;
                    width: 366px;
                    border-right: 1px solid #fff;
                    background: url(../img/bg_tips_lead_header.png) no-repeat left center;
                }
                .tips-lead-body{
                    display: table-cell;
                    vertical-align: middle;
                    padding: 34px 0 34px 40px;
                }
                    .tips-lead-body p{
                        font-size: 12px;
                        line-height: 22px;
                        color: #fff;
                    }
                    
        .tips-section{
            margin: 0 auto 50px;
        }
            .tips-section:after{
              content: '';
              display: table;
              clear: both;
            }
            .tips-section-header{
                margin: 0 0 10px -20px;
            }
                .tips-section-header > span{
                    display: table-cell;
                    width: 880px;
                }
            .tips-detail{
                width: 467px;
                float: left;
            }
                .tips-detail p{
                    font-size: 14px;
                    line-height: 24px;
                }    
            .tips-figure{
                width: 480px;
                float: right;
                margin: 0;
            }
                .tips-figure img{
                    max-width: 100%;
                    height: auto;
                    vertical-align: bottom;
                }
                .tips-figure figcaption{
                    margin: 14px auto 0;
                    font-size: 13px;
                }
                    .tips-figure figcaption span{
                        display: block;
                        margin: 0.5em auto 0;
                    }

        .tips-section-01{
        }
            .tips-section-01 .tips-section-header:before{
                content: url(../img/bg_tips_header_01.png);
                display: block;
                width: 305px;
                height: 99px;
            }

        .tips-section-02{
        }
            .tips-section-02 .tips-section-header:before{
                content: url(../img/bg_tips_header_02.png);
                display: block;
                width: 316px;
                height: 99px;
            }

        .tips-section-03{
        }
            .tips-section-03 .tips-section-header{
                margin: 0 auto 20px;
            }
            .tips-section-03 .tips-section-header:before{
                content: url(../img/bg_tips_header_03.png);
                display: block;
                width: 238px;
                height: 22px;
            }

        .tips-section-04{
        }
            .tips-section-04 .tips-section-header:before{
                content: url(../img/bg_tips_header_04.png);
                display: block;
                width: 301px;
                height: 99px;
            }

@media(max-width: 980px){
    .hero-body{
        margin: 0 20px;
    }
    .tips-lead-header{
        width: 37.3%;
        background-size: 90% auto;
    }
    .tips-section{
        padding: 0 20px;
    }
        .tips-section-header{
            margin: 0 auto 10px;
        }
        .tips-detail{
            width: 47.6%;
        }
        .tips-figure{
            width: 48.9%;
        }
}

@media(max-width: 640px){
    .section-gallery{
        padding: 0 0 50px;
    }
        .hero:after{
            content: '';
            display: block;
            height: 0;
            padding-top: 43%;
            background: url(../img/hero_sp.png) no-repeat center;
            background-size: 100% auto;
        }
            .hero-inner{
                height: auto;
                background: none;
            }
                .hero-body{
                    margin: 0 auto;
                }
                    .hero-header{
                        position: static;
                        top: auto;
                        left: auto;
                        padding-top: 47px;
                        background: url(../img/bg_header_sp.png) no-repeat center;
                        background-size: auto 17px;
                    }
                        .hero-header:before{
                            display: none;
                        }
                    .hero-caption{
                        display: none;
                    }

            .slideshow{
                padding: 28px 0 0;
            }

        .tips{
            margin: 0 auto;
        }
            .tips-lead{
                margin: 0 auto;
                padding: 77px 0 43px;
                background: #000;
            }
                .tips-lead-inner{
                    display: block;
                    width: auto;
                }
                    .tips-lead-header{
                        display: block;
                        width: auto;
                        margin: 0 auto 52px;
                        padding-top: 48px;
                        background: url(../img/bg_tips_lead_header_sp.png) no-repeat center;
                        background-size: contain;
                        border: none;
                    }
                    .tips-lead-body{
                        display: block;
                        width: auto;
                        padding: 0 36px;
                    }
                        .tips-lead-body p{
                            font-size: 14px;
                            line-height: 27px;
                        }

            .tips-section{
                margin: 0 auto 28px;
                padding: 28px 25px 0;
            }
                .tips-section-header{
                    margin: 0 0 25px -8px;
                }
                    .tips-section-header > span{
                        width: auto;
                    }
                .tips-detail{
                    float: none;
                    width: auto;
                    padding: 0;
                }
                    .tips-detail p{
                        margin: 0 auto 5px;
                        font-size: 12px;
                        line-height: 21px;
                    }

                .tips-figure{
                    float: none;
                    width: auto;
                    padding: 0;
                }
                    .tips-figure figcaption{
                        margin: 10px auto 0;
                        font-size: 10px;
                        line-height: 1.2;
                    }
            .tips-section-01 .tips-section-header:before{
                content: '';
                width: auto;
                height: 0;
                padding-top: 84px;
                background: url(../img/bg_tips_header_01_sp.png) no-repeat left center;
                background-size: contain;
            }

            .tips-section-02 .tips-section-header:before{
                content: '';
                width: auto;
                height: 0;
                padding-top: 84px;
                background: url(../img/bg_tips_header_02_sp.png) no-repeat left center;
                background-size: contain;
            }

            .tips-section-03 .tips-section-header:before{
                content: '';
                width: auto;
                height: 0;
                padding-top: 18px;
                background: url(../img/bg_tips_header_03_sp.png) no-repeat left center;
                background-size: contain;
            }

            .tips-section-04 .tips-section-header:before{
                content: '';
                width: auto;
                height: 0;
                padding-top: 84px;
                background: url(../img/bg_tips_header_04_sp.png) no-repeat left center;
                background-size: contain;
            }
}

/*--------------------------------------------------------------------------------
    tout
--------------------------------------------------------------------------------*/
.toutB{
    padding: 0 0 60px;
}
    .toutB .tout-inner{
        width: 684px;
    }
        .toutB .tout-image{
            padding: 0 31px;
        }
    .toutB .tout-thumbnail{
        padding: 32px 0 0;
        bottom: auto;
        top: 100%;
    }
        .toutB .tout-thumbnailItem a{
            border-color: #fff;
        }
        .toutB .tout-thumbnailItem.active a{
            background: #fff;
        }
    .toutB .tout-btn.tout-btn--prev {
        margin: 0 auto 0 -25px;
        background: url(../img/arrow_left.png) no-repeat center;
    }
    .toutB .tout-btn.tout-btn--next {
        margin: 0 -25px 0 auto;
        background: url(../img/arrow_right.png) no-repeat center;
    }

@media(max-width: 764px){
    .toutB .tout-inner{
        width: auto;
        margin: 0 10px;
    }
    .toutB .tout-btn.tout-btn--prev{
        margin: auto auto auto 0;
    }
    .toutB .tout-btn.tout-btn--next {
        margin: auto 0 auto auto;
    }
}

@media(max-width: 640px){
    .toutB{
        padding: 0;
    }
        .toutB .tout-inner{
            margin: 0 auto;
            padding: 0;
        }
            .toutB .tout-image{
                padding: 0 33px;
            }
        .toutB .tout-thumbnail{
            position: static;
            padding: 23px 0 0;
        }
            .toutB .tout-thumbnail ul{
                line-height: 0;
            }
                .toutB .tout-thumbnailItem{
                    width: 10px;
                    height: 10px;
                    margin: 0 6px;
                }
                    .toutB .tout-thumbnailItem a{
                        border-width: 1px;
                    }
        .toutB .tout-btn-container{
            display: none;
        }
}

@media print{
    .hero:after{
        display: none;
    }
        .hero-header{
        }
            .hero-header span:first-line{
                font-size: 3em;
            }

        .tips-lead-header{
            padding: 0;
            font-size: 3em;
        }
        .tips-lead-body p{
            color: #000;
        }
        .tips-section-header:before{
            display: none!important;
        }
            .tips-section-header span{
                font-size: 2em;
            }
            .tips-section-header span:first-child{
                font-size: 3em;
            }
    .toutB .tout-thumbnail{
        display: none;
    }
}