@charset "Shift_JIS";

/*==============================================
共通 ここから
================================================*/
main, main#wrapper {
    padding: 0;
    max-width: none !important;
}
/* パンくず削除 */
#pankuzu {
    display: none;
}
#irisfes-bingo img {
    width: 100%;
}
#irisfes-bingo a {
    display: block;
}
#irisfes-bingo .pc_none {
    display: none;
}
#irisfes-bingo .red {
    color: #eb0012;
}
#irisfes-bingo .text-center {
    text-align: center;
}
/*==============================================
共通 ここまで
================================================*/

/*==============================================
#irisfes-bingo 共通 ここから
================================================*/
/* 価格プロ アイコン削除 */
#irisfes-bingo .ranking .item-block .item-price .price {
    color: red;
}
#irisfes-bingo .ranking .item-block .item-price .price .spesicalprice {
    display: none;
}
#irisfes-bingo .ranking .item-block .item-price .intax {
    display: none;
}
#irisfes-bingo{
    width:100%;
    margin: 0 auto;
}
/* グラデーション背景 */
#irisfes-bingo .back {
    padding-bottom: 2em;
    background:linear-gradient(0deg, rgb(218 239 188 / 0) 10%, rgb(85 179 38) 100%);
    background-color:#e5f5ce;
}
/*全体枠*/
#irisfes-bingo .inner {
    width: 95%;
    margin: 0 auto;
}
#irisfes-bingo .section {
    max-width: 1000px;
    margin:0 auto 3em auto;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    z-index:3;
    position: relative;
}
#irisfes-bingo .section#howto{
    padding-bottom:2em;
    background-color: #f8a93a;
    background-image:
    repeating-linear-gradient(-45deg,
    #f6a330, #f6a330 10px,
    transparent 0, transparent 20px),
        repeating-linear-gradient(45deg,
        #f6a330, #f6a330 10px,
    transparent 0, transparent 20px);
}
#irisfes-bingo .period{
    background: #fff;
    padding: 1em 7em;
    border-radius: 0 0 10px 10px;
}
#irisfes-bingo .howto-img img{
    border-radius: 5px;
}
/*見出し*/
#irisfes-bingo .section p {
    font-size: 1.1em;
    margin-bottom: .5em;
}
#irisfes-bingo .section h4 {
    font-size: 1.3em;
    color: #4dad08;
    margin-bottom: .2em;
}
#irisfes-bingo .section-title_h1 {
    position: relative;
    padding: 1.6em 0;
}
#irisfes-bingo .section-title_h1::after,
#irisfes-bingo .section-title_h1::before{
    content: "";
    position: absolute;
    background: url(/IMAGE/bingo/parts_1.webp);
    width: 20%;
    height:62%;
    background-repeat: no-repeat;
    background-size: 100%;
    position: fixed;
    top: 141px;
}
#irisfes-bingo .section-title_h1::after{
    left: 0;
}
#irisfes-bingo .section-title_h1::before{
    right: 0;
    transform: scale(-1, 1);
}
#irisfes-bingo .section-title_h1 h1{
    max-width:1200px;
    text-align: center;
    margin: 0 auto;
}
#irisfes-bingo .section#top .section-title_h1 {
    padding-top: 2em;
}
#irisfes-bingo .section-title_h2 {
    width: 100%;
    text-align: center;
    z-index: 2;
    position: relative;
    margin-bottom: 1em;
}
#irisfes-bingo .section-title_h2 p{
    padding:1em 0 0 0;
}
#irisfes-bingo .section-title_h2 h2 {
    font-size: 1.7em;
    color: #fff;
}

#irisfes-bingo .bingo-swiper .swiper-slide .section-title_h2 {
    display: none;
}
/*==============================================
#irisfes-bingo 共通 ここまで
================================================*/
#irisfes-bingo .section#top {
    background-color: transparent;
    width: 100%;
    margin-top: 0;
}
/*==============================================
バナー　ここから
================================================*/
#irisfes-bingo section.event {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 3%;
    box-sizing: border-box;
}
#irisfes-bingo section.event .banner {
    margin-bottom: 5%;
}
/*==============================================
バナー　ここまで
================================================*/



