@charset "UTF-8";
/* CSS Document */

/*========= 30周年イベント用 =========*/

input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
label{font-family: YakuHanJP, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", YuGothic, sans-serif;}

div {overflow-wrap:break-word;}


.pc_only{
	display: none;
}

.info_item{
	width: 90%;
	margin: 0 auto;
	text-align: center;
    min-height: 400px;
}
.event_img{
	width: 100%;
}
.event_img2{
	width: 100%;
}
.tx_30th{
	margin: 10px 0 ;
}
.btn_warp{
	text-align: center;
    width: 80%;
    margin: 0 auto;
}
.btn_link {
	display: inline-block;
    color: #000;
    padding: 10px;
    border: 3px solid #000;
    border-radius: 10px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    text-decoration: none;
	background: #FFF;
}
.btn_link2 {
	display: inline-block;
    color: #000;
    padding: 10px;
    border: 3px solid #000;
    border-radius: 10px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    text-decoration: none;
	background: #FFF;
}

.new {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #ec6bab;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    color: #FFF;
    padding-top: 6px;
    font-size: 14px;
}

.benefits{
    position: absolute;
    top: 5px;
    left: 5px;
    background: #a6cbe1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    color: #FFF;
    padding-top: 6px;
    font-size: 14px;
}
.event_info{
	width: 90%;
	margin: 0 auto;;
}

.event_info_topic > li:first-child{
	margin-bottom: 40px;
}
.event_info_topic h4{
	font-weight: bold;
}

.limited_item_warp{
	text-align: center;
	width: 90%;
    margin: 20px auto 50px;
    min-height: 400px;
}
.event_select{
	text-align: center;
    margin: 0 auto 30px;
}	

.item_name{
	font-size: 3.72vw;
    font-weight: bold;
}
.target li span {
    display: block;
    font-size: 4vw;
}
.item_tx{
	font-size: 14px;
    color: #666;
    line-height: 1.8em;
	margin-top: 10px;
}
.targets {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px 0;
}
.targets > li {
	text-align: left;
    -webkit-flex: 0 1 43vw;
    -ms-flex: 0 1 43vw;
    flex: 0 1 43vw;
    position: relative;
    margin-bottom: 8vw;
}
.targets > li img{
	background: #FFF;
    padding: 15px;
    border-radius: 10px;
    position: relative;
    width: 100%;
}

.target >a {
	text-decoration: none;
}

.event_label{
	display: flex;
	flex-wrap: wrap;
	margin-top: 15px;
}
.event_label > li{
	font-size: 12px;
	border-radius: 10px;
	background: #ccc;
	padding: 3px 6px;
	margin: 0 6px 8px 0;
}

.sub_ti{
	font-size: 5.625vw;
    text-align: center;
    margin: 80px auto 20px;
    font-weight: bold;
}

.tx_s li, .tx_s li a{
	font-size: 14px;
	line-height: 1.8em;
}
.tx_event_info{
	text-align: left;
}
.tx_event_info dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.tx_event_info .place{
	margin: 30px 0 0;
	font-weight: bold;
}
.tx_event_info dt {
  width: 23%;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.tx_event_info  dd {
  width: 77%;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

[value="All"]:checked ~ .targets [data-category] {
  display: block;
}
[value="tokyo"]:checked ~ .targets .target:not([data-category~="tokyo"]), 
[value="taipai"]:checked ~ .targets .target:not([data-category~="taipai"]), 
[value="corner"]:checked ~ .targets .target:not([data-category~="corner"]),
[value="midoriEC"]:checked ~ .targets .target:not([data-category~="midoriEC"]){
  display: none;
}

input:checked + label::after {opacity : 1 ;}

label {
  position: relative;
  cursor: pointer;
  padding-left: 30px;
  margin-bottom: 20px;
  display: inline-block;
}

label::before,
label::after {
  content: "";
  display: block; 
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

label::before {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  left: 5px;
}

label::after {
  background-color: #000;
  border-radius: 50%;
  opacity: 0;
  width: 16px;
  height: 16px;
  left: 7px
}

input:checked + label::after {
  opacity: 1;
}

.visually-hidden {
 position: absolute;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
}

/*==============*/
/*   タブレット    */
/*==============*/

@media screen and (min-width: 768px) {
	.info_item {
        width: 90%;
        margin: 50px auto;
    }

	.item_name{
		font-size: 2.1vw;
	}
	.targets{
		display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: flex-start;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 20px 0 0 -20px;
        text-align: center;
	}
	
	.targets > li{
	-webkit-flex: 0 1 28.2vw;
        -ms-flex: 0 1 28.2vw;
        flex: 0 1 28.2vw;
        margin: 0 0 50px 20px;
	}
	
	.sub_ti {
        font-size: 3.1vw;
        padding-top: 0;
    }
	.btn_warp{
		display: -webkit-flex;
    	display: flex;
    	-webkit-justify-content: space-around;
    	justify-content: space-around;
		width: auto;
	}
	.btn_link {
        padding: 10px 20px;
        font-size: 18px;
        font-weight: bold;
        width: 320px;
    }
	.btn_link2 {
        padding: 10px 15px;
        font-size: 16px;
        font-weight: bold;
        min-width: 130px;
    }
	.target span {
		font-size: 15px;
	}
	.logo_30th .logo_item{
		width: 7.2vw;
	}
}


/*==============*/
/*      PC      */
/*==============*/

@media screen and (min-width: 1024px) {
	.pc_only{
		    display: block;
	}
	

	.info_item {
        width: 650px;
        margin: 50px auto;
    }
	.event_img{
		margin-left: -150px;
		width: auto;
	}

	.tx_30th{
		margin: 30px 0
	}
		
	.item_name{
		font-size: 14px;
    	line-height: 1.8em;
	}
	
	.sub_ti {
        font-size: 24px;
        text-align: center;
		margin: 80px auto 20px;
    }
	.btn_link {
        width: 300px;
    }
	.btn_link2 {
        font-size: 18px;
        min-width: 170px;
    }
	.limited_item_warp{
		width: 950px;
        margin: 0 auto 50px;
		text-align: center;
	}
	.targets{
		display: -webkit-flex;
    	display: -ms-flexbox;
    	display: flex;
    	justify-content: flex-start;
    	-webkit-flex-wrap: wrap;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	margin: 20px 0 0 -20px;
    	text-align: center;
	}
	.targets > li{
		-webkit-flex: 0 1 222px;
        -ms-flex: 0 1 222px;
        flex: 0 1 222px;
        margin: 0 0 50px 20px;
	}
	.targets li img{
	    background: #FFF;
    	padding: 15px;
    	border-radius: 10px;
    	position: relative;
    	width: 100%;
	}
	.event_info{
		width: 950px;
		margin: 0 auto;
	}
	.event_info_topic{
		display: flex;
		text-align: left;
		justify-content: space-between;
	}
	.event_info_topic li{
		width: 460px;
	}
	.tx_event_info dt {
  		width: 13%;
	}

	.tx_event_info  dd {
  		width: 87%;
	}
	

}