@charset "UTF-8";

* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  box-sizing: border-box;
}

body.__active {
  overflow: hidden !important;
}

#daishukakusai2023 h1,
#daishukakusai2023 h2,
#daishukakusai2023 h3,
#daishukakusai2023 h4 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  margin: 0;
  font-weight: bold;
}

#daishukakusai2023 span {
  line-height: 1;
}

#daishukakusai2023 a {
  cursor: pointer;
  text-decoration: none;
}

#daishukakusai2023 img {
  vertical-align: middle;
  width: 100%;
}
#daishukakusai2023 .pc {
  display: block !important;
}
#daishukakusai2023 .sp {
  display: none !important;
}

/* attention */
#daishukakusai2023 .attention_box {
  font-family: YuGothic,"Yu Gothic Medium","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-weight: 200;
  font-size: 12px;
  line-height: 1.5;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  color: #000;
  background-color: #fff;
  padding: 1vw;
}
#daishukakusai2023 .attention_box a {
  color: #000;
  text-decoration: underline;
}
@media screen and (max-width:1000px) {
  #daishukakusai2023 .attention_box {
    padding: 20px 2vw;
  }
  #daishukakusai2023 .attention_box p {
    width: fit-content;
    margin: 0 auto;
  }
}

/* MV */
.mv {
  position: relative;
  z-index: 20;
}

.mv_slider {
  overflow-x: hidden;
  pointer-events:none
}

.snsBtn {
  display: flex;
  column-gap: 2%;
  position: absolute;
  top: 1.5vw;
  right: 5vw;
  z-index: 20;
}

.sharebtn {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.3vw;
  width: 10vw;
  border: 2px #fff solid;
  padding: 1%;
  transition: .3s;
}
.sharebtn div {
  width: 15.5% !important;
}
.sharebtn p {
  color: #fff;
  font-size: 12px;
  margin-top: 2px;
}
.w5 {
  width: 5% !important;
  margin-right: 5px;
}
.w3 {
  width: 3.3% !important;
  margin-right: 5px;
}

.twshare {
  background-color: #1c9bf0;
  border-radius: 50px;
}
.twshare:hover {
  background-color: #187ec3;
}

.mv_ttl {
  position: absolute;
  width: 45%;
  left: 6%;
  top: 8%;
  -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
  animation: bounce 3s ease-in-out forwards;
  animation-iteration-count: infinite;
}

.mv_logo {
  position: absolute;
  width: 17%;
  right: 3%;
  top: 23%;
}

.mv_present {
  position: absolute;
  width: 45%;
  bottom: 16%;
  left: 6%;
}

@keyframes bounce {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
}

.pc_menu {
  z-index: 20;
  position: absolute;
  top: 52.3vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 2% 15.8% 0;
  width: 100%;
}

.pc_menuList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0.9% 0.9% 0.9% 4.5%;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  border-radius: 50vw;
}

.pc_menuList li:nth-child(2),
.pc_menuList li:nth-child(4) {
  width: 0.4%;
  height: 5.4%;
}

.pc_menuList li:nth-child(6) {
  width: 22%;
}
.pc_menuList li:nth-child(7) {
  width: 23%;
}

.pc_menuList a {
  color: #000;
  position: relative;
  font-size: 1.5vw;
  font-weight: 500;
}

.menuarrow {
  width: 24.8% !important;
  position: absolute;
  bottom: -120%;
  left: 50%;
  transform: translateX(-50%);
}

.pc_menuList li:nth-child(5) .menuarrow {
  width: 16.5% !important;
}

.pc_menuList li:nth-child(1),
.pc_menuList li:nth-child(3),
.pc_menuList li:nth-child(5) {
  margin-bottom: 0.8%;
}


.pc_menuList li:nth-child(6) a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e00016;
  color: #fbff00;
  padding: 4% 12%;
  border-radius: 50vw;
  line-height: 1.3;
  font-size: 1.28vw;
  font-weight: bold;
}

.pc_menuList li:nth-child(7) a {
  display: flex;
  justify-content: space-between;
  background-color: #fbff00;
  color: #e00016;
  padding: 4% 12%;
  border-radius: 50vw;
  line-height: 1.3;
  font-size: 1.28vw;
  font-weight: bold;
}

.pc_menuList li:nth-child(7) div {
  display: flex;
  flex-direction: column;
  width: 39.6%;
  justify-content: center;
}

.pc_menuList li:nth-child(6) .menuImg {
  width: 23% !important;
}

.pc_menuList li:nth-child(7) .menuImg {
  width: 25% !important;
}

.sr-only {
  border: 0!important;
  clip: rect(0,0,0,0)!important;
  height: 1px!important;
  margin: -1px!important;
  overflow: hidden!important;
  padding: 0!important;
  position: absolute!important;
  white-space: nowrap!important;
  width: 1px!important;
}

/* sec01 */
.sec01 {
  background-image: url(../img/sec01_garland.png), url(../img/pc_sec01_bg.jpg);
  background-repeat: no-repeat, no-repeat;
  background-size: 100%, cover;
  background-position: top 36.7vw center, top center;
  padding: 5% 11.8% 49vw;
  position: relative;
  margin-top: -9%;
  z-index: 2;
}

/* カウンター */
.count {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.counter_text {
  position: absolute;
  width: fit-content;
  top: 61%;
  left: 14%;
  transform: translateY(-50%);
  color: #e00016;
  font-size: 11vw;
  font-weight: bold;
  line-height: 1;
}
.counter_text .day_text {
  font-size: 8vw;
}

/* PR */
.pr {
  padding: 0 4%;
  margin-top: 4.6%;
  position: relative;
}

.pr_text {
  position: absolute;
  top: 28%;
  left: 32.5%;
  font-weight: bold;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 61%;
}

.pr_text p {
  color: #fff;
  font-size: 1.5vw;
  line-height: 1.5;
  letter-spacing: 0.7px;
  text-align: left;
  width: 100%;
}

.pr_text span{
  color: #fbff00;
}
.bgyellow {
  background-color: #fbff00;
  color: #e00016!important;
  padding: 0.5% 1%;
  margin: 1%;
  border-radius: 6px;
  line-height: 2 !important;
}

.pr_text p:last-of-type {
  margin-top: 2%;
  font-weight: 600;
  font-size: 1.2vw;
}

.pr_text a {
  width: 90%;
  font-size: 1.25vw;
  padding: 3% 0;
  background-color: #fff;
  color: #e00016;
  border-radius: 50px;
  margin-top: 2.1%;
  margin-left: 3%;
  position: relative;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.pr_text a::before {
  /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 2vw;
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
  background: #e00016;
}

.pr_text a::after {
  /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 2.5vw;
  width: 0.4vw;
  height: 0.4vw;
  border-top: 2px solid #fbff00;
  border-right: 2px solid #fbff00;
  transform: rotate(45deg);
}
.sec01_50th {
  width: 92%;
  margin: 7% auto 0;
  padding-right: 4%;
}
.sec01_text {
  width: 90%;
  margin: 4.9% auto 0;
  color: #fff;
  line-height: 1.3;
}
.sec01_text p {
  margin-top: 3.5%;
  font-size: 1.3vw;
}

/* 景品紹介 */
.present_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4.5%;
  position: relative;
}

.present_item01,
.present_item02 {
  width: 50% !important;
  position: relative;
}

.item_text01 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-52%);
  width: 79%;
}

.item_text02 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-42%);
  width: 79%;
}

.item_text02 span {
  color: #e70012;
  font-weight: bold;
  font-size: 1.38vw;
  line-height: 1.2 !important;
}