/*==============================================
ビンゴ　ここから
================================================*/

/* ビンゴスワイパー */
.bingo-swiper__wrap {
    padding-bottom: 1%;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    /* background: #ffffff; */
    max-width: 800px;
}
.bingo-swiper {
    width: 60%;
    margin: 0 auto;
    padding:0 2% 2% 2%;
    border-radius: 5px;
}

.bingo-swiper .swiper-pagination-bullets {
    left:42%;
    width: auto !important;
}

.bingo-swiper .swiper-slide {
    /* border-radius: 5px; */
    overflow: hidden;
}
.bingo-swiper .swiper-slide section {
    margin: 0 !important;
}
.black-btn_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.black-btn_wrap p{
    font-size: 1em;
    color: #eb0012;
    margin-bottom: 2%;
}
.black-btn {
    position: relative;
    display: inline-block;
    padding: 1em 3em;
    background-color: #eb0012;
    color: #FFF !important;
    font-size:1.1em;
    border-radius: 5px;
    margin: .5% auto .5%;
    text-align: center;
}
.black-btn:hover{
    color: #FFF !important;
    opacity: 0.8;
}
.black-btn:after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    top: 3%;
    bottom: 0;
    right: 8%;
    margin: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .3s ease 0s;
}

.red-btn_wrap {
    display: flex;
    justify-content: center;
}
.red-btn {
    position: relative;
    display: inline-block;
    padding: .65em 3em .6em 2.7em;
    background-color: #eb0012;
    color: #FFF !important;
    font-size:1.5em;
    border-radius: 5px;
    margin: 2% auto 3%;
    border: none;
}
.red-btn:after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    top: 3%;
    bottom: 0;
    right: 8%;
    margin: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .3s ease 0s;
}
/*ビンゴ背景*/
#irisfes-bingo #bingo-card1,
#irisfes-bingo #bingo-card2,
#irisfes-bingo #bingo-card3,
#irisfes-bingo #bingo-card4,
#irisfes-bingo #bingo-card5{
    max-width:480px;
    margin: 1em auto 4em auto;
    padding:7em 0 2em 0;
    border-radius: 0px;
    
}
#irisfes-bingo #bingo-card1{
    background: url(/IMAGE/bingo/bingo-card1_bg.webp) top center /cover;
    background-size: 100%;
    background-repeat:no-repeat;
}
#irisfes-bingo #bingo-card2{
    background: url(/IMAGE/bingo/bingo-card2_bg.webp) top center /cover;
    background-size: 100%;
    background-repeat:no-repeat;
}
#irisfes-bingo #bingo-card3{
    background: url(/IMAGE/bingo/bingo-card3_bg.webp) top center /cover;
    background-size: 100%;
    background-repeat:no-repeat;
}
#irisfes-bingo #bingo-card4{
    background: url(/IMAGE/bingo/bingo-card4_bg.webp) top center /cover;
    background-size: 100%;
    background-repeat:no-repeat;
}
#irisfes-bingo #bingo-card5{
    background: url(/IMAGE/bingo/bingo-card5_bg.webp) top center /cover;
    background-size: 100%;
    background-repeat:no-repeat;
}

