/* ----------------------------
共通
------------------------------ */
#mascot-name-page{
    background: #F5FFE6;
    margin: 0 auto -80px;
}

@media screen and (min-width:1024px) {
#mascot-name-page{
    margin: 0 auto -120px;
}  
}

/* ----------------------------
応募ボタン
------------------------------ */
.floating-btn a{
    width: calc(100% - 32px);
    height: auto;
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1;
}

.floating-btn a:hover{
    opacity: 1;
}

.floating-btn a picture img{
   margin: 0 auto;
}

@media screen and (min-width:768px) {
.floating-btn a{
    width: fit-content;
    max-width: 200px;
}  
}

/* ----------------------------
hero
------------------------------ */
.mascot-hero-area .headline{
width: 100%;
background: #004D32;
color: #FFFDC6;
font-size: 1.6rem;
line-height: 1;
text-align: center;
font-weight: 700;
padding: 16px;
}

.mascot-hero-area picture img{
width: 100vw;
height: auto;
}

/* ----------------------------
intro
------------------------------ */
.mascot-intro-area{
   padding: 32px 0 0 0;
   background: #fff;
}

.mascot-intro-area-wrapper{
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 0 0 260px 0;
    background: url(../images/mascot_name/intro_bg_c.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 297px auto;
    text-align: center;
}

.mascot-intro-area-wrapper h1{
   font-size:2.8rem;
   line-height: 1.5;
   font-weight: 700;
   color:#006E47; 
   text-decoration: underline;
}

.mascot-intro-area-wrapper p{
    font-weight: 700;
    margin: 32px auto 0;
}

.mascot-intro-area-wrapper p .green{
    color: #006E47;
}

@media screen and (min-width:1024px) {
.mascot-intro-area{
   padding: 48px 0 0 0;
}

.mascot-intro-area-wrapper{
    padding: 0 0 48px;
    background: url(../images/mascot_name/intro_bg_a.png),url(../images/mascot_name/intro_bg_b.png);
    background-repeat: no-repeat;
    background-position: left 15% bottom,right 10% bottom;
    background-size: 120px auto, 235px auto;
}

.mascot-intro-area-wrapper h1{
   font-size:4rem;
}

.mascot-intro-area-wrapper p{
    margin: 40px auto 0;
}
}

/* ----------------------------
campaign-content 
------------------------------ */
.campaign-content-area-wrapper{
    width: calc(100% - 32px);
    max-width: 960px;
    background: #fff;
    border-radius: 24px;
    padding:40px 16px 48px;
    margin: 32px auto 0;
}

.campaign-content-block{
    width: 100%;
    margin: 0 0 40px;
}

.campaign-content-block:last-child{
    margin: 0;
}

.campaign-content-block h3{
   font-size: 1.8rem;
   line-height: 1;
   color: #004D32;
   padding: 0 0 0 8px;
   margin: 0 0 24px;
   position: relative; 
}

.campaign-content-block h3::before{
    display: block;
    content: '';
    width: 4px;
    height: 100%;
    background: #BBA53D;
    position: absolute;
    top: 2px;
    left: 0;
}

.mascot-wrapper{
display: flex;
flex-direction: column;
gap: 100px;
}

.mascot{
position: relative;
display: grid;
gap: 16px;
justify-content: center;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto;
grid-template-areas: "image"
                    "detail"
                    "intro"
                    "nominee";
}

.mascot:last-child{
position: unset;
}

.mascot::after{
content: '';
position: absolute;
left: 50%;
bottom: -50px;
transform: translate(-50%, -50%);
width: 100%;
height: 10px;
background: url(../images/mascot_name/line.svg);
background-repeat: repeat-x;
background-size: cover;
}

.mascot:last-child::after{
    content: none;
}

.mascot-img{
    margin: 0 auto;
    max-width: 300px;
    grid-area: image;
}

.mascot-detail{
    margin: 0 auto;
    justify-self: left;
    grid-area: detail;
}

.mascot-detail h4 {
    margin: 0 auto 16px;
    width: auto;
    height: 40px;
}

.mascot-detail h4 img{
    margin: 0 auto;
}

.mascot-detail h5 {
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    color: #fff;
    margin: 0 auto 16px;
    padding: 8px 16px;
    width: 100%;
    background: #004D32;
    border-radius: 50px;
}

.detail-list{
width: 100%;
border: 1px solid #687E72;
border-radius: 8px;
overflow: hidden;
}

.detail-block{
display: grid;
grid-template-columns: 130px 1fr;
}

.detail-block:not(:last-child) {
border-bottom: 1px solid #687E72;
}

.detail-block dt,
.detail-block dd {
margin: 0;
padding: 8px 16px;
font-size: 1.4rem;
}

.detail-block dt {
background: #F5FFE6;
text-align: center;
}

.detail-block dd {
background: #fff;
}


.mascot-introduction{
    text-align: center;
    grid-area: intro;
}

@media screen and (min-width:768px) {

.mascot{
gap: 20px;
align-items: center;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto auto;
grid-template-areas: "image detail"
                    "intro intro"
                    "nominee nominee";
}

.mascot::after{
width: 100%;
height: 14px;
background-size: auto;
}

.mascot picture{
width: fit-content;
justify-self: end;
}

.mascot-detail h4 {
    margin: 0 auto 20px;
}

.detail-block dt,
.detail-block dd {
font-size: 1.6rem;
}
}

@media screen and (min-width:1024px) {

.campaign-content-area-wrapper{
    padding:48px 40px 64px;
    margin: 48px auto 0;
}

.campaign-content-block{
    margin: 0 0 48px;
}

.campaign-content-block h3{
   font-size: 2.4rem;
   padding: 0 0 0 12px;
}
.mascot-wrapper{
gap: 156px;
}

.mascot::after{
    bottom: -85px;
}

}

/* ----------------------------
campaign-prize-area
------------------------------ */
.campaign-prize-area h2{
margin: 40px auto 20px;
width: calc(100% - 32px);
max-width: 846px;
}

.campaign-prize-area h2 picture img{
margin: 0 auto;
}

.campaign-prize-block{
width: calc(100% - 32px);
max-width: 960px;
background: #fff;
border-radius: 24px;
padding: 40px 16px;
margin:0 auto;
}

.campaign-prize-block.second-prize{
margin:40px auto 0;
}

.campaign-prize-block h3 img{
    width: auto;
    height: 32px;
    margin: 0 auto;
}

.campaign-prize-block.best-prize h3{
    position: relative;
    margin: 0 auto 60px;
}

.campaign-prize-block.best-prize h3::after{
    display: block;
    content: '※各キャラクター1名';
    font-size: 1.6rem;
    line-height: 1.5;
    color:#004D32;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translate(-50%,120%);
}

.campaign-prize-block.second-prize h3{
    margin: 0 auto 24px;
}

.campaign-prize-1{
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 700;
    margin: 0 auto 32px;
}

.campaign-prize-1 li{
    padding:0 0 0 28px;  
    position: relative; 
}

.campaign-prize-1 li::before{
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background: #BBA53D;
    position: absolute;
    left: 0;
    top: 5px;
}

.campaign-prize-1 li .green{
    color: #006E47;
}

.campaign-prize-2{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    align-items: center;
}

.campaign-prize-2 .prize-img{
    width: 100%;
    border-radius: 16px;
}

.campaign-prize-2 h4{
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
    color: #004D32;
    text-align: center;
    margin: 16px auto 0;
}

.campaign-prize-2 p{
    text-align: center;
    margin: 8px auto 0;
}

.happy-ezorisu img{
margin: 40px auto 0;
}

@media screen and (min-width:1024px) {
.campaign-prize-area h2{
margin: 80px auto 32px;
}

.campaign-prize-block{
padding: 40px 40px 48px;
}

.campaign-prize-block.second-prize{
margin:48px auto 0;
}

.campaign-prize-block h3 img{
    height: 40px;
}

.campaign-prize-block.best-prize h3{
    position: relative;
    margin: 0 auto 40px;
}

.campaign-prize-block.best-prize h3::after{
    left:unset;
    right: 145px;
    top: unset;
    bottom: 0;
    transform:none;
}

.campaign-prize-block.second-prize h3{
    margin: 0 auto 40px;
}

.campaign-prize-1{
    font-size: 2.4rem;
    line-height: 2;
    margin: 0 auto 40px;
}

.campaign-prize-1 li::before{
    top: 15px;
}

.campaign-prize-2{
    flex-direction: row;
    gap: 32px;
}

.campaign-prize-2 li{
    width: calc((100% - 64px) / 3);
}

.second-prize{
    position: relative;
}

.happy-ezorisu img{
position: absolute;
bottom: 48px;
right: 66px;
margin: 0;
}
}

/* ----------------------------
how-to-apply-area
------------------------------ */
.how-to-apply-area{
margin: 80px auto 0;
}

.how-to-apply-area-wrapper{
    width: calc(100% - 32px);
    max-width: 960px;
    background: #fff;
    border-radius: 24px;
    padding: 40px 16px;
    margin: 0 auto 80px;
}

.how-to-apply-area-wrapper h2{
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 700;
    color: #004D32;
    text-align: center;
    position: relative;
    padding: 0 0 20px 0;
    margin: 0 auto 40px;
}

.how-to-apply-area-wrapper h2::after{
    content: '';
    width: 52px;
    height: 4px;
    background: #BBA53D;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,-50%);
}

.how-to-apply-block{
    width: 100%;
    margin: 0 0 40px;  
}

.how-to-apply-block:last-child{
    margin: 0;  
}

.how-to-apply-block h3{
    font-size: 1.8rem;
    line-height: 1;
    color: #004D32;
    padding: 0 0 0 8px;
    margin: 0 0 24px;
    position: relative;
}

.how-to-apply-block h3::before{
    display: block;
    content: '';
    width: 4px;
    height: 100%;
    background: #BBA53D;
    position: absolute;
    top: 2px;
    left: 0;
}

.how-to-apply-block ul li{
font-size: 1.6rem;
line-height: 1.5;
}

.how-to-apply-block ul .red{
    color: #CB5934;
}

.how-to-apply-block ol{
display: flex;
flex-direction: column;
gap: 32px;
}

.how-to-apply-block ol li{
    border: 1px solid #006E47;
    border-radius: 16px;
    text-align: center;
    position: relative;
}

.how-to-apply-block ol li::after{
    display: block;
    content: '';
    width: 22px;
    height :22px;
    background: url(../images/mascot_name/yajirushi_bottom.svg)no-repeat;
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform :translate(-50% -50%);
}

.how-to-apply-block ol li:last-child::after{
    display: none;
    content: none;
}

.how-to-apply-block ol li:last-child{
    border: 1px solid #006999;
}

.how-to-apply-block ol li h4{
font-size: 1.8rem;
color: #fff;
padding: 8px 0;
width: 100%;
background: #006E47;
border-radius: 16px 16px 0 0;
}

.how-to-apply-block ol li:last-child h4{
background: #006999;
}

.how-to-apply-block ol li p{
padding: 16px 0;
width: 100%;
}

@media screen and (min-width:1024px) {

.how-to-apply-area-wrapper{
    width: 100%;
    padding: 48px 40px;
}

.how-to-apply-block{
    margin: 0 0 48px;  
}

.how-to-apply-block h3{
    font-size: 2.4rem;
    padding: 0 0 0 12px;
}

.how-to-apply-block .mini-list {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.how-to-apply-block ol{
display: flex;
flex-direction: row;
}

.how-to-apply-block ol li{
    width: calc((100% - 64px) / 3);
}

.how-to-apply-block ol li::after{

    background: url(../images/mascot_name/yajirushi_right.svg)no-repeat;
    bottom: 35%;
    left: unset;
    right: -32px;
    transform :none;
}
}


/* ------投票ページ------*/

/* ----------------------------
mascot-intro-area2
------------------------------ */
.mascot-intro-area2{
background-color: #fff;
}

.mascot-intro-area2-wrapper{
width: calc(100% - 16px);
margin:0 auto;
padding: 32px 0 40px;
}

.mascot-intro-area2-wrapper h1{
    font-size: 2.8rem;
    line-height: 1.5;
    font-weight: 700;
    color: #006E47;
    text-align: center;
    text-decoration: underline;
}

.mascot-intro-area2-wrapper p{
    line-height: 2;
    font-weight: 700;
    text-align: center;
   margin: 32px auto 0;
}

.mascot-intro-area2-wrapper p.note{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
   margin: 16px auto 0;
}

@media screen and (min-width:768px) {
.mascot-intro-area2-wrapper{
padding: 48px 0;
}

.mascot-intro-area2-wrapper h1{
    font-size: 4rem;
}

.mascot-intro-area2-wrapper p{
    font-size: 1.8rem;
}
}

/* ----------------------------
campaign-content-area
------------------------------ */
.campaign-content-block h2{
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 700;
    color: #004D32;
    text-align: center;
    position: relative;
    padding: 0 0 20px 0;
    margin: 0 auto 40px;
}

.campaign-content-block h2::after{
    content: '';
    width: 52px;
    height: 4px;
    background: #BBA53D;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
}

.campaign-content-block .period{
    color:#006E47;
    font-weight: 700;
    line-height: 1.5;
    background: #EBF5DC;
    padding: 8px 20px;
    text-align: center;
    border-radius: 50px;
}

@media screen and (min-width:768px) {

.campaign-content-block .period{
    width: fit-content;
    margin: 0 auto;
}
}

/* ----------------------------
name-nominee
------------------------------ */
.name-nominee-wrapper{
    margin: 24px auto 0;
    grid-area: nominee;
}

.name-nominee-list{
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}

.nominee-name{
border: 2px solid #CBEAA2;
padding: 16px;
border-radius: 8px;
}

.ezoshika .nominee-name{
border: 2px solid #D9F1F6;
}

.tantyou .nominee-name{
border: 2px solid #FCCDCD;
}

.nominee-headline{
display: flex;
align-items:center;
gap: 8px;
}

.nominee-headline .headline{
width: 74px;
flex-shrink: 0;
line-height: 1;
color: #006E47;
padding: 8px 16px;
border-radius: 50px;
font-weight: 700;
background: #CBEAA2;
}

.ezoshika .nominee-headline .headline{
color: #006999;
background: #D9F1F6;
}

.tantyou .nominee-headline .headline{
color: #CE5A6D;
background: #FCCDCD;
}

.nominee-headline .name{
font-size: 1.4rem;
line-height: 1.2;
}

.nominee-name h4{
font-size: 2rem;
line-height: 1;
text-align: center;
margin: 32px auto;
}

.nominee-name .name-origin{
font-size: 1.4rem;
line-height: 1.25;
padding: 16px 0 0 0;
border-top: 2px solid #CBEAA2;
}

.ezoshika .nominee-name .name-origin{
border-top: 2px solid #D9F1F6;
}

.tantyou .nominee-name .name-origin{
border-top: 2px solid #FCCDCD;
}

@media screen and (min-width:768px) {

.name-nominee-list{
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}

.name-nominee-list li{
width: calc((100% - 16px) / 2);
}
.ezorisu,.ezoshika{
padding-bottom: 40px;
}
}

/* ----------------------------
participation-prize
------------------------------ */
.campaign-prize-area2{
width: 100%;
margin: 40px auto 0;
}

.participation-prize-wrapper{
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}

.participation-prize-txt h4{
font-size: 2rem;
line-height: 1.5;
font-weight: 700;
text-align: center;
margin: 24px auto 8px;
}
.participation-prize-txt h4 span{
color: #006E47;
}

.participation-prize-txt p{
text-align: center;
}

@media screen and (min-width:768px) {
.campaign-prize-area2{
margin: 80px auto 0;
}

.participation-prize-wrapper{
flex-direction:row-reverse;
align-items: center;
justify-content: center;
gap: 40px;
margin: 40px auto 0;
}

.participation-prize-txt h4{
font-size: 2.4rem;
text-align: left;
margin: 0 auto 16px;
}

.participation-prize-txt p{
text-align: left;
}
}

/* ----------------------------
lottery-prize
------------------------------ */
.lottery-prize{
    margin: 40px auto 0;
}

.lottery-prize h3{
    margin: 0 auto 40px;
}

.campaign-prize-2 li{
    position: relative;
}

.campaign-prize-2 li .lottery-icon{
    position: absolute;
    top: -16px;
    left: -10px;
}

@media screen and (min-width:768px) {
.lottery-prize{
    margin: 80px auto 0;
}

.lottery-prize h3{
    margin: 0 auto 40px;
}
}

@media screen and (min-width:1024px) {
.lottery-prize .campaign-prize-2{
    justify-content: center;
}
.campaign-prize-2 li .lottery-icon{
    position: absolute;
    top: -16px;
    left: -16px;
    width: 80px;
}
}

/* ----------------------------
schedule-area
------------------------------ */
.schedule-area{
width: 100%;
margin: 40px auto 0;
background: #fff;
}

.schedule-area-wrapper{
width: calc(100% - 32px);
margin: 40px auto 0;
}

.schedule-area-wrapper h2{
font-size: 3.2rem;
line-height: 1;
font-weight: 700;
color: #004D32;
text-align: center;
position: relative;
padding: 0 0 20px 0;
margin: 0 auto 32px;
}

.schedule-area-wrapper h2::after{
content: '';
width: 52px;
height: 4px;
background: #BBA53D;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, -50%);
}

.schedule-area-wrapper h3{
font-size: 4rem;
line-height: 1.5;
font-weight: 700;
color: #004D32;
text-align: center;
text-decoration: underline;
margin: 0 auto 40px;
}

@media screen and (min-width:768px) {
.schedule-area{
margin: 80px auto 0;
}

.schedule-area-wrapper{
margin: 80px auto 0;
}
}

/* ------ダウンロードページ------*/
/* ----------------------------
download-area
------------------------------ */
.download-area{
width: 100%;
margin: 40px auto 0;
}

.download-area-wrapper{
width: calc(100% - 32px);
max-width: 960px;
background: #fff;
border-radius: 24px;
padding: 40px 16px 80px;
margin: 0 auto 80px;
}

.download-area-wrapper h1{
font-size: 3.2rem;
line-height: 1;
font-weight: 700;
color: #004D32;
text-align: center;
position: relative;
padding: 0 0 20px 0;
margin: 0 auto 40px;
}

.download-area-wrapper h1::after{
content: '';
width: 52px;
height: 4px;
background: #BBA53D;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, -50%);
}

.download-cnt-wrapper{
display: flex;
flex-direction: column;
gap: 80px;
align-items: center;
}

.download-cnt-wrapper li{
width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
}