.present_item01 p {
  font-size: 1vw;
  color: #fff;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  width: 30%;
  position: absolute;
  bottom: 4.9%;
  left: 28%;
}
.present_item02 p {
  font-size: 1.2vw;
  color: #fff;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  width: 70%;
  position: absolute;
  bottom: 39.2%;
  line-height: 1.5;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.present_item p span {
  font-size: 0.8vw;
  color: #3f0000;
}

.present_itemIcon {
  width: 5% !important;
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translateX(-50%);
}
.sec01_item_text {
  position: relative;
}
.sec01_item_text p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 65%;
  transform: translateY(-50%);
  color: #3f0000;
  font-weight: 600;
  font-size: 1.5vw;
  line-height: 1.8;
}

/* フェードイン */
.pc_sec01fadein {
  position: absolute;
  top: 59vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100% !important;
  z-index: 1;
}
.pc_sec02fadein {
  position: absolute;
  bottom: 5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100% !important;
}

.fadeIn {
  opacity: 0;
}
.fadeIn.__active {
  opacity: 1;
  animation: fadeIn .8s;
}

@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translate(-50%,100px);
      }
  100% {
      opacity: 1;
      transform: translate(-50%,0px);
      }
}

.news_text_box {
  position: absolute;
  width: 43%;
  bottom: 40%;
  left: 33.9%;
}
.news_text_box .large_text {
  font-size: 1.55vw;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 3%;
  color: #3f0000;
}
.news_text_box .large_text span {
  letter-spacing: -0.5vw;
}
.news_text_box .small_text {
  color: #3f0000;
  font-size: 1.1vw;
  font-weight: 600;
}


/* sec02 */
.sec02 {
  padding: 13% 11.8% 7% 11.8%;
  position: relative;
  top: -1vw;
  z-index: 10;
  background-image: url(../img/sec02_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
  background-color: #e00016;
  border-radius: 50px;
  margin-top: -10%;
}
.sec02::after {
  display: none;
}

.present_detailTitle{
  color: #fff;
  line-height: 1.2;
  font-size: 2.7vw;
  width: 42.7%;
  margin-top: 4%;
}

.present_detailTitle span {
  font-size: 2vw;
}

.present_detailBody {
  position: relative;
  margin-top: 5%;
  margin-bottom: 8%;
}

/* ポイントスライダー */
.point_slider {
  width: 51.4%;
  position: relative;
}

/* 矢印 */
.slider-arrow {
  width: 10.7% !important;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

.arrow-prev {
  top: 40%;
  left: -4%;
}

.arrow-next {
  top: 40%;
  right: -4%;
}

/* ドット */
.slick-dots {
  position: static;
  margin-top: 3.6%;
}

.slick-dots li button:before {
  font-size: 15px;
  opacity: 0.8;
  color: #fff;
}

.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #fbff00;
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

/* 画像スライダー */
.imgslide {
  position: absolute;
  right: 0px;
  top: -60%;
  z-index: -1;
  width: 60.2%;
  margin-top: 4%;
  pointer-events: none;
}

.imgslide p {
  position: absolute;
  bottom: 3vw;
  right: 8vw;
  font-size: 0.8vw;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1.5px;
}

.borderline {
  width: 100%;
  margin: 0 auto;
}
.addinfo {
  position: relative;
  display: flex;
  align-items: center;
  /* margin-top: 3.5%; */
  width: 90%;
  margin-left: auto;
  margin-right: 0;
  justify-content: end;
  }
.addinfo .omake {
  position: absolute;
  width: 19.4%;
  z-index: 2;
  top: 3%;
  left: -11%;
}

.addinfo_img {
  padding-top: 4%;
  width: 29.3%;
  margin-left: -2%;
  margin-top: 5%;
}

.addinfo_text {
  padding: 4.5% 3%;
  background: url(../img/sec02_item01_bg.png) no-repeat center right/100% 100%;
  width: 72.7%;
  margin-top: 5%;
}

.addinfo_text p {
  font-size: 1.85vw;
  font-weight: bold;
  color: #3f0000;
  line-height: 1.5;
}
.addinfo_text:first-of-type p {
  top: 42%;
  left: 17%;
}

.addinfo_text span {
  font-size: 1.5vw;
}

/* バナー */
.banner {
  padding: 7.8% 25.2% 0 11.8%;
}


/* sec03 */
.sec03 {
  background-image: url("../img/pc_sec03_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 2% 11.8% 10%;
  position: relative;
  top: -4vw;
  z-index: 5;
}

.sec03_title {
  padding: 0 30%;
}
.sec03_img01 {
  position: relative;
  margin-top: 3%;
}
.sec03_img01 .note {
  position: absolute;
  width: 78%;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #fff;
  bottom: 6.5%;
  font-size: 1vw;
}
.sec03_img01 .note li {
  line-height: 1.2;
  margin-bottom: 1%;
}

.howto_detail {
  margin-top: 10%;
  color: #fff;
  position: relative;
}

.howto_detailHead {
  display: flex;
  justify-content: space-between;
}
.howto_lead{
  position: absolute;
  top: -5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 42.9vw;
}
.howto_spImg_reed {
  margin: 3% auto;
}

.howto_box {
  position: relative;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.howto_postcardImg .howto_box {
  aspect-ratio: 1920/870;
  background-image: url(../img/pc_howto_postcardImg.png);
}
.howto_postcardImg.howto_hutoImg .howto_box {
  aspect-ratio: 1938/984;
  background-image: url(../img/pc_howto_hutoImg.png);
}
.howto_spImg .howto_box {
  aspect-ratio: 960/374;
  background-image: url(../img/pc_howto_spImg.png);
}
.howto_spImg .oripake {
  width: 100%;
  margin-top: 4%;
  padding-right: 5%;
}
.howto_box ul li {
  position: absolute;
  display: flex;
  font-size: 1.5vw;
  width: 50%;
  line-height: 1.5;
  font-weight: 600;
}
.howto_pointtext p {
  margin-top: 1%;
  font-size: 1vw;
}
.howto_number {
  width: 20%;
  padding-right: 3%;
}
.howto_postcardImg .howto_box {
  margin-top: 5%;
}
.howto_postcardImg .howto_box ul li._01 {
  top: 0%;
  left: 0%;
  align-items: center;
}
.howto_postcardImg .howto_box ul li._02 {
  top: 0%;
  right: -3%;
}
.howto_postcardImg .howto_box ul li._03 {
  bottom: 14%;
  left: 0%;
  align-items: center;
}
.howto_postcardImg .howto_box ul li._04 {
  bottom: 14%;
  right: -3%;
  align-items: center;
}
.howto_box .rel_box {
  position: relative;
  width: 100%;
  display: flex;
}

.howto_postcardImg.howto_hutoImg .howto_box ul li._01 {
  top: 4%;
  left: 0%;
  align-items: center;
}
.howto_postcardImg.howto_hutoImg .howto_box ul li._02 {
  top: 4%;
  right: -3%;
}
.howto_postcardImg.howto_hutoImg .howto_box ul li._03 {
  bottom: 17%;
  left: 0%;
  align-items: center;
}
.howto_postcardImg.howto_hutoImg .howto_box ul li._04 {
  bottom: 11%;
  right: -3%;
  align-items: normal;
}

.howto_spImg .howto_box ul li._01 {
  top: 7%;
  left: 0%;
}
.howto_spImg .howto_box ul li._02 {
  top: 7%;
  right: -3%;
}
.howto_spImg .howto_box ul li._03 {
  bottom: 3%;
  left: 0%;
}
.howto_spImg .howto_box ul li._04 {
  bottom: -4%;
  right: -3%;
}


/***************************** 
はがき
*****************************/
/* はがき 非アクティブ */
.howto_postcardHead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  width: 31.5%;
  background-color: #fff;
  border-radius: 1vw;
  padding: 1.8% 0 1.1%;
  box-shadow: 5px 2px 15px 0px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.howto_postcardHead:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -3%;
  border: 1vw solid transparent;
  border-top: 1vw solid #fff;
}

.howto_postcardHead h3 {
  font-size: 1.7vw;
  font-weight: bold;
  color: #3f0000;
  width: 77.4%;
}

.howto_postcardHead span {
  font-size: 3.1vw;
  color: #e00016;
}

.howto_postcardHead div {
  width: 7.5%;
}

/* はがき アクティブ */
.howto_postcardHead.__active {
  background-color: #e00016;
}

.howto_postcardHead.__active:before {
  border-top: 1vw solid #e00016;
}

.howto_postcardHead.__active h3 {
  color: #fff;
}

.howto_postcardHead.__active span {
  color: #fbff00;
}

/* はがき内容 */
.howto_postcardBody {
  display: none;
  background-color: #e00016;
  border-radius: 1vw;
  padding: 60px 6.4% 60px;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.35);
  margin-top: 3.6%;
}

.howto_postcardBody.__active {
  display: block;
}

.howto_postcardImg {
  margin-top: 0;
  position: relative;
}
.howto_notetext {
  width: 104% !important;
  position: relative;
  left: 50%;
  transform: translateX(-52%);
  color: #3f0000;
  background: url(../img/pc_howto_notetext.png) no-repeat center/100% 100%;
  text-align: center;
  padding: 5%;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
.howto_text {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 1.7vw;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 2%;
}
.howto_notetext span {
  color: #e70110;
}
.howto_small {
  font-size: 1vw;
}
.modalBtn {
  position: absolute;
  width: 18.7vw;
  height: 3.5vw;
  cursor: pointer;
}
.howto_postcardImg .modalBtn {
  bottom: -20%;
  left: 18%;
}
.howto_hutoImg .modalBtn {
  bottom: -55%;
  left: 18%;
}

.howto_postcardImg a {
  pointer-events: none;
  background-color: #fff;
  color: #e00016;
  font-size: 1.25vw;
  font-weight: bold;
  border-radius: 50px;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 1.3vw;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}

.howto_postcardImg a::before {
  /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0.7vw;
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
  background: #e00016;
}

.howto_postcardImg a::after {
  /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 1.3vw;
  width: 0.4vw;
  height: 0.4vw;
  border-top: 2px solid #fbff00;
  border-right: 2px solid #fbff00;
  transform: rotate(45deg);
}

/* 応募はがきダウンロードボタン */
.downloadBtn a {
  background-color: #fff;
  color: #e00016;
  font-size: 2.2vw;
  font-weight: bold;
  border-radius: 1vw;
  padding: 1.4% 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2%;
  margin-top: 3%;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.35);
}

.downloadBtn img {
  width: 4% !important;
}

/* Calbee＋の応募方法 */
.calbeeplus {
  margin-top: 3.3%;
  background-color: #fff;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.35);
  padding: 0.6%;
  border-radius: 1vw;
}

.calbeeplusHead {
  color: #e00016;
  font-size: 1.6vw;
  font-weight: bold;
  padding: 1.4% 0 1.4% 2%;
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  column-gap: 1.5%;
  cursor: pointer;
}

.calbeeplusHead div:nth-child(1) {
  width: 16%;
}

.calbeeplusHead div:nth-child(2) {
  width: 12.3%;
}

/* アコーディオンボタン */
.calbeeplusHead .toggle_btn {
  position: absolute;
  top: 50%;
  right: 1vw;
  transform: translateY(-50%);
  background: #e00016;
  width: 3.2vw;
  height: 3.2vw;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50%;
}

.calbeeplusHead .toggle_btn:before,
.calbeeplusHead .toggle_btn:after {
  display: block;
  content: '';
  background-color: #fff;
  position: absolute;
  width: 1.5vw;
  height: 0.25vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1vw;
}

.calbeeplusHead .toggle_btn:before {
  width: 0.3vw;
  height: 1.5vw;
}

.calbeeplusHead.__active .toggle_btn:before {
  display: none;
}

.calbeeplusBody {
  display: none;
  padding: 4%;
  background-color: #e00016;
  border-radius: 0 0 1vw 1vw;
}

.calbeeplusBody p {
  font-size: 1.2vw;
  font-weight: bold;
  color: #fff;
  line-height: 1.7;
}

/* Calbee＋応募はがきダウンロードボタン */
.calbeeplus_downloadBtn {
  padding: 0 6.8%;
}

.calbeeplus_downloadBtn a {
  background-color: #fff;
  color: #e00016;
  font-size: 1.9vw;
  font-weight: bold;
  border-radius: 1vw;
  padding: 2% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2%;
  margin-top: 4%;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.1);
}

.calbeeplus_downloadBtn div:nth-child(1) {
  width: 19%;
}

.calbeeplus_downloadBtn div:nth-child(2) {
  width: 16.7%;
}

.calbeeplus_downloadBtn div:nth-child(3) {
  width: 5.4%;
}

/* Calbee＋応募要項 */
.calbeeplus_requirements {
  margin: 2% 6.8%;
  position: relative;
  border-radius: 1vw;
  background-color: #fbff00;
  padding: 0.5%;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.1);
}

