@charset "utf-8";

/*-------------------------------------

　上海問屋LP総合CSS

---------------------------------------*/

/*-------------------------------------
　ページ基本設定
---------------------------------------*/

.column2R #main {
	float: none;
	width: auto;
}

#lp_page {
	width: 980px;
	color: #333333;
	line-height: 1.6em;
	font-size: 14px;
	background-color:#FFF;
	margin: 30px auto;
}

#container h2 {
	background: none;
	font-size: 14px;
	color: #000;
	border-left: solid 4px #FF3300;
	margin: 0 0 20px 0;
	padding: 4px 8px;
	font-weight:normal;
}

#maincnt{
    float: left;
    padding-bottom: 45px;
    width: 755px;

}
#side{
 	float: right;
    width: 210px;
}
.pconly { display: block; }
.sponly { display: none;}

.brsp { margin-right:1em; display: inline; }
/*-------------------------------------
　見出し設定
---------------------------------------*/

/*-- h3、h4は依頼内容に合わせて変更してください --*/
#lp_page h3 {
    background: #ed1b24;
    color: #fff;
    font-size: 22px;
	margin:40px auto 20px;
    padding: 15px;
    text-align: center;
}

#lp_page .sectionBox h3{
    background: #fff;
    color: #ed1b24;
    font-size: 22px;
    margin: 0 auto 20px;
    padding: 15px;
    text-align: center;
    position: relative;
    border-top: 3px solid #ed1b24;
    border-bottom: 3px solid #ed1b24;
}
#lp_page h4 {
	background: #ed1b24;
    color: #fff;
    font-size: 16px;
	margin:0 auto;
    padding: 15px;
    text-align: center;
}

/*-- タイトル画像部分 --*/
#title {
	margin-bottom: 15px;
}

/*-------------------------------------
　バナーの下にテキストを設置する場合は
　sectionBox_b を使ってください
　通常はsectionBoxを使用
---------------------------------------*/

/*-------------------------
　.menuBtn　4カラム
　.menuBtn3column　3カラム
--------------------------*/

.sectionBox {
	margin-bottom:60px;
}
.sectionBox table + h3 {
    margin-top: 20px !important;
}
.menuBtn,
.menuBtn3column {
	margin-bottom:20px;
	width:910px;
}
.menuBtn li {
	/*border:1px solid #CCC;*/
	display:table;
	float:left;
	margin:0 10px 10px 0;
	position:relative;
	text-align:center;
	width:217px;
}
.menuBtn3column li {
	/*border:1px solid #CCC;*/
	display:table;
	float:left;
	margin:0 10px 10px 0;
	position:relative;
	text-align:center;
	width:293px;
}
.menuBtn a,
.menuBtn3column a {
	color:#FFF;
	display:table-cell;
	font-weight:bold;
	padding:5px 15px;
	vertical-align:middle;
	text-decoration:none;
}
.menuBtn li:hover {
	background: none repeat scroll 0 0 #eeeeee;
}
table.donya3Table,
table.donya1Table {
	border:1px #CCC solid;
}
table.donya3Table td {
	border:1px #CCC solid;
	text-align:center;
	padding:10px;
	width:33%;
}
table.donya3Table td p,
table.donya1Table td p {
	margin:5px 0;
}
table.donya1Table td {
	border:1px #CCC solid;
	padding:10px;
}
table.donya1Table img {
	overflow:hidden;
}
.priceTxt {
    color: #ef1a1a;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2em;
}
.priceTxt s {
	color:#605b5a;
	font-size:14px;
	font-weight:normal;
}
.catchCopy {
	font-size:16px;
	font-weight:bold;
}
#lp_page a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}
.color01 {
	background: none repeat scroll 0 0 #f1ab11;
    border-bottom: 2px solid #bf8200;
}
.color02 {
	background: none repeat scroll 0 0 #0080cc;
    border-bottom: 2px solid #0066a1;
}
.color03 {
	background: none repeat scroll 0 0 #e5151f;
    border-bottom: 2px solid #a00008;
}
.color04 {
	background: none repeat scroll 0 0 #009d41;
    border-bottom: 2px solid #007330;
}
.color05 {
	background: none repeat scroll 0 0 #e26b0a;
    border-bottom: 2px solid #a64b00;
}
.color06 {
	background: none repeat scroll 0 0 #ed47ed;
    border-bottom: 2px solid #ed00ed;
}
.color07 {
	background: none repeat scroll 0 0 #00ced1;
    border-bottom: 2px solid #00b0b3;
}
.icon {
	bottom:5px;
    position: absolute;
	right:5px;
}

