@charset "utf-8";

/* ===========================================
 * 変数
 * ======================================== */
:root {
  --font_fm-main:  YakuHanJPs, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN";
}

/* ===========================================
 * 全体共通
 * ======================================== */
#cp {
  position: relative;
  z-index: auto;
  width: 100vw;
  margin-left: calc(50% - 50vw)!important;/*重要*/
  font: inherit;
  color: #000;
  border: none;
  list-style: none;
  background-color: #FFFFFF;
  vertical-align: baseline;
}
#cp .container {
  width: 100%;
  margin: 0 auto;
  font: 500 14px / 1.5 var(--font_fm-main);
  letter-spacing: 0.01em;
  color: #333333;
  background-color: #FFFFFF;
}
@media screen and (max-width:767px) {
  #cp .container {
    font: 500 16px / 1.5 var(--font_fm-main);
  }
}
#cp .sp-min {
  display: none;
}
@media screen and (max-width:320px) {
  #cp .sp-min {
    display: block;
  }
}

/* ===========================================
 * キービジュアル
 * ======================================== */
#cp .kv__wrap {
  width: 100%;
  margin: 0 auto;
  background-color: #58bfc5;
}
#cp .kv__wrap h1 {
  width: min(100%);
  margin: 0 auto;
}
#cp .kv__wrap .kv__inner {
  width: min(100%, 1000px);
  margin: 0 auto;
} 
#cp .kv__wrap .kv__inner small {
  padding: 0.5em 0;
  text-align: right;
  font: 700 12px / 1.5 var(--font_fm-main), Meiryo, sans-serif;
  color: #FFFFFF;
  display: block;
}
@media screen and (max-width:1030px) {
  #cp .kv__wrap .kv__inner {
    padding-right: 15px;
  } 
}
@media screen and (max-width:767px) {
  #cp .kv__wrap .kv__inner {
    width: min(84%, 750px);
    padding-right: 0;
  } 
}

/* ===========================================
 * キャンペーン内容
 * ======================================== */
#cp .cp__wrap {
  width: 100%;
  padding: 30px 0;
  margin: 0 auto;
  background-color: #FFFFFF;
}
#cp .cp__wrap .cp__inner {
  width: min(100%, 1000px);
  margin: 0 auto;
}
@media screen and (max-width:767px) {
  #cp .cp__wrap {
    padding: 30px 0;
  }
  #cp .cp__wrap .cp__inner {
    width: min(84%, 750px);
  }
}

/* ===========================================
 * 応募締切、対象商品、賞品
 * ======================================== */
#cp .contents__wrap {
  width: 100%;
  padding: 90px 15px;
  margin: 0 auto;
  background-color: #e1f8fa;
}
#cp .contents__inner {
  width: min(100%, 1000px);
  padding: 60px 15px;
  margin: 0 auto;
  border: 6px solid #54bfc6;
  border-radius: 30px;
  background-color: #FFFFFF;
}
#cp .contents__box {
  width: min(100%, 750px);
  margin: 0 auto 60px auto;
}
#cp .contents__box:last-child {
  margin: 0 auto;
}
#cp .contents__box h3 {
  margin: 0 auto;
  text-align: center;
  font: 700 18px / 1.5 var(--font_fm-main);
  color: #54bfc6;
}
#cp .contents__box dt strong {
  width: 125px;
  padding: 0 0 10px 0;
  margin: 0 auto 15px auto;
  border-bottom: 4px solid #54bfc6;
  display: block;
}
#cp .contents__box p {
  margin: 0 auto 1em auto;
  text-align: center;
  font: 700 18px / 1.5 var(--font_fm-main);
  color: #333333;
}
#cp .contents__box .quo2 {
  text-align: left;
  font: 500 16px / 1.5 var(--font_fm-main);
  padding-top: 20px;
}
#cp .contents__box .quo2 .quopay {
  text-align: left;
}

@media screen and (max-width:767px) {
  #cp .contents__wrap {
    padding: 30px 0;
  }
  #cp .contents__inner {
    width: min(84%, 750px);
    padding: 30px 0;
    border: 3px solid #54bfc6;
    border-radius: 15px;
  }
  #cp .contents__box {
    width: 76vw;
    margin: 0 auto 30px auto;
  }
  #cp .contents__box h3 {
    font: 700 8px / 1.5 var(--font_fm-main);
    color: #54bfc6;
  }
  #cp .contents__box dt strong {
    width: 90px;
    padding: 0 0 5px 0;
    margin: 0 auto 5px auto;
    border-bottom: 2px solid #54bfc6;
  }
  #cp .contents__box p {
    margin: 0 auto 1em auto;
    font: 700 14px / 1.5 var(--font_fm-main);
  }
  #cp .contents__box .quo2 {
    margin: 0 auto 1em auto;
    font: 500 12px / 1.5 var(--font_fm-main);
    padding-top: 0;
  }
}

/* 応募締切 */
/* ======================================== */
/* #cp #deadline {} */

/* 対象商品 */
/* ======================================== */
/* #cp #product {} */
#cp #product dd div {
  width: 100%;
  padding: 15px 0;
  margin: 0 auto;
  border-radius: 15px;
  background-color: #e1f8fa;
  display: grid;
  grid-template-columns: 40px 150px;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
#cp #product dd div p {}
#cp #product dd div figure {
}
@media screen and (max-width:767px) {
  #cp #product dd div {
    padding: 15px 0;
    border-radius: 10px;
    grid-template-columns: 40px 150px;
    gap: 10px;
  }
}

