@charset "UTF-8";

/*-----------------------------------------------
main button
-----------------------------------------------*/
#teaser {
    margin: 4% 0;
    text-align: center;
}
#teaser a { transition: all 0.5s; }
#teaser a:hover { opacity: 0.75; }
@media screen and (min-width: 951px) {
    #teaser { margin: 15px 0; }
    #teaser a {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 560px;
        height: 165px;
        overflow: hidden;
        transition: all 0.5s;
    }
    #teaser a img {
        display: block;
        position: absolute;
        z-index: 1;
    }
    #teaser a:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 86px;
        height: 165px;
        background: url(../img/teaser/btn-icon-pc.png) left top no-repeat;
    }
}
@media screen and (min-width: 601px) and (max-width: 950px) {
    #teaser { margin: 15px 0; }
    #teaser a {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 560px;
        height: 165px;
        overflow: hidden;
        transition: all 0.5s;
    }
    #teaser a img {
        display: block;
        position: absolute;
        z-index: 1;
    }
    #teaser a:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 86px;
        height: 165px;
        background: url(../img/teaser/btn-icon-pc.png) left top no-repeat;
    }
}
@media screen and (max-width: 600px) {
    #teaser a {
        position: relative;
        display: block;
        margin: 0 auto;
        width: calc((560/600)*100%);
        height: calc((185/600)*100%);
        overflow: hidden;
        transition: all 0.5s;
    }
    #teaser a img {
        display: block;
        z-index: 1;
        width: 100%;
    }
    #teaser a:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        padding-bottom: calc((185/600)*100%);
        width: calc((66/600)*100%);
        height: 0;
        background: url(../img/teaser/btn-icon-sp.png) left center no-repeat;
    }
}
#teaser a:before { animation: arrow-icon-move 1.2s ease-in-out infinite; }
@keyframes arrow-icon-move {
    0%   { left: 0; }
    20%  { left: 2px; }
    40%  { left: 0px; }
    60%  { left: 4px; }
    100% { left: 0; }
}


/*-----------------------------------------------
teaser contents
-----------------------------------------------*/
#teaser-box { display: none; }
.teaser-cont {
    background: url(../img/teaser/bg-pc.png) top center no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    overflow: hidden;
}
.t-btn-box {
    width: 100%;
}
.t-btn-box li {}
.t-btnL { background: url("../img/teaser/arrowL-pc.png") bottom center no-repeat; }
.t-btnS { background: url(../img/teaser/arrowS-pc.png) bottom center no-repeat; }
.t-btnL, .t-btnS {
    display: block;
    border: 3px solid #00509b;
    background-size: 100% auto;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.5s;
}
.t-btnL:hover,
.t-btnS:hover {
    background-color: rgba(0,0,0,1);
}
.single-line, .double-line {
        display: block;
        color: #fff;
    }
/*pc*/
@media screen and (min-width: 951px) {
    .teaser-cont {
        padding: 530px 0 0;
        width: 800px;
        height: 731px;
    }
    .t-btn-box {
        display: flex;
        margin: 30px 0 0 230px;
    }
    .t-btn-box li {
        margin: 0 6px;
    }
    .t-btnL {
        position: relative;
        margin-right: 30px;
        margin-left: auto;
        width: 415px;
        overflow: hidden;
    }
    .t-btnS { width: 170px; }
    .t-btnL, .t-btnS {
        height: 75px;
        line-height: 1.2;
        font-size: 20px;
    }
    .single-line, .double-line { font-size: 20px; }
    .single-line { padding-top: 17px; }
    .double-line { padding-top: 5px; }
}
/*tablet*/
@media screen and (min-width: 601px) and (max-width: 950px) {
    .teaser-cont {
        padding: calc((530/803)*100%) 0 calc((204/803)*100%);
        width: 100%;
        height: 0;
    }
    .t-btn-box {
        display: flex;
        width: 95%;
        margin: calc((30/803)*100%) auto 0 calc((220/803)*100%);
    }
    .t-btn-box li {
        margin: 0 1%;
        padding-bottom: calc((75/803)*100%);
        width: calc((180/803)*100%);
        height: 0;
    }
    .t-btnL {
        margin-right: calc((30/803)*100%);
        margin-left: auto;
        padding-bottom: calc((75/803)*100%);
        width: calc((415/803)*100%);
    }
    .t-btnS { padding-bottom: 40%; }
    .t-btnL, .t-btnS {
        height: 0;
        line-height: 1.1;
        font-size: 2.5vw;
    }
    .single-line, .double-line { font-size: 2.5vw; }
    .single-line { line-height: 3; }
    .double-line { padding-top: 5%; }
}
/*sp*/
@media screen and (max-width: 600px) {
    .teaser-cont {
        padding-top: calc((530/601)*100%);
        padding-bottom: calc((850/601)*100%);
        width: 100%;
        height: 0;
        background: url(../img/teaser/bg-sp.png) top center no-repeat;
        background-size: 100% auto;
    }
    .t-btn-box { margin-top: calc((110/803)*100%); }
    .t-btnL {
        margin: 0 auto 0;
    }
    .t-btnS { margin: calc((10/803)*100%) auto 0; }
    .t-btnL, .t-btnS {
        padding-bottom: calc((105/803)*100%);
        width: 90%;
        height: 0;
        line-height: 12.5vw;
        font-size: 4.7vw;
        background: url("../img/teaser/arrow-sp.png") top center no-repeat;
        background-size: 100% auto;
        background-color: rgba(0,0,0,0.7);
    }
    .single-line, .double-line { font-size: 4.7vw; }
}


/*-----------------------------------------------
hidden for each platform
-----------------------------------------------*/
@media screen and (min-width: 951px) {
    .only-sp {
        display: none!important;
    }
}
@media screen and (min-width: 601px) and (max-width: 950px) {
    .only-sp {
        display: none!important;
    }
}
@media screen and (max-width: 600px) {
    .only-pc {
        display: none!important;
    }
}