/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
.firstview-images-section {
    position: relative
}

.firstview-images-section>img:first-child {
    position: absolute;
    right: 1em;
    top: 1em;
    width: 3.5em;
    z-index: 1
}

@media (min-width:768px) {
    .firstview-images-section>img:first-child {
        right: 5em;
        top: 2em;
        width: 8em
    }
}

.firstview-images-area {
    overflow: hidden;
    position: relative;
    width: 100%
}

.firstview-images-area>div {
    background-position: 50%;
    background-size: cover;
    opacity: 0;
    position: absolute;
    transition-duration: 1s;
    transition-property: opacity;
    width: 100%
}

.firstview-images-area>div:first-child {
    opacity: 1
}

.firstview-images-area,
.firstview-images-area>div {
    height: calc(100vh - 72px)
}

.firstview-images-area.over-sm,
.firstview-images-area.over-sm>div {
    height: calc(100vh - 20em);
    min-height: 500px
}

.articles-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25em;
    width: 100%
}

@media (min-width:768px) {
    .articles-section {
        padding: 4.5em 0
    }
}

.articles-section>article {
    display: flex;
    margin-bottom: 1em;
    width: 100%;
}

@media (min-width:768px) {
    .articles-section>article {
        margin-bottom: 1.75em;
        max-width: 1024px;
        min-width: 768px;
        width: 70vw
    }
}

.articles-section>article>img {
    object-fit: cover;
    width: 300px
}

.articles-section>article>div {
    background-color: #18448f;
    color: #fff;
    flex-grow: 1;
    font-size: .9em;
    padding: 1.25em
}

@media (min-width:768px) {
    .articles-section>article>div {
        align-items: start;
        display: flex;
        flex-direction: column;
        font-size: 1em;
        justify-content: space-between;
        padding: 1em 2em
    }
}

.articles-section>article>div img {
    height: 13em;
    margin-bottom: .5em;
    object-fit: cover;
    width: 100%
}

.articles-section>article>div>div:last-child {
    text-align: right;
    width: 100%
}

.articles-section>article>div h3 {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: .5em;
    text-align: center
}

@media (min-width:768px) {
    .articles-section>article>div h3 {
        text-align: left
    }
}

.articles-section>article>div a {
    color: #fff;
    text-decoration: none
}

@media (min-width:768px) {
    .articles-section>article>div a:hover {
        text-decoration: underline
    }
}

.access-section {
    background-color: #d8e4f8;
    width: 100%
}

@media (min-width:768px) {
    .access-section {
        padding: 4em
    }
}

.access-section {
    display: flex;
    justify-content: center
}

.access-section>* {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    width: 100%
}

@media (min-width:768px) {
    .access-section>* {
        flex-direction: row
    }

    .access-section>*>* {
        width: 50%
    }

    .access-section>*>:first-child {
        order: 2;
        padding-left: 3em
    }
}

.access-section>*>:first-child>div:first-child {
    font-size: 1.5em;
    margin-bottom: .25em;
    text-align: center
}

@media (min-width:768px) {
    .access-section>*>:first-child>div:first-child {
        text-align: left
    }
}

.access-section>*>:first-child>div:first-child h2 {
    font-size: 1.5em;
    font-weight: 700
}

.access-section>*>:first-child>div:nth-child(2) {
    padding: .25em 1.25em
}

@media (min-width:768px) {
    .access-section>*>:first-child>div:nth-child(2) {
        padding: 0
    }
}

.access-section>*>:first-child>div:nth-child(2) {
    margin-bottom: 2em
}

.access-section>*>:first-child>div:nth-child(2) a {
    color: #18448f
}

.access-section>*>:first-child>dl {
    align-items: center;
    display: flex;
    margin-bottom: 1em;
    padding: 0 1em
}

@media (min-width:768px) {
    .access-section>*>:first-child>dl {
        padding: 0
    }
}

.access-section>*>:first-child>dl dt {
    background-color: #18448f;
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    padding: .25em 1.5em;
    text-align: center;
    width: 40%
}

@media (min-width:768px) {
    .access-section>*>:first-child>dl dt {
        font-size: 1.125em;
        width: auto
    }
}

.access-section>*>:first-child>dl dd {
    flex-grow: 1;
    padding-left: 1em
}

.access-section>*>:first-child>dl dd small {
    font-size: .8em
}

@media (min-width:768px) {
    .access-section>*>:first-child>dl dd small {
        font-size: .9em
    }
}

.access-section>*>:nth-child(2) {
    min-height: 300px;
    padding: 1em
}

@media (min-width:768px) {
    .access-section>*>:nth-child(2) {
        min-height: 400px;
        order: 1;
        padding: 0
    }
}

/* iframeのgoogle map */
.access-section>div>div>iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* スライドの画像(mobile) */
.firstview-images-mobile-1 {
    background-image: url('/common/images/firstview-images/mobile-1.jpg');
}

.firstview-images-mobile-2 {
    background-image: url('/common/images/firstview-images/mobile-2.jpg');
}

.firstview-images-mobile-3 {
    background-image: url('/common/images/firstview-images/mobile-3.jpg');
}

.firstview-images-mobile-4 {
    background-image: url('/common/images/firstview-images/mobile-4.jpg');
}

/* スライドの画像(desktop) */
.firstview-images-desktop-1 {
    background-image: url('/common/images/firstview-images/desktop-1.jpg');
}

.firstview-images-desktop-2 {
    background-image: url('/common/images/firstview-images/desktop-2.jpg');
}

.firstview-images-desktop-3 {
    background-image: url('/common/images/firstview-images/desktop-3.jpg');
}

.firstview-images-desktop-4 {
    background-image: url('/common/images/firstview-images/desktop-4.jpg');
}