/*-------------------------------------
　ml：　margin-left
　mr：　margin-right
　mb：　margin-bottom
　mt：　margin-top
---------------------------------------*/

.ml20 {
	margin-left: 20px;	
}
.ml13 {
	margin-left: 13px;
}
.ml7 {
	margin-left: 7px;
}
.ml6 {
	margin-left: 6px;
}

/*-------------------------------------
　罫線
---------------------------------------*/

.keisen {
	border: none;
	border-top: solid 1px #CCC;
	height:1px;
	color:#FFF;
	width:100%;
	margin-bottom: 20px;
}

/*-------------------------------------
　その他の商品はこちら
---------------------------------------*/
.otherItem {
	text-align: right;
	margin-top: 10px;	
}

/*-------------------------------------
　バックナンバー
---------------------------------------*/
.backbox {
    border-right: 1px solid #ED1B24;
    border-bottom: 1px solid #ED1B24;
    border-left: 1px solid #ED1B24;
    padding: 20px 10px;
    text-align: left;
}
.backbox dt {
    font-size: 16px;
    font-weight: bold;
}
.backbox dd + dt {
    margin-top: 20px;
}
.backbox dd {
    display: flex;
    flex-wrap: wrap;
}
.backbox dd a {
    display: block;
    margin: 5px;
    position: relative;
}
.backbox dd .accordion, .backbox dd .closed {
    cursor:pointer;
    position: relative;
    width: 100%;
    border-bottom: 1px dotted #ccc;
    margin: 5px 0 5px 5px;
    text-align: left;
}
.backbox dd .accordion::after{
    font-family: "FontAwesome";
    content: '\f107';
    position: absolute;
    right: 0;
    top: 0;
    color: #0062b0;
}
.backbox dd .closed::after{
    font-family: "FontAwesome";
    content: '\f106';
    position: absolute;
    right: 0;
    top: 0;
    color: #0062b0;
}
.backbox dd div {
   display:none;
    margin-left: 1em;
    text-align: left;
}
.backbox dd div a.new::after {
    position: absolute;
    content: 'New';
    right: -40px;
    color: #ff0000;
    padding: 0 5px;
}
/*-------------------------------------
　リンク
---------------------------------------*/

.donyaLink {
	background-color:#0082CD;
	border-radius:4px;
    -webkit-border-radius:4px; 
    -moz-border-radius:4px;
	margin: 20px auto;
    width: 90%;
}
.donyaLink:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: “alpha( opacity=60 )”;
}
.donyaLink a {
	display:block;
	color:#FFF;
	font-size:20px;
	font-weight:bold;
	padding:15px;
	text-align: center;
	text-decoration: none;
}

/*-------------------------------------
　ページTOPへ
---------------------------------------*/
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff!important;
	background-color: #333;
	border-radius:5px;
    -webkit-border-radius:5px; 
    -moz-border-radius:5px;
	display: block;
	font-size: 12px;
	line-height:1.5em;
	padding:5px 10px;
	text-align: center;
	text-decoration: none;
}

/*-------------------------------------
　紹介時間
---------------------------------------*/
.introBox {
	float: right;
	font-weight: bold;
	background: #f00;
	color: #FFF;
	padding: 4px 15px;
	margin: 3px 0px 0 0!important;
	width: 40%;
	text-align: center;
}

/*-------------------------------------
　目次
---------------------------------------*/
.indexBox {
	border: 1px #CCC solid;
	padding: 10px;
	font-size: 18px;
	text-align: left;
}

/*-------------------------------------
　SNS
---------------------------------------*/
.tweet ul li {
    float: left;
    padding-right: 5px;
}
.sns_btn_wrap ul li {
  margin-bottom: 4px;
}

iframe.twitter-share-button {
width: 95px!important;
}

.fl {
	float: right;
}

/*-------------------------------------
　タイトル
---------------------------------------*/
.ttlBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    background: #00abea;
    background-color: #00abea;
    background-image: radial-gradient(#33bcee 30%, transparent 0), radial-gradient(#33bcee 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    margin-bottom: 20px;
	width: 100%;
}
.ttlBox .box1, .ttlBox .box2 {
    width: 50%;
    display: flex;
 }   
.ttlBox p {
    width: calc(50% - 20px);
    text-align: center;
    margin: 0 10px;
}
.ttlBox p span{
    color: #fff;
    font-weight: bold;
}
.ttlBox p span + span {
    margin-left: 1em;
}
.ttlBox p img {
    width: 100%;
    margin-bottom: 5px;
}
/*-------------------------------------
　番組紹介
---------------------------------------*/
.programBox {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 20px;
}
.program_txt {
    margin-left: 20px;
}
.program_name {
    font-size: 18px;
    font-weight: bold;
    color: #ed1b24;
}
.program_txt p span {
   width: 4em;
    color: #ed1b24;
    display: inline-block;
}
.program_txt p + p {
    margin-top: 5px;
}

