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

/*-- タイトル --*/
#main .ttl { background: url(../../images/special/bg_ttl.png) repeat-y center top; color: #fff; line-height: 1.6; margin: 0 0 18px 0; padding: 8px 30px 7px; }

#special{ margin: 20px 0;}

/* 【スペシャル詳細】
--------------------------------------*/
#main_02 .ttl { background: url(https://megahobbyexpo.jp/agf_2024/images/bg_ttl_contents.png) no-repeat center top; color: #fff; line-height: 1.6; font-weight: bold; margin: 0 0 30px 0; padding: 17px 0px 0px 80px; height: 33px; letter-spacing: 2px; font-size: 17px; box-sizing: content-box;}

/*-------- 終了対応 --------*/
#main_02 #special #event_end {margin: 0 auto 20px; width: 1064px; text-align: center; background-color: #333333; color: #ffffff; padding: 15px 0; letter-spacing: 0.5px;}

/*-------- メインビジュアル --------*/
#main_02 #special #mainvisual {margin: 0 auto 30px; width: 1064px;}

/*-------- イベント概要 --------*/
#main_02 #special #event_info ul.left { margin: 0 0 20px 0; width: 650px; float: left;}
#main_02 #special #event_info ul.left li{margin: 0 0 14px 0; display: flex; align-items:baseline;}
#main_02 #special #event_info ul.left li p{font-size: 16px; width: 550px; line-height: 1.4;}
/*注記*/
#main_02 #special #event_info ul.left > li p span.annotation{ font-size: 14px;}
/*赤文字*/
#main_02 #special #event_info ul.left > li p span.red{ color: #e60202;}
/*イベント概要リンク挙動*/
#main_02 #special #event_info ul.left li a{color: #333; text-decoration: underline; transition: 0.3s ease-in-out;}
#main_02 #special #event_info ul.left li a:hover{color: #c5101e;}
#main_02 #special #event_info p.right{float: right; padding: 70px 50px 0 0;}

/*-------- イベント物販 --------*/
#main_02 #special #event_product {width: 980px; margin: 0 auto; padding: 20px 0 0 0;}
#main_02 #special #event_product ul.product_list {display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
#main_02 #special #event_product ul.product_list>li {width: 460px; float: left; padding: 0 0 70px 0;}
#main_02 #special #event_product ul.product_list>li:nth-child(odd) {margin: 0 58px 0 0;}
#main_02 #special #event_product ul.product_list li dt{ margin: 12px 0 15px 0; letter-spacing: 0.8px; line-height: 1.4; padding: 0 0 4px 0; border-bottom: dotted 1px #000;}
#main_02 #special #event_product ul.product_list li dt span.copy{ font-size: 11px; font-weight: normal; letter-spacing: 0.5px;}
#main_02 #special #event_product ul.product_list li dd span{font-size: 13px; width: 107px; height: 23px; background-color: #333333; color: #ffffff; padding: 3px 8px; letter-spacing: 2px; margin: 0 10px 0 0;}
#main_02 #special #event_product ul.product_list li dd.price {margin: 0 0 15px 0;}
#main_02 #special #event_product ul.product_list li dd.txt { font-weight: normal; font-size: 13px; letter-spacing: 1.2px; line-height: 1.5; border-bottom: dotted 1px #000; padding: 0 0 10px 0;}
#main_02 #special #event_product ul.product_list li dd.annotation { font-weight: normal; letter-spacing: 1.2px; margin: 10px 0 0 0; font-size: 11px;}
#main_02 #special #event_product dd.btn_area {padding:0; margin: 10px 0 0 0;}
#main_02 #special #event_product dd.btn_area a { color: #333333;}
#main_02 #special #event_product dd.btn_area p {float: left; width: 208px; font-size: 11px; border: solid 1px #333; padding: 12px 0 12px 14px; position: relative; display: inline-block; transition: 0.3s ease-in-out;}
#main_02 #special #event_product dd.btn_area p::before{content: ''; width: 5px; height: 5px; border: 0px; border-top: solid 1px #333333; border-right: solid 1px #333333; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; right: 15px; margin-top: -4px; transition: 0.3s ease-in-out;}
#main_02 #special #event_product dd.btn_area p:hover {color: #c5101e; border: 1px solid #c5101e;}
#main_02 #special #event_product dd.btn_area p:hover::before {border-top: solid 1px #c5101e; border-right: solid 1px #c5101e;}
#main_02 #special #event_product dd.btn_area p.pb_btn {margin: 0 10px 0 0;}

