@charset "utf-8";
/* app Entry Campaign (2025.10.01-10.31)*/
:root {
  /*color*/
  --c-cmpAppEnt-red: #ce000f;
  --c-cmpAppEnt-red-drk: #bb0000;
  --c-cmpAppEnt-blu: #003afd/*#006bbd*/;
  --c-cmpAppEnt-pnk: #c93776;
  --c-cmpAppEnt-ylw: #fedd01;
  /*font famly*/
  --ff-YuMc: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ff-YuGo: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  --ff-SwMc: 'Sawarabi Mincho', sans-serif;
  --ff-zenmaruG: "Zen Maru Gothic", "Noto Sans JP", "sans-serif";
}
body {
  font-feature-settings: "palt";
}
img {
  vertical-align: bottom;
}
small {
  font-weight: inherit;
}
section.campAppEntry {
  max-width: 100%;
  padding: 0;
}
/*-------------------------------
 app entry - campaign header
---------------------------------*/
.campAppEntry-header {
  background: 
    url("/cs/assets/image/app/campaign251001_appEntry_header_bg.jpg") 50% 0 / auto no-repeat,
    url("/cs/assets/image/app/campaign251001_appEntry_header_bg-ptn.jpg") 50% 0 / auto repeat-x,
    linear-gradient(180deg, #cd261d 0%, #f45053 100%)
    ;
  line-height: 1;
  text-align: center;
}
.campAppEntry-cont {
  width: min(100%, 96rem);
  padding: 0 2% calc(var(--rs) * 8);
  margin: 0  auto;
  /*font-family: "Zen Maru Gothic", "Noto Sans JP","sans-serif";*/
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: calc(var(--fs) * 1.8);
}
/*-------------------------------
 app entry - campaign intro
---------------------------------*/
.campAppEntry-title {
  padding: calc(var(--rs)* 2.5) 2% calc(var(--rs)* 2);
  background: url("/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png") 0 0 repeat , var(--c-cmpAppEnt-red-drk);
  border: 3px solid #fff;
  border-radius: calc(var(--fs)* 1);
  /*box-shadow: calc(var(--rs) * 1.2) calc(var(--rs) * 1.2) 0 calc(var(--rs) * -0.6) #ccc;*/
  color: #fff;
  font-size: calc(var(--fs) * 0.8 + var(--rs) * 2.0);
  text-align: center;
  text-shadow: 1px 1px 1px #000;
}
/*catch area*/
.campAppEntry-cathArea {
  width: 100%;
  padding: 1.5em calc(var(--rs)* 1) calc(var(--rs) * 12);
  margin: 0 0 calc(var(--rs) * -13);
  background: 
    linear-gradient(0deg, #fff 0%, transparent 30%),
    url("/cs/assets/image/app/campaign240301_1stanniv_bg.jpg") 50% 50% / cover no-repeat
    /*url("/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png") 0 0 repeat , */
    /*linear-gradient(0deg, #f8bb2e 0%, #f9e5b2 100%)*/
    /*#ff464a*//*var(--c-cmpAppEnt-red-drk)*/
    ;
  border-top: 5px solid #303030;
}
.campAppEntry-catch {
  color: #000;
  font-size: calc(var(--fs)* 1.0 + var(--rs)* 1.4);
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 0px rgb(255 255 255 / 60%);
}
.campAppEntry-catch em {
  font-size: 125%;
  display: block;
}
.campAppEntry-catch b {
  color: var(--c-cmpAppEnt-red-drk);
  font-size: 150%;
  display: block;
}
.campAppEntry-catch :is(em, b) {
  margin-bottom: -0.5em;
}
.campAppEntry-text {
  width: min(100%, 88rem);
  padding: 0 0.5em;
  margin: 1em auto;
  font-size: calc(var(--fs) * 1.4 + var(--rs) * 0.4);
}
.campAppEntry-text b {
  color: var(--c-cmpAppEnt-red);
  font-size: 125%;
}
/*campaign period*/
.campAppEntry-period {
  width: min(90%, 64rem);
  padding: 1%;
  margin: calc(var(--rs) * 2) auto;
  background: #fff;
  margin: 1% auto;
  text-align: center;
  padding: 1em calc(var(--rs) * 1) 0.75em;
  background: var(--c-cmpAppEnt-blu);
  border-radius: calc(var(--rs) * 1);
  color: #fff;
  display: block;
}
.camp-name {
  font-weight: bold;
  display: block;
}
.camp-name b {
  margin: 0.25em 0.25em 0;
  font-size: calc(var(--fs) * 1.8 + var(--fs) * 0.4);
  display: inline-block;
}
.camp-name em {
  display: inline-block;
}
.camp-name i {
  margin-left: 0.25em;
  margin-right: -1.5em;
}
.camp-period {
  /*width: min(100%, 34rem);*/
  width: 94%;
  padding: 0.25em;
  margin: 0.5em auto 0;
  background: #fff;
  border-radius: calc(var(--rs) * 1);
  line-height: 1.2;
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  letter-spacing: 0.05em;
  display: block;
}
li.menu01 .camp-period {
  color: var(--c-cmpAppEnt-blu);
}
li.menu02 .camp-period {
  color: var(--c-cmpAppEnt-pnk);
}
/*-------------------------------
 app entry - outline
---------------------------------*/
.campAppEntry-outline-wrap {
  width: min(98%, 86rem);
  padding: calc(var(--rs) * 2);
  margin: calc(var(--rs) * 4) auto calc(var(--fs) * 6);
  background: #fffef8;
  border: double 4px #ccc;
  box-shadow: calc(var(--fs) * 1) calc(var(--fs) * 1) 0 calc(var(--rs) * 0) #ccc;
  outline: 3px solid #ccc;
}
.campAppEntry-campTitle {
  padding: calc(var(--rs) * 1);
  background: 
    url("/cs/assets/image/app/ic_point-present.png") 99% 100% / calc(var(--rs) * 7) no-repeat,
    url("/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png") 0 0 repeat
    ;
  color: #fff;
  font-size: calc(var(--fs) * 1.4 + var(--rs) * 1.6);
  line-height: 1.3;
  text-align: center;
}
.campAppEntry-campTitle > * {
  margin: 0 0.2em;
  font-weight: bold;
  display: inline-block;
}
.campAppEntry-campText {
  padding: 0 2%;
  margin: 1.5em auto;
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
}
.campAppEntry-campText span {
  padding: 0 calc(var(--rs) * 0.4);
  color: var(--c-cmpAppEnt-red);
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--c-cmpAppEnt-red);
  position: relative;
}
.campAppEntry-campText b {
  font-size: 150%;

}
.campAppEntry-outline {
  margin-top: calc(var(--rs) * 4);
}
.campAppEntry-outline dt {
  width: min(100%, 40rem);
  padding: 0.5em 0.5em 0.5em;
  background: url("/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png") 0 0 repeat;
  border-radius: calc(var(--fs)* 1);
  color: #fff;
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  line-height: 1;
  text-shadow: 1px 1px 1px #000;
}
.campAppEntry-outline dt::before {
  content: "\0025cf";
  margin-right: 0.25em;
}
.campAppEntry-outline dd {
  padding-left: 0.25em;
  margin: 1em 0.5em 1.5em;
  font-size: calc(var(--fs) * 1.8) ;
  font-weight: bold;
}
.campAppEntry-outline dd b {
  font-size: 125%;
}
.campAppEntry-outline dd small {
  font-weight: bold;
}
.campAppEntry-schedule li {
  margin: 0.5em 0;
}
.campAppEntry-schedule span {
  padding: 0.15em 0.5em;
  margin-right: calc(var(--fs)* 1);
  background: var(--c-cmpAppEnt-red);
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  position: relative;
  top: -2px;
}
/*campaign app down load*/
.campAppEntry-outline-wrap .app-download {
  background: #fff;
  box-shadow: 1px 1px 4px rgb(50 50 50 / 50%) inset;
  width: 100%;
  padding: 1em;
  border-radius: calc(var(--rs)* 1);
  margin-top: calc(var(--fs)* 2);
}
/*cmapaign color change*/
.outline-camp01 {
  border-color: var(--c-cmpAppEnt-red);
  outline-color: var(--c-cmpAppEnt-red);
}
.outline-camp01 .campAppEntry-campTitle {
  background-color: var(--c-cmpAppEnt-red);
}
.outline-camp01 .campAppEntry-outline dt {
  background-color: var(--c-cmpAppEnt-red);
}
.outline-camp01 .app-download-title {
  color: var(--c-cmpAppEnt-red);
}
/*-------------------------------
 app entry - elements
---------------------------------*/
.campNotice {
  padding-left: 1em;
  margin-top: 0.5em;
  color: #333;
  font-size: calc(var(--fs)* 1.4);
  line-height: 1.5;
  text-indent: -1em;
}
.campNotice li + li {
  margin-top: 0.5em;
}
.campNotice li a {
  color:var(--color-link-nml);
  font-weight: bold;
  text-decoration: underline;
}
.campNotice li a:hover {
  color: var(--color-link-nml-hover);
}
.campAppEntry-appNotice {
  padding: 1em;
  padding-left: 1.5em;
  background: #ffe4e8;
}
/*Notification Settings*/
.app-noticePR {
  margin: calc(var(--rs)* 4) auto 0;
  color: var(--c-cmpAppEnt-red-drk);
  font-size: calc(var(--fs)* 1.6 + var(--rs)* 2);
  letter-spacing: -0.05em;
  text-align: center;
}
.app-noticePR > b {
  font-size: 125%;
  display: inline-block;
  position: relative;
}
.app-noticePR > b::before,
.app-noticePR > b::after {
  content: "";
  width: 3px;
  height: 1em;
  background: var(--c-cmpAppEnt-red-drk);
  border-radius: 3px;
  position: absolute;
  bottom: 0.1em;
}
.app-noticePR > b::before {
  left: -0.7em;
  transform: rotate(-30deg);
}
.app-noticePR > b::after {
  right: -0.5em;
  transform: rotate(30deg);
}