@charset "UTF-8";
/*-------------------------------------------------------------------------
  ページ内リンクボタン
/*-----------------------------------------------------------------------*/
.button-container {
  display: flex;
  width: 100%;
  flex-wrap: nowrap; /* 折り返し禁止 */
}
.link-button {
  flex: 1; /* 均等幅 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #7a509d, #5274b8);
  color: #fff;
  text-decoration: none;
  border-right: 4px solid #ffffff;
  word-break: break-word; /* 長いテキストを折り返し */
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  transition: .5s;
}
.link-button .text {
 font-weight: bold;
 }
.link-button:last-child {
  border-right: none;
}
.link-button:hover {
  background: linear-gradient(90deg, #6a448a, #4666a3);
  color: #fff462;
}
.link-button .icon {
  transform: rotate(-45deg);
}
.link-button:last-child {
  background: linear-gradient(90deg, #0095bd, #0fafb1); /* 右側のボタン */
  border-right: none;
}
/* PC用 */
@media (min-width: 768px) {
  .link-button {
   font-size:22px;
    padding: 12px;
  }
  .link-button .text {
    font-size: 22px;
  }
  .link-button .icon {
    width: 10px;
    height: 10px;
    margin-top: 6px auto 5px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
  }
}
/* SP用 */
@media (max-width: 767px) {
  .link-button {
    font-size: 15px;
    padding: 7px;
  }
  .link-button .text {
    font-size: 15px;
  }
  .link-button .icon {
    width: 7px;
    height: 7px;
    margin: 4px auto 3px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
}
/*-------------------------------------------------------------------------
  改行
/*-----------------------------------------------------------------------*/
@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
  .br-pc {
    display: block;
  }
}
@media (max-width: 767px) {
  .br-sp {
    display: block;
  }
  .br-pc {
    display: none;
  }
}
/*-------------------------------------------------------------------------
  横並び①
/*-----------------------------------------------------------------------*/
@media (min-width: 768px) {
  .items {
    display: flex;
    justify-content: center;
  }
  .item {
    vertical-align: center;
    margin: auto;
    text-align: center;
    padding:0 8px;
  }
  .item-width40 {
    width:40%;
  }
  .item-width50 {
    width:50%;
  }
  .item-width60 {
    width:60%;
  }
}
/*-------------------------------------------------------------------------
  年間ランキング
/*-----------------------------------------------------------------------*/
@media (min-width: 768px) {
  .ranking2025-items {
    display: flex;
    justify-content: center;
  }
  .ranking2025-item {
    vertical-align: center;
    margin: auto;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .ranking2025-txt {
    font-size: 20px;
    font-weight: bold;
  }
  .ranking2025-img {
    max-width: 550px;
    margin-left: 10px;
  }
}
@media (max-width: 767px) {
  .ranking2025-txt {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
  }
  .ranking2025-img {
    margin: auto;
  }
}
/*-------------------------------------------------------------------------
  祭その1
/*-----------------------------------------------------------------------*/
.matsuri01 {
  background-image: url('/web/src/s/campaign/1436/img/matsuri1_bg.jpg');
  padding: 1.5em 1em 1em;
  border: solid 4px #cc4594;
  position: relative;
  top:45px;
}
.matsuri01-logo {
  position:absolute; top:-67px;
}

.matsuri01 p {
  color: #ffffff;
  font-weight: bold;
  margin: 1rem 0;
}
.matsuri01-h3 {
  background-image: linear-gradient(90deg, #c0579c, #cc4594, #e30581);
  color: #fff;
  font-weight: bold;
  position: relative;
  padding: 0.3em 0.5em;
  text-align: center;
}
@media (min-width: 768px) {
  .matsuri01 {
    border-radius: 16px;
  }
  .matsuri01-h3 {
    width: 300px;
    font-size: 1.75em;
  }
  .tips {
    display: block;
    background: #e9e8f2;
    padding: 10px 30px !important;
    margin: 2rem 2em;
    border-radius: 16px;
  }
}
@media (max-width: 767px) {
  .matsuri01 {
    border-radius: 8px;
  }
  .matsuri01-h3 {
    font-size: 18px;
  }
  .matsuri01-logo {
  right: 0;
  left:0;
  margin: 0 auto;
}
}
.tips {
  display: block;
  background: #e9e8f2;
  padding: 3px 1em;
  margin: 1rem 0.5em;
  border-radius: 8px;
}
.tips p {
  color: #383376;
}
/*-------------------------------------------------------------------------
  祭その2
/*-----------------------------------------------------------------------*/
.matsuri02 {
  margin-top: 8rem;
  background-image: url('/web/src/s/campaign/1436/img/matsuri2_bg.jpg');
  background-position: center;
  background-size: 100%;
  border: solid 4px #00a6c5;
  padding:  1.5em 1em 1em;
  border-radius: 8px;
  position: relative;
}

.matsuri02-logo {
  position:absolute; top:-68px;
}

.matsuri02 p {
  color: #000000;
  font-weight: bold;
  margin: 1rem 0;
}
.matsuri02-h3 {
  background-image: linear-gradient(90deg, #0f9bbc, #00aed2, #00c4ec);
  color: #ffffff;
  font-weight: bold;
  position: relative;
  padding: 0.3em 0.5em;
  text-align: center;
}
@media (min-width: 768px) {
  .matsuri02 {
    border-radius: 16px;
  }
  .matsuri02-h3 {
    width: 300px;
    font-size: 1.75em;
  }
}
@media (max-width: 767px) {
  .matsuri02 {
    border-radius: 8px;
  }
  .matsuri02-h3 {
    font-size: 20px;
  }
  .matsuri02-logo {
  right: 0;
  left:0;
  margin: 0 auto;
}
}

/*-------------------------------------------------------------------------
  グランプリ
/*-----------------------------------------------------------------------*/
.grandprix {
  margin-top: 0.5rem;
  border: solid 4px #e2c155;
  padding: 1em;
  border-radius: 8px;
  background: #ffffff;
}
.grandprix p {
  color: #000000;
  font-weight: bold;
  margin: 1rem 0;
}
@media (min-width: 768px) {
  .grandprix {
    border-radius: 16px;
  }
  .grandprix-h3 {
    width: 300px;
    font-size: 1.75em;
  }
}
@media (max-width: 767px) {
  .grandprix {
    border-radius: 8px;
  }
  .grandprix-h3 {
    font-size: 20px;
  }
}

.grandprix-hr {
  height: 4px;
  border: none;
  background: linear-gradient(to right, #ede8bb, #dec261, #b69138, #dec261, #ede8bb);
}
/*-------------------------------------------------------------------------
  角丸ボタン 黄色
/*-----------------------------------------------------------------------*/
.button01 {
  display: block;
  position: relative;
  background: #fff462;
/*  background-image: linear-gradient(90deg, #f8e52a, #fff462, #fff89b, #fff462, #f8e52a); */
  box-sizing: border-box;
  width: 100%;
  font-size: 1.2em;
  border-radius: 50px;
  color: #383376;
  border: solid 3px #e4007f;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: .1rem;
  transition: .5s;
}

.button01:after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px; 
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #e4007f;
}

@media (min-width: 768px) {
  .button01 {
  font-size: 20px;
  padding: 10px;
  }
}
@media (max-width: 767px) {
    .button01 {
    font-size:14px;
  padding: 8px 0;
  }
}

/*-------------------------------------------------------------------------
  角丸ボタン 金色
/*-----------------------------------------------------------------------*/
.button02 {
  display: block;
  position: relative;
  background-image: linear-gradient(90deg, #d8af13, #f7d547, #f8da5d, #f7d547, #d8af13);
  box-sizing: border-box;
  width: 100%;
  padding: 1em;
  border-radius: 50px;
  color: #383376;
  border: solid 3px #383376;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  transition: .5s;
  margin: 10px 0;
}
.button02:before {
  content: "";
  position: absolute;
  top: 42%;
  right: 12px;
  width: 12px;
  height: 2px;
  background: #383376;
  transform: rotate(45deg);
}
.button02 span {
  font-weight: bold;
}
.button02:after {
  content: "";
  position: absolute;
  top: 57%;
  right: 12px;
  width: 12px;
  height: 2px;
  background: #383376;
  transform: rotate(-45deg);
}

@media (min-width: 768px) {
  .button02 {
  font-size: 18px;
  padding: 10px;
  }
}
@media (max-width: 767px) {
    .button02 {
    font-size:13px;
  padding: 8px 0;
  }
}

/*-------------------------------------------------------------------------
  STEPボタン
/*-----------------------------------------------------------------------*/

.naviapp-step-btn {
  position: relative;
}

.naviapp-step-btn:after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px; 
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #ffffff;
}

/*-------------------------------------------------------------------------
  TIPS リボン
/*-----------------------------------------------------------------------*/
@media (min-width: 768px) {
  .ribbon {
    display: inline-block;
    position: relative;
    padding: 20px 45px;
    font-size: 22px;
    font-weight: bold;
    color: #383376; /*フォントカラー*/
    background: #fff462; /*リボンの色*/
  }
  .ribbon:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 35px rgb(181, 157, 51); /*折り返し部分*/
  }
  .f-ribbon {
    float: left;
    margin: 23px 35px 0 0;
  }
}
@media (max-width: 767px) {
  .ribbon {
    display: inline-block;
    position: relative;
    padding: 5px 35px;
    font-size: 17px;
    font-weight: bold;
    color: #383376; /*フォントカラー*/
    background: #fff462; /*リボンの色*/
  }
  .ribbon:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 5px transparent;
    border-right: solid 30px rgb(181, 157, 51); /*折り返し部分*/
  }
  .f-ribbon {
    text-align: center;
    margin: 10px 0 5px;
  }
}
/*-------------------------------------------------------------------------
  採点イベントDX
/*-----------------------------------------------------------------------*/
@media (min-width: 768px) {
  .f-saiten {
    float: left;
    padding:0 15px 0 5px;
  }
}
@media (max-width: 767px) {
  .f-saiten {
    text-align: center;
    margin: 5px auto 0;
  }
}
/*-------------------------------------------------------------------------
  余白・配置
/*-----------------------------------------------------------------------*/
.alignC {
  text-align: center!important;
}
.alignL {
  text-align: left!important;
}
.mt8 {
  margin-top: 8px;
}
.mt16 {
  margin-top: 16px;
}
.mt24 {
  margin-top: 24px;
}
.mt32 {
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
  .step-center {
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media screen and (max-width: 768px) {
  .step-center {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}