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

body {
	text-align: center;
	font-size: 95%;
	margin:0;
	padding:0;
	line-height: 130%;
	background:url(../img/body_bg.gif) top center repeat-x;
	background-color:#fff;
	color:#444;
}
div{
	box-sizing:border-box;
}
.intro{
	margin-bottom:15px;
}
.intro p{
	font-size:100%;
	line-height:140%;
	margin-bottom:8px;
}
.intro img,.intro iframe{
	width:60%;
	float:left;
	margin-right:2%;
}
.intro iframe{
	height:240px
}

#bigbanners{
	margin:15px 0 15px 0;
}
.saikai_okemori{
	display:flex;
	width: 95%;
	margin: 0 auto;
}
.saikai_okemori div{
    padding: 12px;
}
.saikai_okemori div:first-child{
    width: 36%;
}
.saikai_okemori div:nth-child(2){
    width: 64%;
    text-align:left;
}
.kokuchi h2{
	color:#000;
	line-height:1.3;

}
.kokuchi h2:nth-child(2){

	margin-top: 70px;

}
.kokuchi h2 small{
    font-size:60%
}
.kokuchi em{
	font-style:normal;
	font-size:115%;
	color:#c00;
}

.kokuchi{
	font-size:110%;
	border:4px solid #c00;
	padding: 20px 10px;
	line-height:1.5;
	background:#fffff0;
	text-align:
	center;
	margin-bottom:50px;
}
.kokuchi h4{
	padding:5px 0 2px 0;
	background:navajowhite;
}

.kokuchi p{
	/* width:fit-content; */
	margin:6px auto;
	/* text-align:left; */
}
.kokuchi b{
	color:#b00;
}
.kokuchi .shuryo{
	background:#999;
	width:fit-content;
	color:#fff;
	padding:4px 12px;
}
.kasane{
	position:relative;
}
/*.kasane .shuryo{
	box-sizing:border-box;
	width:100%;
	font-weight:bold;
	position:absolute;
	top: 50%;
	margin-top:-1.2em;
	padding:10px;
	font-size:130%;
	background:#00000055;
}
*/
.kokuchi .wazuka{
	background-color:#bb0000;
	color:#fff;
	font-weight:bold;
	padding:5px;
	margin:0;
	font-size:130%
}
.kokuchi .wazuka small{
    font-size:75%;
}
.kokuchi a.btn{
	background:#b00;
	font-size:85%;
	padding:3px 10px;
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	border-radius:5px;
	box-shadow:2px 2px 2px #ddd;
	display:inline-block;
}
.flex_50_100{
	display:flex;
	flex-wrap: wrap;
}
.flex_50_100 > div{
	padding:2%;
	width:50%;
}
img.dark{
	/* filter:brightness(70%); */
}
/*やっぱ広島じゃ割*/
.hiroshima_wari{
	display:flex;
	align-items:center;
	margin-bottom:20px
}
.hiroshima_wari_left{
	margin:0 1% 0 2%;
	width:30%
	
}
.hiroshima_wari_left img{

}
.hiroshima_wari_left div{

}
	


.hiroshima_wari_right{
	margin-top:10px;
	text-align:left;
}
.hiroshima_wari_right span{
	display:inline
}
.row_table{
	border:1px solid;
	margin:0 auto;
	border: 1px solid #cbced2;
	border-collapse: collapse;
	text-align: center;
		border: 3px solid #bb0000;
}
.row_table th:nth-child(1){
	background:#ffdead;
	color:#600;
	font-weight:bold;
	border: 1px solid #bb0000;
	padding:8px
}
.row_table tr td{
	border: 1px solid #bb0000;
	padding:8px;
	/* text-align:right; */
}
.row_table tr:first-child td{
		text-align:center;
}
.mgt60{
	margin-top:60px;
}
.coupon_wrap{
	display:flex;
	align-items:center
}
.coupon_img{
	width:40%;
	text-align:right;

}
.coupon_img img{
	width: 50%;
}
.coupon_txt{
	width:60%;
	text-align:left;
	padding-left:1%
	
	
}
/*BASE banner*/
.base_banner{
	margin: 20px 0 20px 0;
	border: 3px solid #0f58a7;
}
/*sp_copy*/
.sp_copy{
	margin: 15px 0 10px 0;
}
@media(min-width:501px){
	.sponly{
	  display:none !important;
	}
  }
