@charset "UTF-8";

:root{
  --pink:#f35a8a;         /* 背景ピンク */
  --pink-dark:#e34a7b;    /* 影・強調ピンク */
  --white:#fff;
  --ink:#5c2141;          /* 文字色（少し紫がかった濃色） */
  --accent:#ffd84d;       /* リボンや飾りの黄色 */
  --card-radius:24px;
  --container:980px;
}

img{
	max-width: 100%;
}

.main{
  background: url(../img/bg_yellow.png) #fff21d;
}
.visual{
  padding: 3rem 0;
}

.section-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* info */

.section-info{
  background: url(../img/bg_pink.png) #e95189;
  padding: 4rem 0;
  margin-bottom: 4rem;
}
.info-txt{
  color: #fff;
  line-height: 2;
}
.section-info h2{
  margin-bottom: 4rem;
}
.section-info h2 img{
  width: 100%;
}
.po-block h2{
  margin-bottom: 2rem;
}

.po-block{
  background-color: #ee86a7;
  padding: 2rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
  position: relative;
}
.po-block-inner{
  background-color: #fff;
  padding: 4rem;
}
@media screen and (max-width: 899px) {
  .po-block{
    padding: .7rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
  }
  .po-block-inner{
    padding: 4rem 1rem;
  }
}
.po-block::before,
.po-block::after,
.po-block-inner::before,
.po-block-inner::after{
  display: block;
  content: '';
  width: 4rem;
  height: 4rem;
  background: url(../img/po.png) no-repeat 0 0 / 100% auto;
  position: absolute;
}
.po-block::before{
  top: 0;
  left: 0;
}
.po-block::after{
  top: 0;
  right: 0;
}
.po-block-inner::before{
  bottom: 0;
  left: 0;
}
.po-block-inner::after{
  bottom: 0;
  right: 0;
}
.po-block small{
  font-size: 1.2rem;
}
.po-txt{
  line-height: 2;
  margin: 3rem 0;
}
.po-txt small{
  display: block;
  text-align: left;
  margin-top: 2rem;
}
.po-block a {
  color: #007bff;
  text-decoration: underline;
}

.btn-area{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
}
.btn-area a{
  display: inline-block;
  color: #fff;
  position: relative;
  text-decoration: none;
  padding: 2.2rem 5rem 2.3rem 3rem;
  border-radius: 3rem;
  line-height: 1;
  min-width: 400px;
}
.btn-area a::after{
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  border-radius: 3px;
  transform: rotate(-45deg) translateY(-50%);
  position: absolute;
  right: 2rem;
  top: 50%;
}
.btn-red{
  background-color: #e60012;
}
.btn-green{
  background-color: #0eab00;
}
@media screen and (max-width: 899px) {
  .btn-area{
    flex-direction: column;
    margin-top: 2rem;
  }
  .btn-area a{
    display: block;
    min-width: 95%;
    padding: 2.2rem 2.5rem 2.3rem 1rem;
  }
  .btn-area a::after{
    right: 1rem;
    width: .7rem;
    height: .7rem;
    border-width: 3px;
  }
  .po-txt small{
    font-size: 1rem;
  }
}

.section-title{
  font-size: 3rem;
  color: #e95189;
  margin-bottom: 2rem;
}
@media screen and (max-width: 899px) {
  .section-title{
    font-size: 2rem;
  }
}

/* 新着リスト */
.news-area .po-block-inner{
  overflow-y: auto;
  max-height: 350px;
}
.news-wrap{
  text-align: left;
}
.news-item{
  display: flex;
  border-top:2px solid #f5c6d7;
  padding: 1.8rem 0.5rem;
}
.news-item .date{
  white-space: nowrap;
  width: 13rem;
}
.news-item .text{
  flex: 1;
}
@media screen and (max-width: 899px) {
  .news-item{
    flex-direction: column;
  }
  .news-item .date{
    width: auto;
  }
}

.camp-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3rem;
}
.camp-wrap li:nth-child(1){
  grid-column: 1 / 3;
}
.camp-wrap a{
  display: block;
  border: 1.5rem solid #ee86a7;
  transition: transform 0.3s ease;
}
@media screen and (max-width: 899px) {
  .camp-wrap{
    grid-gap: 1.2rem;
  }
  .camp-wrap a{
    border: none;
  }
}
.camp-wrap a:hover {
  transform: translateY(1rem);
  opacity: 1;
}

