@charset "utf-8";
/* CSS Document */

.present_title span {
background: #017bc8;
}
.present_title::before, .present_title::after {
border: .9em solid #017bc8;
}
.present_title::before {
    border-left-width: 30px;
    border-left-color: transparent;
}
.present_title::after {
border-right-width: 30px;
border-right-color: transparent;
}

.present_box {
border: solid 6px #017bc8;
}


.gs_present {
border: solid 2px #017bc8;
}
.btn-flat_gs {
background-color: #017bc8;
}
.gs_present .prize_award {
/* width: 52%; */
width: 30%;
left: -28px;
}

.prize_award.award_president {
    background-color: transparent;
}
.prize_award.award_dnp {
    background-color: transparent;
     left: -128px;
}
.prize_award.award_news {
    background-color: transparent;
     left: -128px;
}
.prize_award.award_extra {
    background-color: transparent;
}
.prize_award.award_student {
    background-color: transparent;
}

.prize_award {
    width: 95%;
    top: -42px;
    left: -25px;
    }

.prize_circle.president, .prize_circle.dnp, .prize_circle.news {
background: url(../img/present/img_circle2027.svg) no-repeat;
color: #fff;
padding: 2.2rem 3rem 0 0;
}
.prize_circle.dnp {
    background: url(../img/present/img_circle2027_or.svg) no-repeat;
        bottom: -28px;
}
.prize_circle.news {
    background: url(../img/present/img_circle2027_pu.svg) no-repeat;
        bottom: -28px;
}

.prize_circle.extra {
    background-image: none;
    background-color: #3db133;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    padding: 1.4rem .2rem 0 0;
    color: #fff;
    bottom: 7px;
}

.prize_circle.student {
    background-image: none;
    background-color: #e85377;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    padding: 1.4rem .2rem 0 0;
    color: #fff;
    bottom: 7px; 
}

.prize_btn-flat {
    border: solid 2px #017bc8;
    color: #017bc8;
}
.present_inner a:hover .prize_btn-flat {
	background: #017bc8;
    color: #fff;
}

@media screen and (max-width: 768px) {
   .prize_award {
    width: 66%;
    top: -24px;
    left: -18px;
    } 
.prize_circle.extra, .prize_circle.student {
    width: 52px;
    height: 52px;
    padding: 0.8rem 0 0 0;
    bottom: 2px;
}
.prize_award.award_news, .prize_award.award_extra, .prize_award.award_student {
    top: -15px;
    left: -12px;
}
}

/* 11/20修正 */

.gs_present {
    grid-column: 1 / 5;
    grid-row: 1 / 1;
    border: none;
}
.gs_present_inner .present_inner_img {
background-color: #dcf1fc;
text-align: center;
}

.gs_present_inner .prize_mini {
    margin-top: 4px;
}
.flexBox {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.flexBox .gs_present_inner {
    width: 32%;
}
.gs_present_inner .prize_circle {
bottom: auto;
top: -30px;
}
.gs_present_inner .prize_circle span {
padding-left: 0;
}
.prize_name svg {
    width: 17px;
    height: 13px;
    filter: none;
    overflow: inherit !important;
}
.gs_text {
    border-bottom: none;
}
.gs_illust {
    position: absolute;
    width: 22%;
    top: -22px;
    right: 20px;
}
.gs_logowrap {
    align-items: baseline;
    margin-bottom: 20px;
}
.gs_logo {
margin-top: 30px;
margin-right: 0.5em;
width: 30%;
}
.gs_logo img {
    margin-bottom: 4px;
}
.gs_text { 
    margin-bottom: 0;
    padding-bottom: 0;
}
.gs_arrow {
    position: relative;
} 
.gs_arrow::after {
 position: absolute;
 top: 0;
 left: 8px;
   content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('/calendar_campaign/img/present/arrow2027.webp');
    background-repeat: no-repeat;
    background-color: #017bc8;
    background-position: center;
    background-size: 50%;  
    border-radius: 50%;
}
.gs_present .btn {
    justify-content: center;
    margin-top: 30px;
}
.present_main .present_inner:nth-of-type(2) {
grid-column: 1 / 3;    
}
.present_main .present_inner:nth-of-type(3) {
grid-column: 3 / 5;
}
.present_main .present_inner:nth-of-type(2) img,.present_main .present_inner:nth-of-type(3)  img {
    width: 50%;
}
.present_box .mb19 {
    margin-bottom: 19px;
}
.present_main .present_inner_img .img_ex:nth-last-of-type(1) {
    width: 73%;
}

.present_main .present_inner:nth-of-type(2) .icon {
    width: 1em;
    height: 1em;
    margin-left: 0.3em;
}

.prize_namewrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 768px) {
  .flexBox {
    flex-direction: column;
  }  
  .flexBox .gs_present_inner {
    width: 100%;
}

.gs_illust {
    top: -10px;
        width: 30%;
        right: 11px;
}
    .gs_title {
        font-size: 1.2rem;
}
.gs_logo {
    margin-top: 15px;
    width: 47%;
}
.gs_logo img {
    margin-bottom: 5px;
}
.gs_arrow::after {
    top: -2px;
    width: 20px;
    height: 20px;
}
 
.gs_present {
    grid-column: 1 / 3;
}
.gs_present .prize_award {
    width: 50%;
    /* left: -15px; */
    left: -4vw;
}
.gs_present_inner .prize_circle {
left: -12px;
}
.present_main .present_inner:nth-of-type(2), .present_main .present_inner:nth-of-type(3) {
    grid-column: 1 / 3;
}
.flexBox .gs_present_inner:nth-of-type(1), .flexBox .gs_present_inner:nth-of-type(2) {
        margin-bottom: 30px;
    }

.prize_award {
    width: 80%;
}

.prize_award.award_dnp, .prize_award.award_news {
    left: -18vw;
    top: -14px;
}

.prize_circle.extra, .prize_circle.student {
            bottom: -10px;
        left: -5px;
}


.present_main .present_inner:nth-of-type(2) .icon {
    width: 0.7em;
    height: 0.7em;
}
}
@media screen and (min-width: 620px) and (max-width: 768px) {
.gs_logowrap {
    margin-top: 30px;
}
}
@media screen and (min-width: 450px) and (max-width: 620px) {
.gs_logowrap {
    margin-top: 15px;
}
}

/*モーダル内*/
.modaal-content-container .prize_circle.president {
    color: #fff;
}
.gs_modal_award {
  background-color: #017bc8;  
}
.gs_modal_title {
    border-bottom: 2px solid #017bc8;
}
.gs_modal_inner.other {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.gs_modal_inner.gs_flex {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
} 
.gs_modal_inner.gs_flex figure {
    width: 25%;
} 
.gs_modal_inner img {
    width: 100%;
}
.modaal-content-container {
background-color: #dcf1fc;
}