@media(max-width:500px){
  .pconly{
    display:none !important;
  }
}
@media(max-width:500px){
	.saikai_okemori{
		display:block;
		width: 95%;
		margin: 0 auto;
	}	
	.saikai_okemori div:first-child{
		width: auto;
	}
	.saikai_okemori div:nth-child(2){
		width: auto;
	}
    .kokuchi{
    	width: 97.5%;
    	font-size:95%;
    }
    .base_banner{
    	width:94%;
    	margin:10px auto;
    }

    .row_table{
		margin-top:20px
    }


    /*やっぱ広島じゃ割*/
	.hiroshima_wari{
		flex-wrap:wrap

	}
	.hiroshima_wari_left{
		width:100%;
		margin:0 0% 0 0; 
	}
	.hiroshima_wari_left img{
		width:50%
	}
	.hiroshima_wari_right{
		width:100%;
		text-align:center

	}
	.coupon_wrap{
		margin:10px 0
	}
	.coupon_img img{
		width:90%
	}

}
#twitter{
	width:225px;
	float:right;
	margin-top:10px;
}
#twitter p{
	position:absolute;
	background-color:#fff;
	padding-top: 68px;
	padding-bottom:35px;
	width: 226px;
	margin-top:-32px;
	text-align:
	center;
}
#twitter div{
	margin-top:-30px;
	margin
}

#topics{
	width:380px;
	float:left;
	margin-right:10px;
	margin-top:15px;
}

#topiclist{
	height:300px;
	overflow:auto;
}

.topic_img{
	float:right;
	border:3px solid #FFFFFF;
	margin:0 5px 5px 8px;
}
.topic_date{
	padding:0 5px;
	margin-top:10px;
	font-weight:bold;
}
.topic_title{
	padding:0 5px;
	color:#CC9933;
	font-weight:bold;
	margin-bottom:2px;
}
.topic_comment{
	padding:0px 5px 8px;
	font-size:85%;
	margin-bottom:12px;
	line-height:135%;
}
.toplogo{
	text-align:left;
	max-width:1200px;
	margin:0 auto;
	padding-left: 4vw;
}
.toplogo img{
	position:relative;
	height:10vw;
	z-index:10;
	margin-top:-39px;
	animation: fadein-anim 3s linear forwards 12s;
	opacity: 0;
}
@keyframes fadein-anim {
	100% {
		opacity: 1;
	}
}

#video1{
	width:100%;
	max-width:1200px;
	margin-top: calc(-10vw + 20px);
}
.sound_control{
	box-sizing:border-box;
	margin:0 auto 2vw;
	padding: 0 10px;
	text-align:right;
	width:100%;
	max-width:1200px;
	line-height:1.5;
	font-size:110%;
	color:#0080ff;
}
.sound_control img{
    display:inline-block;
    margin-left:2px;
}

.header_lr .header_right{
    margin-top:32px;
}

@media screen and (max-width:500px) {
	#video1{
        margin-top:0;        
	}
	.topic_comment {
		width: 98%;
		margin: 0;
	}
	
	#topiclist {
 	    height:none;
	}
	
	#topics {
		width: 100%;
		float: none;
		margin-right:0;
	}
	
	#twitter{
		width:100%;
		float:
		none;
		padding:0;
		margin: 40px 0 0;
	}
	#twitter p{
		height:35px;
		width: 95%;
		padding-top: 55px;
		padding-bottom: 11px;
		margin:0 auto;
	}
	#twitter div{
		width:250px;
		margin:-36px auto 0;
	}

	twitter-timeline{
		width:100%;
		height:350;
	}
	.intro img, .intro iframe{
		width:100%;
		margin-right:0;
		margin-bottom:8px
	}

}