@charset "UTF-8";
/*=========================================================
#
# index
# 01：基本設定
# 02：共通パーツ
# 03：左側画像設定
# 04：メインコンテンツ部分
#  _04-01：ヘッダー部分
#  _04-02：キャンペーン概要
#  _04-03：応募方法
#  _04-04：レシートの撮影方法
#  _04-05：注意事項
# 05：フッター部分
# 06：スマホ設定
#  _06-01：PC時の左側固定画像の解除
#  _06-02：ヘッダー部分
#  _06-03：キャンペーン概要
#  _06-04：応募方法
#  _06-05：レシートの撮影方法
#  _06-06：注意事項
#
=========================================================*/


/*=========================================================

　01：基本設定

=========================================================*/
html {
  scrollbar-gutter: stable;
  height: 100%;
}
@media (width >= 768px) {
  html {
    /* 1rem = 10px設定*/
    font-size: 0.625vw;
  }
}
@media (width < 768px) {
  html {
    /* 1rem = 10px設定*/
    font-size: 1.3333333333vw;
  }
}

/*=========================================================

　02：共通パーツ

=========================================================*/
body {
background:#000;
color: #fff;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight:500;
font-style: normal;
letter-spacing: normal;
margin:0px;
padding:0px;
height: 100%;
overflow: hidden; /* ページ全体はスクロールさせない */
}
body.is-fixed {
overflow: clip;
}

br.pc {
display: block;
}
br.sp {
display: none;
}
.wrapper {
height: 100vh;
width: fit-content;
margin: 0 auto;
display: flex;
align-items: flex-start;
gap: 120px;
}
.pagetop-fireball {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;

width: 70px;
height: 70px;

padding: 0;
border: none;
background: transparent;
cursor: pointer;

animation: pagetopFireballFloat 3s ease-in-out infinite;
}

.pagetop-fireball img {
display: block;
width: 100%;
height: auto;
pointer-events: none;
}

@keyframes pagetopFireballFloat {
0% {transform:translate(0, 0) rotate(0deg);}
25% {
transform: translate(2px, -4px) rotate(1.5deg);
}

50% {
transform: translate(-2px, -7px) rotate(-1.5deg);
}

75% {
transform: translate(2px, -3px) rotate(1deg);
}

100% {
transform: translate(0, 0) rotate(0deg);
}
}

/*=========================================================

　03：左側画像設定

=========================================================*/
.site_image{
  height: 100vh;
  flex: 0 0 auto;

  position: sticky;
  top: 0;
}
.site_image img {
  display: block;
  height: 100vh;
  width: auto;
}

