@charset "utf-8";
/* CSS Document */
    #group-a {
        font-family: 'Noto Sans JP', sans-serif;
        background-color: #eee;
        overflow: hidden;
        min-height: 700px;
        letter-spacing: 2px;
    }
    .headline-inner {
        padding-left: .75rem;
        z-index: 3;
    }
    .a-1 {
        padding-left: 1rem;
        font-size: 1.75rem;
        background-color:#259139;
        color:#fff;
        font-weight: 900;
        text-shadow: 2px 2px 2px #222;
        z-index: 1;
    }
    .a-2 {
        font-size: 1.5rem;
        color:#259139;
        font-weight: 900;
        text-shadow: 3px 3px 2px #fff;
        z-index: 1;
    }
    .a-3 {
        font-size: 1.25rem;
        color: #505050;
        text-shadow: 2px 2px 2px #fff;
    }
    .a-3 > span.highlight {
        font-size: 2rem;
        color: red;
        font-weight: 900;
        text-shadow: 2px 2px 2px #fff;
    }
    .a-3 > span.break {
        display: inline-block;
    }
    .a-3 > span.break span.highlight {
        font-size: 2rem;
        color: red;
        font-weight: 900;
        text-shadow: 2px 2px 2px #fff;
    }
    .a-4 {
        font-size: 1.25rem;
        color: #505050;
        text-shadow: 2px 2px 2px #fff;
    }
    .a-4 > span {
        font-size: 2rem;
        color: red;
        font-weight: 900;
        text-shadow: 2px 2px 2px #fff;
    }
    .a-5 {
        font-size: 1.25rem;
        color: #505050;
        text-shadow: 2px 2px 2px #fff;
    }
    .a-5 > span {
        font-size: 2rem;
        color: red;
        font-weight: 900;
        text-shadow: 2px 2px 2px #fff;
    }
    .a-6 {
        font-size: 1.25rem;
        text-shadow: 2px 2px 2px #fff;
    }
    .a-6 > span {
        color: #505050;
        display: block;
    } 
    .a-7 {
        position: absolute;
        padding: .5rem .5rem .7rem 1.2rem;
        color: #fff;
        border-radius: 8px;
        background-color: #0266f1;
        right: 24px;
        bottom: 24px;
    }
    a span.a-7:hover { opacity: .8;}
    .a-7:after { content:"＞"; padding-left: 8px;}
    .room {
        position: relative;
    }
    .room img {
        width: 1300px;
        position: absolute;
        top: 40px;
        right: -250px;
        z-index: 0;
    }
    .photo {
        position: absolute;
        width: 200px;
        top: 430px;
        right: 90px;
    }
    .img01 {
        width: 200px;
        position: absolute;
        top:0;
        box-shadow: 1px 1px 2px #444;
        z-index: 3;
    }
    .img02 {
        width: 190px;
        position: absolute;
        top: 15px;
        left: 5px;
        z-index: 2;
    }

@media screen and (min-width: 576px) {
    #group-a { min-height: 600px; }
    .headline-inner { padding-left: 1rem; }
    .a-1 { padding-left: 1.75rem; font-size: 2.25rem; }
    .a-2 { font-size: 2.25rem; }
    .a-3 { font-size: 1.75rem; text-shadow: 2px 2px 2px #fff; }
    .a-3 > span.highlight { font-size: 2.25rem; }
    .a-3 > span.break span.highlight { font-size: 2.25rem; }
    .a-4 { font-size: 1.75rem; }
    .a-4 > span { font-size: 2.25rem; }
    .a-5 { font-size: 1.75rem; }
    .a-5 > span { font-size: 2.25rem; }
    .a-6 { font-size: 1.5rem; }
    .a-7 {
        padding: 1rem 1.5rem 1.2rem 2rem;
        right: 40px;
        bottom: 40px;
    }
    .room img {
        right: -200px;
    }
    .photo {
        top: 400px;
        right: 200px;
    }
    
}

@media screen and (min-width: 768px) {
    #group-a {  min-height: 520px; }
    .headline-inner { padding-left: 3rem; }
    .a-2 { font-size: 2.5rem; }
    .a-3 > span.highlight { font-size: 2.75rem; }
    .a-3 > span.break span.highlight { font-size: 2.75rem; }
    .a-4 > span { font-size: 2.75rem; }
    .a-5 > span { font-size: 2.75rem; }
    .room img {
        top: -125px;
        right: -300px;
    }
    .photo {
        top: 240px;
        right: 50px;
    }
}

@media screen and (min-width: 992px) {
    #group-a { min-height: 520px; }
    .headline-inner { padding-left: 3rem; }
    .a-1 { padding-left: 2rem; font-size: 2.5rem; }     
    .a-3 { font-size: 2rem; }
    .a-3 > span.highlight { font-size: 3rem; }
    .a-3 > span.break { display: inline-block;}
    .a-3 > span.break span.highlight { font-size: 3rem; }
    .a-4 { font-size: 2rem; }
    .a-4 > span { font-size: 3rem; }
    .a-5 { font-size: 2rem; }
    .a-5 > span { font-size: 3rem;  }
    .room img {
        right: -280px;
    }


    .photo {
        right: 120px;
    }
}

@media screen and (min-width:1200px){ 
    #group-a { min-height: 420px; }
    .a-6 { font-size: 1.5rem; text-shadow: 2px 2px 2px #fff;}
    .a-6 > span { display: inline-block; } 
    .a-7 {
        right: 50px;
        bottom: 24px;
    }
    .room img {
        top: -220px;
        right: -150px;
    }
    .photo {
        top: 140px;
        right: 180px;
    }
}