a:hover {
}


.txt-red {
  color: #e60033;
  font-weight: 700;
}
.align-left{
  text-align: left;
}

.fadeUp {
  opacity: 0;
  transform: translateY(10rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeUp[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
}


h3 {
  background: #f2699c;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
  padding: 1rem;
  margin: 4rem 0 3rem;
}
@media screen and (max-width: 899px) {
  h3{
    font-size: 1.5rem;
    margin: 3rem 0 2rem;
    padding: .75rem;
  }
}
.row-wrap{
  display: flex;
  justify-content: center;
}
.date-row {
  display: grid;
  place-items: center;
  grid-template-columns: auto auto auto;
  gap: 1rem;
  font-size: 2.5rem;
  font-weight: bold;
}
.date-row .date-arrow{
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  background: #f2699c;
  clip-path: polygon(
    0% 25%,         /* 左上 */
    60% 25%,        /* 右上手前 */
    60% 0%,       /* 右上角の手前 */
    100% 50%,      /* 右三角の先端 */
    60% 100%,       /* 右下角の手前 */
    60% 75%,      /* 右下手前 */
    0% 75%        /* 左下 */
  );
}
@media screen and (max-width: 899px) {
  .date-row {
    font-size: 1.3rem;
  }
  .date-row .date-arrow{
    width: 2rem;
    height: 2rem;
    clip-path: polygon(
      0% 25%,         /* 左上 */
      40% 25%,        /* 右上手前 */
      40% 0%,       /* 右上角の手前 */
      100% 50%,      /* 右三角の先端 */
      40% 100%,       /* 右下角の手前 */
      40% 75%,      /* 右下手前 */
      0% 75%        /* 左下 */
    );
  }
  .date-row strong{
    font-size: 1.6rem;
  }
}
.note{
  border: 1px solid #f2699c;
  padding: 2rem;
  margin-top: 3rem;
  text-align: left;
  font-size: 1.3rem;
}
.note li::before {
  content: "● ";
  color: #000;
}
.note li:not(:last-child){
  margin-bottom: .5rem;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}
.section-detail5 .card-grid{
  grid-template-columns: 1fr;
}
.card {
  border: .7rem solid #ee86a7;
}
.card-title {
  background: #ee86a7;
  color: #fff;
  font-size: 1.7rem;
  font-weight: bold;
  padding: .3rem 1rem 1rem;
}
.card-body{
  padding: 2rem 2.5rem 2.5rem;
}
.card-body > p + p{
  border-top: 2px dotted #ee86a7;
  margin-top: 1rem;
  padding-top: 1rem;
}
.card h5 {
  background: #f2699c;
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  padding: .3rem;
  margin-bottom: 1rem;
}
.card p + h5{
  margin-top: 1.5rem;
}
.card h5 + p{
  text-align: left;
}
.card-img{
  margin-bottom: 1rem;
}
.card-date {
  background: #ffe600;
  font-size: 1.4rem;
  font-weight: bold;
  padding: .5rem;
  margin-top: 1rem;
}
.card-date small {
  display: block;
  font-size: 1rem;
}
@media screen and (max-width: 899px) {
  .card-grid{
    grid-template-columns: 1fr;
  }
  .card-title{
    font-size: 1.5rem;
  }
  .card-body{
    padding: 1rem 1rem 1.5rem;
  }
}


.head_nav .nav_accumulate,
.head_nav .nav_howto,
.head_nav .nav_omatome,
.head_nav .nav_app,
.head_nav .nav_service {
  display: none;
}

#main {
  color: #111111;
  overflow: hidden;
}

#pagetop {
  z-index: 9;
}

.sp_only {
  display: none !important;
}

.tac {
  text-align: center;
}

.tal {
  text-align: left;
}

.fwb {
  font-weight: 500;
}

.dib {
  display: inline-block;
}

.c_red{
  color: #f948a2;
  border-bottom:double;/*二重線を引く*/
  border-color:#f948a2;
  border-width:3px;
}

.bg_in01 {
  background: #fdd7e4;
  position: relative;
  z-index: 2;
}