.calbeeplus_requirementsHead {
  position: relative;
  background-color: #fbff00;
  color: #3f0000;
  font-size: 1.9vw;
  font-weight: bold;
  border-radius: 1vw;
  padding: 3% 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  letter-spacing: 3px;
}

.calbeeplus_requirementsHead .toggle_btn {
  position: absolute;
  top: 50%;
  right: 1vw;
  transform: translateY(-50%);
  background: #e00016;
  width: 3.2vw;
  height: 3.2vw;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50%;
}

.calbeeplus_requirementsHead .toggle_btn:before,
.calbeeplus_requirementsHead .toggle_btn:after {
  display: block;
  content: '';
  background-color: #fbff00;
  position: absolute;
  width: 1.5vw;
  height: 0.3vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1vw;
}

.calbeeplus_requirementsHead .toggle_btn:before {
  width: 0.3vw;
  height: 1.5vw;
}

.calbeeplus_requirementsHead.__active .toggle_btn:before {
  display: none;
}


.calbeeplus_requirementsBody {
  padding: 30px;
  background-color: #fff;
  border-radius: 0 0 1vw 1vw;
  display: none;
}

.calbeeplus_requirementsBody div {
  margin-top: 4.6%;
}

.calbeeplus_requirementsBody div:first-of-type {
  margin-top: 0;
}

.calbeeplus_requirementsBody h3 {
  background-color: #e00016;
  border-radius: 0.5vw;
  text-align: center;
  color: #fff;
  font-size: 2vw;
  padding: 10px 0;
}


.schedule_flex dl {
 display: flex;
}
.requirementsText dt {
  width: 1.5vw;
}
/* .requirementsText dd:nth-child(2) {
  width: 1.6vw;
  text-align: center;
} */
/* .requirementsText dd:nth-child(3) {
  width: 5vw;
} */
.requirementsText._last dt {
  width: 7vw;
}
.requirementsText._last dd:nth-child(2) {
  width: 7vw!important;
  text-align: left;
}

.requirementsText {
  margin-top: 2% !important;
  font-size: 1.4vw;
  color: #3f0000 !important;
  font-weight: bold;
  line-height: 1.7;
}

.requirementsText p {
  color: #3f0000;
}
.requirementsNote {
  color: #3f0000!important;
  margin-top: 2%;
}

.requirementsText a {
  color: #3f0000;
  /* transition: .3s; */
}

.requirementsText a:hover {
  opacity: 1;
  text-decoration: underline !important;
}

.distance {
  margin-top: 2%;
}

/* バナー */
.banner_wrap {
  margin-top: 4.5%;
}

/***************************** 
封筒
*****************************/
/* 封筒 非アクティブ */
.howto_hutoHead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  width: 31.5%;
  background-color: #fff;
  border-radius: 1vw;
  padding: 1.8% 0 1.1%;
  top: 0;
  left: 0;
  box-shadow: 5px 2px 15px 0px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.howto_hutoHead:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -3%;
  border: 1vw solid transparent;
  border-top: 1vw solid #fff;
}

.howto_hutoHead h3 {
  font-size: 1.7vw;
  font-weight: bold;
  color: #3f0000;
  width: 77.4%;
}