/*=========================================================

　04：メインコンテンツ部分

=========================================================*/
/*---------------------------------------------------------

　04-01：ヘッダー部分

---------------------------------------------------------*/
.container{
width: 500px;
flex: 0 0 500px;
height: 100vh;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.container::-webkit-scrollbar {
display: none; /* Chrome / Safari */
}
.container header{
display:flex;
flex-wrap: wrap;
margin:0px;
padding:0px;
}
.container header h1{
max-width:90%;
order:2;
margin:0px auto 0px auto;
padding:0px;
}
.container header h1 img{
width:100%;
}
.container header dl{
order:1;
max-width:90%;
margin:0px auto;
}
.container header dt img,
.container header dd img{
width:100%;
}
.container header p{
order:3;
}
.container header p:nth-of-type(1){
max-width:100%;
margin:0px auto;
}
.container header p:nth-of-type(2){
max-width:50%;
margin:0px auto;
}
.container header p:nth-of-type(3){
max-width:80%;
margin:0px auto 0px auto;
}
.container header p img{
width:100%;
}

/*---------------------------------------------------------

　04-02：キャンペーン概要

---------------------------------------------------------*/
section.target_item{
width:90%;
position:relative;
margin:0px auto;
}
section.target_item h2{
max-width:70%;
margin:0px auto;
padding:0px;
}
section.target_item h2:nth-of-type(2){
max-width:50%;
margin:0px auto;
padding:0px;
}
section.target_item h2 img{
width:100%;
}
section.target_item p{
text-align: center;
font-size:22px;
line-height:1.6;
margin:0px 0px 45px 0px;
}
section.target_item p span{
color:#ff0;
}
section.target_item p em{
font-size:14px;
font-style:normal;
}
section.target_item dl{
max-width:90%;
font-size:20px;
text-align: center;
margin:0px auto 40px auto;
}
section.target_item dt{
line-height:1.6;
}
section.target_item dt span{
font-size:14px;
line-height:1.6;
}
section.target_item dd{
font-size:14px;
}
section.target_item dd img{
width:100%;
display:block;
margin:15px 0px 10px 0px;
}
section.target_item figure.left{
max-width:80px;
position:absolute;
left:15px;
top:0px;
}
section.target_item figure.left img{
width:100%;
}
section.target_item figure.right{
max-width:80px;
position:absolute;
right:30px;
top:490px;
}
section.target_item figure.right img{
width:100%;
}

/*火の玉*/
.fireball {
opacity: 0;
transform: scale(0.8);
}
.fireball.is-visible {
animation:
fireballFadeIn 1.2s ease forwards,
fireballFloat 4s ease-in-out infinite 1.2s;
}

/* 登場演出 */
@keyframes fireballFadeIn {
0% {
opacity: 0;
transform: scale(0.7) translateY(30px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}

/* ゆらゆら漂う */
@keyframes fireballFloat {
0% {transform:translate(0px, 0px) rotate(0deg);}
20% {transform:translate(8px, -12px) rotate(4deg);}
40% {transform:translate(-6px, -24px) rotate(-3deg);}
60% {transform:translate(10px, -16px) rotate(5deg);}
80% {transform:translate(-4px, -8px) rotate(-2deg);}
100% {transform:translate(0px, 0px) rotate(0deg);}
}

/*---------------------------------------------------------

　04-03：応募方法

---------------------------------------------------------*/
section.flow{
width:90%;
position: relative;
margin:0px auto;
}
section.flow figure{
position:absolute;
top:0px;
left:15px;
max-width:100px;
}
section.flow figure img{
width:100%;
}
section.flow h2{
max-width:50%;
margin:0px auto;
padding:0px;
}
section.flow h2 img{
width:100%;
}
section.flow ol{
max-width:100%;
margin:-25px auto 20px auto;
padding:0px;
}
section.flow ol li{
position:relative;
list-style-type:none;
margin:0px;
padding:0px;
}
section.flow ol li::after{
content:"";
background:url(../img/common/flow_arrow.webp);
background-size:50px 27px;
display:block;
width:50px;
height:27px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom:-15px;
}
section.flow ol li:last-of-type::after{
content:"";
background:none;
}
section.flow ol li img{
width:100%;
}
section.flow p{
max-width:80%;
margin:0px auto;
}
section.flow p img{
width:100%;
}
section.flow p.cv_btn{
margin:0px auto 100px auto;
}

/*---------------------------------------------------------

　04-04：レシートの撮影方法

---------------------------------------------------------*/
.how_to_film{
background:#fff;
color:#000;
position: relative;
border-radius: 100px;
text-align: center;
padding:50px 0px 0px 0px;
}
.how_to_film h2{
font-size:34px;
margin:0px 0px 30px 0px;
}
.how_to_film::before{
content:"";
background-image:url("../img/common/character03.webp");
display:inline-block;
background-size: contain;
vertical-align: middle;
width:70px;
height:48px;
position:absolute;
top:-36px;
right: 0;
left: 0;
margin: 0 auto;
}
.how_to_film figure{
max-width:80%;
margin:0px auto;
padding:0px;
}
.how_to_film figure img{
max-width:100%;
}
.how_to_film p{
font-size:20px;
line-height:1.6;
}
.how_to_film > ul{
border-top:1px dashed #999;
width:calc(90% - 30px);
padding:30px 0px 20px 30px;
margin:30px auto 0px auto;
}
.how_to_film > ul li{
font-size:19px;
line-height:1.9;
text-align: left;
}
.how_to_film > ul li::before{
border:3px solid #EA1C24;
display:inline-block;
border-radius: 100px;
width:12px;
height:12px;
content:"";
vertical-align: middle;
margin-left:-23px;
margin-right:5px;
}
.how_to_film > ul li:nth-of-type(6){
max-width:90%;
margin:0px auto;
padding:10px 0px;
}
.how_to_film > ul li:nth-of-type(6) img{
width:100%;
}
.how_to_film > ul li:nth-of-type(6)::before{
content:"";
display:none;
}
.how_to_film > ul li:nth-of-type(7){
line-height:1.4;
}
.how_to_film p span,
.how_to_film li span{
background:#ea1c24;
color:#fff;
font-weight:bold;
width:30px;
height:30px;
border-radius: 70px;
padding:0px 10px 3px 10px;
}
.how_to_film .bad{
background:#E6E6E6;
border-radius:0px 0px 100px 100px;
padding:30px 0px;
}
.how_to_film .bad h3{
font-size:34px;
width:160px;
position:relative;
font-weight: normal;
margin:0px auto 30px auto;
padding:0px 0px 0px 40px;
}
.how_to_film .bad h3::before{
content:"×";
font-size:50px;
color:#0071B9;
position:absolute;
left:0px;
top:-10px;
}
.how_to_film .bad ul{
display:flex;
flex-wrap: wrap;
justify-content:center;
width:90%;
margin:0px auto;
}
.how_to_film .bad ul li{
max-width:calc(50% - 10px);
margin:0px 10px 35px 0px;
}
.how_to_film .bad ul li:nth-of-type(even){
margin:0px 0px 20px 10px;
}
.how_to_film .bad ul li:nth-of-type(9){
max-width:60%;
margin:0px auto 40px auto;
}
.how_to_film .bad ul li img{
width:100%;
}
.how_to_film .bad ul li dd{
font-size:16px;
line-height:1.5;
padding:0px 5px;
}
.how_to_film .bad p{
background:url("../img/common/icon_exclamation.webp") left center no-repeat;
background-size:50px auto;
text-align: left;
color:#EA1C24;
margin:0px 0px 0px 50px;
padding:0px 0px 0px 60px;
}


/*---------------------------------------------------------

　04-05：注意事項

---------------------------------------------------------*/
section.caution{
background:url("../img/common/character02.png") center top no-repeat;
background-size:130px auto;
padding:140px 0px 50px 0px;
margin:50px 0px 0px 0px;
}
section.caution h2{
max-width:50%;
margin:0px auto;
padding:0px;
}
section.caution h2 img{
width:100%;
}
section.caution ul{
max-width:95%;
margin:0px auto;
padding:0px;
}
section.caution ul li{
list-style-type:disc;
font-size:18px;
line-height:1.7;
margin:0px 0px 0px 25px;
padding:0px 0px 0px 0px;
}
section.caution .contact{
position:relative;
border:1px solid #fff;
padding:15px;
margin:40px 10px 30px 10px;
}
section.caution .contact h3{
font-size:20px;
font-weight:bold;
text-align: center;
width:100%;
position: absolute;
top:-10px;
right: 0;
left: 0;
margin: 0 auto;
}
section.caution .contact:before{
content:"";
display: inline-block;
border:1px solid #000;
width:40%;
position: absolute;
top:-1px;
right: 0;
left: 0;
margin: 0 auto;
}
section.caution .contact dl{
display:flex;
justify-content:center;
font-size:17px;
line-height:2.0;
}

/*=========================================================

　05：フッター部分

=========================================================*/
footer{
background:#999;
color:#fff;
font-size:16px;
text-align:center;
padding:30px 0px;
}


/*=========================================================

　06：スマホ設定

=========================================================*/
@media screen and (max-width: 768px) {
br.pc {
display: none;
}
br.sp {
display: inline;
}

/*---------------------------------------------------------

　06-01：PC時の左側固定画像の解除

---------------------------------------------------------*/
html,
body {
overflow: auto;
}
.wrapper {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
.site_image {
display: none;
}
.container {
width: 100%;
flex: none;
height: auto;
min-height: auto;
overflow: visible;
}

/*---------------------------------------------------------

　06-02：ヘッダー部分

---------------------------------------------------------*/
.container header{
background:url("../img/common/main_image02.webp") left top no-repeat;
background-size:contain;
}
.pagetop-fireball {
right: 0px;
bottom: 16px;
width: 70px;
height: 70px;
}
.container header h1{
margin:0px auto 120px auto;
}
.container header p:nth-of-type(2){
max-width:60%;
margin:0px auto;
}
.container header p:nth-of-type(3){
max-width:90%;
margin:0px auto 0px auto;
}

/*---------------------------------------------------------

　06-03：キャンペーン概要

---------------------------------------------------------*/
section.target_item{
width:90%;
position:relative;
margin:0px auto;
}
section.target_item h2{
max-width:80%;
margin:0px auto;
padding:0px;
}
section.target_item h2:nth-of-type(2){
max-width:55%;
margin:0px auto;
padding:0px;
}
section.target_item h2 img{
width:100%;
}
section.target_item p{
text-align: center;
font-size:18px;
line-height:1.7;
margin:0px 0px 45px 0px;
}
section.target_item dl{
max-width:90%;
font-size:18px;
text-align: center;
margin:0px auto 40px auto;
}
section.target_item dt{
line-height:1.4;
}
section.target_item dd{
font-size:14px;
}
section.target_item dd img{
width:100%;
display:block;
margin:15px 0px 10px 0px;
}
section.target_item figure.left{
max-width:80px;
position:absolute;
left:-10px;
top:0px;
}
section.target_item figure.right{
max-width:80px;
position:absolute;
right:10px;
top:400px;
}

/*---------------------------------------------------------

　06-04：応募方法

---------------------------------------------------------*/
section.flow{
width:100%;
position: relative;
margin:0px auto;
}
section.flow figure{
position:absolute;
top:0px;
left:10px;
max-width:90px;
}
section.flow h2{
max-width:50%;
margin:0px auto;
padding:0px;
}
section.flow h2 img{
width:100%;
}

/*---------------------------------------------------------

　06-05：レシートの撮影方法

---------------------------------------------------------*/
.how_to_film{
background:#fff;
color:#000;
position: relative;
border-radius: 100px;
text-align: center;
padding:30px 0px 0px 0px;
}
.how_to_film h2{
font-size:26px;
font-weight:700;
margin:0px 0px 30px 0px;
}
.how_to_film::before{
content:"";
background-image:url("../img/common/character03.webp");
display:inline-block;
background-size: contain;
vertical-align: middle;
width:70px;
height:48px;
position:absolute;
top:-36px;
right: 0;
left: 0;
margin: 0 auto;
}
.how_to_film figure{
max-width:80%;
margin:10px auto 0px auto;
padding:0px;
}
.how_to_film figure img{
max-width:100%;
}
.how_to_film p{
font-size:16px;
line-height:1.6;
}
.how_to_film > ul{
border-top:1px dashed #999;
width:90%;
padding:30px 0px 20px 0px;
margin:30px auto 0px auto;
}
.how_to_film > ul li{
font-size:15px;
line-height:1.9;
text-align: left;
padding-left:25px;
}
.how_to_film > ul li::before{
border:3px solid #EA1C24;
display:inline-block;
border-radius: 100px;
width:12px;
height:12px;
content:"";
vertical-align: middle;
margin-left:-23px;
margin-right:5px;
}
.how_to_film > ul li:nth-of-type(6){
max-width:95%;
margin:0px 0px 0px auto;
padding:10px 0px;
}
.how_to_film > ul li:nth-of-type(6) img{
width:100%;
}
.how_to_film > ul li:nth-of-type(6)::before{
content:"";
display:none;
}
.how_to_film > ul li:nth-of-type(7){
line-height:1.4;
}
.how_to_film p span,
.how_to_film li span{
background:#ea1c24;
color:#fff;
font-weight:bold;
width:30px;
height:30px;
border-radius: 70px;
padding:0px 8px 2px 8px;
}
.how_to_film .bad h3{
font-size:34px;
font-weight:600;
width:160px;
position:relative;
margin:0px auto 30px auto;
padding:0px 0px 0px 40px;
}
.how_to_film .bad h3::before{
content:"×";
font-size:50px;
color:#0071B9;
position:absolute;
left:0px;
top:-10px;
}
.how_to_film .bad ul{
display:flex;
flex-wrap: wrap;
justify-content:center;
width:90%;
margin:0px auto;
}
.how_to_film .bad ul li{
max-width:calc(50% - 10px);
margin:0px 10px 20px 0px;
}
.how_to_film .bad ul li:nth-of-type(even){
margin:0px 0px 20px 10px;
}
.how_to_film .bad ul li:nth-of-type(9){
max-width:60%;
margin:0px auto 40px auto;
}
.how_to_film .bad ul li dd{
font-size:13px;
line-height:1.5;
padding:0px 5px;
}
.how_to_film .bad p{
background:url("../img/common/icon_exclamation.webp") left center no-repeat;
background-size:40px auto;
text-align: left;
font-size:15px;
color:#EA1C24;
margin:0px 0px 0px 35px;
padding:0px 0px 0px 50px;
}


/*---------------------------------------------------------

　06-06：注意事項

---------------------------------------------------------*/
section.caution{
background:url("../img/common/character02.png") center top no-repeat;
background-size:130px auto;
padding:140px 0px 50px 0px;
margin:50px 0px 0px 0px;
}
section.caution h2{
max-width:50%;
margin:0px auto;
padding:0px;
}
section.caution h2 img{
width:100%;
}
section.caution ul{
max-width:90%;
margin:0px auto;
padding:0px;
}
section.caution ul li{
list-style-type:disc;
font-size:15px;
line-height:1.7;
margin:0px 0px 0px 25px;
padding:0px 0px 0px 0px;
}
section.caution .contact dl{
font-size:14px;
}















}