@charset "utf-8";

/*?reset
*********************************************************/
.fes_bg{
	background:
	url("../../../image/member/fes1912/fes19_bg1.png") no-repeat top center,
	url("../../../image/member/fes1912/fes19_bg3.png") no-repeat bottom center,
	url("../../../image/member/fes1912/fes19_bg2.png") repeat-y top center;
	background-size:100%;
	/*
	margin:4% auto 0;
	*/
	margin:0 auto;
	max-width:700px;
	width:100%;
	padding: 30px 30px;
	position:relative;
}

.fes_bg_2301{
	background:
	url("../../../image/member/events/2211/fes19_bg1_2301.png") no-repeat top center,
	url("../../../image/member/events/2211/fes19_bg3_2301.png") no-repeat bottom center,
	url("../../../image/member/events/2211/fes19_bg2_2301.png") repeat-y top center;
	background-size:100%;
	/*
	margin:4% auto 0;
	*/
	margin:0 auto;
	max-width:700px;
	width:100%;
	padding: 30px 30px;
	position:relative;
}

.fes_bg_2304{
	border: solid 4px #423600;
	border-radius: 3px;
	background-image: url(https://www.transparenttextures.com/patterns/diagmonds.png);
	background-repeat: repeat;
	margin:0 auto;
	max-width:745px;
	width:100%;
	padding: 3px;
	position:relative;
}

.fes_bg_2305{
	background-color: #026b48;
	border: solid 4px #89ff8f;
	border-radius: 3px;
	background-image: url(https://www.transparenttextures.com/patterns/diagmonds.png);
	background-repeat: repeat;
	/*
	margin:4% auto 0;
	*/
	margin:0 auto;
	max-width:720px;
	width:100%;
	padding: 30px 30px;
	position:relative;
}

.fes_bg2{
	background:#FFF;
	padding:2%;
	display:block;
	width:100%;
	/*
	margin:-8px auto 3%;
	*/
	margin:0 auto;
	max-width:700px;
	color:#000;
	position:relative;
	box-shadow: 0 -0 6px 3px rgba(0,0,0,0.3) inset;
}

.fes_bg2_2109{
	background:#FFF;
	padding:/*2%*/1rem 0 0 0;
	display:block;
	width:100%;
	/*
	margin:-8px auto 3%;
	*/
	margin:3rem auto 0 auto;
	max-width:750px;
	color:#000;
	position:relative;
	box-shadow: 0 -0 6px 3px rgba(0,0,0,0.3) inset;
}

.fes_bg2_210930{
	background:#FFF;
	padding:/*2%*/1rem 0 0 0;
	display:block;
	width:100%;
	/*
	margin:-8px auto 3%;
	*/
	margin:0 auto 0 auto;
	max-width:750px;
	color:#000;
	position:relative;
}
.fes_bg2_211107{
	background:#FFF;
	padding:1rem;
	display:block;
	width:100%;
	/*
	margin:-8px auto 3%;
	*/
	margin:0 auto;
	color:#000;
	position:relative;
	box-shadow: 0 -0 6px 3px rgba(0,0,0,0.3) inset;
}

.banner_sp211107{display:none;}


.road_top{
	position:absolute;
	z-index:10;
	bottom:70%;
	right:15%;
	width:70%;
}

.roadmap_box{
	position:relative;
	background:rgba(255,255,255,0.9);
	margin-top:10rem;
	padding:18% 0 0 0;
}

.roadmap_link .contents_link_bt1:hover{
	opacity:0.8;
}

.contents_link_bt1:hover{
	opacity:0.8;
}
/***** timeline *********/
.roadmap_link .first{
	position:absolute;
	z-index:10;
	bottom:60%;
	right:0;
	width:100%;
}
.roadmap_link .second{
	position:absolute;
	z-index:10;
	bottom:33%;
	right:0;
	width:100%;
}
.roadmap_link .third{
	position:absolute;
	z-index:10;
	bottom:3%;
	right:0;
	width:100%;
}
/***** timeline *********/

/******* icon **************/

.roadmap_link .first01{
	position:absolute;
	z-index:20;
	bottom:65%;
	right:89%;
}
.roadmap_link .second02{
	position:absolute;
	z-index:20;
	bottom:38%;
	right:60%;
}
.roadmap_link .third03{
	position:absolute;
	z-index:20;
	bottom:10%;
	right:34%;
}
/******* icon **************/

.roadmap_date{
	display:flex;
	justify-content: space-between;
	text-align:center;
	margin:0 auto;
	width:100%;
}
.roadmap_date div{
	width:30%;
	background:#1a1a1a;
	padding:1rem 0;
	border-right:0.1rem solid #fcfcfc;
	color:#fcfcfc;
}
.roadmap_date span.month{
	font-size:3rem;
	font-weight:bold;
}

/*?reset
*********************************************************/
.new_kousin{
	position:relative;
	background:#111;
	padding:0.2rem 0.2rem 0.2rem 5rem;
	border-radius:2rem;
	text-align:left;
	color:#fcfcfc;
}

/*********************************************************
*********************************************************
*********************************************************/
/*********** 毎月イベントロードマップ共通CSS ************
*********************************************************
*********************************************************
*********************************************************/
/*****大枠のイベントボックス　月毎に背景色変えてもOK　******/
.main_eventbg{
	width:98%;
	margin-right:auto;
	margin-left:auto;
	padding-bottom:1rem;
	text-align:center;
	background:#fcfcfc;
	border: 0.5rem #f4eecd groove;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}
.main_eventbg2209{
	width:100%;
	margin:0 auto;
	padding-bottom:1rem;
	padding-top:1rem;
	text-align:center;
	background:#7e4206;
	border-right: 0.3rem #d3650d solid;
	border-left: 0.3rem #d3650d solid;
}
.main_eventbg2210{
	width:100%;
	margin:0 auto;
	padding-bottom:1rem;
	text-align:center;
	background:#ffebab;
	border-right: 0.5rem #d3650d solid;
	border-left: 0.5rem #d3650d solid;
}
.main_eventbg2211{
	width:100%;
	margin:0 auto;
	padding-bottom:1rem;
	text-align:center;
	background:#111111;
	border-radius:3rem 3rem 0 0;
	border: 0.5rem #DFC552 solid;
}
/*　イベントタイトル（弾）　月毎に背景色変えてもOK　*/
.event_dan{
	background:#fcfcfc;
	border-radius:2rem;
	padding:0.3rem 0.8rem;
	font-weight:bold;
}
/*イベント日付ボックス　月毎に背景色変えてもOK　*/
.event_day{
	width:95%;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	padding:10px 0 10px 0;
	background-color: #ffc442;
	border-top:2px solid #E83828;
	border-right:4px solid #E83828;
	border-left:4px solid #E83828;
	border-bottom:6px solid #E83828;
}
.event_day2209{
	width:95%;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	background:#ED2816;
	color:#fcfcfc;
	padding:0.5rem 0rem;
}
/*【開催中】のボックス*/
.event_now{
	border:#ED2816 solid 0.2rem;
	background:#FDEC34;
	padding:0.2rem 0.4rem 0 0.4rem;
	color:#ED2816;
	opacity:1;
}
/*【開催終了】のボックス*/
.event_end{
	border:#ED2816 solid 0.2rem;
	background:#fcfcfc;
	padding:0.2rem 0.4rem 0 0.4rem;
	color:#ED2816;
	opacity:1;
}
/*イベント詳細ボックス濃い黄色の丸枠*/
.event22{
	margin-right:auto;
	margin-left:auto;
	width:96%;
	background:#dca927;
	border:#dca927 groove 0.4rem;
	padding:0 1rem;
	border-radius:2rem;
}
.event2209 {
    background: #fae44b;
    border: 2px solid #8b0000;
    border-radius: 10px 10px 0 0;
	margin-right:auto;
	margin-left:auto;
    padding: 1rem;
    text-align: center;
    box-shadow: 0px -2px 4px 4px rgb(142 104 18 / 35%) inset;
    position: relative;
	color:#ED2816;
}
/*無料イベントなど詳細ボックス青*/
.event22_s{
	margin:1rem auto;
	width:96%;
	border:#309F60 groove 0.4rem;
background-color: #005096;
background-image: url("https://www.transparenttextures.com/patterns/absurdity.png");
	padding:1rem;
	border-radius:0.5rem;
	color:#fcfcfc;
}
.event22_s .yltext{
	color:#faeb83;
}
/*イベント詳細ボックス濃い黄色の丸枠にさらに白背景ボックス*/
.event22 .whitebg{
	background:#fcfcfc;
	padding:1rem;
	width:100%;
	margin:0 auto 1rem auto;
	border-radius:2rem;
}
.wt_box{
	margin-right:auto;
	margin-left:auto;
	background:#fcfcfc;
	padding:1rem;
	border-radius:0 0 1rem 1rem;
}
/*イベント詳細ボックスのイベント目次・タイトル*/
.event_title{
	background:#111;
	border:2px solid #8b0000;
	border-bottom:0;
	border-radius:10px 10px 0 0 ;
	margin:0 auto 1rem auto;
	padding:1rem 0.5rem;
	text-align:center;
	box-shadow: 0px -2px 4px 4px rgba(142, 104, 18, 0.35) inset;
	position:relative;
}

/*イラストとイベント詳細文章入れるためのテーブル*/
.event_t{
	margin:0 auto;
	width:100%;
}
.event_t th{
	text-align:center;
	width:20%;
}
.event_t td{
	text-align:left;
	padding:0.3rem 0.3rem 0.3rem 2rem ;
	border:#ccc solid 0.2rem;
	background:#fcfcfc;
}
/*詳細はこちらボタン*/
a.event_link{
	display:block;
	background:#EC0505;
	color:#fcfcfc;
	box-shadow:0px -2px 4px 1px #F64040 inset;
	text-align: center;
	font-weight: bold;
	line-height: 1;
	border: 2px solid #F3E8C7;
	border-collapse:collapse;
	text-decoration:none;
	padding: 2rem 1rem;
	margin: 10px auto 0;
	border-radius:50px;
	box-sizing: border-box;
	width:100%;
	cursor:pointer;
}
a.event_link:hover{
	opacity:0.8;
}
/*詳細はこちらボタン*/
a.event_link2{
	display:block;
	background:#fcfcfc;
	color:#EC0505;
	box-shadow:0px -2px 4px 1px #cccccc inset;
	text-align: center;
	font-weight: bold;
	line-height: 1;
	border: 2px solid #F3E8C7;
	border-collapse:collapse;
	text-decoration:none;
	padding: 2rem 1rem;
	margin: 10px auto 0;
	border-radius:50px;
	box-sizing: border-box;
	width:100%;
	cursor:pointer;
}
a.event_link2:hover{
	opacity:0.8;
}

/****** timer タイマータイマータイマータイマータイマー*******/
.notice{
	position:relative;
}

.notice_timer{
	position:absolute;
    top: 65%;
    left: 50%;
    transform: translate(-65%, -50%);
    -webkit-transform: translate(-65%, -50%);
    -ms-transform: translate(-65%, -50%);
    width:100%;
    line-height:1.3;
    font-size:3rem;
}
/****** timer タイマータイマータイマータイマータイマー*******/



/****** present プレゼント一覧（コメント数により随時確定）******/
table.num_pre{
	width:100%;
	margin:2rem auto;
	border-collapse: collapse;
}

table.num_pre td{
	padding:5px
}

table.num_pre td.mark{
	width:10%;
}

table.num_pre td.num{
	width:25%;
	font-size:18px;
	font-weight:800;
}

table.num_pre td.pre{
	width:65%;
	font-size:22px;
	font-weight:900;
}

table.num_pre tr{
	background:#fff1d5;
	border:solid 3px #ffff;
	height:70px;
}

table.num_pre tr.hit{
	background:#ffdbd5;
}
/****** present プレゼント一覧（コメント数により随時確定）******/


/****** timer タイマータイマータイマータイマータイマー*******/
.notice{
	position:relative;
}

.notice_timer{
	position:absolute;
    top: 65%;
    left: 50%;
    transform: translate(-65%, -50%);
    -webkit-transform: translate(-65%, -50%);
    -ms-transform: translate(-65%, -50%);
    width:100%;
    line-height:1.3;
    font-size:3rem;
}
/****** timer タイマータイマータイマータイマータイマー*******/


/****** area系 *******/
.area-box-gr{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8ed356+0,6cc92e+50,53c900+51,67ce2f+100 */
	background: #8ed356; /* Old browsers */
	background: -moz-linear-gradient(top,  #8ed356 0%, #6cc92e 50%, #53c900 51%, #67ce2f 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #8ed356 0%,#6cc92e 50%,#53c900 51%,#67ce2f 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #8ed356 0%,#6cc92e 50%,#53c900 51%,#67ce2f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ed356', endColorstr='#67ce2f',GradientType=0 ); /* IE6-9 */
}

.area-box-y{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
	background: #fefcea; /* Old browsers */
	background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}

.area-box-bl{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */	
}

.area-overlay {
	width: 100%;
	background-image: linear-gradient(45deg, rgba(0,0,0,.2) 50%, rgba(0,0,0,.4) 50%);
	background-size: 3px 3px;
	z-index: 2;
}

.area-overlay_wt {
	width: 100%;
	background-image: linear-gradient(45deg, rgba(255,255,255,.2) 50%, rgba(255,255,255,.4) 50%);
	background-size: 3px 3px;
	z-index: 2;
}

.area-cube{
	background-color: yellow;
	background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
}

.area-cwt{
	background-color: rgba(255,255,255,0.7);
}

.area-cbk{
	background-color: rgba(0,0,0,0.5);
}

.box-table{
	display: table;
}

.box-table div{
	display: table-cell;
	/* width: auto; */
}






/****** area系 *******/

/*** おわり ***毎月イベントロードマップ共通CSS************
*********************************************************/





@media screen and (max-width: 1025px) {

/******* icon **************/

.roadmap_link .first01 img{
	max-width:110px;
}
.roadmap_link .second02 img{
	max-width:110px;
}
.roadmap_link .third03 img{
	max-width:110px;
}
/******* icon **************/
.notice_timer{
    font-size:2rem;
}


}


@media screen and (max-width: 740px) {
/**************毎月イベントロードマップ共通CSS************
*********************************************************/
/*無料イベントなど詳細ボックス青*/
.event22 {
    width: 98%;
    padding: 0.5rem;
}
.event22_s {
    width: 100%;
    padding:0.5rem;
}
/*イラストとイベント詳細文章入れるためのテーブル*/
.event_t br{
	display:none;
}
.event_t br.spbr{display: inline-block;}
.event_t br.brblk{display: inline-block;}

/*** おわり ***毎月イベントロードマップ共通CSS************
*********************************************************/



.fes_bg{
	margin:0 auto;
	padding:5% 2%;
}

.fes_bg_2301{
	margin:0 auto;
	padding:5% 2%;
}

.fes_bg_2304 {

}

.fes_bg_2305 {
	margin: 0 auto;
	padding: 5% 2%;
}

.fes_bg2{
	margin:1% auto 0;
}

.road_top{
	position:absolute;
	z-index:10;
	bottom:62%;
	right:10%;
	width:80%;
}


.roadmap_box {
    margin-top: 7rem
}
.roadmap_data div{
	font-size:0.6rem;
	margin-right:0.5rem;
	padding:0.5rem 0;
}
/******* icon **************/

.roadmap_link .first01{
	position:absolute;
	z-index:20;
	bottom:65%;
	right:87%;
}

/******* icon **************/

.roadmap_link .first01 img{
	max-width:50px;
}
.roadmap_link .second02 img{
	max-width:50px;
}
.roadmap_link .third03 img{
	max-width:50px;
}
/******* icon **************/

.roadmap_date div{
	font-size:1rem;
}
.roadmap_date span.month{
	font-size:2rem;
}
.new_kousin{
	padding:0.2rem 0.2rem 0.2rem 2rem;
	font-size:0.7rem;
}

.fes_bg2_2109{
	margin:1rem auto 0 auto;
}
.fes_bg2_211107{
	padding:0.5rem;
}

.banner_sp211107{
	display:inline-block;
	width:100%;
}
.banner_sp211107 img{
	width:100%;
}

/*********************************************************
*********************************************************
*********************************************************/
/*********** 毎月イベントロードマップ共通CSS ************
*********************************************************
*********************************************************
*********************************************************/
/*****大枠のイベントボックス　月毎に背景色変えてもOK　******/
.main_eventbg2211{
	border-right: 0.2rem #DFC552 solid;
	border-left: 0.2rem #DFC552 solid;
	border-bottom: 0.2rem #DFC552 solid;
	margin:2rem auto 0 auto;
	padding:1rem 0;
}
/****** present プレゼント一覧（コメント数により随時確定）******/
table.num_pre{
	width:100%;
	margin:2rem auto;
	border-collapse: collapse;
}

table.num_pre td{
	padding:5px;
}

table.num_pre td.mark{
	display:none;
}

table.num_pre td.num{
	width:30%;
	font-size:18px;
	font-weight:800;
	text-align:center;
	text-shadow    : 
	1px 1px 4px #ffffff, 
	0px 0px 4px #ffffff;
	line-height:1.2;
}

table.num_pre td.num span.fs30{
	font-size:26px;
	font-weight:800;
}


table.num_pre tr.hit td.num{
	font-size:18px;
	font-weight:800;
	background:url(../../../../image/member/question/evt2022/evt_mark02.png)  no-repeat center;
	background-size:contain;
}

table.num_pre td.pre{
	width:60%;
	font-size:18px;
	font-weight:900;
	line-height:1;
}

table.num_pre tr{
	background:#fff1d5;
	border:solid 3px #ffff;
	height:70px;
}

table.num_pre tr.hit{
	background:#ffdbd5;
}
/****** present プレゼント一覧（コメント数により随時確定）******/



.notice_timer{
    font-size:1rem;
}

}