.top .info .right { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

._disp-ib { display: inline-block; }

.swiper_box .swiper-button-next, .swiper_box .swiper-button-prev { top: 0; height: 100%; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

.cp-bnr { display: block; margin: 80px 0 40px; padding: 30px; border: 4px solid #fff; background: #fff url(../../shared/img/bg-check-pink.png) repeat; }

@media only screen and (max-width: 768px) { .cp-bnr { padding: 15px; } }

.cp-bnr .ttl { position: relative; margin: -70px 30px 0; padding: 10px; background: #EB6CA5; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.4; text-align: center; letter-spacing: 0; z-index: 1; }

.cp-bnr .ttl::before, .cp-bnr .ttl::after { display: block; position: absolute; bottom: -10px; width: 0; height: 0; border: solid transparent; border-width: 5px 10px; content: ""; z-index: 2; }

.cp-bnr .ttl::before { left: 0; border-top-color: #BA3366; border-right-color: #BA3366; }

.cp-bnr .ttl::after { right: 0; border-top-color: #BA3366; border-left-color: #BA3366; }

.cp-bnr .ttl > .txt { position: relative; z-index: 2; }

@media only screen and (max-width: 768px) { .cp-bnr .ttl { max-width: 480px; margin: -60px auto 0; padding: 10px 0; font-size: 18px; }
  .cp-bnr .ttl::before, .cp-bnr .ttl::after { bottom: -10px; border-width: 5px 5px; } }

.cp-bnr .ttl > .ribbonL { display: block; position: absolute; top: 10px; left: -30px; width: 50px; height: 100%; z-index: 1; overflow: hidden; }

.cp-bnr .ttl > .ribbonL::before, .cp-bnr .ttl > .ribbonL::after { display: block; position: absolute; width: 100%; height: 100%; background: #EB6CA5; content: ""; }

.cp-bnr .ttl > .ribbonL::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewX(30deg); }

.cp-bnr .ttl > .ribbonL::after { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); }

@media only screen and (max-width: 768px) { .cp-bnr .ttl > .ribbonL { left: -30px; width: 40px; }
  .cp-bnr .ttl > .ribbonL::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: skewX(20deg); -ms-transform: skewX(20deg); transform: skewX(20deg); }
  .cp-bnr .ttl > .ribbonL::after { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: skewX(-20deg); -ms-transform: skewX(-20deg); transform: skewX(-20deg); } }

.cp-bnr .ttl > .ribbonR { display: block; position: absolute; top: 10px; right: -30px; width: 50px; height: 100%; z-index: 1; overflow: hidden; }

.cp-bnr .ttl > .ribbonR::before, .cp-bnr .ttl > .ribbonR::after { display: block; position: absolute; width: 100%; height: 100%; background: #EB6CA5; content: ""; }

.cp-bnr .ttl > .ribbonR::before { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); }

.cp-bnr .ttl > .ribbonR::after { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewX(30deg); }

@media only screen and (max-width: 768px) { .cp-bnr .ttl > .ribbonR { right: -30px; width: 40px; }
  .cp-bnr .ttl > .ribbonR::before { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: skewX(-20deg); -ms-transform: skewX(-20deg); transform: skewX(-20deg); }
  .cp-bnr .ttl > .ribbonR::after { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: skewX(20deg); -ms-transform: skewX(20deg); transform: skewX(20deg); } }

.cp-bnr .period { max-width: 560px; margin: 25px auto 0; font-size: 18px; line-height: 1.5; text-align: center; letter-spacing: 0; }

@media only screen and (max-width: 768px) { .cp-bnr .period { font-size: 14px; } }

.cp-bnr .lead { margin: 1em 0; font-size: 28px; font-weight: bold; line-height: 1.25; text-align: center; }

.cp-bnr .lead strong { display: inline-block; background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #fff000)); background: linear-gradient(transparent 60%, #fff000 60%); color: #EB6CA5; font-size: 1.2em; }

@media only screen and (max-width: 768px) { .cp-bnr .lead { font-size: 20px; } }

.cp-bnr .outline { background: #fff; margin: 0; padding: 20px; border-radius: 12px; }

.cp-bnr .outline dt { margin: 15px 0 4px; color: #BA3366; font-size: 18px; font-weight: bold; line-height: 1.5; }

.cp-bnr .outline dt:first-child { margin-top: 0; }

.cp-bnr .outline dd { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.5; }

.cp-bnr .outline ol { margin: 0; padding: 0 0 0 1.5em; }

.cp-bnr .outline ol li { list-style: decimal; }

.cp-bnr .outline .notes { margin: 0; }

.cp-bnr .outline .notes li { padding-left: 1em; text-indent: -1em; }

@media only screen and (max-width: 768px) { .cp-bnr .outline { padding: 15px; }
  .cp-bnr .outline dt { font-size: 16px; }
  .cp-bnr .outline dd { padding-left: 16px; font-size: 14px; } }

.tsucho-app { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 730px; margin: 15px auto 50px; padding: 29px; border: 1px solid #d3d3d3; }

.tsucho-app .note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; text-align: center; }

.tsucho-app > .tsucho-btn { max-width: 420px; margin: 20px auto 0; }

@media only screen and (max-width: 768px) { .tsucho-app { max-width: none; margin: 10px 5px; padding: 19px; }
  .tsucho-app .note { font-size: 11px; letter-spacing: 0; } }

.tsucho-box { max-width: 420px; margin: 15px 0 0; text-indent: 0; }

.tsucho-box .note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }

@media only screen and (max-width: 768px) { .tsucho-box .note { font-size: 11px; letter-spacing: 0; } }

.tsucho-btn { display: block; position: relative; padding: 15px 20px; border: none; border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, from(#F6C132), to(#F8CE40)); background: linear-gradient(to bottom, #F6C132 0%, #F8CE40 100%); color: #0074be; text-align: center; font-size: 18px; font-weight: bold; line-height: 1.25; z-index: 1; overflow: hidden; -webkit-transition: opacity .15s ease; transition: opacity .15s ease; }

.tsucho-btn::before { display: block; position: absolute; top: -125%; left: -20%; width: 100%; height: 200%; border-radius: 50%; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0.3)), to(transparent)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 50%, transparent 100%); z-index: -1; content: ""; }

.tsucho-btn::after { display: block; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-right: 2px solid; border-top: 2px solid; z-index: 1; content: ""; -webkit-transform: translateY(-6px) rotate(45deg); -ms-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg); }

.tsucho-btn:hover { opacity: .7; }

@media only screen and (max-width: 768px) { .tsucho-btn { font-size: 15px; }
  .tsucho-btn::after { right: 15px; width: 8px; height: 8px; } }
