/* 
マガジン詳細　850-320
====================================================*/
/* トップ */
.award-top-wrap {
    text-align: left;
    position: relative;
}
.award-top-wrap .title {
    font-size: clamp(0.75rem, 0.4773rem + 1.4545vw, 1.25rem);
    padding: clamp(0.3125rem, 0.142rem + 0.9091vw, 0.625rem) 0;
    color: #fff;
    margin-left: 22%;
}
.award-top-wrap .name {
    font-size: clamp(1rem, 0.6932rem + 1.6364vw, 1.5625rem);
    padding: clamp(0.625rem, 0.2841rem + 1.8182vw, 1.25rem) 0;
    font-weight: bold;
    margin-left: 22%;
}
.award-top-wrap .badge {
    position: absolute;
    left: 1%;
    top: 50%;
    transform: translateY(-50%);
    width: 19%;
}
.award-top-wrap .badge img {
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
}
.award-top-wrap .first .gradation {
    background: rgb(167, 46, 52);
    background: radial-gradient(
        circle,
        rgba(167, 46, 52, 1) 15%,
        rgba(86, 16, 20, 1) 95%
    );
}
.award-top-wrap .first .bg {
    background: #fdeae9;
}
.award-top-wrap .second .gradation {
    background: rgb(45, 73, 123);
    background: radial-gradient(
        circle,
        rgba(45, 73, 123, 1) 22%,
        rgba(20, 41, 56, 1) 34%
    );
}
.award-top-wrap .second .bg {
    background: #eaeff7;
}
.award-top-wrap .white {
    background: #fff;
    height: clamp(1.25rem, 0.7386rem + 2.7273vw, 2.1875rem);
}
.award-top-wrap .btm-line {
    height: clamp(1rem, 0.8636rem + 0.7273vw, 1.25rem);
}
@media screen and (max-width: 500px) {
    .award-top-wrap .title {
        margin-left: 0;
        width: 95%;
        margin: 0 auto;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    .award-top-wrap .name {
        margin-left: 0;
        width: 95%;
        margin: 0 auto;
        padding-top: 6%;
        padding-bottom: 6%;
    }
    .award-top-wrap .badge {
        width: 40%;
        position: relative;
        margin: 0 auto;
        top: 0;
        transform: translateY(10%);
        max-width: 100px;
    }
}
/* スライダー */
.swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}
.thumblist {
    display: flex;
    flex-wrap: wrap;
}
.thumblist-item {
    background-color: #fff;
    flex: 0 0 18%;
    max-width: 18%;
    margin: 1%;
    cursor: pointer;
}
.thumblist-item:nth-child(5n) {
    margin-right: 0;
}
.thumblist-item img {
    opacity: 0.5;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}
