@charset "UTF-8";
body{
    font-family: Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif!important
}
main{font-feature-settings:"palt";}

.disp_sp {display: none !important;}
@media only screen and (max-width: 767px) {
.disp_sp {display: block !important;}
.main-vis .wrp-vis {background-color: #e8e8e8}    
}

.flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.ulp_page {
    line-height: 1.6;
    color: #000;
    font-size: 16px;
}
@media only screen and (max-width: 960px) {
.ulp_page .inner {padding: 0 30px;}
}
@media only screen and (max-width: 767px) {
.ulp_page .inner {padding: 0 20px;}
}

/* btn-a */
.c-btn-a {
    box-sizing: border-box;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF0000;
    background-size: auto auto;
    background-color: #FFED00;
    border-radius: 10px;
    padding: 10px 40px 10px 20px;
    max-width: 420px;
    width: 100%;
    min-height: 80px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    margin-bottom: 7px;
    text-shadow: 0.25px 0px 0px rgba(255, 0, 0, 1), 0px 0.25px 0px rgba(255, 0, 0, 1), -0.25px 0px 0px rgba(255, 0, 0, 1), 0px -0.25px 0px rgba(255, 0, 0, 1);
    border: 2px solid #FF0000
}
.c-btn-a::after {
  position: absolute;
  content: "";
  width: 43px;
  height: 43px;
  background: url(../img/arrow_red.png) center right no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}
.c-btn-a.-orange {
    font-size: 24px;
    background: #FF8B03;
    padding-top: 16px;
    padding-bottom: 16px;
    line-height: 1.4;
    color: #FFFFFF;
    border:none
}
.-orange::after {
 position: absolute;
  content: "";
  width: 43px;
  height: 43px;
  background: url(../img/arrow_01.png) center right no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}

.c-btn-wide{
    max-width: 520px;
    padding: 27px 80px 27px 50px;
}

@media only screen and (max-width: 640px) {
  .c-btn-a {
    font-size: 22px;
    padding: 5px 20px 5px 10px;
    max-width: 300px;
    min-height: 60px
  }
  .c-btn-a::after {
    width: 24px;
    height: 24px;
    right: 15px;
  }
.c-btn-a.-orange {
    font-size: 18px;
    padding: 5px 32px 5px 5px;
}    
}

.c-link {
  display: inline;
  font-weight: 500;
  color: #E60113;
  border-bottom: solid 1px #E60113;
}

.entry {
    padding: 7.2916666667% 50px 0;
    background-color: #d9f3ff;
}
.entry__btn {
  text-align: center;
}
.entry__notes {
  display: flex;
  flex-direction: column;
  margin-top: 30px;;
}
.entry__notes > li {
  font-weight: 500;
  padding-left: 1.1em;
  position: relative;
  line-height: 1.6;
}
.entry__notes > li::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "※";
  display: inline-block;
}
@media only screen and (max-width: 640px) {
.entry {padding: 7.2916666667% 20px 0;} 
  .entry__notes {
    gap: 10px;
  }
  .entry__notes > li {
    font-size: 16px;
  }
}

#container-main {
    padding-bottom: 5%;
    background-color: #ffffff
}
.main_inner{padding: 0px 50px}

.txt-info span{
    font-size: 25px;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    display: block;
    padding: 10px;
    color: #ffffff;
}

.txt-info {
    position: relative;
    margin: 0 -10px 2rem;
    padding: 1rem 2rem;
    background: #0068b7;
}
.txt-info:before,
.txt-info:after {
  position: absolute;
  content: '';
}
.txt-info:before {
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid #002463;
  border-left: 10px solid transparent;
}
.txt-info:after {
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #002463;
  border-right: 10px solid transparent;
}

#campaign {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #d9f3ff;
}
.campaignTarget__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 40px;
    align-items: center;
    margin-bottom: 20px;
}
#campaignTarget__item__wide{flex: 100%;}
#campaignTarget__item__wide span{
    max-width: 285px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.campaignTarget__item {max-width: 100px;}