.howto_hutoHead span {
  font-size: 3.1vw;
  color: #e00016;
}

.howto_spHead div {
  width: 5.1%;
}

/* 封筒 アクティブ */
.howto_hutoHead.__active {
  background-color: #e00016;
}

.howto_hutoHead.__active:before {
  border-top: 1vw solid #e00016;
}

.howto_hutoHead.__active h3 {
  color: #fff;
}

.howto_hutoHead.__active span {
  color: #fbff00;
}

/* 封筒内容 */
.howto_hutoBody {
  display: none;
  background-color: #e00016;
  border-radius: 1vw;
  padding: 60px 6.4% 40px;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.35);
  margin-top: 3.6%;
}

.howto_hutoBody.__active {
  display: block;
}

.howto_hutoImg {
  position: relative;
}

.howto_hutoImg_reed {
  width: 88.2%;
  margin: 3% auto;
}
.howto_hutoImg_reed p {
  width: 100%;
  text-align: center;
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 2.2vw;
  line-height: 1.4;
}
.howto_hutoImg_reed p span {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 600;
  font-size: 1.45vw;
}
.howto_spImg_reed p {
  width: 100%;
  text-align: center;
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 2.2vw;
  line-height: 1.4;
}


/***************************** 
スマホ
*****************************/
/* スマホ 非アクティブ */
.howto_spHead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  width: 31.5%;
  background-color: #fff;
  border-radius: 1vw;
  padding: 1.8% 0 1.1%;
  top: 0;
  left: 0;
  box-shadow: 5px 2px 15px 0px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.howto_spHead:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -3%;
  border: 1vw solid transparent;
  border-top: 1vw solid #fff;
}

.howto_spHead h3 {
  font-size: 1.7vw;
  font-weight: bold;
  color: #3f0000;
  width: 77.4%;
}

.howto_spHead span {
  font-size: 3.1vw;
  color: #e00016;
}

.howto_spHead div {
  width: 5.1%;
}

/* スマホ アクティブ */
.howto_spHead.__active {
  background-color: #e00016;
}

.howto_spHead.__active:before {
  border-top: 1vw solid #e00016;
}

.howto_spHead.__active h3 {
  color: #fff;
}

.howto_spHead.__active span {
  color: #fbff00;
}

/* スマホ内容 */
.howto_spBody {
  display: none;
  background-color: #e00016;
  border-radius: 1vw;
  padding: 60px 6.4% 40px;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.35);
  margin-top: 3.6%;
}

.howto_spBody.__active {
  display: block;
}

.howto_spImg {
  position: relative;
}

.howto_spImg .install_box {
  position: absolute;
  bottom: -57%;
  left: 20%;
  width: 21vw;
  height: 3.5vw;
  text-align: center;
}

.howto_spImg a {
  background-color: #fff;
  color: #e00016;
  font-size: 1.25vw;
  font-weight: bold;
  line-height: 1.1;
  border-radius: 50px;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.howto_spImg a::before {
  /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0.7vw;
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
  background: #e00016;
}

.howto_spImg a::after {
  /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 1.3vw;
  width: 0.4vw;
  height: 0.4vw;
  border-top: 2px solid #fbff00;
  border-right: 2px solid #fbff00;
  transform: rotate(45deg);
}


.requirements {
  position: relative;
  margin-top: 4.5%;
  border-radius: 1vw;
  background-color: #fbff00;
  padding: 0.5%;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.35);
}

.requirementsHead {
  position: relative;
  font-size: 2.5vw;
  font-weight: bold;
  color: #3f0000;
  padding: 1.9% 0;
  text-align: center;
  letter-spacing: 3px;
  cursor: pointer;
}

/* アコーディオンボタン */
.requirementsHead .toggle_btn {
  position: absolute;
  top: 50%;
  right: 1vw;
  transform: translateY(-50%);
  background: #e00016;
  width: 3.2vw;
  height: 3.2vw;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50%;
}

.requirementsHead .toggle_btn:before,
.requirementsHead .toggle_btn:after {
  display: block;
  content: '';
  background-color: #fbff00;
  position: absolute;
  width: 1.5vw;
  height: 0.3vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1vw;
}

.requirementsHead .toggle_btn:before {
  width: 0.3vw;
  height: 1.5vw;
}

.requirementsHead.__active .toggle_btn:before {
  display: none;
}

.requirementsBody {
  padding: 60px 60px 50px;
  background-color: #fff;
  border-radius: 0 0 1vw 1vw;
  display: none;
}

.requirementsBody div {
  margin-top: 4.6%;
}

.requirementsBody div:first-of-type {
  margin-top: 0;
}

.requirementsBody h3 {
  background-color: #e00016;
  border-radius: 0.5vw;
  text-align: center;
  color: #fff;
  font-size: 2vw;
  padding: 10px 0;
}

/* sec4 */
.sec04 {
  background-image: url(../img/pc_sec04_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding: 9% 11.8%;
  position: relative;
  top: -15vw;
}

.sec04_title {
  padding: 0 11.8%;
}

.sec04_text div {
  width: 30%;
  padding-right: 4%;
  margin: 2% auto;
}

.sec04_text p {
  text-align: center;
  color: #000399;
  font-size: 1.8vw;
  font-weight: bold;
  line-height: 1.9;
  letter-spacing: 1px;
  margin-top: 4%;
  text-shadow: 0px 5px 15px rgba(255, 255, 255, 0.9);
}

/* フェードイン */
.pc_sec04fadein {
  position: absolute;
  top: 30vw;
  left: 50%;
  transform: translateX(-50%);
  width: 80% !important;
}


/* 矢印 */
.echoesUgc#js-echoes-ugc-pc .echoesUgcArrow {
  border: none !important;
  background-color: #fbff00 !important;
}

.echoesUgc#js-echoes-ugc-pc .echoesUgcArrow::before {
  color: #e00016 !important;
}


/* sec06 よくあるご質問 */
.sec06 {
  background-image: url("../img/pc_sec06_bg.jpg");
  background-repeat: repeat-y;
  background-size: 100%;
  /* padding: 16% 16.7% 9.7%; */
  padding: 5% 16.7% 9.7%;
  position: relative;
  /* margin-top: -13vw; */
  /* margin-top: -26vw; */
  margin-top: -15vw;
  text-align: center;
}

.faq_title {
  padding: 5% 30.2% 0;
}

.faq_contents {
  margin-top: 4.2%;
}

.faq_contentsItem {
  background-color: #fff;
  border-radius: 1vw;
  padding: 2.5% 3%;
  margin-top: 2%;
}

.faq_contentsItem:first-of-type {
  margin-top: 0;
}

.faq_contentsItem p {
  font-size: 1.25vw;
  line-height: 1.6;
  font-weight: bold;
  color: #3f0000;
  text-align: left;
  width: 96.9%;
}
.faq_contentsItem p.p69 {
  width: fit-content;
}
.faq_contentsItem p.p50 {
  width: fit-content;
}
.faq_contentsItem p.question {
  padding-right: 6%;
}

.faqHead {
  display: flex;
  align-items: center;
  column-gap: 1.6%;
  position: relative;
  cursor: pointer;
}

.headlineImg {
  width: 3.1%;
}

/* アコーディオンボタン */
.faqHead .toggle_btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #e00016;
  width: 3.2vw;
  height: 3.2vw;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50%;
}

.faqHead .toggle_btn:before,
.faqHead .toggle_btn:after {
  display: block;
  content: '';
  background-color: #fff;
  position: absolute;
  width: 1.5vw;
  height: 0.3vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1vw;
}

.faqHead .toggle_btn:before {
  width: 0.3vw;
  height: 1.5vw;
}

.faqHead.__active .toggle_btn:before {
  display: none;
}

.faqBody {
  padding-top: 2.5%;
  margin-top: 2.5%;
  border-top: 2px #e00016 solid;
  display: none;
}

