@charset "UTF-8";
body {
    font-family: "Noto Sans JP", system-ui;
    font-weight: 400;
    background-image: url(../img/bg_stripe.png);
    background-repeat: repeat;
    background-size: 14px;
    margin: 0;
}
h1,h2,h3,h4,h5,h6,p {
    margin: 0;
}
img {
    vertical-align: top;
}
a {
    color: #191919;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent; /* 強調をなくす */
}
a:hover {
    opacity: .65;
}
ul,tr,th,td {
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
ul.marker01 {
	list-style-type: none;
	margin-left: 1.25em;
}
ul.marker01 li:before {
	content: '※';
	margin-left: -1.25em;
    margin-right: .25em;
}
tr {
    display: flex;
}
th {
    margin-right: .5em;
    width: 5em;
    font-weight: normal;
}
td {
    flex: 1;
}
span {
    display: inline-block;
}
.base {
    max-width: 1060px;
    margin: 0 auto;
}
.base.wide {
    max-width: 1150px;
}
.padding {
    padding-left: 10px;
    padding-right: 10px;
}
.main_logo {
    width: 254px;
}
.no_scroll {
	overflow: hidden;
}
/*--------------------------------------------
ヘッダーエリア
--------------------------------------------*/
header .base {
    background-image: url(../img/bar_dot.svg);
    background-repeat: repeat-x;
    background-size: 21px;
    background-position: bottom;
    /* display: flex; */
    /* justify-content: space-between; */
    padding-top: 15px;
    padding-bottom: 18px;
    box-sizing: border-box;
    position: relative;
    display: none;
}
header .icon_btn {
    position: absolute;
    right: 0;
    width: 67px;
}
@media (max-width: 380px) {
    header .base {
        height: 100px;
    }
    header .main_logo {
        width: 60vw;
        height: auto;
        margin: auto 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    header .icon_btn {
        margin-top: 5px;
        width: 55px;
    }
}
/*--------------------------------------------
メインエリア
--------------------------------------------*/
#main {
    /* padding-top: 19px; */
}
#main img {
    width: 100%;
}
#main img:first-child {
    margin-bottom: 27px;
}
#main h1 {
    padding: 19px 0 27px;
    margin-top: 49px;
    font-family: "Zen Maru Gothic", system-ui;
    font-weight: 700;
    font-size: 40px;
    line-height: 53px;
    color: #E85583;
    text-align: center;
    background-image :
        url(../img/bar_dot.svg),  /* 上の線 */
        url(../img/bar_dot.svg),  /* 下の線 */
        url(../img/main_title_icon_l.svg),
        url(../img/main_title_icon_r.svg);
    background-size:
        21px,  /* 上の線 */
        21px,  /* 下の線 */
        125px 96px,
        125px 96px;
    background-position:
        top,  /* 上の線 */
        bottom,  /* 下の線 */
        left 50px center,
        right 50px center;
    background-repeat:
        repeat-x,  /* 上の線 */
        repeat-x,  /* 下の線 */
        no-repeat,
        no-repeat;
}
#main h1 br.sp {
    display: none;
}
#main .description {
    background-color: #f8f0f6;
    padding: 30px 175px;
    box-sizing: border-box;
    /* text-align: center; */
    margin-top: 15px;
    margin-bottom: 45px;
    border-radius: 10px;
    line-height: 1.75em;
}
@media (max-width: 1024px) {
    #main h1 {
        padding: 22px 0 22px;
        margin-top: 30px;
        background-position:
            top,  /* 上の線 */
            bottom,  /* 下の線 */
            left 0 bottom 22px,
            right 0 bottom 22px;
    }
    #main h1 br.tab {
        display: inline-block;
    }
}
@media (max-width: 800px) {
    #main h1 {
        font-size: 32px;
        line-height: 42px;
        background-size:
            21px,  /* 上の線 */
            21px,  /* 下の線 */
            80px 61px,
            80px 61px;
        background-position:
            top,  /* 上の線 */
            bottom,  /* 下の線 */
            left 0 bottom 22px,
            right 0 bottom 22px;
    }
    #main .description {
        padding: 30px 15px;
        margin-top: 20px;
        margin-bottom: 25px;
    }
}
@media (max-width: 600px) {
    #main h1 {
        font-size: 26px;
        line-height: 35px;
        background-size:
            21px,  /* 上の線 */
            21px,  /* 下の線 */
            61px 47px,
            61px 47px;
        background-position:
            top,  /* 上の線 */
            bottom,  /* 下の線 */
            left 0 bottom 22px,
            right 0 bottom 22px;
    }
}
@media (max-width: 500px) {
    #main img:first-child {
        margin-bottom: 14px;
    }
    #main h1 br.sp {
        display: inline-block;
    }
}
@media (max-width: 360px) {
    #main h1 {
        font-size: 22px;
        line-height: 29px;
        background-size:
            21px,  /* 上の線 */
            21px,  /* 下の線 */
            50px 38px,
            50px 38px;
        background-position:
            top,  /* 上の線 */
            bottom,  /* 下の線 */
            left 0 bottom 22px,
            right 0 bottom 22px;
    }
}
/*--------------------------------------------
くじ情報エリア
--------------------------------------------*/
#kuji_info .base {
	overflow: hidden;
	display: flex;
	justify-content: center;
	width: 100%;
    box-sizing: border-box;
}
#kuji_info .base > *:not(:last-child) {
	margin-right: 20px;
}
#kuji_info .box {
	max-width: 250px;
	border-radius: 10px;
	padding: 37px 30px 26px;
	width: 100%;
	text-align: center;
    background-color: #F0C9DF;
    box-sizing: border-box;
}
	#kuji_info .box h5 {
		margin-bottom: 20px;
	}
	#kuji_info .box h6:nth-of-type(2) {
		margin-top: 9px;
	}
	#kuji_info .box .small {
		margin-top: 18px;
		font-size: 0.8rem;
		line-height: 1.2rem;
	}