/*-------- イベント企画 --------*/
#main_02 #special ul#event_contents {margin: 0 0 90px 0;}
#main_02 #special ul#event_contents li{text-align: center; margin: 0 0 30px 0;}

/*-------- イベント展示 --------
#main_02 #special ul#event_display {margin: 0 0 90px 0;}
#main_02 #special ul#event_display li{text-align: center; margin: 0 0 30px 0;}*/

/*-------- 注意事項 --------*/
#main_02 #special ul#caution li{margin: 0 0 13px 0; letter-spacing: 0.5px; font-size: 14px; }

/*-------- フッター --------*/
footer .box_inner {width: 1200px; margin: 0 auto; position:relative;}
footer #footer_sns {position: absolute; top:90px!important; left:0!important;}
footer #footer_sns .fb-like{ margin: 0 10px 0 0;}
#twitter-widget-0{vertical-align: top;}


/*-- ページャー --*/
.nav_box { margin-bottom: 30px;}
.nav_box .page_nav { float: left; }
.nav_box .page_nav ul li { float: left; font-size: 14px; font-weight: bold; border: solid 3px #333333; padding: 12px 14px; margin: 0 2px; border-radius: 5px; box-shadow: 0 2px 0 0 rgb(184, 184, 184); }
.nav_box .page_nav ul li.active { float: left; font-size: 14px; font-weight: bold; border: solid 3px #333333; padding: 12px 14px; margin: 0 2px; border-radius: 5px; box-shadow: 0 2px 0 0 rgb(184, 184, 184); background: #333333; color: #fff; }
.nav_box .page_nav ul li:hover { background: #333333; color: #fff; }
.nav_box .page_nav a { color: #333333; }
.nav_box .page_nav a:hover { color: #fff; }
.nav_box .page_nav a:visited { color: #333333; }

/*-- スペシャル一覧 --*/
#special_list { margin-bottom: 30px; }
#special_list .special_article a { color: #333333; }
#special_list .special_article { font-size: 14px; border: solid 1px #dcdcdc; padding: 12px 14px; margin-right: 16px; border-radius: 5px; box-shadow: 0 2px 0 0 rgb(184, 184, 184); margin-bottom: 16px; }
#special_list .special_article dt img { width: 257px; height: 88px; display: block; }
#special_list .special_article dt { width: 257px; float:left; border: solid 2px #e3e3e3; margin-right: 10px; transition: 0.3s ease-in-out; }
#special_list .special_article dl:hover dt { border: solid 2px #c5101e; }
#special_list .special_article dl:hover dd.title { color: #c5101e; }
#special_list .special_article dd.data p { vertical-align: middle; border-left: solid 5px #c5101e; padding-left: 6px; font-size: 14px; line-height: 17px; margin-left: 270px; font-weight: bold;  }
#special_list .special_article dd.title  { margin: 4px 0 10px 270px; padding-bottom: 4px; font-size: 16px; font-weight: bold; line-height: 22px; border-bottom: dotted 1px #7f7f7f; }
#special_list .special_article dd.detail  { line-height: 18px; }

/*-- 2212更新 
----------------------------------------*/
#main_02 #special h4 { background-color: #1d2671; padding: 12px; color: #fff; font-size: 18px; font-weight: bold; margin: 0 18px 30px 18px; height: 16px; position: relative; }

/*-- 告知画像 --*/
#event_display .content01 { display: inline-block;}

/*-------- イベント展示 --------*/
#main_02 #special ul#event_display {width: 100%; margin: 0 auto 30px auto; text-align: center;}
#main_02 #special ul#event_display li{display: inline-block; margin: 18px 9px 30px 9px; vertical-align: middle;}
#main_02 #special ul#event_display li a{opacity: 1; transition: 0.3s ease-in-out;}
#main_02 #special ul#event_display li a:hover{opacity: 0.8; filter: alpha(opacity=80);}
#main_02 #special ul#event_display li img {/*width: 100%;*/ vertical-align: bottom; box-sizing: content-box;}
#event_display .content01 { width: 980px; text-align: center; margin: 0px auto!important; padding-bottom: 30px;}
#event_display .content02 {width: 45%;}
#event_display .content03 {width: 45%;}
#event_display .content04 {width: 45%;}
#event_display .content05 {width: 45%;}

/*-------- 配布キャンペーン --------*/
#main_02 #special ul#event_block {width: 100%; margin: 0 auto 30px auto; text-align: center;}
#main_02 #special ul#event_block li{display: inline-block; margin: 0 9px 30px 9px; vertical-align: middle;}
#main_02 #special ul#event_block li a{opacity: 1; transition: 0.3s ease-in-out;}
#main_02 #special ul#event_block li a:hover{opacity: 0.8; filter: alpha(opacity=80);}
#main_02 #special ul#event_block li img {width: 100%; vertical-align: bottom; box-sizing: content-box;}
#event_block .content01 { width: 980px; text-align: center; margin: 0px auto!important; padding-bottom: 30px;}
#event_block .content02 {width: 44.5%;}
#event_block .content03 {width: 44.5%;}
#event_block .content04 {width: 45%;}
#event_block .content05 {width: 45%;}

/*-------- お楽しみ --------*/
#main_02 #special ul#event_block02 {width: 100%; margin: 0 auto 30px auto; text-align: center;}
#main_02 #special ul#event_block02 li{display: inline-block; margin: 18px 9px 30px 9px; vertical-align: middle;}
#main_02 #special ul#event_block02 li a{opacity: 1; transition: 0.3s ease-in-out;}
#main_02 #special ul#event_block02 li a:hover{opacity: 0.8; filter: alpha(opacity=80);}
#main_02 #special ul#event_block02 li img {width: 100%; vertical-align: bottom; box-sizing: content-box;}
#event_block02 .content01 { width: 980px; text-align: center; margin: 0px auto!important; padding-bottom: 30px;}
#event_block02 .content02 {width: 45%;}
#event_block02 .content03 {width: 45%;}
#event_block02 .content04 {width: 45%;}
#event_block02 .content05 {width: 45%;}

/*-------- ブース情報 --------*/
#main_02 #special ul#event_booth { padding:0; }
#main_02 #special ul#event_booth li img {box-sizing: content-box;}

/*-------- 連動企画 --------*/
#main_02 #special ul#event_plan { padding:0; }
#main_02 #special ul#event_plan li img {box-sizing: content-box;}

/*-- 動画 --*/
.content_movie { margin: 0 auto !important; padding-bottom: 30px;}


/*---------------------------------------------------------------------
【SP】
-----------------------------------------------------------------------*/
@media screen and (max-width: 768px){
	.box{ width:100%!important; }
	#main_02 .ttl { width: 80%; margin:0 auto 20px; padding:18px 20px 15px; background-color:#333; height:auto; box-sizing:border-box; line-height:22px; position:relative; font-weight:bold; }
	#main_02 .ttl::before {position: absolute; left: -20px; bottom: 0; content: ''; width: 15px; height: 100%; background-color: #f26300; background-image: repeating-linear-gradient(45deg, rgba(102, 51, 0, 0.16), rgba(102, 51, 0, 0.16) 1px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px), repeating-linear-gradient(315deg, rgba(102, 51, 0, 0.17), rgba(102, 51, 0, 0.17) 1px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px);}
	#main_02 .ttl::after {position: absolute; right: -20px; bottom: 0; content: ''; width: 15px; height: 100%; background-color: #f26300; background-image: repeating-linear-gradient(45deg, rgba(102, 51, 0, 0.16), rgba(102, 51, 0, 0.16) 1px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px), repeating-linear-gradient(315deg, rgba(102, 51, 0, 0.17), rgba(102, 51, 0, 0.17) 1px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px);}
	#main_02 #special { width:90%; margin:auto; padding:3%; }
	#main_02 #special #event_end { width:100%!important; height:auto; }	
	#main_02 #special #mainvisual { width:100%!important; height:auto; margin:10px auto 25px; }
	#main_02 #special #mainvisual img { width:100%!important; height:auto; }
	#main_02 #special h3 { height:auto; padding:10px 0px 7px 12px; margin:0 0 20px 18px; }
	#main_02 #special h3::before { height:35px; }
	#main_02 #special #event_info ul.left { width:100%; }
	#main_02 #special #event_info ul.left > li span.info_tit_agf2024 { width:30%; padding:7px 0 5px 0; height:auto; }
	#main_02 #special #event_info ul.left li p { width:70%; }
	#main_02 #special #event_info ul.left li a { font-size:11px; }
	#main_02 #special #event_info p.right { display:none;}
	#main_02 #special ul#event_display li { width:100%; margin:auto; padding:0; }
	#main_02 #special ul#event_display li img { box-sizing: content-box; width:50%; padding:15% 25% 15% 25%; }
	#main_02 #special ul#event_booth li { width:100%; margin:auto; padding:0; }
	#main_02 #special ul#event_booth li img { box-sizing: content-box; width:50%; padding:15% 25% 15% 25%; }
	#main_02 #special ul#event_plan li { width:100%; margin:auto; padding:0; }
	#main_02 #special ul#event_plan li img { box-sizing: content-box; width:50%; padding:15% 25% 15% 25%; }
}