@charset "utf-8";
/* CSS Document */
body { background: #fff; }
body { font-family: "Noto Sans JP", serif; color: #333; }
img { width: 100%; }


/* =========================================================
 contents - dpf_information
========================================================= */
header {
    width: 100%;
    height: 220px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
header img {
    width: 100%;
    max-width: 300px;
}

.contents {
    width: 100%;
    padding: 48px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.contents-list {
    width: 100%;
    max-width: 340px;
}

ul.contents-list li {
    margin-bottom: 24px;
}
ul.contents-list li:last-of-type {
    margin-bottom: 0;
}

ul.contents-list li .btn {
    width: 100%;
    height: 70px;
    padding: 0 24px;
    border-radius: 8px;
    background: #F08300;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
}
ul.contents-list li .btn::before {
    width: 24px;
    height: 32px;
    margin-right: 4px;
    content: "";
    background-image: url(../images/dpf/arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
}
ul.contents-list li .btn span {
    font-size: 1.2rem;
    height: 2rem;
    margin-left: 2px;
    display: inline-flex;
    align-items: end;
}
ul.contents-list li .note {
    width: 100%;
    margin-top: 8px;
    text-align: right;
    font-size: .9rem;
    font-weight: 500;
    color: #555;
}

footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

footer .ft-logo {
    width: 90%;
    max-width: 340%;
    padding: 32px 0;
    border-top: solid 1px rgba(0, 0, 0, .16);
}

footer .ft-logo img {
    width: 100%;
    max-width: 200px;
}

/* =========================================================
 contents - dpf_movie
========================================================= */
.dpf_movie header {
    width: 100%;
    height: 80px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dpf_movie header img {
    width: 100%;
    max-width: 340px;
}

.dpf_movie .contents-movie {
    width: 100%;
}

ul.contents-movie-list {
    width: 100%;
    padding: 32px 0;
    background: #E7F2D9;
    display: flex;
    align-items: center;
    flex-direction: column;
}
ul.contents-movie-list li {
    width: 100%;
    max-width: 300px;
}
ul.contents-movie-list li:first-of-type {
    margin-bottom: 24px;
}

ul.contents-movie-list .btn {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border-radius: 8px;
    background: #F08300;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(55, 75, 35, .2);
    border: solid 2px #fff;
}
ul.contents-movie-list .btn::before {
    width: 24px;
    height: 24px;
    margin-right: 4px;
    content: "";
    background-image: url(../images/dpf/play.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.dpf-warning-list {
    width: 100%;
}

.dpf-warning-list .title {
    width: 100%;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #505050;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
}

.dpf-warning-list .mes {
    width: 90%;
    max-width: 360px;
    margin: 10px auto;
    text-align: center;
    font-size: .95rem;
}

.dpf-warning {
    width: 100%;
    margin-bottom: 8px;
    padding: 24px 0;
    background: #EFEFEF;
    display: flex;
    justify-content: center;
}
.dpf-warning .inner {
    width: 90%;
    max-width: 360px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.dpf-warning .inner .title {
    width: 100%;
    height: 32px;
    margin-bottom: 8px;
    padding: 0 8px;
    display: flex;
    justify-content: start;
    align-items: center;
    background: #505050;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    box-sizing: border-box;
}
.dpf-warning .inner .title.lv1 { background: #3B7133; }
.dpf-warning .inner .title.lv2 { background: #985D00; }
.dpf-warning .inner .title.lv3 { background: #94361B; }
.dpf-warning .inner .title.lv4-5 { background: #664720; }
.dpf-warning .inner .title.lv- { background: #323232; }

.dpf-warning .inner .annotation {
    width: 100%;
    margin-top: 10px;
    text-align: left;
    font-size: .85rem;
}

.warning-level {
    margin-bottom: 8px;
    display: block;
    text-align: center;
}

.warning-status {
    display: flex;
    justify-content: space-between;
}
.warning-status .status {
    width: 65%;
}
.warning-status .btn {
    width: 30%;
    border-radius: 6px;
    background: #F08300;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
    border: solid 2px #fff;
}
.warning-status .btn::before {
    width: 24px;
    height: 24px;
    margin-right: 4px;
    content: "";
    background-image: url(../images/dpf/play.svg);
    background-position: center;
    background-repeat: no-repeat;
}