#irisfes-bingo .bingo-swiper .swiper-slide .bingo-card {
    width: 100%;
}
.bingo-select {
    width: 88%;
    margin:3% auto 0 auto;
    padding: 2.5% 0 5.2%;
    /* border-radius: 8px; */
    background: #FFF;
}
.bingo-select .bingo-grid {
    width: 95%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows   : 1fr 1fr 1fr;
    gap: 2%;
}
.bingo-select .bingo-grid .bingo-panel.active1,
.bingo-select .bingo-grid .bingo-panel.active2,
.bingo-select .bingo-grid .bingo-panel.active3 {
    position: relative;
}
.bingo-select .bingo-grid .bingo-panel.active1 img,
.bingo-select .bingo-grid .bingo-panel.active2 img,
.bingo-select .bingo-grid .bingo-panel.active3 img {
    opacity: 0.5;
    filter: brightness(1.1);
}
/*購入済み 判定*/
.bingo-select .bingo-grid .bingo-panel.active1::after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../../IMAGE/bingo/stamp_zumi.webp);
    background-repeat: no-repeat;
    background-size: 83%;
    background-position: center;
}
/*応募済み 判定*/
.bingo-select .bingo-grid .bingo-panel.active3::after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../../IMAGE/bingo/stamp_entry.webp);
    background-repeat: no-repeat;
    background-size: 83%;
    background-position: center;
}
/*クリア 判定*/
.bingo-select .bingo-grid .bingo-panel.active2::after,
.bingo-select .bingo-grid .bingo-panel.active1.active2.active3.active3::after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 83%;
    background-position: center;
    background-image: url(../../IMAGE/bingo/stamp_clear.webp);
}
/* ポップアップ */
#irisfes-bingo .popup-fixed {
    display: flex;
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    background-color: rgba(39, 39, 39, 0.7);
    z-index: -10;
    justify-content: center;
    align-items: center;
    transition: .3s;
    box-sizing: border-box;
}
#irisfes-bingo .popup-fixed.active {
    opacity: 1;
    transition: .3s;
    z-index: 100;
}
#irisfes-bingo .popup-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#irisfes-bingo .popup-content .popup-close {
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
#irisfes-bingo .popup-content .popup-img {
    background-color: #FFF;
    margin: 10% 0;
    padding:2em ;
    box-sizing: border-box;
    max-width: 600px;
    /* position: absolute;
    z-index: 10; */
    z-index: 10;
}
#irisfes-bingo .popup-content .popup-img__item {
    display: none;
    flex-direction: column;
    align-items: center;
}
#irisfes-bingo .popup-content .popup-img__item.active {
    display: flex;
}
#irisfes-bingo .popup-content .popup-img__item img {
    width: 78%;
    margin-bottom: 2%;
}
#irisfes-bingo .popup-content .popup-close__btn {
    display: flex;
    justify-content: flex-end;
}
.batsu {
    display: block;
    position: relative;
    width:2em;
    height:2em;
}
.batsu::before, .batsu::after { /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px; /* 棒の幅（太さ） */
    height: 1.5em; /* 棒の高さ */
    background: #222;
}
.batsu::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
.batsu::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}
.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 0;
    width: 24px;
    height: 100%;
    margin-top: -2.2vw;
    z-index: 2;
    cursor: pointer;
    background-size: 2.7vw 4.4vw;
    background-position: center;
    background-repeat: no-repeat;

    background-image: none;
    width: auto;
    height: auto;
    top: 50%;
}
.swiper-wrapper~.swiper-button-next:after {
    transform: rotate(180deg);
}
.swiper-button-next {
    right: 1%;
}
.swiper-button-prev {
    left: 1%;
}
#irisfes-bingo .swiper-wrapper~.swiper-button-next:after, #irisfes-bingo .swiper-wrapper~.swiper-button-prev:after {
    font-family: "Material Icons Outlined";
    content: "chevron_left";
    background-color: rgb(0, 0, 0, .2);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    font-size: 30px;
    font-weight: 200;
    margin: auto;
    z-index: 9;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer;
}