/* 賞品 */
/* ======================================== */
/* #cp #prize {} */
#cp #prize strong {
  width: 64px;
}
#cp #prize .contents__group {
  margin-bottom: 30px;
  border-radius: 15px;
  background-color: #e1f8fa;
}
#cp #prize .contents__group:last-child {
  margin-bottom: 0;
}
#cp #prize .contents__group h4 {
  padding: 0.5em;
  font: 800 20px / 1.5 var(--font_fm-main);
  color: #FFFFFF;
  border-radius: 15px 15px 0 0;
  background-color: #EA5C59;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
#cp #prize .contents__group h4 strong {
  width: fit-content;
  padding: 0.4em 0.8em;
  font: 800 20px / 1.0 var(--font_fm-main);
  color: #EA5C59;
  border-radius: 10px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cp #prize .contents__group h4 strong > span {
  display: block;
}
#cp #prize .contents__group h4 b {
  font: 800 20px / 1.5 var(--font_fm-main);
}
#cp #prize .contents__group small {
  padding: 1em 30px 2em 30px;
  text-align: right;
  font: 700 12px / 1.5 var(--font_fm-main);
}
#cp #prize .contents__group .small2 {
  padding: 0.5em 0;
  text-align: left;
  font: 500 12px / 1.5 var(--font_fm-main);
  text-indent: -1em;
  padding-left: 1em;
}



@media screen and (max-width:767px) {
  #cp #prize strong {
    width: 45px;
  }
  #cp #prize .contents__group h4 {
    font: 800 16px / 1.5 var(--font_fm-main);
    border-radius: 10px 10px 0 0;
    align-items: stretch;
    gap: 0.5em;
  }
  #cp #prize .contents__group h4 strong {
    padding: 0.4em 0.8em;
    font: 800 16px / 1.0 var(--font_fm-main);
    border-radius: 5px;
  }
  #cp #prize .contents__group h4 b {
    margin: auto 0;
    font: 800 14px / 1.35 var(--font_fm-main);
    flex: 1;
  }
  #cp #prize .contents__group small {
    padding: 0.4em 15px 3em 15px;
    font: 700 10px / 1.5 var(--font_fm-main);
  }
}

#cp #prize .contents__grid {
  padding: 30px 30px 0px 30px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
#cp #prize .contents__grid li {
  width: 100%;
  padding: 30px;
  margin: 0 auto;
  border-radius: 15px;
  background-color: #FFFFFF;
}
#cp #prize .contents__grid li h5 {
  width: min(250px, 100%);
}

#cp #prize .wcs {
	text-align: center;
  padding: 30px 30px 0px 30px;
  margin: 0 auto;
  gap: 30px;
}
#cp #prize .wcs .wcsarea {
  width: 100%;
  padding: 30px;
  margin: 0 auto;
  border-radius: 15px;
  background-color: #FFFFFF;
}
#cp #prize .wcs .wcsarea h5 {
  width: min(250px, 100%);
  padding-bottom: 30px;
  margin: 0 auto;
}

.quoimg {
	display: flex;
	justify-content: center;
	width: 100%;

}
.quoimg .quo1 {
	width: 40%;
	text-align: right;
}
.quoimg .quo1 img {
	width: 80%;
}
.quoimg .quo2 {
	width: 60%;
	text-align: left;
}


#cp #prize .contents__grid li p {
  margin: 0 auto;
  text-align: center;
  font: 500 16px / 1.5 var(--font_fm-main);
  letter-spacing: -0.01em;
}
@media screen and (max-width:767px) {
  #cp #prize .contents__grid {
    padding: 15px 15px 0px 15px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    gap: 15px;
  }
  #cp #prize .contents__grid li {
    padding: 15px;
    border-radius: 10px;
  }
  #cp #prize .contents__grid li h5 {
  }
  #cp #prize .contents__grid li p {
    font: 500 12px / 1.5 var(--font_fm-main);
  }
  
  
  #cp #prize .wcs {
    padding: 15px 15px 0px 15px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    gap: 15px;
  }
  
  #cp #prize .wcs .wcsarea {
    padding: 15px;
    border-radius: 10px;
}
#cp #prize .wcs .wcsarea h5 {
  padding-bottom: 10px;
}



 .quoimg {
	 display: block;
}
.quoimg .quo1 {
	width: 100%;
}
.quoimg .quo2 {
	width: 100%;
	font: 500 12px / 1.5 var(--font_fm-main);
}

  
  
}

#cp .font__nomal {
  font: 800 200% / 1.5 var(--font_fm-main);
}
#cp .font__large {
  font: 800 300% / 1.0 var(--font_fm-main);
}
#cp .font__small {
  font: 800 max(10px, 133%) / 2.25 var(--font_fm-main);
}

/* ===========================================
 * ボタン
 * ======================================== */
#cp .btn__wrap {
  width: 100%;
  padding: 80px 0 0 0;
  margin: 0 auto;
  background-color: #e1f8fa;
}
#cp .btn__wrap .btn__inner {
  width: min(100%, 1000px);
  margin: 0 auto;
}
#cp .btn__wrap .btn__inner a {
  width: fit-content;
  margin: 0 auto;
  padding: 1em 4em;
  text-align: center;
  font: 700 24px / 1.5 var(--font_fm-main);
  color: #FFFFFF;
  border-radius: 2em;
  background-color: #09d1dd;
  display: block;
}
@media screen and (max-width:767px) {
  #cp .btn__wrap {
    padding: 30px 0 0 0;
  }
  #cp .btn__wrap .btn__inner {
    width: min(84%, 750px);
  }
  #cp .btn__wrap .btn__inner a {
    padding: 1em 1.5em;
    font: 700 14px / 1.5 var(--font_fm-main);
  }
}
@media screen and (max-width:320px) {
  #cp .btn__wrap .btn__inner a {
    font: 700 12px / 1.5 var(--font_fm-main);
  }
}