/*
Author: Sofnet Solutions
*/

/* =============================================================
 snsCampaign
============================================================= */

.cmnTtl_2{margin-bottom: 15px;}

.snsIntro{
    padding: 20px;
    margin-bottom: 60px;
    border: dashed 3px #ffad51;
    background-color: #fff;
    font-weight: bold;
    text-align: center;
}

.snsIntro .balloon{margin-bottom: 10px;}

.snsIntro .balloon > span{
    position: relative;
    display: inline-block;
    padding: 0 25px;
    font-size: 20px;
}

.snsIntro .balloon > span::before,.snsIntro .balloon > span::after{
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 2px;
    bottom: 12px;
    background-color: #333;
}

.snsIntro .balloon > span::before{
    left: 0;
    transform: rotate(50deg);
}

.snsIntro .balloon > span::after{
    right: 0;
    transform: rotate(-50deg);
}

.snsIntro .hashtag{
    margin-bottom: 10px;
    color: #ffad51;
    font-size: 28px;
}

.snsIntro .period{
    display: inline-block;
    padding: 0 10px;
    background: linear-gradient(transparent 70%, #ffefc7 70%);
}

.snsIntro .period .main{font-size: 24px;}

@media only screen and (max-width:640px){
    .snsIntro{
        padding: 15px 10px;
        margin-bottom: 40px;
        border-width: 2px;
    }

    .snsIntro .balloon > span{
        font-size: 16px;
    }

    .snsIntro .hashtag{
        font-size: 18px;
    }

    .snsIntro .period .main{font-size: 18px;}
}

.campaignClm{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.campaignClm .imgArea,
.campaignClm .txtArea{
    width: 540px;
}

.campaignClm .bdrTtl{
    position: relative;
    margin-bottom: 30px;
    padding: 12px 0;
    color: #ffad51;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.campaignClm .bdrTtl::before,
.campaignClm .bdrTtl::after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    background-color: #ffad51;
}

.campaignClm .bdrTtl::before{top: 0;}
.campaignClm .bdrTtl::after{bottom: 0;}

.campaignClm .sampleImg .cnt{
    margin-top: 30px;
}

.campaignClm .sampleImg .cnt:first-child{margin-top: 0;}

.campaignClm .sampleImg .cnt .ttl{
    position: relative;
    padding: 10px 10px 10px 100px;
    background-color: #fff9f3;
    color: #4b3013;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.campaignClm .sampleImg .cnt .ttl .main{font-size: 26px;}

.campaignClm .sampleImg .cnt .ttl .sub{
    line-height: 1.7;
    font-size: 16px;
}

.campaignClm .sampleImg .cnt .num{
    position: absolute;
    top: 0;
    left: 0;
    width: 74px;
    height: 100%;
    line-height: 1.4;
    padding: 15px 0 15px 20px;
    box-sizing: border-box;
    background-color: #ffad51;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    z-index: 5;
}

.campaignClm .sampleImg .cnt .num::before{
    content: "";
    display: block;
    position: absolute;
    top: 13px;
    left: 44px;
    width: 60px;
    height: 60px;
    background-color: #ffad51;
    transform: rotate(45deg);
    z-index: -1;
}

@media only screen and (max-width:640px){
    .campaignClm{
        display: block;
    }

    .campaignClm .imgArea,
    .campaignClm .txtArea{
        width: 100%;
    }

    .campaignClm .bdrTtl{
        margin-bottom: 20px;
        padding: 10px 0;
        font-size: 16px;
    }

    .campaignClm .sampleImg .cnt{
        max-width: 480px;
        margin: 20px auto 0;
    }

    .campaignClm .sampleImg .cnt .ttl{
        padding-left: 90px;
        font-size: 18px;
    }

    .campaignClm .sampleImg .cnt .ttl .main{font-size: 20px;}
    .campaignClm .sampleImg .cnt .ttl .sub{font-size: 14px;}

    .campaignClm .sampleImg .cnt .num{
        width: 60px;
        padding: 13px 0 13px 16px;
        font-size: 16px;
    }

    .campaignClm .sampleImg .cnt .num::before{
        top: 11px;
        left: 34px;
        width: 52px;
        height: 52px;
    }

    .campaignClm .txtArea{margin-top: 40px;}
}

.snsLink{margin-top: 20px;}

.snsLink a{
    display: block;
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 50px;
    box-sizing: border-box;
    background: url("../images/akachanhonpo/instagramIcon.png") no-repeat center left calc(50% - 75px) / 30px auto, linear-gradient(135deg, #427eff -5%, #f13f79 70%) no-repeat;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    z-index: 1;
    overflow: hidden;/*はみ出た部分を隠す*/
    transition: opacity .3s;
}

.snsLink a::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;/*全体を覆う*/
    height: 100%;/*全体を覆う*/
    background: linear-gradient(-15deg, #ffdb2c, rgb(249, 118, 76) 20%, rgba(255, 77, 64, 0) 50%) no-repeat;
    z-index: -1;
}

.snsLink a:hover{opacity: .7;}

.infoBtn{
    margin-top: 15px;
    padding: 13px 10px;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    background: #333;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: all .3s;
}

.infoBtn:hover{background-color: #555;}

.infoBtn span {
    display: inline-block;
    padding-right: 25px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAACkVDyJAAAAbklEQVQY0+3PMQqAMAyF4Uw9nV5UF3u8TpqCSJG0tZIXERL4x+QjtI8P3Rpe/gykl5mDUoGL592EBksM/qGERRSYsU3AAgJsYaQN9jB1cOlg6uDMpQamDuYmbq1gEPBxDv4avBAHHXSwCpqMOXgA3EJqklCsnbwAAAAASUVORK5CYII=) no-repeat center right;
    background-size: 14px auto;
}

.grandprixBtn{margin-top: 15px;}

.grandprixBtn > a{
    display: block;
    padding: 13px 10px 13px 45px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAA8CAMAAADVLo1KAAAAolBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ELnaCAAAANXRSTlMATmdJ5YeDircRyL7z6JduU0UwFfbv4XVdPyYhBfvOp5ySe2E4LB0L7NawVxnjwqqgctrZDybB/SoAAAJ5SURBVFjDrNXrcqowFAXg1dahIGC9gPdqFYvF69Fz1vu/2mlDJDMl7vDD7y9DJlnZeweN7U9xHHbxcEsqf/BgHrU1HmoQU2sFzX9atws/m8sBs+KIeewXbW+Ab5OUP04HCDJWxhAEIX9EPWAWsRRC0GNlAsGOpWSK12Zn/EutgOCJNx1cqcmV9EKtB0GHN0OkvPEh6UYqvC4cSWipOSM/IDqMOp3LAKIVzY5Nxk9wmM+hue94hcOXSUI2L67Olc8sRTOgfyzX3cJh1KCf52XK8UZ13sUPd2O4zFK1EZfMD/3RAJW+c+WPRsNt/1pLx/wjFfILRF7yiV+2x0UAQZtKG4LA597Wji1hDLxRe8NdmyHPsFiQHuxMUfIrxx1r3fDWTYW5MATEBj34d4PKE5KR9XYmpGNu9lIhp6VuxroTDdu29GBIZrB6prKYWj8Yz7WztqmcYZenVN4z20tqxL9m3DhxVIw58dI2DI1VrSWVaCqMGe3aR2VDzXp/n0UtfPHJfL/gJmRNaOJPWPFwT3CksQt0grTIoGyXJIWXwr65WB3435AWw0CF1CKNNIdhK0djDcCj1f9u62YHQRgIAvAURazKTxqDCQjxBwJXD/v+r+bBAwnCbpyj3wP00E53Jwbwkokxn9zXXfaNLOuxl4m1jOv5MekoK8bpPezuhWsrvKDXa1rp9X5N2xs9mJZB0zXCukDjU2E5qA5CagI0fCxSD1UipBa6iE6b2XBJN+iCkGLo6hMdY91QCucJQyucAobovlsQr0o+sgp/p3IbguthSdhpbMmF8oAlYv+Hpc8jQh5g8YUjFB6WIJQOlkooFSzD8bz92ekwYOYNGa+cuoAReS8AAAAASUVORK5CYII=) #ffad51 no-repeat center left 85px / auto 24px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    transition: all .3s;
}

.grandprixBtn > a:hover{
    background-color: #ffbd73;
    color: #fff;
}

.postTtl{
    margin-bottom: 5px;
    font-size: 28px;
    text-align: center;
    color: #ffad51;
}

@media only screen and (max-width:640px){
    .snsLink a{
        height: 43px;
        line-height: 43px;
        padding-left: 40px;
        font-size: 20px;
    }

    .infoBtn{
        padding: 8px;
        margin-top: 10px;
        font-size: 18px;
    }

    .grandprixBtn{margin-top: 10px;}

    .grandprixBtn > a{
        background-position: center left calc(50% - 135px);
        background-size: auto 18px;
        padding: 8px 8px 8px 35px;
        font-size: 18px;
    }

    .postTtl{font-size: 24px;}
}

/* =============================================================
 modal
============================================================= */
#modalCnt{display:none;}

.modalBg{
  position:fixed;
  top:0;
  left:0;
  z-index:9997;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.8);
  -webkit-transition:all .3s;
  transition:all .3s;
  -webkit-animation:modalFadeIn ease .3s;
  animation:modalFadeIn ease .3s;
  cursor:pointer;
}

.modalClose{
  position:fixed;
  top:10px;
  right:10px;
  z-index:9999;
  width:35px;
  height:35px;
  line-height:35px;
  border-radius:35px;
  background-color:#333;
  font-size:28px;
  color:#fff;
  text-align:center;
  cursor:pointer;
  -webkit-transition:all .3s;
  transition:all .3s;
  -webkit-animation:modalFadeIn ease .3s;
  animation:modalFadeIn ease .3s;
}

.msgModal{
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:9998;
  width:95%;
  width:-webkit-calc(100% - 80px);
  width:calc(100% - 80px);
  margin:auto;
  padding:20px;
  box-sizing:border-box;
  border-radius:3px;
  background-color:#fff;
  -webkit-transition:opacity .3s;
  transition:opacity .3s ease-out;
  -webkit-animation:modalFadeIn ease .3s;
  animation:modalFadeIn ease .3s;
}

.msgModal a{word-break: break-all;}

@keyframes modalFadeIn{
  0%{opacity:0;}
  100%{opacity:1;}
}

@-webkit-keyframes modalFadeIn{
  0%{opacity:0;}
  100%{opacity:1;}
}

.modalClose.fadeOut,
.msgModal.fadeOut,
.modalBg.fadeOut{
  -webkit-animation:modalFadeOut ease .3s;
  animation:modalFadeOut ease .3s;
}

@keyframes modalFadeOut{
  0%{opacity:1;}
  100%{opacity:0; display:none;}
}

@-webkit-keyframes modalFadeOut{
  0%{opacity:1;}
  100%{opacity:0; display:none;}
}

@media only screen and (max-width:640px){
  .msgModal{
    width:-webkit-calc(100% - 20px);
    width:calc(100% - 20px);
    padding:10px 10px 30px;
  }
}


/* =============================================================
 snsCampaign_grand-prix
============================================================= */
.snsIntro .gpTtl{
    font-size: 28px;
    color: #ffad51;
}

.snsIntro .gpTtl span{
    display: inline-block;
    padding: 0 10px;
    background: linear-gradient(transparent 70%, #ffefc7 70%);
}

.campaignGp .awardCnt{margin-top: 50px;}
.campaignGp .awardCnt:first-child{margin-top: 0}

.awardCnt .awardTtl{
    position: relative;
    margin-bottom: 25px;
    padding: 0 0 4px 40px;
    font-size: 24px;
    font-weight: bold;
}

.awardCnt .awardTtl::before,
.awardCnt .awardTtl::after{
    content: "";
    display: block;
    position: absolute;
}

.awardCnt .awardTtl::before{
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: -webkit-linear-gradient(10deg, #b8751e 0%, #ffce08 27%, #f0f088 50%, #e1ce08 70%, #b8751e 100%);
    background-image: linear-gradient(80deg, #b8751e 0%, #ffce08 27%, #f0f088 50%,#e1ce08 70%, #b8751e 100%);
}

.awardCnt .awardTtl::after{
    top: -2px;
    left: 0;
    width: 32px;
    height: 32px;
    background: url("../images/akachanhonpo/img_crown_2.png") no-repeat top left / 100% auto;
    transform: rotate(-15deg);
}

.awardCnt .awardLst{
    display: flex;
    flex-wrap: wrap;
    margin-top: -35px;
}

.awardCnt .awardLst > li{
    width: 350px;
    margin: 35px 0 0 45px;
}

.awardCnt .awardLst > li:nth-child(3n-2){margin-left: 0;}

.awardCnt a{transition: opacity .3s;}
.awardCnt a:hover{opacity: .8;}

@media only screen and (max-width:640px){
    .snsIntro .gpTtl{font-size: 18px;}

    .campaignGp .awardCnt{margin-top: 40px;}

    .awardCnt .awardTtl{
        margin-bottom: 20px;
        padding: 0 0 6px 38px;
        font-size: 18px;
    }

    .awardCnt .awardTtl::after{
        top: -4px;
        left: 0;
        width: 30px;
        height: 30px;
    }

    .awardCnt .awardLst{
        display: block;
        margin-top: 0;
    }

    .awardCnt .awardLst > li{
        width: 100%;
        max-width: 350px;
        margin: 20px auto 0;
    }

    .awardCnt .awardLst > li:nth-child(3n-2){margin-left: auto;}
}