/* 特典テーブル */
#gift {
    max-width: 700px;
    margin: 0 auto;
}
#gift .line {
    display: flex;
    width: 100%;
}
#gift .line-1 {
    background-color: #f63030;
    color: #fff;
    height: 4.5em;
    border-radius: 10px 10px 0 0;
}
#gift .line-item {
    font-size:1.3em;
    padding: .5em 0;
    box-sizing: border-box;
    display: grid;
    align-items: center;
    line-height: 1.3em;
}
#gift .line-item a {
    color: #3c3cff;
    text-decoration: underline;
    font-size: 1em;
}
.line-item__1 {
    width: 20%;
    text-align: center;
    border: 1px solid #fff;
}
#gift .line:nth-child(1) .line-item__1 {
    border-right: 1px solid #FFF;
}
#gift .line:nth-child(1) .line-item__2 {
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
}
#gift .line:nth-child(1) .line-item__3 {
    border-left: 1px solid #FFF;
    text-align: left;
}
#gift .line-item.line-item__2,
#gift .line-item.line-item__3 {
    box-sizing: border-box;  
    border: 1px solid #fff;
    display: flex;
    padding-left:1em;
}
#gift .line-item.line-item__2 {
    width: 45%;
}
#gift .line-item.line-item__3 {
    width: 36%;
}
#gift .line-9 img.sample{
    width: 40%;
}
#gift .line-2,
#gift .line-4,
#gift .line-5{
    background-color: #ffebeb;
}
#gift .line-6,
#gift .line-7,
#gift .line-8,
#gift .line-9{
    background-color: #fdfbe7;
}
#gift .point{
    padding-top: 2em;
    text-align: left;
}
/*追加　HOWTO*/
#irisfes-bingo .howto-title{
    position: relative;
    text-align: center;
}
#irisfes-bingo .howto-title img{
    width:auto;
    margin-top: -1em;
}
#irisfes-bingo .howto-box{
    max-width: 750px;
    margin: 0 auto;
    position: relative;
}
#irisfes-bingo .howto-box__inner{
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    padding: 1em 2em;
    border-radius:0 0 10px 10px;
}
#irisfes-bingo .howto-box img{
    max-width: 600px;
    margin: 0 auto;
    display: flex;
}
#irisfes-bingo .howto-box h5{
    font-size: 1.5em;
    background: rgb(77,173,8);
    padding: .7em 0 .7em 3.5em;
    color: #fff;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    justify-items: center;
    gap: .6em;
    border-radius: 5px;
    position: relative;
}
#irisfes-bingo .howto-box h5.no2,
#irisfes-bingo .howto-box h5.no3{
    margin-top: 1.5em;
    border-radius: 5px 5px 0 0;
}
#irisfes-bingo .howto-box h5 span{
    font-family: 'Lato';
    font-size: 1.5em;
    line-height: 1em;
}
#irisfes-bingo .howto-box h6{
    font-size: 1.5em;
    color: #4dad08;
    border-bottom: 1px solid;
    margin-bottom: .4em;
    padding-bottom: .3em;
    
}
#irisfes-bingo .howto-box p{
    font-size: 1em;
}

/*241015追加*/
#irisfes-bingo .banner p{
    text-align: center;
    color: #a42423;
    font-weight: bold;
    font-size: 1.4em;
    margin-bottom: 0;
}
#irisfes-bingo .banner{
    margin: 0 auto;
    box-sizing: border-box;
    width: 60%;
}
#irisfes-bingo .banner img{
    border-radius:  10px 10px 10px 10px;
}


/*プラザブロウ配置*/
#irisfes-bingo .howto-box h5.no1::after{
    position: absolute;
    content: "";
    top: -2.5em;
    right:-4em;
    background: url(/IMAGE/bingo/zaburo1.webp) no-repeat;
    width: 17%;
    height:200%;
    background-size: 100%;
    transform:rotate(15deg); 
}
#irisfes-bingo .howto-box h5.no2::after{
    position: absolute;
    content: "";
    top: 0em;
    right:-3em;
    background: url(/IMAGE/bingo/zaburo3.webp) no-repeat;
    width: 14%;
    height:210%;
    background-size: 100%;
    transform:rotate(13deg); 
}
#irisfes-bingo .howto-box h5.no3::after{
    position: absolute;
    content: "";
    top:-1em;
    right:-3em;
    background: url(/IMAGE/bingo/zaburo5.webp) no-repeat;
    width: 14%;
    height:200%;
    background-size: 100%;
    transform:rotate(15deg); 
}
/*-----------------------------------------------*/
/*トップページ*/
/*-----------------------------------------------*/
#irisfes-bingo .pagetop {
    position: fixed;
    bottom: 2em;
    right: 2em;
	z-index: 3;
    width:100px;
}
#irisfes-bingo .pagetop a {
	display: block;
    transition: 0.3s all;
}
#irisfes-bingo .pagetop a:hover {
	transform: translateY(-3px);
}
#irisfes-bingo .pagetop.irisfes{
	width:170px;
}