/*-------------------------------------
　新着お知らせ
---------------------------------------*/
.programNews {
    overflow: hidden;
}
.programNews dt {
    float: left ;
    clear: left ;
    width: 7em ;
    margin-bottom: 10px;
}
.programNews dd {
    float: left ;
    width: calc(100% - 7em );
    margin-bottom: 10px;
}
.programNews dt:last-of-type, .programNews dd:last-of-type {
    margin-bottom: 0;
}

/*-------------------------------------
　次回の放送予約はこちら
---------------------------------------*/
.programLink {
    display: flex;
    justify-content: space-between;
}
.programLink li {
    width: calc(100% - 20px );
    margin: 0 10px;
    text-align: center;
}
.programLink li a {
	color: #ED1B24 !important;
	border: 1px solid #ED1B24;
	display: inline-block;
	padding: 12px;
	font-weight: bold;
	text-decoration: none !important;
	border-radius: 3px;
	position: relative;
    width: 100%;
    box-sizing: border-box;
}
.programLink li a:before{ 
content: '';
    width: 0;
    height: 0;
    border: solid 6px transparent;
    border-left: solid 9px #ED1B24;
    position: absolute;
    top: 36%;
    right: 0;
 }
.programLink li a:hover {
    color: #fff !important;
    background: #ED1B24 !important;
}
.programLink li a:hover:before{ 
    border-left: solid 9px #fff;
 }

/* プレゼント応募フォーム */
.apply_form {
  margin-top: 30px; 
  text-align: center;
}
.apply_form img {
  margin-bottom: 4px;
}

/*-------------------------------------
　スマホ対応
---------------------------------------*/
@media screen and (max-width:479px){
	#lp_page {
		width: 95% !important;
	}
	#maincnt {
		width: 100% !important;
		margin: 0 auto !important;
		float: none;
	}
	.fl {
		float: unset;
		text-align:right;
	}

	.fl .clearfix {
		display: inline-block;
	}

	#lp_page h3 {
		font-size: 4.6vw;
	}

	table {
		text-align:center;
	}

	table.donya1Table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
		border: none;
	}
    .pconly { display: none;}
    .sponly { display: block;}
    .brsp { margin-right:0; display: block; }
	.introBox {
		float: none;
		margin: 20px auto 10px auto !important;
		width: 65%;
		box-sizing: border-box;
	}

	.buttonBox {
		margin-top: 20px;
		display: block;
	}

	.indexBox {
		font-size: 14px;
	}

	.priceTxt {
		font-size: 7vw !important;
	}

	table.donya1Table td p {
		font-size: 4vw;
	}

	table.donya1Table td p.catchCopy {
		margin: 20px 0px !important;
		font-size: 4.5vw !important;
	}

	.sectionBox {
		width: 100% !important;
		text-align:center;
	}

	.backbox dd {
		width: 100%;
		box-sizing:border-box;
	}

	.backbox dd a {
		font-size: 14px;
	}

	.youtube {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}
	.youtube iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
    
   /*-------------------------------------
　   タイトル
    ---------------------------------------*/
    .ttlBox .box1, .ttlBox .box2 {
    width: 100%;
     } 
    .ttlBox .box1 {
    flex-direction: column;
    }
    .ttlBox .box2 {
    flex-direction: column-reverse;
    }
    .ttlBox p {
    width: calc(100% - 20px);
    }
    .ttlBox p span{
        display: block;
    }
    .ttlBox p span + span {
        margin-left: 0;
        margin-top: -5px;
    }
    /*-------------------------------------
     番組紹介
    ---------------------------------------*/
    .programBox {
        flex-direction: column;
    }
    .program_txt {
        margin-left: 0;
        margin-top: 10px;
    }
    /*-------------------------------------
     番組リンク
    ---------------------------------------*/
    .programLink {
    flex-direction: column;
    }
    .programLink li {
    margin: 0;
    width: 100%;
    }
    .programLink li + li {
    margin-top: 10px;
    }
    /*-------------------------------------
     バックナンバー
    ---------------------------------------*/
    .backbox dd .accordion, .backbox dd .closed {
    margin: 5px 0 5px 0;
    }
    .backbox dd div {
    margin-left: 0;
}
}

    @media screen and (min-width: 479px){
    .ttlBox{
        width: 100%;
    }
    #container:after{
      display: contents !important;
    }
    #container{
      display: initial;
    }
    #maincontent{
        width: 980px;
        margin: auto auto 60px;
    }       
    }