.campaignTarget__item._small {max-width: 85px;}
@media only screen and (max-width: 767px) {  
.ulp_page .inner{
    padding: 0;
    width: 90%;
    margin: auto;
    background-color: #ffffff}    
.main_inner{padding: 0px 20px}    
.txt-info{padding: 1rem .5rem;}    
.txt-info span{font-size: 20px;}    
.campaignTarget__list {gap: 10px 30px;}    
.campaignTarget__item {max-width: 70px;}
#campaignTarget__item__wide span{max-width: 220px;}    
.campaignTarget__item._small {max-width: 70px;}    
}


.recommend{
    margin-top: 8%;
    margin-bottom: 10%;
}
.recommend .recommendBox:not(:first-of-type) {margin-top: 5%}
.recommendBox__name{
    margin-bottom: 20px;
}
.recommend .recommendBox:not(:first-of-type) .recommendBox__name {
    border-top: 1px solid #0068b7;
    padding-top: 5%;
    position: relative
}
.recommend .recommendBox:not(:first-of-type) .recommendBox__name::before,
.recommend .recommendBox:not(:first-of-type) .recommendBox__name::after {
    content: "";
    position: absolute;
    top: 0px;
    width: 8px;
    height: 8px;
    background: #0068b7;
    border-radius: 50%;
}

.recommend .recommendBox:not(:first-of-type) .recommendBox__name::before {
  left: 0;
  transform: translate(-50%, -50%);
}

.recommend .recommendBox:not(:first-of-type) .recommendBox__name::after {
  right: 0;
  transform: translate(50%, -50%);
}
.recommendBox__name h3{
    font-weight: bold;
    font-size: 30px;
    color: #0068b7;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0.25px 0px 0px rgba(0, 104, 183, 1), 0px 0.25px 0px rgba(0, 104, 183, 1), -0.25px 0px 0px rgba(0, 104, 183, 1), 0px -0.25px 0px rgba(0, 104, 183, 1);
}
.recommendBox__name p {
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    background-color: #F0F0F0;
    width: fit-content;
    margin: 5px auto auto;
    padding: 5px 10px;
    line-height: 1;
}
.recommendBox__lead {
    line-height: 1.6;
    width: 46.5%;
    font-size: 20px;
}
.recommendBox__lead .notesIndent{
    font-size: 16px;
    margin-top: 5px
}
.recommendBox__img{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 0px;
    width: 53.5%;
}
.recommendBox__img img {filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));}
.recommendBox__img span{max-width: 250px;}
.recommendBox__img._small span{max-width: 45%;}
.recommendBox__img._small2 span{max-width: 37%;}
.recommendBox__img._wide span{max-width: 285px;}
.recommend__btn {
  text-align: center;
  margin-top: 10.4166666667%;
}
@media only screen and (max-width: 767px) {  
.recommendBox__lead{
    width: 100%;
    margin-top: 20px;
}
.recommendBox__name h3{font-size: 22px;}
.recommendBox__name p {font-size: 18px;}  
.recommendBox__lead {font-size: 18px;}    
.recommendBox__img{width: 100%;}    
.recommendBox__img span, 
.recommendBox__img._small span{max-width: 200px} 
.recommendBox__img._small2 span{max-width: 160px}  
.recommendBox__img._wide span{max-width: 220px;}    
}


#sale{
    padding: 20px 25px;
    border: 1px solid #000000;
    max-width: 600px;
    width: 85%;
    margin: auto;
}
.sale__btn {display: block;}
@media only screen and (max-width: 767px) {  
#sale{padding: 5px;}    
}

.attention {
    margin: 0;
    padding: 10% 50px 0px;
}
.attention__box {position: relative;}
.attention__bar {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 38px;
  height: 38px;
  background-color: #000000;
  content: "";
  cursor: pointer;
  border-radius:50%;
}
.attention__bar::before,
.attention__bar::after {
  width: 20px;
  height: 4px;
  background-color: white;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.attention__bar.js-active::after {transform: translate(-50%, -50%) rotate(90deg);}
.attention__title {
    font-weight: 800;
    text-align: center;
    font-size: 25px;
    line-height: 1.4;
    background-color: #00abf4;
    padding: 15px 10px;
    color: #FFFFFF;
}
.attention__body {padding: 30px 0 0;}
.attention__heading {
    font-weight: bold;
    margin-top: 30px;
    font-size: 18px;
    padding-bottom: 2px;
    color: #00abf4;
    border-bottom: 1px solid #00abf4;
    line-height: 1.4;
}
.attention__heading__sub{
    font-weight: bold;
    font-size: 16px;
    margin-top: 10px;
}
.attention__text {
  margin-top: 10px;
  line-height: 1.6666666667;
}
.attention__text.-first {
  margin-top: 0;
}

.attention__notes {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.5;
    font-size: 14px;
}
.attention__indent {
  margin-top: 5px;
}
.attention__list {margin-top: 5px;}
.attention__list > li {margin-top: 5px; }
.attention__list > li::before {content: "・";}
.attention__notes > li,
.attention__indent > li,
.attention__list > li{
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
.attention {
    padding: 10% 20px 0px;
}
  .attention__bar {
    width: 35px;
    height: 35px;
    right: 15px;
    top: 20px;
  }
  .attention__bar::before,
    .attention__bar::after {
    width: 24px;
  }
  .attention__title {
    font-size: 20px;
    padding: 10px;
    text-align: left;
  }
  .attention__body {
    padding-top: 24px;
    border-width: 5px;
  }
  .attention__heading {
    font-size: 17px;
    margin-top: 24px;
  }
  .attention__heading::before {
    width: 20px;
    height: 20px;
  }
  .attention__notes {
    font-size: 15px;
    margin-top: 8px;
    line-height: 1.7;
  }
}


.about-btn {
  text-align: center;
  margin-top: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px 10px;
}
.fixed-btn {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 12px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  width: 100%;
  z-index: 500;
}

    
.pc{display: block !important}
.sp{display: none !important}
@media (width <= 768px) {
.pc{display: none !important}
.sp{display: block !important}      
}


.txt-center{text-align: center}