/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a{
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none
}

a:hover{
    opacity:0.7
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


img{
    width:100%;
    height:auto;
    vertical-align:middle
}

.firstview{
    width:100%;
    height:100vh;
    background:url(../images/firstview_img.png) #fff;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:10% center
}
@media screen and (max-width: 480px){
    .firstview{
        background:url(../images/firstview_img_sp.png) #fff;
        background-position:center;
        background-size:cover;
        margin-top:60px;height:calc(100vh - 60px)
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview{
        background:url(../images/firstview_img_tb.png) #fff;
        background-position:left;
        background-size:cover;
        margin-top:70px;
        height:calc(100vh - 70px)
    }
}
.firstview__inr{
    max-width:1280px;
    margin:0 auto;
    height:100%;
    position:relative
}
.firstview__txt{
    position:absolute;top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    right:4.5%
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt{
        top:20px;right:auto;
        left:5%;
        -webkit-transform:translateY(0%);
        transform:translateY(0%)
    }
}
@media screen and (max-width: 480px){
    .firstview__txt{
        top:20px;
        right:auto;
        left:5%;
        -webkit-transform:translateY(0%);
        transform:translateY(0%)
    }
}
.firstview__txt-ttl p{
    font-family:'Roboto', sans-serif;
    font-size:2.6rem;
    font-weight:bold;
    letter-spacing:.03rem
}
@media screen and (max-width: 480px){
    .firstview__txt-ttl p{
        font-size:3.6vw
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-ttl p{
        font-size:1.8rem
    }
}
.firstview__txt-ttl p span{
    font-family:'Noto sans JP', serif;
    font-size:2.4rem
}
@media screen and (max-width: 480px){
    .firstview__txt-ttl p span{
        font-size:3.8vw
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-ttl p span{
        font-size:1.7rem
    }
}
.firstview__txt-ttl p:last-child{
    text-align:right;
    font-size:2.1rem
}
@media screen and (max-width: 480px){
    .firstview__txt-ttl p:last-child{
        font-size:1.5rem
    }
}
.firstview__txt-ttl h1{
    font-family:'Roboto', sans-serif;
    font-size:8.3vw;
    line-height:9vw
}
@media screen and (max-width: 480px){
    .firstview__txt-ttl h1{
        font-size:16vw;
        line-height:17.5vw;
        font-weight:900
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-ttl h1{
        font-size:8.6rem;
        line-height:10rem;
    }
}
.firstview__txt-sub{
    font-size:1.3rem;
    margin-top:22px
}
@media screen and (max-width: 480px){
    .firstview__txt-sub{
        font-size:1rem;
        margin-top:15px;
        display:none
    }
}
.firstview__txt-day{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-weight:600;
    margin-top:25px
}
@media screen and (max-width: 480px){
    .firstview__txt-day{
        margin-top:11px;
        color:#fff;
        background:#000;
        display:inline-block;
        padding:5px 10px
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-day{
        margin-top:30px;
        color:#fff;
        background:#000;
        width:270px;
        padding:5px 10px
    }
}
.firstview__txt-day p{
    font-size:4.1rem;
    position:relative
}
@media screen and (max-width: 480px){
    .firstview__txt-day p{
        font-size:2.8rem;display:inline-block
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-day p{
        font-size:3.8rem
    }
}
.firstview__txt-day p:first-child{
    margin-right:25px
}
@media screen and (max-width: 480px){
    .firstview__txt-day p:first-child{
        margin-right:25px
    }
}
.firstview__txt-day p:first-child:after{
    content:'';
    display:block;
    position:absolute;
    top:35%;
    right:-18px;
    border-left:12px solid #000;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent
}
@media screen and (max-width: 480px){
    .firstview__txt-day p:first-child:after{
        right:-20px;
        border-left:11px solid #fff;
        border-top:6px solid transparent;
        border-bottom:6px solid transparent
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-day p:first-child:after{
        right:-20px;
        border-left:11px solid #fff;
        border-top:6px solid transparent;
        border-bottom:6px solid transparent
    }
}
.firstview__txt-day p span{
    font-size:2.2rem;
    letter-spacing:.1rem
}
@media screen and (max-width: 480px){
    .firstview__txt-day p span{
        font-size:2rem
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-day p span{
        font-size:2rem
    }
}
.firstview__txt-copy{
    margin-top:35px
}
@media screen and (max-width: 480px){
    .firstview__txt-copy{
        margin-top:6px
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-copy{
        margin-top:20px
    }
}
.firstview__txt-copy_01{
    display:inline-block;
    font-size:2rem;
    font-weight:bold;
    letter-spacing:.115rem;
    background:#000;
    padding:8px 15px;
    color:#FAEE00
}
@media screen and (max-width: 480px){
    .firstview__txt-copy_01{
        font-size:1.2rem;
        padding:5px 10px
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-copy_01{
        font-size:1.8rem;
        padding:5px 10px
    }
}
.firstview__txt-copy_02{
    display:inline-block;
    margin-top:5px;
    font-size:2rem;
    font-weight:bold;
    letter-spacing:.115rem;
    background:#000;
    padding:8px 15px;
    color:#FAEE00
}
@media screen and (max-width: 480px){
    .firstview__txt-copy_02{
        font-size:1.2rem;
        padding:5px 10px;
        margin-top:0;
        line-height:1.6rem
    }
}
@media screen and (min-width: 480px) and (max-width: 1080px){
    .firstview__txt-copy_02{
        font-size:1.8rem;
        padding:5px 10px
    }
}