/*css mokumoku*/

/*
img.thumb_display[src="https://s3-ap-northeast-1.amazonaws.com/ownly/kirin/directory/mokumoku_campaign/images/post_1_1.jpg"],
img.thumb_display[src="https://s3-ap-northeast-1.amazonaws.com/ownly/kirin/directory/mokumoku_campaign/images/post_2_1.jpg"],
img.thumb_display[src="https://s3-ap-northeast-1.amazonaws.com/ownly/kirin/directory/mokumoku_campaign/images/post_3_1.jpg"] {
  opacity: 0 !important;
}
*/
#wrap{
	margin: 0 auto;
}

body.ansite #content{
	
}
.main_catch_nodate, .main_caption_nodate{
	padding-bottom: 0 !important;
}

#second_guide,#second_caption,#second_line{
	margin-bottom:0;
}
#testmode{
	margin: 0 auto;
}
.main_box_noimage{
	padding:0;
}
#push {
    height: auto;
}
#footer{
	border-top: 1px solid #ccc;
}
#entry_button_area .plese_vote{
	display: none;
}
#timeline{
	min-width: 100%;
	max-width: 100%;
}
#timeline_list{
	padding:0;
}
.box_main{
	display: block;
	margin:0 auto;
	padding:0;
	width: 100%;
	background-color: #ffd800;
}
.main_image{
	display: block;
	margin:0 auto;
	padding:0;
	width: 980px;
}
.main_image img{
	display: block;
	margin:0 auto;
	padding:0;
	width: 100%;
}

.box_1{
	display: block;
	margin: 0 auto;
	padding:0;
	width: 100%;
	background-color: #ffb001;
}
.post_container{
	display: block;
	margin:0 auto;
	padding:415px 0 445px 0;
	width:980px;
	background-image: url(./images/content_1_pc.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
}
.post_box{
	display: block;
	margin: 0 auto;
	padding:0;
	width: 68%;
	text-align: center;
}
.post_box_content{
	display: block;
	margin: 0 1.5%;
	padding:0;
	vertical-align: text-top;
}
.post_box_content img{
	display: block;
	margin:0 auto;
	padding:0;
	width: 100%;
	box-shadow: 5px 5px 0 0 #ff5f00;
}

#timeline_list .box_content {
    width: 100% !important;
    max-width: 100%;
    word-break: break-all;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}
.box_hashtag_3 {
    width: 29%;
    padding: 0;
    text-align: center;
    float: none;
    display: inline-block;
    margin: 2% 1.2% auto 1.2%;
}

.post_pic { 
    position: relative; 
    z-index: 10; 
    cursor: pointer; 
}

.thumb_display { 
    width: 100%; 
    display: block;
    box-shadow: 4px 4px 0 0 #ff5f00;
}

.hashtag_a{
	display: block;
	margin: 15px auto 0 auto;
	padding: 0;
	width: 70%;
	text-align: center;
}
.hashtag_a a img{
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
.hashtag_a a:hover img,.hashtag_b a:hover img{
	opacity: .85;
}
.hashtag_b{
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 70%;
	text-align: center;
}
.hashtag_b a img{
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

.box_hashtag_3 .post_pic img{
	box-shadow: 4px 4px 0 0 #ff5f00;
}










/* Ẩn toàn bộ dữ liệu slides gốc và Swiper chạy ngầm ở ngoài để tránh lỗi click */
.post_slides_source, 
.post_pic .swiper, 
.post_pic .swiper-wrapper { 
    display: none; 
    pointer-events: none; 
}

/* --- 2. GIAO DIỆN MODAL OVERLAY --- */
.modal-overlay { 
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.75); 
    backdrop-filter: blur(5px);
}

.modal-container { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 90%; 
    max-width: 500px;
    margin: auto; 
}

.close-modal { 
    position: absolute; 
    top: 10px; 
    right: 20px; 
    color: #fff; 
    font-size: 45px; 
    font-weight: bold;
    cursor: pointer; 
    z-index: 100000; 
}

/* --- 3. SWIPER BÊN TRONG MODAL --- */
.mySwiperModal .swiper-slide { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff; 
    padding: 25px; 
    min-height: 500px;
    border-radius: 0; 
    box-sizing: border-box;
    text-align: center;
}

.mySwiperModal .swiper-slide img { 
    max-height: 60vh; 
    width: auto; 
    max-width: 100%; 
    object-fit: contain;
    margin-bottom: 15px; 
    border-radius: 0;
}

/* Style cho Text và Button trong Slide Modal */
.mySwiperModal .swiper-slide p { 
    margin: 0; 
}

.btn-detail a { 
    display: inline-block; 
    padding: 10px 30px; 
    background: #e60012; /* Màu đỏ Kirin */
    color: #fff; 
    text-decoration: none; 
    border-radius: 0; 
    font-weight: bold;
    transition: background 0.3s;
}

.btn-detail a:hover {
    background: #c0000f;
}
.swiper-button-next svg, .swiper-button-prev svg {
    fill: #000;     
}
.swiper-pagination-bullet-active{
	background: #fff !important;
}
.swiper-button-next, .swiper-button-prev{
	color: #000 !important;
}




/*box_2*/
.box_2{
	display: block;
	margin:0 auto;
	padding:380px 0 55px 0;
	width:980px;
	background-image: url(./images/content_2_pc.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
}
.instantwin_twitter{
	display: block;
	margin: 0 auto 0 98px;
	padding: 0;
	width: 230px;
}
.instantwin_twitter img{
	display: block;
	margin:0 auto;
	padding:0;
	width: 100%;
}

.instantwin_twitter a:hover img{
	opacity:.85;
}
.guide_agreement_message,
#guide_link a .icon{
	display: none;
}

#guide_link {
    text-align: center;
    padding: 0;
    margin: 26px auto auto;
    display: block;
    min-width: auto;
    width: 780px;
}

