/*--- メインビジュアル ---*/
.s_titleBlock {
    
}
/* PC View */
@media screen and (min-width: 981px) {
    .s_titleBlock {
        width: 100vw;
        margin: 0 calc(50% - 50vw);
    }
    .s_titleBlock .cmp-title > h1 {
        text-align: center;
        background-color: #F4F3F1;
    }
    .s_titleBlock .cmp-title > h1 > img {
        width: 80%;
        max-width: 900px;
        padding: 5% 0;
    }
}

/*--- リニューアルコンテンツ ---*/
.s_renewalBlock {
    
}/*
.s_renewalBlock > div.div.base {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}*/
.s_renewalBlock > div.div.base > div[class*="s_section-"] {
    display: flex;
    align-items: center;
    width: 100%;
/*    height: calc(100vh + -60px);
*/  margin: 0 -20px;
    padding: 100px 20px;
    border-bottom: 1px solid #ccc;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] {
    position: relative;
    padding-bottom: 0!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"]:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f3b2;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #f5f3c5), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #f5f3c5),color-stop(.75, #f5f3c5), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px;
    background-repeat: repeat;
}
.s_renewalBlock > div.div.base:nth-child(even) > div[class*="s_section-"] {
    background-color: #F1F8FE;
}
.s_renewalBlock > div.div.base:nth-child(odd) > div[class*="s_section-"] {
    background-color: #fff;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div {
    flex-basis: 90%;
    opacity: 0;
    transform : translate(0, 50px);
    transition : all 1500ms;
    margin: 0 auto;
    z-index: 1;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div.s_scrollIn {
    opacity: 1;
    transform: translate(0, 0);
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-image {
    margin: 0 0 30px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-title {
    margin: 0 20px 15px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:first-child.title.base .cmp-title {
    margin: 0 20px 50px;
    border-top: 1.5px solid grey;
    overflow: hidden;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div:first-child.title.base .cmp-title {
    margin: 0 20px 20px;
    border-top: none;
    overflow: visible;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:last-child.title.base .cmp-title {
    margin: 0 20px 50px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:first-child.title.base .cmp-title:before {
    position: absolute;
    top: -125%;
    left: -12.5%;
    width: 30%;
    height: 250%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    background: grey;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div:first-child.title.base .cmp-title:before {
    top: 0;
    left: 20%;
    width: 5%;
    height: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    padding: 1rem 2rem 1rem 4rem;
    border-radius: 100vh 0 0 100vh;
    background: #FF539A;
    box-shadow: rgba(100, 100, 100, 0.8) 2px 2px 5px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div.title.base .cmp-title h3:before {
    position: absolute;
    content: '';
    top: calc(50% - 10px);
    left: 20.5%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:first-child.title.base .cmp-title:after {
    content: "";
    position: absolute;
    top: calc(50% + -3px);
    left: 3%;
    font-size: 19px;
    color: #fff;
    visibility: visible;
}
.s_renewalBlock > div.div.base > div[class*="s_section-1"] > div > div > div:first-child.title.base .cmp-title:after {
    content: "01";
}
.s_renewalBlock > div.div.base > div[class*="s_section-2"] > div > div > div:first-child.title.base .cmp-title:after {
    content: "02";
}
.s_renewalBlock > div.div.base > div[class*="s_section-3"] > div > div > div:first-child.title.base .cmp-title:after {
    content: "03";
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div:first-child.title.base .cmp-title:after {
    content: "アプリ限定";
    left: 25%;
    font-size: 15px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-5"] > div > div > div:first-child.title.base .cmp-title:after {
    content: "04";
}
.s_renewalBlock > div.div.base > div[class*="s_section-6"] > div > div > div:first-child.title.base .cmp-title:after {
    content: "05";
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div.title.base .cmp-title h3 {
    position: relative;
    display: block;
    padding: 15px 0 0 30px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-layout ul {
    display: flex;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .cmp-layout ul {
    display: block;
}
.s_renewalBlock > div.div.base:nth-child(even) > div[class*="s_section-"] .cmp-layout ul {
    flex-direction: column;
}
.s_renewalBlock > div.div.base:nth-child(odd) > div[class*="s_section-"] .cmp-layout ul {
    flex-direction: column-reverse;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-layout ul > li {
    width: 100%!important;
    margin: 0 0 0 0!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .cmp-layout ul > li:first-child {
    width: 65%!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .cmp-layout ul > li:last-child {
    width: 35%!important;
}
.s_renewalBlock > div.div.base:nth-child(even) > div[class*="s_section-"] .cmp-layout ul > li:first-child, 
.s_renewalBlock > div.div.base:nth-child(odd) > div[class*="s_section-"] .cmp-layout ul > li:last-child {
    text-align: center;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-layout .cmp-title {
    margin: 0 0 15px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div.richtext.base:last-child .cmp-richtext {
    margin: 30px 0 0;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div.richtext.base:last-child .cmp-richtext p {
    font-size: 12px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-layout .cmp-richtext {
    margin: 0 0 10px;
}
.s_renewalBlock .s_phoneAnimation {
    position: relative;
    width: 90%;
    margin: 0 auto;
}
.s_renewalBlock .s_phoneAnimation:before {
    content: "";
    display: block;
    padding-top: 65%;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_phoneAnimation:before {
    padding-top: 205%;
}
.s_renewalBlock .s_phoneAnimation .s_display {
    position: absolute;
    top: 12%;
    left: 12%;
    width: 74.2%;
    height: 72%;
    overflow: hidden;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_phoneAnimation .s_display {
    position: absolute;
    top: 9.8%;
    left: 7%;
    width: 86%;
    height: 81%;
    overflow: hidden;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_displayBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index: 130;
    font-size: 19px;
    color: #fff;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_displayBg:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + -10px);
    padding: 0 5px;
    text-align: center;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
.s_renewalBlock .s_section-1 .s_phoneAnimation .s_display .s_displayBg.s_bg-1:after {
    content: "デザインリニューアル";
}
.s_renewalBlock .s_section-2 .s_phoneAnimation .s_display .s_displayBg.s_bg-1:after {
    content: "検索メニューページ";
}
.s_renewalBlock .s_section-3 .s_phoneAnimation .s_display .s_displayBg.s_bg-1:after {
    content: "パーソナライズ検索";
}
.s_renewalBlock .s_section-4 .s_phoneAnimation .s_display .s_displayBg.s_bg-1:after {
    content: "画像検索";
}
.s_renewalBlock .s_section-5 .s_phoneAnimation .s_display .s_displayBg.s_bg-1:after {
    content: "あなたサイズ";
}
.s_renewalBlock .s_phoneAnimation .s_display .s_displayBg.s_bg-2 {
    display: none;
    background-color: #fff;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_displayBg.s_bg-2 img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    opacity: 0.87;
    box-shadow: rgba(100, 100, 100, 0.8) 1.5px 2px 3px;
    border-radius: 25%;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_phoneAnimation .s_display .s_displayBg.s_bg-2 img {
    width: 50%;
}
.s_renewalBlock .s_phoneAnimation .s_display div[class*="s_display-"] {
    display: none;
    width: 100%;
    height: 100%;
    transform: translateY(0);
}
.s_renewalBlock .s_section-1 .s_phoneAnimation .s_display div[class*="s_display-"].s_scroll {
    animation: scroll-1 2s ease-in-out 1 forwards;
}
.s_renewalBlock .s_section-2 .s_phoneAnimation .s_display div[class*="s_display-1"].s_zoomIn img {
    animation: zoom-1 3s ease-in-out 1 forwards;
}
.s_renewalBlock .s_section-2 .s_phoneAnimation .s_display div[class*="s_display-2"].s_zoomIn img {
    animation: zoom-2 3s ease-in-out 1 forwards;
}
.s_renewalBlock .s_section-2 .s_phoneAnimation .s_display div[class*="s_display-5"].s_zoomIn img {
    animation: zoom-3 3s ease-in-out 1 forwards;
}
.s_renewalBlock .s_section-4 .s_phoneAnimation .s_display div[class*="s_display-"].s_scroll {
    animation: scroll-2 2s ease-in-out 1 forwards;
}
.s_renewalBlock .s_phoneAnimation .s_display div[class*="s_display-"].s_shoot {
    animation: shoot 0.3s ease-out 1 forwards;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-1 {
    z-index: 120;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-2 {
    z-index: 110;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-3 {
    z-index: 100;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-4 {
    z-index: 90;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-5 {
    z-index: 80;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-6 {
    z-index: 70;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-7 {
    z-index: 60;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-8 {
    z-index: 50;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-9 {
    z-index: 40;
}
.s_renewalBlock .s_phoneAnimation .s_display .s_display-10 {
    z-index: 30;
}
.s_renewalBlock .s_phoneAnimation .s_modal {
    position: absolute;
    display: none;
    bottom: 16%;
    left: 49%;
    width: 75%;
    height: 5%;
    padding: 5px;
    text-align: center;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
    background: gray;
    font-size: 10px;
    color: #fff;
    opacity: 0;
    animation: modal 0.8s linear 1 forwards;
    z-index: 150;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_phoneAnimation .s_modal {
    bottom: 9.5%;
    left: 50%;
    width: 85%;
    height: 10%;
}
.s_renewalBlock .s_phoneAnimation .s_modal:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + -20px);
    padding: 5px 10px;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p1-01:after {
    content: "お好みの表示方法に変更";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p1-02:after {
    content: "新しい絞り込みメニューでは";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p1-03:after {
    content: "サクサク快適に商品を検索できます !";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p2-01:after {
    content: "検索メニューページでは";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p2-02:after {
    content: "様々な検索方法から商品を探せます !";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p2-03:after {
    content: "アイテム検索ページでは";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p2-04:after {
    content: "さまざまなカテゴリから商品を検索できます !";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p2-05:after {
    content: "ショップブランド検索ページでは";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p2-06:after {
    content: "1500以上の人気ショップブランドを取扱い !";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p2-07:after {
    content: "検索トップから探すをタップ !";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p3-01:after {
    content: "閲覧・カート追加・お気に入り登録すると";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p3-02:after {
    content: "検索ページがあなたの好みに近づきます";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p3-03:after {
    content: "あなたへのおすすめ順をタップ !";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p4-01:after {
    content: "気になるアイテムをカメラ撮影して";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p4-02:after {
    content: "似寄りの商品を検索できます !";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p4-03:after {
    content: "商品ページの検索ボタンをタップすると";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p4-04:after {
    content: "画像データからおすすめ商品をご提案します !";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p5-01:after {
    content: "絞り込みからあなたサイズをONにすれば";
}
.s_renewalBlock .s_phoneAnimation .s_modal.s_p5-02:after {
    content: "サイズがないストレスから解放されます !";
}
.s_renewalBlock .s_phoneAnimation .s_pulse {
    position: absolute;
    display: none;
    width: 5%;
    height: 7.5%;
    top: 0;
    right: 0;
    background: #1d7ad1;
    border-radius: 50%;
    opacity: 0;
    animation: pulse 0.75s linear 2 forwards;
    z-index: 150;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_phoneAnimation .s_pulse {
    width: 15%;
}/*
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p1-01 {
    top: 18%;
    right: 21%;
}*/
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p1-02 {
    top: 36.75%;
    right: 20%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p1-03 {
    top: 36.75%;
    right: 15%;
}/*
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p1-04 {
    top: 36%;
    right: 4.5%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p1-05 {
    top: 18%;
    right: 7.5%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p1-06 {
    top: 13%;
    right: 58%;
}*/
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p1-07 {
    top: 45.5%;
    right: 81%;
}/*
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p1-08 {
    top: 83.5%;
    right: 13.5%;
}*/
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p2-01 {
    top: 49.5%;
    right: 76%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p2-02 {
    top: 58%;
    right: 70%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p2-03 {
    top: 56%;
    right: 31.5%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p2-04 {
    top: 34.5%;
    right: 80.5%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p3-01 {
    top: 55.5%;
    right: 61.5%;
}/*
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p3-02 {
    top: 82.5%;
    right: 7.5%;
}*/
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p3-03 {
    top: 33.5%;
    right: 22%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p3-04 {
    top: 33.5%;
    right: 15%;
}/*
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p3-05 {
    top: 18%;
    right: 21%;
}*/
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p3-06 {
    top: 36.75%;
    right: 20%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p4-01 {
    top: 9.5%;
    right: 20.5%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p4-02 {
    top: 44.5%;
    right: 7.5%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p5-01 {
    top: 60.5%;
    right: 77%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p5-02 {
    top: 22%;
    right: 28%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p5-03 {
    top: 60.5%;
    right: 71.5%;
}/*
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p5-04 {
    top: 25.5%;
    right: 4%;
}
.s_renewalBlock .s_phoneAnimation .s_pulse.s_p5-05 {
    top: 83.5%;
    right: 13.5%;
}*/
.s_renewalBlock .s_phoneAnimation .s_phone {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(https://voi.0101.co.jp/voi/content/dam/01/exclusivepage/renewal/laptop.gif) no-repeat left top;
    background-size: 100%, 100%;
    z-index: 200;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_phoneAnimation .s_phone {
    background: url(https://voi.0101.co.jp/voi/content/dam/01/exclusivepage/renewal/smartphone.gif) no-repeat left top;
    background-size: 100%, 100%;
}

.s_renewalBlock .cmp-title h3, 
.s_renewalBlock .cmp-title h4 {
    font-weight: bold;
    margin: 0 0 15px 0;
}
.s_renewalBlock .cmp-title h3 {
    font-size: 19px;
}
.s_renewalBlock .cmp-title h4 {
    font-size: 16px;
}
.s_renewalBlock > div.richtext.base {
    margin: 0 0 0 2.5px;
}


@keyframes scroll-1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-90%);
  }
  100% {
    transform: translateY(-72.5%);
  }
}
@keyframes zoom-1 {
  0% {
    transform: translateY(0%) translateX(0%) scale3d(1, 1, 1);
  }
  20% {
    transform: translateY(15%) translateX(50%) scale3d(2, 2, 2);
  }
  80% {
    transform: translateY(15%) translateX(-50%) scale3d(2, 2, 2);
  }
  100% {
    transform: translateY(0%) translateX(0%) scale3d(1, 1, 1);
  }
}
@keyframes zoom-2 {
  0% {
    transform: translateY(0%) translateX(0%) scale3d(1, 1, 1);
  }
  20% {
    transform: translateY(15%) translateX(12.5%) scale3d(1.3, 1.3, 1.3);
  }
  80% {
    transform: translateY(-40%) translateX(12.5%) scale3d(1.3, 1.3, 1.3);
  }
  100% {
    transform: translateY(0%) translateX(0%) scale3d(1, 1, 1);
  }
}
@keyframes zoom-3 {
  0% {
    transform: translateY(0%) translateX(0%) scale3d(1, 1, 1);
  }
  20% {
    transform: translateY(15%) translateX(12.5%) scale3d(1.3, 1.3, 1.3);
  }
  80% {
    transform: translateY(-45%) translateX(12.5%) scale3d(1.3, 1.3, 1.3);
  }
  100% {
    transform: translateY(0%) translateX(0%) scale3d(1, 1, 1);
  }
}
@keyframes shoot {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0.5;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes modal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.75;
  }
}
/* PC View */
@media screen and (min-width: 981px) {
    .s_renewalBlock > div.div.base > div[class*="s_section-"] {
        width: calc(100vw + -100px);
        margin: 0 calc(50% - 50vw);
        padding: 100px 50px;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] > div {
        flex-basis: 950px;
        width: 950px;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-title {
        margin: 0 50px 75px;
        letter-spacing: 0.5em;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:first-child.title.base .cmp-title {
        margin: 0 50px 100px;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div:first-child.title.base .cmp-title {
        margin: 0 50px 50px;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:last-child.title.base .cmp-title {
        margin: 0 50px 100px;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-layout > li:last-child {
        margin: 0;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-layout .cmp-title {
        margin: 0 -20px 50px;
        letter-spacing: 0.25em;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-4"] .cmp-layout .cmp-title {
        margin: 0 -20px 100px;
        letter-spacing: 0.25em;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div.layout.base .cmp-layout li:first-child > div:last-child {
        margin: 200px 0 0;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:first-child.title.base .cmp-title:before {
        position: absolute;
        top: -100%;
        left: -17.5%;
        width: 30%;
        height: 200%;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div:first-child.title.base .cmp-title:before {
        top: 2.5px;
        left: 20%;
        width: 10%;
        height: 0;
        padding: 2rem 2rem 0.5rem 1.5rem;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div.title.base .cmp-title h3:before {
        top: calc(50% - 7px);
        left: 20.5%;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:first-child.title.base .cmp-title:after {
        top: calc(50% + -0px);
        font-size: 25px;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div:first-child.title.base .cmp-title:after {
        top: calc(50% + -0px);
        left: 25.5%;
        font-size: 13px;
        letter-spacing: 1px;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] .cmp-layout .cmp-richtext {
        margin: 0 0 30px;
    }
    .s_renewalBlock .cmp-title {
        margin: 50px 50px 30px 30px;
    }
    .s_renewalBlock .cmp-title h3 {
        font-size: 25px;
    }
    .s_renewalBlock .cmp-title h4 {
        font-size: 20px;
    }
    .s_renewalBlock > div.richtext.base {
        margin: 0 30px;
    }
    .s_renewalBlock .s_phoneAnimation .s_display .s_displayBg {
        font-size: 25px;
    }
    .s_renewalBlock .s_phoneAnimation .s_modal {
        font-size: 14px;
    }
}
/* iPhone5 View */
@media screen and (max-width: 320px) {
    .s_renewalBlock .cmp-title h3 {
        font-size: 17px;
    }
    .s_renewalBlock .cmp-title h4 {
        font-size: 14px;
    }
    .s_renewalBlock .s_phoneAnimation .s_display .s_displayBg {
        font-size: 17px;
    }
    .s_renewalBlock .s_phoneAnimation .s_modal {
        height: 15%;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-"] > div > div > div:first-child.title.base .cmp-title:after {
        top: calc(50% + -0px);
        left: 2%;
        font-size: 17px;
    }
    .s_renewalBlock > div.div.base > div[class*="s_section-4"] > div > div > div:first-child.title.base .cmp-title:after {
        top: calc(50% + -0px);
        left: 2%;
        font-size: 12px;
    }
}

/*--- キャンペーン ---*/
.s_campaignBlock {
    margin: 0 -20px;
    padding: 50px 20px;
    border-bottom: 1px solid #ccc;
}
.s_campaignBlock .cmp-image {
    border: 1px solid #ccc;
}
.s_campaignBlock .cmp-image a {
    position: relative;
    padding: 30px 15px 50px;
    background-color: #F6F5F4;
    opacity: 1;
}
.s_campaignBlock .cmp-image a:after {
    position: absolute;
    content: "クーポン取得ページはこちら";
    bottom: 25px;
    left: 15px;
    width: calc(100% + -40px);
    padding: 5px;
    text-align: center;
    background-color: #1E1558;
    color: #fff;
    font-size: 13px;
}
.s_campaignBlock > div.richtext.base {
    margin: 0 0 0 2.5px;
}
/* PC View */
@media screen and (min-width: 981px) {
    .s_campaignBlock {
        padding: 100px;
    }
    .s_campaignBlock > div.richtext.base {
        margin: 0;
    }
}

/*--- 注釈 ---*/
.s_cautionBlock {
    margin: 0 -20px;
    padding: 30px 20px;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}
.s_cautionBlock h2 {
    margin: 0 0 15px;
}
.s_cautionBlock p {
    margin: 0 0 5px 5px!important;
    padding: 0 0 0 15px!important;
}
.s_cautionBlock p, 
.s_cautionBlock p a, 
.s_cautionBlock p span {
    position: relative;
    font-size: 13px;
}
.s_cautionBlock p a {
    opacity: 1;
}
.s_cautionBlock p span:before {
    content: "※";
    position: absolute;
    top: auto;
    left: -15px;
}
.s_cautionBlock p a:after {
    content: "";
    position: absolute;
    top: calc(50% + -3px);
    right: -10px;
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: 1px solid #1da1f1;
    border-right: 1px solid #1da1f1;
    transform: rotate(45deg);
}
/* PC View */
@media screen and (min-width: 981px) {
    .s_cautionBlock {
        margin: 0 0 0!important;
        padding: 100px 0;
    }
    .s_mainArea > div:nth-last-of-type(2) {
        width: 100vw;
        margin: 0 calc(50% - 50vw);
    }
    .s_cautionBlock > div {
        width: 80%;
        max-width: 950px;
        margin: 0 auto;
    }
}
/* iPhone5 View */
@media screen and (max-width: 320px) {
    .s_cautionBlock p, 
    .s_cautionBlock p a, 
    .s_cautionBlock p span {
        font-size: 12px;
    }
}

/*--- SNS ---*/
.s_snsBlock {
    margin: 0 -20px;
    padding: 30px 0;
}
.s_snsBlock ul li {
    width: 33%;
    float: left;
}
.s_snsBlock ul img {
    width: 40px;
    height: 40px;
}
.s_snsBlock ul li > a {
    display: block;
    width: 40px;
}
.s_snsBlock ul li:first-child > a {
    margin: 0 0 0 auto;
}
.s_snsBlock ul li:nth-child(2) > a {
    margin: 0 auto;
}
.s_snsBlock ul li:last-child > a {
    margin: 0 auto 0 0;
}
.s_snsBlock:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ".";
}
/* PC View */
@media screen and (min-width: 981px) {
    .s_snsBlock {
        padding: 50px 0;
    }
}

/*--- ボタン ---*/
.s_btnContents {
    margin: 30px -20px 0;
    padding: 0 20px 30px;
    border-bottom: 1px solid #ccc;
}
.s_btnContents ul {
    display: flex;
    justify-content: center;
}
.s_btnContents ul li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin: 0 15px 15px 0;
    background-color: #1da1f1;
    border-radius: 5px;
    box-shadow: rgba(100, 100, 100, 0.8) 0 1px 3px;
    overflow: hidden;
}
.s_btnContents ul li:after {
    content: "";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 9px;
    left: -25px;
    width: 50px;
    height: 15px;
    padding: 5px 20px 2.5px;
    border: none;
    white-space: pre;
    text-align: center;
    letter-spacing: 0px;
    line-height: 1em;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
    z-index: 2;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
.s_btnContents ul li.s_csLabel:after {
    content: "COMING\ASOON"!important;
    background-color: #ccc;
    box-shadow: 0 2px 5px rgba(136, 136, 136, 1);
}
.s_btnContents ul li.s_appLabel:after {
    content: "アプリ限定"!important;
    background-color: #FF539A;
    box-shadow: 0 2px 5px rgba(136, 136, 136, 1);
}
.s_btnContents ul li p {
    padding: 10px!important;
    text-align: center;
    font-weight: bold;
}
.s_btnContents ul li p a, .s_btnContents ul li p span {
    display: block;
    color: #fff!important;
    opacity: 1;
}
.s_btnContents ul li:last-of-type {
    margin: 0 0 15px;
}
.s_btnContents ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.s_btnContents ul li {
    width: calc(33.3% + -10px);
}
.s_btnContents > ul:last-child li {
    width: calc(47.5% + -10px);
}
/* PC View */
@media screen and (min-width: 981px) {
    .s_btnContents {
        margin: 50px -20px 0;
        padding: 0 100px 35px;
    }
    .s_btnContents ul li, .s_btnContents > ul:last-child li {
        width: calc(25% + -30px);
        height: 75px;
        margin: 0 30px 30px 0;
    }
    .s_btnContents ul li:last-of-type {
        margin: 0 0 30px;
    }
    .s_btnContents ul li:after {
        top: 12.5px;
        left: -22.5px;
    }
    .s_btnContents ul li p a, .s_btnContents ul li p span {
        font-size: 19px;
    }
}

/*--- クーポンバナー---*/
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appcampaign {
    background-color: #ffffff!important;
    padding: 5px 30px 5px;
    margin: 40px 0 0 0;
}


/*--- アプリダウンロード ---*/
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl {
    background-color: #007afe;
    padding: 50px 50px 20px;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl > div {
    max-width: 950px;
    width: 70%;
    margin: 0 auto;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl > div > div:first-child .cmp-layout li:first-child {
    margin: 0 5% 0 0!important;
    width: calc(20% + -5%)!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl > div > div:first-child .cmp-layout li:last-child {
    margin: 0 0 0 5%!important;
    width: calc(20% + -5%)!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl > div > div:first-child .cmp-layout li:nth-child(2) {
    width: 60%!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl > div > div:last-child .cmp-layout li:first-child {
    margin: 0 30px 0 0!important;
    width: calc(50% + -30px)!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl > div > div:last-child .cmp-layout li:last-child {
    margin: 0 0 0 30px!important;
    width: calc(50% + -30px)!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl .cmp-title {
    text-align: center;
    margin: 15px 0 0!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl .cmp-richtext {
    text-align: center;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl h3, .s_appInfoDl p {
    color: #fff!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl h3 {
    margin-bottom: 0!important;
}
.s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl p {
    font-size: 12px!important;
}
/* PC View */
@media screen and (min-width: 981px) {
    .s_renewalBlock > div.div.base > div[class*="s_section-4"] .s_appInfoDl {
        width: calc(100vw + -100px);
        margin: 100px calc(50% - 50vw) 0;
    }
}