@charset "utf-8";
/* app start campaign (2026.04.01-05.10)*/
:root {
  /*color*/
  --c-cmpApp-red: 205 0 15;
  --c-cmpApp-red-drk: 185 0 0;
  --c-cmpApp-blu: 0 130 250;
  --c-cmpApp-blu-light: 0 110 190;
  --c-cmpApp-pnk: 255 81 178;
  --c-cmpApp-pnk-light: 255 150 150;
  --c-cmpApp-pnk-drk: 200 55 120;
  --c-cmpApp-ylw: 255 220 0;
  --c-cmpApp-grn: 80 195 0;
  /*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";
}
/*font face*/
@font-face {
  font-family: "wf-tegaki";
  src: url("/assets/fonts/HuiFontP29.eot");/*For IE*/
  src: url("/assets/fonts/HuiFontP29.woff") format("woff"),/*For Modern browser*/
    url("/assets/fonts/HuiFontP29.ttf") format("truetype");/*For iOS Android*/
}
.wf-tegaki {
  font-family:"wf-tegaki";
  line-height: 1.3;
  letter-spacing: -0.05em;
}
body {
  font-feature-settings: "palt";
}
img {
  vertical-align: bottom;
}
small {
  font-weight: inherit;
}
section.campApp {
  max-width: 100%;
  padding: 0;
}
.app-download + p.campApp-text {
  width: fit-content;
  padding: 0.25em 3em;
  margin: 1em auto;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
  border-radius: 2em;
  text-align: center;
}
/*-------------------------------
 app campaign - header
---------------------------------*/
.campApp-header {
  background: 
    url("/cs/assets/image/app/campaign260401_appStart_header_bg.jpg?002") 50% 0 / auto no-repeat,
    linear-gradient(90deg, #fcd6e6 0%, #fcd6e6 100%)
    ;
  line-height: 1;
  text-align: center;
}
.campApp-cont {
  width: 100%;
  padding: calc(var(--rs) * 2) 2% calc(var(--rs) * 8);
  margin: 0  auto;
  background: 
    url(/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png) 0 0 repeat,
    linear-gradient(180deg, #fff5f8 0%, #dff9ff 100%),
    linear-gradient(180deg, #dff9ff 0%, #ffe5e5d1 100%)
    /*linear-gradient(88deg, #ffdce8 20%, #fbffc0 100%)*/
  ;
  font-family: var(--ff-YuGo);
  font-size: calc(var(--fs) * 0.6 + var(--rs) * 1.2);
}
/*-------------------------------
 app campaign - intro
---------------------------------*/
.campAppIntro {
  width: min(100%, 108rem);
  padding: 0;
  margin: 0 auto;
}
.campApp-title {
  padding: calc(var(--rs)* 2) 2% calc(var(--rs)* 2);
  margin-bottom: 1em;
  background: url("/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png") 0 0 repeat , rgb(var(--c-cmpApp-pnk-light) / 100%);
  border-radius: 5px;
  box-shadow: calc(var(--rs) * 1) calc(var(--rs) * 1.4) 2px calc(var(--rs) * -0.6) rgb(var(--c-cmpApp-grn) / 40%);
  color: #fff;
  font-size: calc(var(--fs) * 0.8 + var(--rs) * 2.0);
  font-weight: normal;
  text-align: center;
  text-shadow: 1px 1px 1px rgb(var(--c-cmpApp-pnk-drk) / 100%);
}
.campApp-catch,
.campApp-text,
.campApp-catchFtr {
  width: min(96%, 88rem);
  margin: 0 auto;
}
.campApp-catch {
  padding-left: 1em;
  margin: 1em auto 0.5em;
  color: rgb(var(--c-cmpApp-grn) / 100%);
  font-size: calc(var(--fs) * 1.0 + var(--rs) * 2.6);
  text-align: center;
  text-indent: -4em;
  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px#fff, 0 0 4px#fff;
  /*filter: drop-shadow(0 0 1px #ffff) drop-shadow(2px 2px 4px rgb(var(--c-cmpApp-grn) / 30%));*/
}
.campApp-catch b {
  display: block;
}
.campApp-catch b + b {
  margin-left: 1em;
  margin-right: 0;
  text-indent: 0;
}
.campApp-text {
  padding: 0 1%;
  margin: 1em auto;
  font-size: calc(var(--fs) * 1.0 + var(--rs) * 0.8);
  text-align: left;
}
.campApp-text b {
  margin: 0 1px;
  color: rgb(var(--c-cmpApp-pnk) / 100%);
  font-size: 112.5%;
  display: inline-block;
}
.campApp-catchFtr {
  color: rgb(var(--c-cmpApp-grn) / 100%);
  font-size: calc(var(--fs) * 1.4 + var(--rs) * 2);
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px#fff, 0 0 4px#fff;
  /*filter: drop-shadow(0 0 1px #ffff) drop-shadow(2px 2px 4px rgb(var(--c-cmpApp-grn) / 30%));*/
  display: block;
}
.campApp-catchFtr > b {
  color: rgb(var(--c-cmpApp-pnk) / 100%);
  display: block;
}
/*-------------------------------
 app campaign - period
---------------------------------*/
/*campaign period*/
.campApp-period {
  width: min(96%, 108rem);
  padding: 1em calc(var(--rs) * 1) 1px;
  margin: 2em auto;
  text-align: center;
  position: relative;
}
.campApp-period::before,
.campApp-period::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  order: 1;
}
.campApp-period::before {
  width: 102%;
  height: 94%;
  background: rgb(217 243 255 / 90%);
  left: -1%;
  top: 4%;
  transform: rotate(2.5deg);
}
.campApp-period::after {
  width: 102%;
  height: 102%;
  background-color: rgb(252 255 255 / 100%);
  background-image: linear-gradient( 0deg, transparent 0%, transparent 98%,  rgb(93 172 186 / 70%) 100%);
  background-size: 100% 1.8em;
  box-shadow: 1px 1px 4px rgb(50 50 50 / 30%), 0 0 calc(var(--rs) * 2.4) rgb(255 230 175 / 50%) inset;
  left: -1%;
  top: -1%;
  transform: rotate(-1.5deg);
  z-index: 0;
}
.campApp-period * {
  position: relative;
  z-index: 1;
}
.period-title {
  width: 100%;
  padding: 0 1%;
  color: #ff51b2;
  font-family: "wf-tegaki";
  font-size: calc(var(--fs) * 1.6 + var(--rs) * 2);
  text-align: center;
  position: relative;
  transform: rotate(-1deg);
}
.period-title {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5em;
}
.period-title::before,
.period-title::after {
  content: "";
  width: 10%;
  height: calc(var(--rs) * 0.4);
  background: #ff51b2;
  border-radius: 10px;
  margin: calc(var(--rs) * 0.6) 0 0;
  /*border-bottom: calc(var(--rs) * 0.6) solid rgb(var(--c-cmpApp-pnk) / 100%);*/
  filter: drop-shadow(2px 2px 0 rgb(255 255 255 / 100%));
  flex: 1 1 auto;
}
.period-date {
  margin-top: 0.5em;
  font-size: calc(var(--fs) * 1 + var(--rs) * 2);
  font-weight: bold;
}
/*campaign menu*/
.campApp-menu {
  width: 100%;
  margin: calc(var(--rs) * 2) auto;  
  font-family: var(--ff-YuGo);
  letter-spacing: 0.05em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.campApp-menu li {
  width: min(98%, 34rem);
  margin: 1em 1%;
  text-align: center;
  flex: 1 1 auto;
  /*filter: drop-shadow(3px 3px 2px rgb(0 0 0 / 30%));*/
}
.campApp-menu li > a {
  padding: 0.25em 0.5em 0.75em;
  border-radius: calc(var(--rs) * 1);
  box-shadow: -2px -2px 1px rgb(255 255 255 / 20%) inset;
  color: #fff;
  text-align: left;
  display: block;
}
.campApp-menu li > a:hover {
  text-decoration: none;
  filter: brightness(1.1);
}
.campApp-menu li.menu01 a {
  background: 
    linear-gradient(180deg, rgb(var(--c-cmpApp-grn) / 70%) 0%, rgb(var(--c-cmpApp-grn) / 80%) 100%),
    #fff
  ;
}
.campApp-menu li.menu02 a {
  background: 
    linear-gradient(180deg, rgb(var(--c-cmpApp-blu) / 70%) 0%, rgb(var(--c-cmpApp-blu) / 80%) 100%),
    #fff
  ;
}
.campApp-menu li.menu03 a {
  background: 
    linear-gradient(180deg, rgb(var(--c-cmpApp-pnk-drk) / 70%) 0%, rgb(var(--c-cmpApp-pnk-drk) / 80%) 100%),
    #fff
  ;
}
.camp-no {
  padding: 0 1em;
  background: rgb(255 255 255 / 90%);
  border-radius: 1em;
  box-shadow: 1px 1px 2px rgb(0 0 0 / 20%) inset;
  color: #555;
  line-height: 1;
  font-weight: bold;
}
.campApp-menu li.menu01 .camp-no {
  color: rgb(var(--c-cmpApp-grn) / 100%);
}
.campApp-menu li.menu02 .camp-no {
  color: rgb(var(--c-cmpApp-blu) / 100%);
}
.campApp-menu li.menu03 .camp-no {
  color: rgb(var(--c-cmpApp-pnk) / 100%) ;
}
.camp-name {
  margin: 0 auto;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 1px rgb(0 0 0 / 20%);
  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: block;
}
.camp-name i {
  margin-left: 0.25em;
  margin-right: -1.5em;
}
/*-------------------------------
 app campaign - outline
---------------------------------*/
.campApp-outline-wrap {
  width: min(98%, 108rem);
  padding: calc(var(--rs) * 2);
  margin: calc(var(--fs) * 8) 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;
  position: relative;
}
.campApp-outline-wrap hr {
  width: 100%;
  max-width: 100%;
  border-color: #ddd;
}
.campApp-camp-no {
  width: fit-content;
  padding: 0.25em 1.25em 0 1em;
  background: #aaa;
  color: #fff;
  border-radius: 0 4em 0 0;
  font-size: calc(var(--fs) * 1.8);
  position: absolute;
  left: -6px;
  top: calc(0px - 1.65em - 7px);
}
@media screen and (max-width: 767px) {
  .campApp-camp-no {
    left: -7px;
  }
}
.campApp-campTitle {
  padding: calc(var(--rs) * 1);
  background: 
    url("/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png") 0 0 repeat
    ;
  color: #fff;
  font-size: calc(var(--fs) * 0.6 + var(--rs) * 2.4);
  line-height: 1.4;  
  text-align: center;
  text-shadow: 2px 2px 2px rgb(0 0 0 / 50%);
  position: relative;
}
.outline-camp03 .campApp-campTitle {
  padding: calc(var(--rs) * 1) calc(var(--rs) * 7);
}
.campApp-campTitle > * {
  margin: 0 0.2em;
  font-weight: bold;
  display: inline-block;
}
.campApp-campTitle > .logo-members {
  width: calc(var(--rs) * 8);
  position: absolute;
  right: calc(var(--fs) * -2.2);
  top: calc(var(--fs) * -1);
}
.campApp-campCatch {
  padding: 0;
  margin: 0.75em auto 0.5em;
  font-family:"wf-tegaki";
  font-size: calc(var(--fs) * 1.4 + var(--rs) * 1.0);
  font-style: italic;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: -0.1em;
  text-align: left;
  transform: rotate(-1deg);

  /*filter: drop-shadow(3px 3px 0px rgb(50 50 50 / 20%));*/
}
.campApp-campCatch > b {
  padding: 0 2px;
  margin-bottom: 0.5em;
  font-size: 112.5%;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: calc(var(--fs) * 0.2);
  text-underline-offset: calc(var(--rs) * 0.8);
  display: block;
}
.campApp-campText {
  padding: 0;
  margin: 1em auto;
  font-size: calc(var(--fs) * 0.8 + var(--rs) * 1.0);
  font-weight: bold;
  line-height: 1.8;
}
.campApp-campText span {
  padding: 0 calc(var(--rs) * 0.4);
  color: rgb(var(--c-cmpApp-red) / 100%);
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 3px;
  text-decoration-color: rgb(var(--c-cmpApp-red) / 100%);
  position: relative;
}
.campApp-campText b {
  font-size: 150%;
}
/*campaign outline*/
.campApp-outline {
  margin-top: calc(var(--rs) * 4);
}
.campApp-outline dt {
  width: 100%;
  padding: 0.5em 0.5em 0.5em;
  margin-bottom: 1em;
  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 rgb(0 0 0 / 80%);
}
.campApp-outline dt::before {
  content: "\0025cf";
  margin-right: 0.25em;
  font-size: 75%;
  position: relative;
  margin-top: -12.5%;
}
.campApp-outline dd {
  padding: 0 2%;
  margin: 0.5em;
  font-size: calc(var(--fs) * 1.6);
  font-weight: normal;
}
.campApp-outline dd b {
  font-size: calc(var(--fs) * 1.7);
}
.campApp-outline dd b small {
  font-weight: bold;
}
.campApp-schedule li {
  margin: 0.5em 0;
}
.campApp-schedule span {
  padding: 0.15em 0.5em;
  margin-right: calc(var(--fs)* 1);
  background: rgb(var(--c-cmpApp-red) / 100%);
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  position: relative;
  top: -2px;
}
.camp-point {
  color: rgb(var(--c-cmpApp-pnk) / 100%);
}
/*campaign app down load*/
.campApp-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: rgb(var(--c-cmpApp-grn) / 100%);
  outline-color: rgb(var(--c-cmpApp-grn) / 100%);
}
.outline-camp01 .campApp-camp-no,
.outline-camp01 .campApp-campTitle,
.outline-camp01 .campApp-outline dt {
  background-color: rgb(var(--c-cmpApp-grn) / 100%);
}
.outline-camp01 .campApp-campCatch,
.outline-camp01 .app-download-title {
  color: rgb(var(--c-cmpApp-grn) / 100%);
}
.outline-camp02 {
  border-color: rgb(var(--c-cmpApp-blu) / 100%);
  outline-color: rgb(var(--c-cmpApp-blu) / 100%);
}
.outline-camp02 .campApp-camp-no,
.outline-camp02 .campApp-campTitle,
.outline-camp02 .campApp-outline dt {
  background-color: rgb(var(--c-cmpApp-blu) / 100%);
}
.outline-camp02 .campApp-campCatch,
.outline-camp02 .app-download-title {
  color: rgb(var(--c-cmpApp-blu) / 100%);
}
.outline-camp03 {
  border-color: rgb(var(--c-cmpApp-pnk-drk) / 100%);
  outline-color: rgb(var(--c-cmpApp-pnk-drk) / 100%);
}
.outline-camp03 .campApp-camp-no,
.outline-camp03 .campApp-campTitle,
.outline-camp03 .campApp-outline dt {
  background-color: rgb(var(--c-cmpApp-pnk-drk) / 100%);
}
.outline-camp03 .campApp-campCatch,
.outline-camp03 .app-download-title {
  color: rgb(var(--c-cmpApp-pnk-drk) / 100%);
}
/*lottery*/
.outline-lottery {
  display: flex;
  flex-flow: row wrap;
}
.outline-lottery dt {
  width: 100%;
}
.outline-lottery dd {
  width: min(98%, 34rem);
  padding: 0;
  margin: 1em 1%;
  background: rgb(255 255 255 / 50%);
  border: 1px solid rgb(0 0 0 / 20%);  
  flex: 1 1 auto;
}
.outline-lottery dd:last-of-type {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.25em;
}
.outline-lottery dd:last-of-type .lottery-prizeImg {
  width: min(45%, calc(var(--fs) * 15));
}
.lottery-text {
  padding: 0.5em calc(var(--fs) * 1);
}
.lottery-text > b {
  margin-bottom: 0.5em;
  color: rgb(var(--c-cmpApp-pnk-drk) / 100%);
  display: inline-block;
}
.lottery-text > em {
  margin: 0 0.25em;
  font-weight: bold;
  display: inline-block;
}
/*lottery prize list*/
.lottery-list {
  padding: 0.25em 0.5em;
  padding-left: 1.75em;
  margin: 0 1%;
  font-size: calc(var(--fs) * 1.5);
  list-style: disc;
}
.lottery-list li {
  margin: 0.5em 0;
  line-height: 1.3;
}
/*outline in list*/
.campApp-list {
  padding-left: 0.5em;
  margin: 0.5em auto 1em;
  list-style: disc;
}
.campApp-list li {
  margin: 0.5em 1em;
  color: #333;
  font-size: calc(var(--fs) * 1.6);

}
/*-------------------------------
 app campaign - elements
---------------------------------*/
.campApp-outline-wrap > .campNotice {
  width: 98%;
}
.campNotice {
  padding-left: 1em;
  margin: 0.5em auto 0;
  color: #000;
  font-size: calc(var(--fs)* 1.3);
  line-height: 1.5;
  text-indent: -1em;
}
.campNotice li + li {
  margin-top: 0.25em;
}
.campNotice li a {
  color:var(--color-link-nml);
  font-weight: bold;
  text-decoration: underline;
}
.campNotice li a:hover {
  color: var(--color-link-nml-hover);
}
/*Notification Settings*/
.app-noticePR {
  margin: calc(var(--rs)* 4) auto 0;
  color: rgb(var(--c-cmpApp-red-drk) / 100%);
  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: rgb(var(--c-cmpApp-red-drk) / 100%);
  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);
}
/*-------------------------------
 app notice area
---------------------------------*/
.campApp-appNotice {
  width: min(100%, 88rem);
  padding: 1em;
  padding-left: 1.5em;
  margin: 0 auto;
  background: #ffe4e8; /*normal*/
  /*background: rgb(var(--c-cmpApp-pnk) / 30%);*/
}
/*-------------------------------
 app privacy
---------------------------------*/
.campApp-privacy {
  width: 98%;
  padding: 0.5em 0.75em;
  margin: 1em auto;
  background: rgb(255 255 255 / 50%);
  border: 1px solid rgb(0 0 0 / 30%);
  font-size: calc(var(--fs) * 1.2);
}