.bg_in02 {
  background: #fdd7e4;
  position: relative;
  z-index: 1;
}
/*{
  background: url('https://www.jrkyushu.co.jp/point/campaign/2411_netyoyakucp/img/bg_slp.png');
  background-size: auto 100%;
}*/
@media screen and (max-width: 899px) {
  .bg_in02 {
  }
}

.sectionBlock {
  padding-bottom: 50px;
}
@media screen and (max-width: 899px) {
  .sectionBlock {
    padding-bottom: 25px;
  }
}

.flexBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.noteList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
}
.noteList:before {
  content: "※";
}
.noteList_text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

.indentTxt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
}
.indentTxt_text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

.ttl02 {
  font-size: 3.4rem;
  line-height: 1.35;
  color: #813507;
  font-weight: 900;
  margin-bottom: 35px;
}
@media screen and (max-width: 899px) {
  .ttl02 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    line-height: 1.455;
  }
}

.mt0 {
  margin-top: 0;
}

.mb0 {
  margin-bottom: 0;
}

.pt0 {
  padding-top: 0;
}

.pb0 {
  padding-bottom: 0;
}

.jsAcc-link {
  cursor: pointer;
}

.txt_link{
  word-break: break-word;
}

@media screen and (max-width: 899px) {
  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: block !important;
  }
}
.mv_area img {
  object-fit: cover;
  min-height: min(37.5vw,450px);
}

.lead {
  background: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.5;
  padding: 30px 20px 40px 20px;
}
.lead p + p {
  margin-top: 27px;
}

.lead .btnGroup{
  margin-top: 30px;
}


@media screen and (max-width: 899px) {
  .lead {
    font-size: 1.3rem;
    padding: 20px 20px 25px;
    margin-top: 8px;
    line-height: 1.556;
  }
  .lead p + p {
    margin-top: 18px;
  }
}

.styleBox + .styleBox {
  margin-top: 30px;
}
@media screen and (max-width: 899px) {
  .styleBox + .styleBox {
    margin-top: 15px;
  }
}
.styleBox.-head_only .styleBox_head {
  border-radius: 10px;
}
.styleBox_head {
  color: #fff;
  background: #f948a2;
  border-radius: 10px 10px 0 0;
  font-size: 2.3rem;
  line-height: 1.391;
  font-weight: 700;
  text-align: left;
  padding: 25px 40px;
  font-family: "HelveticaRoundedLTPro-BlkO";
}
.styleBox_head.styleBox_head_red{
  background: #DC000B;
}
.styleBox_head > p {
  margin-right: -5px;
}
.styleBox_head:has(.styleBox_ttl) {
  padding: 14px 40px;
}
@media screen and (max-width: 899px) {
  .styleBox_head {
    text-align: center;
    font-size: 1.6rem;
    padding: 15px 20px 12px;
  }
  .styleBox_head > p {
    margin-right: 0;
  }
  .styleBox_head:has(.styleBox_ttl) {
    padding: 4vw 5.3334vw 3vw;
    padding: 15px 20px 12px;
  }
}
.styleBox_ttl {
  text-align: center;
  font-size: 3.2rem;
}
@media screen and (max-width: 899px) {
  .styleBox_ttl {
    font-size: 2.2rem;
  }
}
.styleBox_content {
  background: #fff;
  border-radius: 10px 10px 10px 10px;
  padding: 58px 40px 88px 40px;
  font-size: 2rem;
  text-align: left;
  line-height: 1.583;
}
._point {
  background-color: #fff;
  padding:30px 20px 40px;
  margin-top: 40px;
  border: 15px solid #e60012;
}
@media screen and (max-width: 899px) {
  .styleBox_content {
    padding: 15px 20px;
    font-size: 1.4rem;
  }
}