.faqBody div {
  display: flex;
  align-items: center;
  column-gap: 1.6%;
  margin-top: 1.8%;
}

.faqBody div:first-of-type {
  margin-top: 0;
}

.oubokenImg {
  width: 11.3%;
}
.oubokenImg03 {
  width: 43.4%;
}

/* お問い合わせ */
.contact {
  margin-top: 6.25%;
}

.contact_title {
  padding: 0 32.3%;
}

.contact_contents {
  margin-top: 3.7%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 1vw;
  padding: 4.1% 19.8%;
  color: #3f0000;
  font-weight: bold;
}

.contact_text {
  text-align: center;
}

.contact_text h4 {
  font-size: 1.9vw;
  color: #3f0000;
}

.contact_text div {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1.5vw;
  margin-top: 3.5%;
}

.contact_text div img {
  width: 9% !important;
}

.contact_text a {
  font-size: 2.7vw;
  color: #3f0000;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 5px;
}

@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

.contact_text p {
  font-size: 1.1vw;
  margin-top: 5.5%;
}


/* モーダル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #000;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index: 999;
}

.modal.__active {
  opacity: 1;
  visibility: visible;
}

.modalBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(34, 42, 51, 0.7);
}

.modalContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  width: 50%;
  height: 90%;
  overflow-y: scroll;
  background-color: #fff;
  border-radius: 1vw;
  padding: 4%;
  z-index: 10;
}

.modalContent h3 {
  font-size: 2.1vw;
  text-align: center;
}

.modalContent h4 {
  font-size: 1.5vw;
  margin-top: 10%;
  line-height: 2;
}

.modalContent p {
  font-size: 1.3vw;
  font-weight: bold;
  margin-top: 3%;
  line-height: 1.8;
}

.modalContent span {
  font-size: 1vw;
  font-weight: bold;
}

.modalcloseBtn {
  position: absolute;
  top: 8%;
  right: 27%;
  width: 50px;
  height: 50px;
  background-color: rgb(103, 103, 103);
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
}

.modalcloseBtn::before,
.modalcloseBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 22px;
  background: #fff;
}

.modalcloseBtn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modalcloseBtn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/***************************** 
  SP画面
*****************************/