#kuji_info h5 {
    background-color: #191919;
    color: #fff;
    font-weight: 500;
	border-radius: 10px;
	display: inline-block;
	padding: 4px 20px;
	font-size: 1rem;
}
#kuji_info h6 {
    background-color: #fff;
    font-weight: bold;
	font-size: 14px;
	border-radius: 6px;
	padding: 0 10px;
}
@media (max-width: 1024px) {
	#kuji_info .base > *:not(:last-child) {
		margin-right: 1%;
	}
	#kuji_info .box {
		padding: 37px 3% 22px;
	}
	#kuji_info .box p {
		font-size: .9rem;
	}
}
@media (max-width: 820px) {
	#kuji_info .base {
		/* padding: 0 15px; */
		justify-content: space-between;
		flex-wrap: wrap;
		max-width: 535px;
		margin: 0 auto;
	}
	#kuji_info .box {
		width: calc(50% - 2%);
	}
	#kuji_info .box:not(:last-child) {
		margin-right: 0;
	}
	#kuji_info .box:nth-child(n + 3) {
		margin-top: 4%;
	}
	#kuji_info .box .small {
		font-size: .7rem;
	}
}
/*--------------------------------------------
注意書きエリア
--------------------------------------------*/
.noto_area {
    display: flex;
    justify-content: center;
}
.noto_area p,
.noto_area ul {
    display: inline-block;
    text-align: left;
    color: #191919;
    padding: 20px 175px 30px;
    border-radius: 10px;
}
@media (max-width: 640px) {
    .noto_area p,
    .noto_area ul {
        padding: 15px 10px;
        font-size: .9rem;
    }
}
/*--------------------------------------------
各賞エリア
--------------------------------------------*/
#prize_area {
    padding-top: 14px;
    padding-bottom: 86px;
}
#prize_area a:hover {
    opacity: .85;
}
.prize {
    text-align: center;
    margin-top: 70px;
    position: relative;
    margin-left: 44px;
    margin-right: 44px;
}
.prize:not(:last-child) {
    background-image: url(../img/bar_dot.svg);
    background-size: 21px;
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom: 77px;
}
.prize .title {
    font-size: 94px;
    font-family: "Zen Maru Gothic", system-ui;
    font-weight: 700;
    line-height: 53px;
    margin-bottom: 38px;
}
.prize .title::before {
    content: "";
    display: inline-block;
    width: 59px;
    height: 60px;
    background-image: url(../img/star_icon_l.svg);
    background-size: 59px 60px;
    background-repeat: no-repeat;
    margin-right: 23px;
    margin-bottom: -4px;
}
.prize .title::after {
    content: "";
    display: inline-block;
    width: 59px;
    height: 60px;
    background-image: url(../img/star_icon_r.svg);
    background-size: 59px 60px;
    background-repeat: no-repeat;
    margin-left: 23px;
    margin-bottom: -4px;
}
.prize .title span {
    font-size: 50px;
    vertical-align: 4px;
}
.prize .num_area {
    width: 92px;
    height: 92px;
    color: #fff;
    font-size: 31px;
    text-align: center;
    font-family: "Zen Maru Gothic", system-ui;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding-bottom: 14px;
    margin-top: -19px;
    display: none;
}
.prize .num_area::before {
    content: "";
    display: block;
    position: absolute;
    background-image: url(../img/num_icon.svg);
    background-repeat: no-repeat;
    width: 136px;
    height: 110px;
    z-index: -1;
    left: 0;
    bottom: 0;
}
.prize .num_area span {
    font-size: 20px;
    display: block;
    margin-top: 5px;
}
.prize h2 {
    font-size: 24px;
}
.prize .description {
    max-width: 600px;
    text-align: left;
    margin-top: 26px;
    margin-bottom: 29px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
.prize .description > *:not(:last-child) {
    margin-bottom: 1em;
}
.prize img {
    max-width: 557px;
    width: 100%;
}
.prize .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.prize .list > * {
    width: calc(20% - 8px);
}
.prize .list > *:not(:nth-child(5)):not(:last-child) {
    margin-right: 10px;
}
.prize .list > *:nth-of-type(n+6) {
    margin-top: 10px;
}
.prize .list img {
    width: 100%;
}
@media (max-width: 1024px) {
    /* .prize .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    } */
    .prize .list > * {
        width: calc(47% - 8px);
        margin-left: 4px;
        margin-right: 4px;
    }
    /* .prize .list > *:nth-child(odd) {
    } */
    .prize .list > *:nth-of-type(n+3) {
        margin-top: 10px;
    }
}
@media (max-width: 600px) {
    #prize_area {
        padding-top: 0;
        padding-bottom: 64px;
    }
    .prize {
        margin-top: 45px;
        /* margin-top: 0px; */
        margin-left: 0px;
        margin-right: 0px;
    }
    .prize:not(:last-child) {
        padding-bottom: 48px;
    }
    .prize .num_area {
        transform: scale(0.74);
        right: 20px;
    }
    .prize .title {
        /* padding-top: 65px; */
        margin-bottom: 10px;
        font-size: 70px;
    }
    .prize .title::before {
        transform: scale(0.74);
        margin-right: 14px;
        margin-bottom: -10px;
    }
    .prize .title::after {
        transform: scale(0.74);
        margin-left: 14px;
        margin-bottom: -10px;
    }
    .prize .title span {
        font-size: 35px;
    }
    .prize p {
        margin-top: 21px;
        margin-bottom: 24px;
    }
}
/*--------------------------------------------
購入手順情報
--------------------------------------------*/
#step_info {
    background-color: #F6F2EA;
    border-radius: 40px;
    width: 100%;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 75px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#step_info h3 {
    display: inline-block;
    background-color: #191919;
    color: #fff;
    border-radius: 10px;
    font-size: 21px;
    line-height: 1;
    padding: 11px 34px;
    font-family: "Zen Maru Gothic", system-ui;
    font-weight: 700;
}
#step_info .list {
    display: inline-block;
    margin-top: 30px;
    margin-left: 15px;
    width: auto;
}
#step_info .list img {
    max-width: 176px;
    width: 100%;
    margin-top: 40px;
    float: left;
}
@media (max-width: 1060px) {
    #step_info {
        border-radius: 0;
    }
}
@media (max-width: 920px) {
    #step_info .list {
        margin-left: 45px;
        max-width: 560px;
    }
}
@media (max-width: 640px) {
    #step_info .list {
        margin-left: -15px;
        max-width: 354px;
    }
}
@media (max-width: 380px) {
    #step_info .list {
        margin-left: -15px;
        max-width: 285px;
    }
    #step_info .list img {
        max-width: 140px;
        margin-top: 30px;
    }
}
/*--------------------------------------------
購入リンクエリア
--------------------------------------------*/
#buy_link_area {
    background-color: #F0C9DF;
    padding-top: 114px;
    padding-bottom: 114px;
    margin: 80px 0 50px;
    background: linear-gradient(#F7D7EA, #BDE2F5);
}
#buy_link_area a {
    background-color: #E85583;
    padding: 42px 46px;
    border-radius: 33px;
    max-width: 660px;
    display: block;
    margin: 0 auto;
}
@media (max-width: 560px) {
    #buy_link_area {
        padding-top: 74px;
        padding-bottom: 74px;
        margin: 50px 0 50px;
    }
    #buy_link_area a {
        padding: 42px 10px;
    }
    #buy_link_area img {
        /* filter: drop-shadow(0 0 2px rgb(255, 255, 255)); */
    }
}
/*--------------------------------------------
フッターエリア
--------------------------------------------*/
footer {
    background-color: #F0C9DF;
    text-align: center;
    padding-top: 26px;
    padding-bottom: 142px;
}
footer ul {
    display: flex;
    justify-content: center;
    margin-top: 34px;
    margin-bottom: 32px;
}
footer li:not(:last-child)::after {
    content: "　|　";
}
footer small {
    font-size: 12px;
    opacity: .7;
}
@media (max-width: 945px) {
    footer ul {
        flex-wrap: wrap;
        flex-direction: column;
        /* margin-top: 34px;
        margin-bottom: 32px; */
    }   
    footer li {
        line-height: 2.5em;
    }
    footer li:not(:last-child)::after {
        content: "";
    }
}
/*--------------------------------------------
スクロール固定要素（購入ページリンク）
--------------------------------------------*/
#fix_buy_link_btn {
    font-family: "Zen Maru Gothic", system-ui;
    font-weight: 700;
    font-size: 36px;
    display: flex;
    max-width: 556px;
    height: 78px;
    padding: 0 35px;
    border: 2px solid #78646F;
    border-radius: 50px;
    position: fixed;
    bottom: 25px;
    margin: 0 auto;
    right: 0;
    left: 0;
    color: #E85583;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    z-index: 100;
    line-height: 1;
}
#fix_buy_link_btn::before {
    content: "";
    display: inline-block;
    background-image: url("../img/arrow_icon_l.svg");
    background-repeat: no-repeat;
    width: 67px;
    height: 36px;
    margin-right: 33px;
}
#fix_buy_link_btn::after {
    content: "";
    display: inline-block;
    background-image: url("../img/arrow_icon_r.svg");
    background-repeat: no-repeat;
    width: 67px;
    height: 36px;
    margin-left: 33px;
}
#fix_buy_link_btn:hover {
    filter: brightness(97%);
    opacity: 1;
}
@media (max-width: 560px) {
    #fix_buy_link_btn {
        font-size: 26px;
        height: 58px;
        padding: 0 5px;
        bottom: 22px;
        margin-left: 15px;
        margin-right: 15px;
    }
    #fix_buy_link_btn::before {
        width: 47px;
        height: 22px;
        margin-right: 2%;
    }
    #fix_buy_link_btn::after {
        width: 47px;
        height: 22px;
        margin-left: 2%;
    }
}
@media (max-width: 380px) {
    #fix_buy_link_btn {
        font-size: 20px;
    }
}
/*--------------------------------------------
スクロール固定要素（ページ上部へ）
--------------------------------------------*/
#totop {
    position: fixed;
    bottom: 40px;
    right: 7%;
    display: inline-block;
    z-index: 100;
}
#totop img {
    width: 50px;
}
#totop:hover {
    filter: brightness(97%);
    opacity: 1;
}
@media (max-width: 1060px) {
    #totop {
        right: 15px;
    }
}
@media (max-width: 800px) {
    #totop {
        bottom: 122px;
    }
}
@media (max-width: 560px) {
    #totop {
        bottom: 92px;
    }
}
/*--------------------------------------------
ポップアップ（賞品の詳細表示で使用）
--------------------------------------------*/
#popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	z-index: 9999;
	background: #000000cd;
	display: none;
}
#popup .close_btn {
	position: absolute;
	top: 18px;
	right: 2%;
    width: 50px;
    height: 50px;
}
#popup p.rank {
    color: #fff;
    font-size: 60px;
    text-align: center;
    margin-top: 30px;
}
#popup #popup_img {
    margin: 30px auto;
    display: block;
    max-width: 1024px;
    width: 100%;
}
.popup_open {
	-webkit-animation: pop .3s;
	animation: pop .3s;
}
@-webkit-keyframes pop {
	0% {
		opacity: 0;
		transform: scale(.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes pop {
	0% {
		opacity: 0;
		transform: scale(.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
/*--------------------------------------------
エフェクト
--------------------------------------------*/
/* 画面外にいる状態 */
.fadein {
	opacity : 0;
	transform : translate(0, 100px);
	transition : all 600ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
/* 要素にdelayをかける */
.list .fadein:nth-of-type(2),
.list .fadein:nth-of-type(7) {
	-moz-transition-delay:100ms;
	-webkit-transition-delay:100ms;
	-o-transition-delay:100ms;
	-ms-transition-delay:100ms;
}
.list .fadein:nth-of-type(3),
.list .fadein:nth-of-type(8) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
}
.list .fadein:nth-of-type(4),
.list .fadein:nth-of-type(9) {
	-moz-transition-delay:300ms;
	-webkit-transition-delay:300ms;
	-o-transition-delay:300ms;
	-ms-transition-delay:300ms;
}
.list .fadein:nth-of-type(5),
.list .fadein:nth-of-type(10) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
}
@media (max-width: 1024px) {
    /* 要素にdelayをかける */
    .list .fadein:nth-of-type(1),
    .list .fadein:nth-of-type(3),
    .list .fadein:nth-of-type(5),
    .list .fadein:nth-of-type(7),
    .list .fadein:nth-of-type(9) {
        -moz-transition-delay:0ms;
        -webkit-transition-delay:0ms;
        -o-transition-delay:0ms;
        -ms-transition-delay:0ms;
    }
    .list .fadein:nth-of-type(2),
    .list .fadein:nth-of-type(4),
    .list .fadein:nth-of-type(6),
    .list .fadein:nth-of-type(8),
    .list .fadein:nth-of-type(10) {
        -moz-transition-delay:100ms;
        -webkit-transition-delay:100ms;
        -o-transition-delay:100ms;
        -ms-transition-delay:100ms;
    }
}