.toggleBox {
  border-radius: 10px;
  overflow: hidden;
}
.toggleBox + .toggleBox {
  margin-top: 30px;
}
@media screen and (max-width: 899px) {
  .toggleBox + .toggleBox {
    margin-top: 15px;
  }
}
.toggleBox_head {
  position: relative;
  text-align: center;
  font-weight: 700;
  color: #813507;
  background: #FFFFFF;
  font-size: 3rem;
  line-height: 1.4;
  padding: 26px 95px;
}
@media screen and (max-width: 899px) {
  .toggleBox_head {
    padding: 13px 55px 13px 25px;
    font-size: 2rem;
  }
}
.toggleBox_ico {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FC721E;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 40px;
}
.toggleBox.active .toggleBox_ico:after {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.toggleBox_ico:before, .toggleBox_ico:after {
  content: "";
  background: #fff;
  border-radius: 2px;
  height: 6px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: -3px auto 0;
  width: 30px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}
.toggleBox_ico:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
@media screen and (max-width: 899px) {
  .toggleBox_ico {
    width: 30px;
    height: 30px;
    right: 15px;
  }
  .toggleBox_ico:before, .toggleBox_ico:after {
    height: 4px;
    margin-top: -2px;
    width: 16px;
  }
}
.toggleBox_content {
  background: #FFFFFF;
  padding: 50px 40px;
  border-radius: 10px;
  margin-bottom: 50px;
}
@media screen and (max-width: 899px) {
  .toggleBox_content {
    padding: 22px 20px 20px;
      margin-bottom: 25px;
  }
}
.toggleBox_content .btnGroup {
  margin-top: 30px;
}

.appBox .styleBox_head {
  background: #D60011;
}
.appBox_ttl {
  position: relative;
  padding: 0 120px;
}
.appBox_ttl .illus {
  width: 129px;
  position: absolute;
  top: -36px;
  right: 6px;
  z-index: 1;
}
@media screen and (max-width: 899px) {
  .appBox_ttl {
    padding: 0;
  }
  .appBox_ttl .illus {
    width: min(24vw, 90px);
    top: -45%;
    right: -33px;
  }
}
.appBox .styleBox_content {
  padding-top: 35px;
  padding-bottom: 30px;
}
@media screen and (max-width: 899px) {
  .appBox .styleBox_content {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

.appBox_img {
  margin-bottom: 30px;
}
@media screen and (max-width: 899px) {
  .appBox_img {
    margin-bottom: 20px;
  }
}

.appBox_column .item {
  width: 48%;
  max-width: 480px;
}
.appBox_column .item_btn {
  max-width: 63%;
}
.appBox_column .item_btn a:hover {
  opacity: 0.8;
}
.appBox_column .item_qr {
  max-width: 32%;
}
.appBox_column .item_txt {
  font-size: 1.6rem;
  line-height: 1.5;
  color: #444444;
  margin-top: 12px;
  max-width: 410px;
}
@media screen and (max-width: 899px) {
  .appBox_column {
    gap: 30px 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .appBox_column .item {
    width: 94%;
  }
  .appBox_column .item_btn {
    max-width: 55%;
  }
  .appBox_column .item_qr {
    max-width: 35%;
  }
  .appBox_column .item_txt {
    font-size: 1.4rem;
    margin-top: 10px;
    max-width: 100%;
  }
}

.appBox2 .appBox_column {
  margin-bottom: 25px;
}
@media screen and (max-width: 899px) {
  .appBox2 .appBox_column {
    margin-bottom: 10px;
  }
}

.appInfo_ttl {
  position: relative;
  padding: 0 120px;
}
.appInfo_ttl .illus {
  width: 129px;
  position: absolute;
  top: -36px;
  right: 6px;
  z-index: 1;
}
@media screen and (max-width: 899px) {
  .appInfo_ttl {
    padding: 0;
  }
  .appInfo_ttl .illus {
    width: min(24vw, 90px);
    top: -40%;
    right: -20px;
  }
}
.appInfo .styleBox_content {
  padding-top: 50px;
  padding-bottom: 50px;
}
@media screen and (max-width: 899px) {
  .appInfo .styleBox_content {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

.btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px 20px;
}
@media screen and (max-width: 899px) {
  .btnGroup {
    gap: 15px 0;
  }
  .btnGroup .item {
    width: 100%;
  }
}

.btn {
  display: block;
  text-align: center;
  color: #fff;
  background: #2172dd;
  border-radius: 55px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.333;
  padding: 20px 50px;
  min-width: 440px;
  text-decoration: none;
  position: relative;
  -webkit-box-shadow: 3px 3px 0 #813507;
          box-shadow: 3px 3px 0 #813507;
}
.btn2 {
  display: block;
  text-align: center;
  color: #fff;
  background: #ff0000;
  border-radius: 55px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.333;
  padding: 20px 50px;
  min-width: 440px;
  text-decoration: none;
  position: relative;
  -webkit-box-shadow: 3px 3px 0 #813507;
          box-shadow: 3px 3px 0 #813507;
}
.btn:hover {
  opacity: 1;
  -webkit-transform: translate(3px, 3px);
          transform: translate(3px, 3px);
  -webkit-box-shadow: none;
          box-shadow: none;
}
/*.btn:after {
  content: "";
  background: url("https://www.jrkyushu.co.jp/point/campaign/2411_netyoyakucp/img/ico_01.png") no-repeat center/contain;
  width: 15px;
  aspect-ratio: 1;
  position: absolute;
  right: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}*/
@media screen and (max-width: 899px) {
  .btn {
    font-size: 1.5rem;
    padding: 13px 40px;
    min-width: 100%;
    width: 100%;
  }
  .btn:after {
    right: 20px;
  }
  .btn2 {
    font-size: 1.5rem;
    padding: 13px 40px;
    min-width: 100%;
    width: 100%;
  }
  .btn:after {
    right: 20px;
  }
}

.qaBox_marker {
  margin-right: 5px;
  font-weight: 700;
}
.qaBox .noteList {
  font-size: 83.3334%;
}

dl.indentList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
dl.indentList dd {
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
}
@media screen and (max-width: 899px) {
  dl.indentList {
    display: block;
  }
}

.campaignTitle {
  margin-bottom: 30px;
}
@media screen and (max-width: 899px) {
  .campaignTitle {
    max-width: 245px;
    margin: 0 auto 15px;
  }
}

.campaignBox {
  border-radius: 10px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.campaignBox + .campaignBox {
  margin-top: 20px;
}
@media screen and (max-width: 899px) {
  .campaignBox + .campaignBox {
    margin-top: 15px;
  }
}
.campaignBox_title {
  color: #fff;
  background: #f948a2;
  text-align: center;
  width: 164px;
  padding: 16px 0;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2.2rem;
  line-height: 1.333;
  position: relative;
}
.campaignBox_title:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  margin: -15px 0 0 -6px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #f948a2;
}
@media screen and (max-width: 899px) {
  .campaignBox_title {
    font-size: 1.3rem;
    width: 90px;
    padding: 12px 0;
  }
  .campaignBox_title:after {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 10px;
    margin: -8px 0 0 -2px;
  }
}
.campaignBox_content {
  background: #fff;
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
  padding: 30px 25px 30px 35px;
  text-align: left;
  font-size: 2.4rem;
  line-height: 1.583;
  border: 2px solid #f948a2;
  border-radius: 0 10px 10px 0;
}
@media screen and (max-width: 899px) {
  .campaignBox_content {
    font-size: 1.4rem;
    padding: 12px;
  }
}
.campaignBox .list01 {
  padding-left: 20px;
}
@media screen and (max-width: 899px) {
  .campaignBox .list01 {
    padding-left: 5px;
  }
}
.campaignBox .list02 > li {
  position: relative;
  padding-left: 30px;
}
.campaignBox .list02 > li + li {
  margin-top: 7px;
}
.campaignBox .list02 > li:before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FC721E;
  position: absolute;
  top: 0.5em;
  left: 0;
}
.campaignBox_content_type01 .btnGroup{
    margin-top: 30px;
}
@media screen and (max-width: 899px) {
  .campaignBox .list02 > li {
    padding-left: 15px;
  }
  .campaignBox .list02 > li:before {
    width: 10px;
    height: 10px;
  }
  .campaignBox_content_type01 .btnGroup{
      margin-top: 20px;
  }
  .campaignBox_content_type01 .btnGroup .btn{
      font-size: 1rem;
  }
}
.campaignBox .txt01 {
  font-size: 91.6667%;
  font-weight: 500;
  line-height: 1.636;
  margin-top: 6px;
}
.campaignBox .txt02 {
  font-size: 83.3334%;
  line-height: 1.6;
  margin-top: 6px;
}


#point .ttl02 {
  background: url('https://www.jrkyushu.co.jp/point/campaign/2411_netyoyakucp/img/ttl_bg.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 0;
  padding: 65px 20px;
}
@media screen and (max-width: 899px) {
  #point .ttl02 {
    background: url('../img/ttl_bg_sp.png') no-repeat;
    background-size: 100% 100%;
    padding: 0 20px;
    padding: 30px 20px;
  }
}