.thumblist-item.current img {
    opacity: 1;
}
/* テキスト（取組内容） */
.award-text-wrap {
    padding: 0 5%;
}
.award-text-wrap img {
    width: 95%;
    margin: 0 auto;
}
.award-text-wrap p {
    white-space: pre-wrap;
    font-size: clamp(0.75rem, 0.4773rem + 1.4545vw, 1.25rem);
    text-align: left;
}
/* URLについて */
.award-url-wrap {
    background-color: #00afec;
    border: 3px solid #d3edfb;
    padding: 3% 5%;
    width: 90%;
    border-radius: 20px;
    margin: 0 auto;
}
.award-url-wrap .title {
    color: yellow;
    font-size: clamp(0.75rem, 0.4773rem + 1.4545vw, 1.25rem);
    font-weight: bold;
}
.award-url-wrap .url {
    background-color: #fff;
    width: 100%;
    padding: 2% 5%;
}
.award-url-wrap .url a {
    color: #1c5ce5;
    text-decoration: underline;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: clamp(0.75rem, 0.4773rem + 1.4545vw, 1.25rem);
}
.award-url-wrap .text {
    color: red;
    font-size: clamp(0.5rem, 0.75vw + 0.35rem, 0.75rem);
    font-weight: bold;
}
/* 受賞団体コメント */
.first .award-comment-wrap1 {
    background: #eac100;
}
.first .award-comment-wrap2 {
    background: #fff799;
}
.first .award-comment-wrap3 {
    background: #e7b000;
}
.second .award-comment-wrap1 {
    background: #888888;
}
.second .award-comment-wrap2 {
    background: #e9e9e9;
}
.second .award-comment-wrap3 {
    background: #bdbdbd;
}
.award-comment-wrap1 {
    padding: 2px;
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.award-comment-wrap1 .comment {
    position: absolute;
    left: -3%;
    transform: translateY(-40%);
    width: 30%;
    min-width: 150px;
}
.award-comment-wrap2 {
    padding: 2px;
    width: 100%;
}
.award-comment-wrap3 {
    padding: 3px;
    width: 100%;
}
.award-comment-in {
    background: rgb(235, 236, 237);
    background: linear-gradient(
        150deg,
        rgba(235, 236, 237, 1) 1%,
        rgba(255, 254, 234, 1) 25%,
        rgba(224, 218, 207, 1) 59%,
        rgba(244, 244, 244, 1) 78%,
        rgba(225, 222, 198, 1) 100%
    );
    padding: 7% 3% 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.award-comment-in p {
    text-align: left;
    width: 62%;
    font-size: clamp(0.75rem, 0.4773rem + 1.4545vw, 1.25rem);
}
.award-comment-in img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    width: 35%;
    filter: drop-shadow(5px 5px 5px #7e7e7e);
}
@media screen and (max-width: 500px) {
    .award-comment-in {
        padding: 10% 5% 5%;
        flex-direction: column;
    }
    .award-comment-in p {
        width: 100%;
    }
    .award-comment-in img {
        width: 100%;
        order: -1;
        margin-bottom: 5%;
    }
}

/* 
ログイン投票宣伝ページ
====================================================*/
.award-pr-fix {
    position: fixed;
    width: 10%;
    right: calc((100vw - 1215px) / 2);
    top: 20%;
    max-width: 80px;
    z-index: 9999;
}
@media screen and (max-width: 1200px) {
    .award-pr-fix {
        right: 0;
    }
}
.gold-line {
    background: #fbcf00;
    background: linear-gradient(
        90deg,
        rgba(251, 207, 0, 1) 0%,
        rgba(255, 252, 209, 1) 25%,
        rgba(203, 155, 12, 1) 60%,
        rgba(243, 225, 139, 1) 87%,
        rgba(255, 252, 209, 1) 100%
    );
    height: clamp(0.3125rem, -0.0284rem + 1.7045vw, 1.25rem);
}
.award-pr-top {
    background-image: url("./img/award/login/pr/top-bg.png");
    background-size: 10% auto;
}
.award-pr-top img {
    width: 60%;
    margin: 7% 0 1%;
}
.award-pr-top h1 {
    color: #fff;
    margin: 0% 0 7%;
    font-size: clamp(1.25rem, 0.6818rem + 2.8409vw, 2.8125rem);
    text-shadow: #3b3b3b 1px 0 10px;
}
@media screen and (max-width: 500px) {
    .award-pr-top img {
        width: 80%;
    }
}
.award-pr-yellow {
    background-image: url("./img/award/login/pr/yellow-bg.png");
    background-size: 10% auto;
}

/* 
アワードリスト
====================================================*/
.award-vote-list .accordion {
    width: 80%;
    margin: 0 auto;
}
.award-vote-list .accordion__summary {
    font-weight: bold;
    position: relative;
    display: block;
    cursor: pointer;
}
.award-vote-list .list1 {
    background: #006837;
    background: radial-gradient(
        circle,
        rgba(0, 104, 55, 1) 15%,
        rgba(0, 37, 10, 1) 100%
    );
}
.award-vote-list .list2 {
    background: #973738;
    background: radial-gradient(
        circle,
        rgba(151, 55, 56, 1) 15%,
        rgba(78, 22, 22, 1) 100%
    );
}
.award-vote-list .list3 {
    background: #35aee6;
    background: radial-gradient(
        circle,
        rgba(53, 174, 230, 1) 0%,
        rgba(30, 35, 129, 1) 100%
    );
}
.award-vote-list .accordion input {
    display: none;
}
.award-vote-list .accordion__detail {
    display: none;
}
.award-vote-list .accordion input:checked ~ .accordion__detail {
    display: block;
}
.award-vote-list .accordion__text {
    margin: 0;
}
.award-vote-list .accordion__detail .in {
    border-radius: 10px;
    background-color: #fff;
    width: 80%;
    margin: 15px auto;
}
.award-vote-list .accordion__detail .in a {
    margin: 20px;
}
.award-vote-list .accordion__detail .in a:hover {
    opacity: 0.8;
}
.award-vote-list .accordion__detail .in .bumon {
    font-size: clamp(0.5rem, 0.2273rem + 1.3636vw, 1.25rem);
    font-weight: bold;
}
.award-vote-list .list1 .accordion__detail .in .bumon {
    color: #006837;
}
.award-vote-list .list2 .accordion__detail .in .bumon {
    color: #90272d;
}
.award-vote-list .list3 .accordion__detail .in .bumon {
    color: #0071bc;
}
.award-vote-list .accordion__detail .in .name {
    font-size: clamp(0.5rem, 0.2273rem + 1.3636vw, 1.25rem);
    font-weight: bold;
}