@media screen and (max-width:940px) {
  #daishukakusai2023 .pc {
    display: none !important;
  }

  #daishukakusai2023 .sp {
    display: block !important;
  }

  /* MV */
  .snsBtn {
    top: 128vw;
    z-index: 10;
    column-gap: 2%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .mv_bottom {
    position: absolute;
    bottom: -39%;
    width: 100%;
  }
  .mv_ttl {
    width: 70%;
    left: 7%;
    top: 5%;
  }
  .mv_logo {
    width: 27%;
    left: 4%;
    top: 44%;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
  }
  .mv_bag {
    width: 90%;
    bottom: -18%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    animation: bounce 1.4s ease-in-out forwards;
    animation-iteration-count: infinite;
  }

  .sharebtn {
    column-gap: 1vw;
    width: 27vw;
    height: 6vw;
  }

  .sp_menuBtn {
    position: absolute;
    top: 0;
    right: 0;
    width: 16vw;
    height: 16vw;
    border-radius: 0 0 0 4vw;
    background-color: #ffffff;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 3vw 0;
  }

  .sp_menuBtn span {
    background-color: #e00016;
    width: 53.3%;
    height: 3px;
    border-radius: 3px;
  }

  .sp_menuBtn div {
    font-family: 'Montserrat', sans-serif;
    color: #e00016;
    font-size: 3.2vw;
  }

  /* SPメニュー画面 */
  .sp_menu {
    background-color: #e00016;
    padding: 20vw 8% 0;
    transition: ease .5s;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    z-index: 100;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .sp_menu.__active {
    transform: translateX(0);
  }

  .sp_menubg {
    width: 100vw !important;
    position: relative;
    bottom: -8vw;
    left: -8vw;
  }


  .sp_menucloseBtn {
    position: absolute;
    top: 24vw;
    right: 11vw;
  }

  .sp_menucloseBtn::before,
  .sp_menucloseBtn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1vw;
    height: 7.5vw;
    background: #fff;
  }

  .sp_menucloseBtn::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .sp_menucloseBtn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .snsIcon {
    display: flex;
    column-gap: 4%;
    align-items: center;
  }

  .snsIcon div {
    width: 10%;
  }

  .sp_menuList {
    margin-top: 25%;
  }
  
  .sp_menuList li {
    padding-bottom: 3.2%;
    border-bottom: 1px #fff solid;
    margin-top: 7%;
  }

  .sp_menuList a {
    display: block;
    color: #fff;
    font-size: 4.3vw;
    font-weight: bold;
    position: relative;
  }

  .sp_menuList a::before {
    /* 背景の表示設定 */
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5.4vw;
    height: 5.4vw;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
  }

  .sp_menuList a::after {
    /* くの字の表示設定 */
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 2vw;
    width: 1.2vw;
    height: 1.2vw;
    border-top: 0.5vw solid #e00016;
    border-right: 0.5vw solid #e00016;
    transform: rotate(45deg);
  }

  /* 応募はがきダウンロードボタン */
  .sp_menuDownload a {
    background-color: #fbff00;
    color: #e00016;
    font-size: 4.3vw;
    font-weight: bold;
    border-radius: 50px;
    padding: 3.3% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 2.3%;
    margin-top: 7.9%;
    box-shadow: 0px 12px 10px 0px rgba(0, 0, 0, 0.1);
  }

  .sp_menuDownload img {
    width: 6.6% !important;
  }

  .w5 {
    width: 8% !important;
    margin-right: 5px;
  }
  .w3 {
    width: 5% !important;
    margin-right: 5px;
  }

  /* sec01 */
  .sec01 {
    background-image: url(../img/sp_sec01_garland.png), url(../img/sp_sec01_bg.jpg);
    padding: 3% 4% 70%;
    top: 31.5vw;
    background-position: top 74vw center, top 14vw center;
  }
  .pc_sec01fadein {
    top: 215vw;
    width: 93% !important;
    margin: 0 auto;
  }
  .pc_sec02fadein {
    bottom: 0;
  }
  
  .news_text_box {
    width: 65%;
    left: 28.3%;
    bottom: 19%;
  }
  .news_text_box .large_text {
    font-size: 3.6vw;
    letter-spacing: -0.15vw;
  }
  .news_text_box .small_text {
    font-size: 3vw;
    margin-left: -26%;
    text-shadow:
    -2px  0   #f6efe0,
    2px  0   #f6efe0,
    0   -2px #f6efe0,
    0    2px #f6efe0,
   -2px -2px #f6efe0,
    2px -2px #f6efe0,
   -2px  2px #f6efe0,
    2px  2px #f6efe0;
  }

  /* カウンター */
  .count {
   margin: 18% auto 0;
  }

  .counter_text{
    top: 50%;
    left: 10%;
    font-size: 16vw;
    letter-spacing: 0;
  }
  .counter_text .day_text {
    font-size: 10vw;
  }

  /* PR */
  .pr {
    padding: 0;
    margin-top: 10%;
  }

  .pr_text {
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 3.6%;
    align-items: center;
    width: 100%;
  }

  .pr_text p {
    font-size: 3.6vw;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-align: left;
  }
  .pr_text p:last-of-type {
    font-size: 3vw;
  }

  .pr_text a {
    width: 90%;
    font-size: 3.9vw;
    padding: 4% 8% 4% 5%;
    margin-top: 4.8%;
    margin-left: 0;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .pr_text a::before {
    /* 背景の表示設定 */
    right: 2.5vw;
    width: 4vw;
    height: 4vw;
  }

  .pr_text a::after {
    /* くの字の表示設定 */
    right: 4vw;
    width: 0.5vw;
    height: 0.5vw;
  }

  .bgyellow {
    border-radius: 3px;
  }
  .sec01_50th {
    width: 100%;
    margin: 13% auto 0;
    padding: 0;
  }

  .sec01_text {
    width: 100%;
    margin-top: 4.9%;
  }
  .sec01_text p {
    font-size: 3vw;
    text-align: center;
  }

  /* 景品紹介 */
  .present_item {
    margin-top: 7.2%;
    flex-direction: column;
    align-items: center;
    row-gap: 1.5vw;
  }

  .present_item01,
  .present_item02 {
    width: 100% !important;
  }

  .present_item01 {
    padding-left: 2.5%;
  }
  .present_item02 {
    padding-right: 1.5%;
    padding-left: 1.5%;
    margin-top: 5%;
  }
  .item_text02 span {
    font-size: 2.6vw;
    line-height: 1.8 !important;
  }

  .sec01_item_text {
    margin-top: 5%;
  }

  .sec01_item_text p {
    top: 56%;
    font-size: 3.5vw;
  }

  .present_item01 p {
    font-size: 2.6vw;
    line-height: 1.2;
    left: 29%;
  }
  .present_item02 p {
    font-size: 2.9vw;
  }

  .present_itemIcon {
    width: 13% !important;
    position: relative;
    top: 0;
    left: 0;
    transform: translateX(0);
  }

  /* フェードイン */
  .sp_sec01fadein {
    position: absolute;
    top: 20vw;
    left: 50%;
    transform: translateX(-50%);
    width: 95% !important;
  }


  /* sec02 */
  .sec02 {
    background-image: url(../img/sp_sec02_bg.png);
    padding: 8% 0 13.4% 0;
    background-size: 98%;
    background-position: top right;
    top: 40vw;
    border-radius: 0;
  }
  .sec02::after {
    content: "";
    position: absolute;
    display: block;
    bottom: -2vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    background:url(../img/sp_sec02_bottom.png) no-repeat center/100%;
    width: 100%;
    padding-top: 8%;
  }
  .sec02_bg {
    top: -21vw;
    width: 50%;
  }

  .present_detailTitle{
    width: 70%;
    margin-top: 10%;
    padding: 0 0 0 4%;
  }

  .present_detailTitle span {
    font-size: 5.3vw;
  }

  .present_detailBody {
    margin-top: 0;
    padding-left: 0;
    margin-bottom: 0;
    overflow: hidden;
    padding: 0 0 0 4%;
  }

  /* 画像スライダー */
  .imgslide {
    position: static;
    width: 100%;
  }
  .imgslide._a {
    padding-left: 10%;
    width: 110%;
  }
  .imgslide._b {
    margin-left: -10%;
  }

  .imgslide p {
    bottom: 0;
    top: 70vw;
    right: 9vw;
    font-size: 1.8vw;
  }

  /* ポイントスライダー */
  .pointslide {
    padding: 0 5%;
    margin-left: -3%;
    margin-top: -4%;
  }

  .point_slider {
    width: 100%;
  }

  .borderline {
    width: 92%;
    margin-top: 6.2%;
  }

  .addinfo {
    flex-direction: column;
    align-items: center;
    row-gap: 2vw;
    margin: 10% auto 0;
    width: 100%;
    justify-content: center;
    padding: 0 4%;
  }
  .addinfo .omake{
    position: absolute;
    width: 27.4%;
    z-index: 2;
    top: -3%;
    left: 4%;
}
  .addinfo_text {
    width: 100%;
    margin-top: 0;
    padding: 4.5% 6%;
  }
  .addinfo_img{
    padding-top: 5%;
    width: 73%;
    margin-left: 0;
    margin-top: 0;
  }

  .addinfo_text:first-of-type p {
    left: 10%;
}

  .addinfo_text p {
    left: 9%;
    font-size: 4.2vw;
  }
  .addinfo_text span {
    font-size: 3.2vw;
  }

  /* バナー */
  .banner {
    padding: 14% 4.2% 0 0;
  }

  /* sec03 */
  .sec03 {
    background-image: url("../img/sp_sec03_bg.png");
    padding: 1% 4% 20%;
    top: 38vw;
  }
  .sec03_title {
    padding: 0 12%;
  }
  .sec03_img01 {
    padding-top: 5%;
  }
  .sec03_img01 .note {
    width: 90%;
    font-size: 3.3vw;
    bottom: 2.3%;
  }
  .sec03_img01 .note li {
    text-indent: -3vw;
    padding-left: 3vw;
    padding-bottom: 1.5%;
  }

  .howto_detail {
    margin-top: 18%;
  }
  .howto_detailHead {
    display: flex;
  }
  .howto_lead{
    top: -11vw;
    width: 90%;
  }
  .howto_notetext {
    padding: 8% 5%;
    transform: translateX(-50%);
    background: url(../img/sp_howto_notetext.png) no-repeat center/100% 100%;
  }
  .howto_text {
    font-size: 3vw;
  }
  .howto_small {
    font-size: 2.5vw;
    line-height: 1.5;
  }
  .howto_box {
    background-position: top center;
    margin-top: 5%;
  }
  .howto_postcardImg .howto_box {
    aspect-ratio: 631/935;
    background-image: url(../img/sp_howto_postcardImg.png);
  }
  .howto_postcardImg.howto_hutoImg .howto_box {
    aspect-ratio: 631/974;
    background-image: url(../img/sp_howto_hutoImg.png);
  }
  .howto_spImg .howto_box {
    aspect-ratio: 631/974;
    background-image: url(../img/sp_howto_spImg.png);
  }
  .howto_spImg .oripake {
    width: 75% !important;
    margin-top: 4%;
    padding-left: 0;
  }  
  .howto_box ul li {
    font-size: 3.2vw;
    width: 100%;
  }
  .howto_pointtext p {
    margin-top: 3%;
    font-size: 2.5vw;
  }
  .howto_postcardImg .howto_box ul li._01 {
    top: 0;
    left: 0;
    align-items: normal;
  }
  .howto_postcardImg .howto_box ul li._02 {
    top: 20.2%;
    right: 0;
  }
  .howto_postcardImg .howto_box ul li._03 {
    bottom: 30%;
    left: 0%;
    align-items: normal;
  }
  .howto_postcardImg .howto_box ul li._04 {
    bottom: 4%;
    right: 0;
    align-items: normal;
  }
  .howto_postcardImg.howto_hutoImg .howto_box ul li._01 {
    top: 0;
    left: 0;
    align-items: normal;
  }
  .howto_postcardImg.howto_hutoImg .howto_box ul li._02 {
    top: 21%;
    right: 0;
  }
  .howto_postcardImg.howto_hutoImg .howto_box ul li._03 {
    bottom: 31%;
    left: 0%;
    align-items: normal;
  }
  .howto_postcardImg.howto_hutoImg .howto_box ul li._04 {
    bottom: 3%;
    right: 0;
  }
  
  .howto_spImg .howto_box ul li._01 {
    top: 0;
    left: 0%;
  }
  .howto_spImg .howto_box ul li._02 {
    top: 28%;
    right: 0;
  }
  .howto_spImg .howto_box ul li._03 {
    bottom: 28%;
    left: 0%;
  }
  .howto_spImg .howto_box ul li._04 {
    bottom: 1%;
    right: 0;
  }
  


  /***************************** 
  はがき
  *****************************/
  /* はがき 非アクティブ */
  .howto_postcardHead {
    padding: 2.2% 0;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .howto_postcardHead:before {
    border: 2vw solid transparent;
    border-top: 2vw solid #fff;
  }

  .howto_postcardHead h3 {
    font-size: 3.1vw;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.2;
  }

  .howto_postcardHead span {
    font-size: 5.3vw;
  }

  .howto_postcardHead div {
    width: 14.1%;
  }

  /* はがき アクティブ */
  .howto_postcardHead.__active:before {
    border-top: 2vw solid #e00016;
  }

  /* はがき内容 */
  .howto_postcardBody {
    padding: 7% 4.3%;
    margin-top: 6.8%;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .modalBtn {
    width: 57.1%;
    height: 64.5%;
  }
  .howto_postcardImg .modalBtn {
    bottom: -12%;
    left: 19%;
  }
  .howto_hutoImg .modalBtn {
    bottom: -46%;
  }

  .howto_leadimg {
    padding-top: 7%;
  }
  .howto_postcardImg a {
    font-size: 3.2vw;
    padding-right: 5.3vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .howto_postcardImg a::before {
    /* 背景の表示設定 */
    right: 1.4vw;
    width: 5.4vw;
    height: 5.4vw;
  }

  .howto_postcardImg a::after {
    /* くの字の表示設定 */
    right: 3.5vw;
    width: 1.2vw;
    height: 1.2vw;
  }

  /* 応募はがきダウンロードボタン */
  .downloadBtn a {
    font-size: 4.2vw;
    padding: 3% 0;
    column-gap: 3%;
    margin-top: 6.5%;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .downloadBtn img {
    width: 5.5% !important;
  }

  /* Calbee＋の応募方法 */
  .calbeeplus {
    margin-top: 6.3%;
    padding: 1%;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .calbeeplusHead {
    font-size: 3vw;
    padding: 1% 0 1% 10%;
    column-gap: 2.4%;
  }

  .calbeeplusHead div:nth-child(1) {
    width: 20.7%;
  }

  .calbeeplusHead div:nth-child(2) {
    width: 15.7%;
  }

  /* アコーディオンボタン */
  .calbeeplusHead .toggle_btn {
    width: 6.1vw;
    height: 6.1vw;
  }

  .calbeeplusHead .toggle_btn:before,
  .calbeeplusHead .toggle_btn:after {
    width: 3vw;
    height: 0.45vw;
  }

  .calbeeplusHead .toggle_btn:before {
    width: 0.5vw;
    height: 3vw;
  }

  .calbeeplusBody p {
    font-size: 3.2vw;
    line-height: 1.5;
  }

  /* Calbee＋応募はがきダウンロードボタン */
  .calbeeplus_downloadBtn {
    padding: 0;
  }

  .calbeeplus_downloadBtn a {
    font-size: 3vw;
    padding: 2.5% 0;
    column-gap: 1%;
    margin-top: 5.5%;
    border-radius: 2vw;
  }

  .calbeeplus_downloadBtn div:nth-child(1) {
    width: 19%;
  }

  .calbeeplus_downloadBtn div:nth-child(2) {
    width: 16.7%;
  }

  .calbeeplus_downloadBtn div:nth-child(3) {
    width: 6.1%;
  }

  /* Calbee＋応募要項 */
  .calbeeplus_requirements {
    margin: 2% 0;
    position: relative;
    border-radius: 2vw;
    background-color: #fbff00;
    padding: 0.5%;
  }

  .calbeeplus_requirementsHead {
    font-size: 3.7vw;
  }

  /* アコーディオンボタン */
  .calbeeplus_requirementsHead .toggle_btn {
    width: 6.1vw;
    height: 6.1vw;
  }

  .calbeeplus_requirementsHead .toggle_btn:before,
  .calbeeplus_requirementsHead .toggle_btn:after {
    width: 3vw;
    height: 0.45vw;
  }

  .calbeeplus_requirementsHead .toggle_btn:before {
    width: 0.5vw;
    height: 3vw;
  }

  .calbeeplus_requirementsBody {
    padding: 6% 3.6%;
    border-radius: 0 0 2vw 2vw;
  }

  .calbeeplus_requirementsBody div {
    margin-top: 6.8%;
  }

  .calbeeplus_requirementsBody h3 {
    border-radius: 1vw;
    font-size: 3.7vw;
    padding: 2% 0;
  }

  .requirementsText {
    margin-top: 2.8% !important;
    font-size: 3.2vw;
    line-height: 1.5;
    word-break: break-all;
  }
  .requirementsText p a {
    display: inline-block;
  }
  .distance {
    margin-top: 2.8%;
  }

   .requirementsText dt {
     width: 3vw;
   }
   .requirementsText dd:nth-child(2) {
     width: 3vw;
     text-align: center;
   }
   .requirementsText dd:nth-child(3) {
     width: 10.8vw;
   }
   .requirementsText._last dt {
     width: 16.8vw;
   }
   .requirementsText._last dd:nth-child(2) {
    width: 20vw!important;
  }

  /***************************** 
  封筒
  *****************************/
  .howto_hutoHead {
    padding: 2.2% 0;
    column-gap: 12px;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .howto_hutoHead:before {
    border: 2vw solid transparent;
    border-top: 2vw solid #fff;
  }

  .howto_hutoHead h3 {
    font-size: 3.1vw;
    text-align: center;
    line-height: 1.2;
  }

  .howto_hutoHead span {
    font-size: 5.3vw;
    letter-spacing: -4px;
  }

  .howto_hutoHead div {
    width: 9.1%;
  }

  /* スマホ アクティブ */
  .howto_hutoHead.__active:before {
    border-top: 2vw solid #e00016;
  }

  /* スマホ内容 */
  .howto_hutoBody {
    padding: 7% 4.3%;
    margin-top: 6.8%;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }
  .howto_hutoImg_reed {
    width: 100%;
    margin: 8% auto 0;
  }

  .howto_hutoImg_reed p {
    font-size: 3.8vw;
  }
  .howto_hutoImg_reed p span {
    font-size: 2.8vw;
  }
  
  .howto_spImg_reed p {
    font-size: 4vw;
  }

  /***************************** 
  スマホ
  *****************************/
  /* スマホ 非アクティブ */
  .howto_spHead {
    padding: 2.2% 0;
    column-gap: 12px;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .howto_spHead:before {
    border: 2vw solid transparent;
    border-top: 2vw solid #fff;
  }

  .howto_spHead h3 {
    font-size: 3.1vw;
    text-align: center;
    line-height: 1.2;
  }

  .howto_spHead span {
    font-size: 5.3vw;
    letter-spacing: -4px;
  }

  .howto_spHead div {
    width: 9.1%;
  }

  /* スマホ アクティブ */
  .howto_spHead.__active:before {
    border-top: 2vw solid #e00016;
  }

  /* スマホ内容 */
  .howto_spBody {
    padding: 7% 4.3%;
    margin-top: 6.8%;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .howto_spImg .install_box {
    bottom: -85%;
    left: 15%;
    width: 60%;
    height: 64.5%;
  }

  .howto_spImg a {
    font-size: 3.2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .howto_spImg a::before {
    /* 背景の表示設定 */
    right: 1.4vw;
    width: 5.4vw;
    height: 5.4vw;
  }

  .howto_spImg a::after {
    /* くの字の表示設定 */
    right: 3.5vw;
    width: 1.2vw;
    height: 1.2vw;
  }

  .howto_spImg_reed {
    width: 100%;
    margin: 8% auto;
  }

  .requirements {
    margin-top: 7.3%;
    padding: 0.9%;
    border-radius: 2vw;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .requirementsHead {
    font-size: 4.2vw;
    padding: 2.9% 0;
  }

  /* アコーディオンボタン */
  .requirementsHead .toggle_btn {
    width: 6.1vw;
    height: 6.1vw;
  }

  .requirementsHead .toggle_btn:before,
  .requirementsHead .toggle_btn:after {
    width: 3vw;
    height: 0.45vw;
  }

  .requirementsHead .toggle_btn:before {
    width: 0.5vw;
    height: 3vw;
  }

  .requirementsBody {
    padding: 6% 3.6%;
    border-radius: 0 0 2vw 2vw;
  }

  .requirementsBody div {
    margin-top: 6.8%;
  }

  .requirementsBody h3 {
    border-radius: 1vw;
    font-size: 3.7vw;
    padding: 2% 0;
  }

  /* バナー */
  .banner_wrap {
    margin-top: 8%;
  }

  /* sec4 */
  .sec04 {
    background-image: url(../img/sp_sec04_bg.jpg);
    padding: 0 4% 17%;
    top: 34vw;
    z-index: 1;
    background-size: cover;
  }

  .sec04_title {
    padding: 3% 0 0;
  }

  .sec04_text {
    margin-top: 4.5%;
  }

  .sec04_text div {
    width: 43.5%;
    padding-left: 0;
    margin: 0 auto;
    padding-right: 5%;
  }

  .sec04_text p {
    font-size: 4vw;
    letter-spacing: -1px;
    margin-top: 7.5%;
    text-shadow: 0px 2px 10px rgba(255, 255, 255, 0.9);
  }

  /* トピックス */
  .topics {
    background-image: url("../img/sp_topics_bg.png");
    padding: 0 7.5% 11.5%;
    margin-top: 13%;
  }

  .topics_title {
    padding: 0 1.2%;
  }

  /* 記事内容 */
  .topics_contents {
    align-items: center;
    flex-direction: column;
    row-gap: 19vw;
    margin-top: 18%;
  }

  .topics_contentsItem {
    width: 100%;
    border-radius: 0 3vw;
    padding: 3.4% 3.4% 11.3%;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
  }

  .contentsItem_bg {
    border-radius: 0 2vw;
    border: 2px #e00016 solid;
    padding: 9.2% 6% 6%;
  }

  .date {
    top: -9%;
    width: 16vw;
    height: 16vw;
  }

  .month {
    font-size: 4.2vw;
    top: 18%;
    left: 15%;
  }

  .separator {
    top: 16%;
    left: 18%;
    width: 6vw;
  }

  .day {
    font-size: 7vw;
    top: 40%;
    left: 35%;
  }

  .topics_contentsItem div:last-of-type {
    row-gap: 2.5vw;
  }

  .topics_contentsItem div:last-of-type div {
    height: 36vw;
  }

  .topics_contentsItem h3 {
    font-size: 4.2vw;
    line-height: 1.3;
    height: auto;
  }

  .topics_contentsItem p {
    font-size: 3.7vw;
  }

  .topics_link {
    bottom: 2.5%;
    font-size: 3.7vw;
  }

  .topics_triangle {
    border-top: 5vw solid transparent;
    border-right: 5vw solid #e00016;
  }

  /* フェードイン */
  .pc_sec04fadein {
    top: 38vw;
    left: 50%;
    transform: translateX(-50%);
    width: 93% !important;
  }
  

  /* sec05 */
  .sec05 {
    background-image: url("../img/sp_sec05_bgTop.png");
    top: 30vw;
    padding: 0.5% 0 2%;
  }
  .sec05_title {
    padding: 0 14%;
  }
  .sec05_text {
    font-size: 6.4vw;
    margin-top: 6%;
    line-height: 1.4;
  }
  .sec05_note {
    font-size: 3vw;
    margin: 0 2% 4% 0;
  }

  /* 矢印 */
  .echoesUgc#js-echoes-ugc-sp .echoesUgcArrow {
    border: none !important;
    background-color: #fbff00 !important;
  }

  .echoesUgc#js-echoes-ugc-sp .echoesUgcArrow::before {
    color: #e00016 !important;
  }

  /* ツイートスライダー */
  /* .sp_tweet_slider {
    position: relative;
    margin-top: 9.6%;
  } */
  /* 矢印 */
  /* .sp_tweet_slider .slider-arrow {
    width: 9.3% !important;
    position: absolute;
    z-index: 10;
    cursor: pointer;
  }
  .sp_tweet_slider .arrow-prev {
    top: 40%;
    left: 11%;
  }
  .sp_tweet_slider .arrow-next {
    top: 40%;
    right: 11%;
  } */
  /* 中央以外のスライド */
  /* .sp_tweet_slider li img {
    height: auto;
    transform: scale(.8);
    transition: .5s;
    width: 100%;
  } */
  /* 中央のスライド */
  /* .sp_tweet_slider .slick-center img {
    transform: scale(1);
  } */

  /* .sec05 .moreView {
    font-size: 3.2vw;
    padding: 2.7% 16.4%;
    margin-top: 12.3%;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
  }
  .sec05 .moreView::before {
    right: 1vw;
    width: 5.3vw;
    height: 5.3vw;
  }
  .sec05 .moreView::after {
    right: 3.1vw;
    width: 1.4vw;
    height: 1.4vw;
  } */
  /* .sec05 p {
    bottom: 35vw;
    right: 3vw;
    font-size: 2.6vw;
    text-align: end;
  } */


  /* sec06 */
  .sec06 {
    /* padding: 15% 4% 13.3%; */
    padding: 20% 4% 13.3%;
    /* margin-top: 8vw; */
    /* margin-top: 2vw; */
    margin-top: 25vw;
  }

  .faq_title {
    padding: 0 21%;
  }

  .faq_contents {
    margin-top: 11%;
  }

  .faq_contentsItem {
    border-radius: 2vw;
    padding: 4.3%;
    margin-top: 4%;
  }

  .faq_contentsItem p {
    font-size: 3vw;
  }
  .faq_contentsItem p.p69 {
    width: 69%;
  }
  .faq_contentsItem p.p50 {
    width: 69%;
  }
  .faq_contentsItem p.question {
    padding-right: 10%;
  }

  .faqHead {
    column-gap: 1.6%;
  }

  .headlineImg {
    width: 10%;
    max-width: 18px;
  }

  .faq_contentsItem:nth-child(1) .faqBody .headlineImg {
    width: 35px;
  }

  .faq_contentsItem:nth-child(3) .faqBody .headlineImg {
    width: 70px;
  }

  .faq_contentsItem:nth-child(4) .faqBody .headlineImg {
    width: 65px;
  }

  /* アコーディオンボタン */
  .faqHead .toggle_btn {
    width: 6.1vw;
    height: 6.1vw;
  }

  .faqHead .toggle_btn:before,
  .faqHead .toggle_btn:after {
    width: 3vw;
    height: 0.45vw;
  }

  .faqHead .toggle_btn::before {
    width: 0.5vw;
    height: 3vw;
  }

  .faqBody {
    padding-top: 5%;
    margin-top: 5%;
  }

  .faqBody div {
    column-gap: 1.6%;
    margin-top: 4.8%;
  }

  .oubokenImg {
    width: 14.3%;
  }

  /* お問い合わせ */
  .contact {
    margin-top: 11.5%;
  }

  .contact_title {
    padding: 0 24%;
  }

  .contact_contents {
    margin-top: 8.7%;
    padding: 8.7% 12.3%;
    border-radius: 2vw;
  }

  .contact_text h3 {
    font-size: 5.3vw;
    letter-spacing: -1px;
  }

  .contact_text div {
    column-gap: 1.5vw;
    margin-top: 5.8%;
  }

  .contact_text div img {
    width: 10% !important;
  }

  .contact_text a {
    font-size: 5.3vw;
    letter-spacing: 2px;
  }

  .contact_text p {
    font-size: 3.2vw;
    margin-top: 7.1%;
    line-height: 1.5;
  }


  /* モーダル */
  .modalContent {
    width: 90%;
    height: 70%;
    padding: 8% 4%;
  }

  .modalContent h3 {
    font-size: 6vw;
  }

  .modalContent h4 {
    font-size: 4vw;
    margin-top: 15%;
    letter-spacing: -0.7px;
  }

  .modalContent p {
    font-size: 3.5vw;
    margin-top: 5%;
    line-height: 1.5;
  }

  .modalContent span {
    font-size: 2.8vw;
  }

  .modalcloseBtn {
    top: 17%;
    right: 8%;
    width: 35px;
    height: 35px;
  }

  .modalcloseBtn::before,
  .modalcloseBtn::after {
    width: 2px;
    height: 17px;
  }

  .modalcloseBtn::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .modalcloseBtn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .slick-dots li button:before {
    width: 10px;
    height: 10px;
  }

}