#guide_link a{
	display: block;
    border: 0;
    padding: 0;
    font-size: 0;
    color: #000;
    width: 100%;
    line-height: 1;
    text-align: center;
    margin: 0 auto;
    background-image: url(./images/btn_guideline_pc.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
	height: 40px;
}



.box_3{
	display: block;
	margin:0 auto;
	padding:0;
	width: 100%;
	background-color: #fae5d2;
}

.box_3 img{
	display: block;
	margin:0 auto;
	padding:0;
	width: 980px;
}
.box_4{
	display: block;
	margin:0 auto;
	padding:0;
	width: 100%;
	background-color: #ffb001;
}
.box_4 img{
	display: block;
	margin:0 auto;
	padding:0;
	width: 980px;
}
.box_980{
	display: block;
    margin: 0 auto;
    padding: 0 0 100px 0;
    width: 100%;
    background-image: url(./images/bottom_characte_pc.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 280px;
}
.box_4 .box_4_title1 img{
	width: 550px;
	margin:50px auto 0 auto;
	padding:0;
	display: block;
}
.box_4 .box_4_title2 img{
	width: 340px;
	margin:0 auto;
	padding:0;
	display: block;
}	
.box_4 .movie img{
	margin: 0 auto;
	padding: 0;
	margin: 20px auto;
	width: 480px;
	display: block;
}

.video-section{
	padding: 0;
	margin: 20px auto;
	width: 480px;
	display: block;
}
.video-wrapper{
  position: relative;
  width: 100%;
}

.video-wrapper video{
  margin: 0 auto;
  padding:0;
  display: block;
  width: 100%;
}





/* ================================
   FIX SWIPER MAIN - CHOT CUOI
================================ */

/* Khung ngoài 980px, cho phép nút thò ra */
.main_image {
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 1100px;
	position: relative;
	overflow: visible;
}

/* Swiper chỉ còn 920px để ảnh không bị nút đè */
.mySwiperMain {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden !important;
}

/* Ảnh nằm gọn trong swiper */
.mySwiperMain .swiper-slide img {
	display: block;
	width: 980px;
}

/* Fade mượt */
.mySwiperMain .swiper-slide {
	transition: opacity 0.8s ease;
}

/* Nút prev / next */
.mySwiperMain .swiper-button-prev,
.mySwiperMain .swiper-button-next {
	top: 50%;
	margin-top: 0;
	transform: translateY(-50%);
	z-index: 50 !important;
	color: #ffb001 !important;
	width: 40px;
	height: 40px;
}

/* SVG ăn theo màu nút */
.mySwiperMain .swiper-button-prev svg,
.mySwiperMain .swiper-button-next svg {
	fill: currentColor;
}

/* Hover */
.mySwiperMain .swiper-button-prev:hover,
.mySwiperMain .swiper-button-next:hover {
	color: #ffb001 !important;
}

/* Đặt nút hẳn ra ngoài vùng ảnh 920px */
.mySwiperMain .swiper-button-prev {
	left: -40px;
}

.mySwiperMain .swiper-button-next {
	right: -40px;
}


.swiper-button-prev,
.swiper-button-next {
	width: 30px;
	height: 30px;
}

@media screen and (max-width:800px) {
	#second_pict{
		margin: 0 auto;
	}
	#footer{
		border-top: none;
		padding-top: 0;
	}

	#container,#main_box,#main_pict{
		padding: 0;
		margin:0 auto;
	}
	.main_box_noimage{
		padding-top: 0 !important;
	}
	.main_image{
		width: 100%;
	}
	#timeline{
		margin: 0 auto;
	}
	/* Ảnh nằm gọn trong swiper */
	.mySwiperMain .swiper-slide img {
		width: 90%;
	}

	.post_container{
		padding:100% 0 133% 0;
		width:100%;
		background-image: url(./images/content_1_sp.jpg);
	}
	.post_box{
		width: 68%;
	}
	.post_box_content{
		margin: 0 1.5%;
	}
	.post_box_content img{
		box-shadow: 5px 5px 0 0 #ff5f00;
	}
	.box_hashtag_3 {
	    width: 90%;
        padding: 0;
        margin: 0 auto 11% auto;
        display: block;
	}

	.hashtag_a{
        margin: 8% auto 0 auto;
        width: 72%;
	}
	
	.hashtag_b{
		width: 60%;
	}
	.hashtag_b a img{
		display: block;
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}
	.modal-container { 
	    position: relative; 
	    top: 50%; 
	    transform: translateY(-50%); 
	    width: 90%; 
	    max-width: 90%;
	    margin: auto; 
	}

	.close-modal { 
	    position: absolute; 
	    top: 10px; 
	    right: 20px; 
	    color: #fff; 
	    font-size: 45px; 
	    font-weight: bold;
	    cursor: pointer; 
	    z-index: 100000; 
	}

	/* --- 3. SWIPER BÊN TRONG MODAL --- */
	.mySwiperModal .swiper-slide { 
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    background: #fff; 
	    padding: 10vw; 
	    min-height: auto;
	    border-radius: 0; 
	    box-sizing: border-box;
	    text-align: center;
	}

	.mySwiperModal .swiper-slide img { 
	    max-height: 60vh; 
	    width: auto; 
	    max-width: 100%; 
	    object-fit: contain;
	    margin-bottom: 15px; 
	    border-radius: 0;
	}

	/* Style cho Text và Button trong Slide Modal */
	.mySwiperModal .swiper-slide p { 
	    margin: 0; 
	}

	:root {
        /* Ghi đè biến của Swiper cho toàn bộ trang */
        --swiper-navigation-size: 4vw;
    }

    /* Nếu bạn muốn nút bấm dễ chạm hơn (vùng click rộng hơn) 
       dù icon nhỏ lại, có thể chỉnh thêm: */
    .swiper-button-next, 
    .swiper-button-prev {
        width: 4vw !important;
        height: 4vw !important;
    }



	/*box_2*/
	.box_2{
		padding:81% 0 0 0;
		width:100%;
		background-image: url(./images/content_2_sp.jpg);
	}
	.instantwin_twitter{
		display: block;
        margin: 0 auto;
        padding: 0;
        width: 56%;
	}
	.instantwin_twitter img{
		display: block;
		margin:0 auto;
		padding:0;
		width: 100%;
	}

	.instantwin_twitter a:hover img{
		opacity:.85;
	}
	.guide_agreement_message,
	#guide_link a .icon{
		display: none;
	}

	#guide_link {
	    margin: 145% auto 17% auto;
	    width: 80%;
	}

	#guide_link a{
	    background-image: url(./images/btn_guideline_sp.png);
		background-size: 100%;
		height: 11vh;
	}


	.box_3 img{
		display: block;
		margin:0 auto;
		padding:0;
		width: 100%;
	}
	.box_4{
		display: block;
		margin:0 auto;
		padding:0;
		width: 100%;
		background-color: #ffb001;
	}
	.box_4 img{
		display: block;
		margin:0 auto;
		padding:0;
		width: 100%;
	}
	.box_980{
        padding:0 0 2vh 0;
        width: 100%;
        max-width: auto;
        background-image: none;
	}
	.box_4 .box_4_title1 img{
		width: 84%;
        margin: 3vh auto 0 auto;
	}
	.box_4 .box_4_title2 img{
		width: 50%;
		margin:0 auto;
	}	
	.box_4 .movie img{
		padding: 0;
        margin: 2vh auto;
        width: 72%;
	}
	.video-section{
		padding: 0;
        margin: 2vh auto;
        width: 82%;
	}
	#detail_popup #container{
		min-height: auto;
	}
}


#detail_blind.common_blind,#detail_blind.common_blind .batsu{
	display: none !important;
}
#detail_popup.app_type_19 #container .btn_close,.postdetail{
	display: none;
}


#entry_button_area .entry_thanks, #entry_button_area .out_period, .cannot_draw_message, .entry_message{
	display: none;
}



#entry_button_area{
	display: none;
}