@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Sans+JP:wght@100..900&display=swap");
body,
input,
textarea {
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: #5F5651;
}

body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  background: url(../img/bg.jpg);
  background-size: 50%;
  background-position: center top;
  font-weight: 500;
}
@media (min-width: 768px) {
  body {
    background-size: 15%;
  }
}
@media (min-width: 768px) {
  body {
    width: 100%;
  }
}
body p,
body span,
body li,
body dt,
body dd,
body a {
  rotate: -0.03deg;
}

img {
  width: 100%;
}

.br-sp {
  display: block;
}
@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

.contact {
  text-align: center;
}
.contact strong {
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: bold;
}
.contact small {
  display: block;
  text-align: center;
}

@media (min-width: 768px) {
  .center_pc {
    text-align: center;
  }
}

.itemLists {
  font-weight: 500;
}
@media (min-width: 768px) {
  .itemLists .font14 {
    font-size: 1.4rem;
  }
}
@media (min-width: 768px) {
  .itemLists .mt40 {
    margin-top: 40px !important;
  }
}

@media (min-width: 768px) {
  #rule.mv .itemLists > dd {
    padding-inline: 28px;
  }
}

header.mv .hinner {
  justify-content: center;
}
header.mv .hinner h1 {
  padding-inline: 25px;
  max-width: 745px;
}
header.mv .hinner h1 img {
  width: 100%;
  height: auto;
}

#rule > article {
  padding-bottom: calc(clamp(4rem, 6vw, 8rem) - clamp(1.6rem, 3vw, 3.2rem));
}

#method,
#rule {
  font-family: "Noto sans JP", sans-serif;
}

.fv {
  position: relative;
}
.fv_box {
  background: url(../img/index/fv_bg.png) no-repeat;
  background-size: cover;
  background-position: -81.3333333333vw center;
  aspect-ratio: 750/785;
  overflow: clip;
}
@media (min-width: 768px) {
  .fv_box {
    background-size: cover;
    background-position: center;
    height: 40.625vw;
    min-height: 780px;
    aspect-ratio: auto;
  }
}
.fv_box > img {
  width: min(100%, 717px);
  margin-right: 0;
  margin-left: auto;
  position: absolute;
  top: 0;
  left: calc(50% + 4vw);
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .fv_box > img {
    left: calc(50% + min(4.6875vw, 48px));
  }
}
.fv_txt {
  height: 61.6vw;
}
@media (min-width: 768px) {
  .fv_txt {
    height: 271px;
  }
}
.fv_txt > div {
  background: url(../img/index/txt_bg_sp.png) no-repeat;
  background-size: 100%;
  width: min(100% - 28px, 811px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 17.0666666667vw;
  min-height: 77.3333333333vw;
  transform: translateY(max(-17.3333333333vw, -130px));
}
@media (min-width: 768px) {
  .fv_txt > div {
    background: url(../img/index/txt_bg_pc.png) no-repeat;
    background-size: 100%;
    padding-top: 100px;
    min-height: 360px;
  }
}
.fv_txt > div p {
  color: #16492D;
  text-align: center;
  font-size: 3.7333333333vw;
  font-weight: 500;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .fv_txt > div p {
    font-size: min(2.380952381vw, 20px);
  }
}
.fv_txt > div p span {
  color: #DC2C2C;
  font-weight: 500;
}
.fv_txt > div p a {
  color: #DC2C2C;
  text-decoration: underline;
  font-weight: 500;
}

.anchor {
  background: url(../img/index/anchor/bg.png) repeat-x;
  background-size: cover;
  background-position: center;
  min-height: 109.3333333333vw;
  padding-block: 6.6666666667vw;
}
@media (min-width: 768px) {
  .anchor {
    min-height: 820px;
    padding-block: 60px;
  }
}
.anchor > strong {
  display: block;
  width: min(100% - 28px, 804px);
  margin-left: auto;
  margin-right: auto;
}
.anchor > ul {
  width: min(100% - 28px, 896px);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.6666666667vw 0;
  margin-top: 3.7333333333vw;
}
@media (min-width: 768px) {
  .anchor > ul {
    margin-top: 0;
    gap: 26px 30px;
  }
}
.anchor > ul li {
  width: 33.3333333333%;
}
@media (min-width: 768px) {
  .anchor > ul li {
    width: min((100% - 60px) / 3, 244px);
  }
}

.items {
  padding-top: clamp(2rem, 3vw, 4.8rem);
  padding-bottom: clamp(5rem, 7vw, 10rem);
}
.items ul {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3vw, 4.8rem);
  width: min(100% - 24px, 896px);
  margin-left: auto;
  margin-right: auto;
}
.items ul li {
  transform: translateX(-1.8666666667vw);
}
@media (min-width: 768px) {
  .items ul li {
    transform: translateX(-7px);
  }
}
.items > p {
  margin-top: clamp(3.5rem, 5vw, 7rem);
  width: min(100% - 28px, 896px);
  margin-left: auto;
  margin-right: auto;
}

/*contents*/
main{
    width: 94vw;
    max-width: 1160px;
    margin: 0 auto;
    background: #fff;
    margin-top: min(5vw , 80px);
    margin-bottom: min(5vw , 80px);
    padding: 5vw 3vw;
}

@media (min-width: 768px) {
 main{
    padding: min(5vw , 65px) min(5vw , 80px);
}
}

.oubo{
    text-align: center;
    margin: min(3vw , 40px) auto;
}

.oubo span{
    font-weight: 600;
    text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.7em; /* 線の太さ */
  text-decoration-color: #ffff17; /* 線の色 */
  text-underline-offset: -0.3em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

.notes{
    font-size: 0.7em;
    text-align: center;
}

@media (min-width: 768px) {
    .oubo{
        font-size: min(2vw,24px);
        line-height: 2;
    }
    
    .notes{
        font-size: min(1.6vw,16px);
    }
}

.btn_app{
    margin: min(5vw,50px) 0;
    background: url("../img/sp/sp_app_back.png") repeat-x top center;
    background-size: contain;
    padding: 3vw;
}

.btn_app a{
    display: block;
    width: 90%;
    margin: min(3vw,20px) auto 0;
}

.appimg{
    width: 90%;
    max-width: 530px;
    margin: min(5vw,40px) auto !important;
}

@media (min-width: 768px) {
    .btn_app{
        margin: min(5vw,50px) 0;
    background: url("../img/pc/pc_app_back.png") repeat-x top center;
    background-size: cover;
    padding: min(3vw,38px) min(6vw,100px);
    }
    
    .btn_app a{
        transition: 0.7s;
    }
    
    .btn_app a:hover{
        opacity: 0.5;
    }
}

@media (min-width: 768px) {
 #rule > article{
    padding-bottom: 0;
}
}

.participation_method{
    max-width: 800px;
    margin: 0 auto;
}

.contents #gift a{
	display: block;
	text-align: center;
	transition: all ease 0.3s;
}

.contents #gift a:hover{
	opacity: 0.6;
}

.contents #gift a img{
	border-radius: 5em;
	box-shadow: 5px 5px 3px 0 rgba(0, 0, 0, 0.25);
	display: inline-block;
	width: auto;
	margin: clamp(20px, 1.875vw, 24px) auto 0;
	height: clamp(40px, 6.25vw, 80px);
}