@charset "Shift_JIS";

/* =======================================================================
#suntory_contents 背景色
======================================================================= 
#suntory_contents{background:#fff;}

/* =======================================================================
#suntory_contents #container 横幅、メイン画像
======================================================================= */
#container{
width:960px;
padding-bottom:35px;
}

#container h1{
margin-bottom:20px;
}

#container h1 img{
width:100%;
}

#container h1 {
    font-weight: bold;
    padding: 20px 0;
    color: #FFF;
    background-color: #89182c;
    font-size: 140%;
    margin: 0 0 30px;
    text-align: center;
    line-height: normal;
}

@media screen and (max-width:767px){
#container{width:100%;}
}

}
/* =======================================================================
#contents #contents_hd メイン画像下 応募要項等 フリーカスタムエリア
======================================================================= */
#contents_hd{
padding:0 5px 40px 5px;
color:#333;
}

#contents_hd #outline_area p.subttl {
    font-size: 160%;
    padding-bottom: 1em;
    line-height: 120%;
    color: #89182c;
    font-weight: bold;
}

#contents_hd .prize_img {
    display: flex;
}

#suntory_contents ul.cf {
    display: flex;
    margin: 0 0 0 auto;
}
#suntory_contents ul.cf li img {
    margin-left: 1em;
}

@media screen and (max-width: 767px){
#contents_hd .prize_img {
	margin-bottom: 0;
}	
#contents_hd .prize_img {
    display: block;
}
#contents_hd .prize_img li {
    text-align: center;
}

#suntory_contents ul.cf {
    display: block;
	margin-left: 0;
}
#suntory_contents ul.cf li img {
    margin: 0;
}
}

/* #contents_hd .lead_caution
============================================================ */
#contents_hd .lead_caution{
background:#fff;
border:2px solid #e11;
padding:12px 10px 8px 10px;
}

#contents_hd .lead_caution ul li{
text-indent:-1em;
margin-left:1em;
padding-bottom:0.5em;
color:#e11;
}

/* #contents_hd #outline_area
============================================================ */
#contents_hd #outline_area h2,
#contents_hd #outline_area dl dt{
font-weight:bold;
margin-bottom:0.4em;
color:#89182c;
}

#contents_hd #outline_area h2{
margin-top:1em;
}

#contents_hd #outline_area h2:before{
content:"\0025cf";
padding-right:3px;
}

#contents_hd #outline_area dl dd,
#contents_hd #outline_area p,
#contents_hd #outline_area ul li{
line-height:1.3em;
padding-bottom:0.2em;
}

#contents_hd #outline_area ul.caution li{
text-indent:-1em;
margin-left:1em;
}

#suntory_contents ul.prize_li li {
    text-indent: -1.7em;
    margin-left: 2em;
}

#contents_hd #outline_area a{color:#00e;}


#contents_hd #outline_area p.list.kasen {
    border-bottom: 1px #89182c dashed;
    padding-bottom: 1em;
}

/* #container.regist_confirm #contents #contents_hd p 確認画面テキスト
-------------------------------------------------- */
#container.regist_confirm #contents #contents_hd p{
font-weight:bold;
}

@media screen and (max-width:767px){
#contents_hd{
padding:0px 12px 20px 12px;
}
}
/* =======================================================================
#contents #form_wrapper テーブル・フォーム周り関連スタイル
======================================================================= */
#suntory_contents #quiz_area li{
	line-height:1.3;
}
/* #form_wrapper h2.tit ■応募フォーム／■アンケート　等のタイトル部分
============================================================ */
#form_wrapper h2.tit{
color:#89182c;
margin-bottom:0.5em;
}

#form_wrapper h2.tit:before{
content:"\0025cf";
padding-right:3px;
}
#form_wrapper #enquete dl dd .inline_list ul li{
	padding-right:15px;
}

@media screen and (max-width:767px){
#form_wrapper #enquete dl dd .inline_list ul li{
	float:none;
}
}
/* #form_wrapper .box　テーブルの背景、線色
============================================================ */
#form_wrapper .box{
/* margin-bottom:2.2em; */
background:#fff;
color:#444;
}

#form_wrapper .box > dl,
#form_wrapper .box > dl:last-child,
#form_wrapper .box > dl > dt,
#form_wrapper .box > dl > dd,
#form_wrapper .box.mm_read > dl > dt,
#form_wrapper .box > dl.mm_read > dt,
#form_wrapper .box > dl.mm_read > dt{
border-color:#89182c;
}

#form_wrapper .box > dl > dt,
#form_wrapper .box.mm_read > dl > dt,
#form_wrapper .box > dl.mm_read > dt{
background:#f5eee0;
}

#form_wrapper .box.mm_read > dl > dd.bg,
#form_wrapper .box > dl.mm_read > dd.bg{
background:#ccc;
}

/* #form_wrapper .box テーブル項目内の色関連
============================================================ */
#form_wrapper .box dl dd label.hover{background-color:#fffaaa;}

#form_wrapper .box dl dd ul.important{color:#06f;}

#form_wrapper .box dl.serial dd .serial_box{background:#efefef;}

#form_wrapper #enquete dl dt em i,
#form_wrapper #enquete dl dt em strong{
color:#000;
}

#form_wrapper .box dl.mailmag dt span.to_sample a:before{background:#6cc;}
#form_wrapper .box dl.mailmag dt span.to_sample a:after{border-left:3px solid #fff;}
#form_wrapper .box dl.mailmag dd h3{color:#f39;}
#form_wrapper .box dl.mailmag dd .rihgt_txt p em{color:#f39;}
#form_wrapper .box dl.mailmag dd ul.caution li:last-child{color:#666;}




/* =======================================================================
#contents .link_list 完了、期限切れ、エラーページのブランドトップ等へのテキストリンク部分
======================================================================= */
#contents .link_list{padding-top:20px;}

#contents .link_list ul li{margin-bottom:1.4em;}
#contents .link_list ul li a{color:#00e;}
#contents .link_list ul li a:before{border-left:8px solid #f62;}


/* =======================================================================
#contents #brand_bnr 完了画面 ブランドバナー部分
======================================================================= */
#contents #brand_bnr{padding-top:1em;}

#contents #brand_bnr ul{width:96%;}
#contents #brand_bnr ul li{width:24%;}
#contents #brand_bnr ul li dl dt img{
width:98%;
min-width:215px;
}

#contents #brand_bnr ul li dl dd{
margin:0.3em 0 0.8em 0;
font-size:0.78em;
}

#contents #brand_bnr ul li a{color:#00e;}

@media screen and (max-width:767px){
#contents #brand_bnr ul{width:60%;}
#contents #brand_bnr ul li,
#contents #brand_bnr ul li dl dt img{
width:100%;
}
}

/* =======================================================================
#contents #link_box_area 完了画面 背景ありのリンクエリア部分
======================================================================= */
#contents #link_box_area{
background:#fef8c9;
width:96%;
}

/* #contents #link_box_area ul.bnr_list バナーリンク部分
-------------------------------------------------- */
#contents #link_box_area ul.bnr_list li{padding-top:1em;}

/* #contents #link_box_area dl.txt_list テキストリンク部分
-------------------------------------------------- */
#contents #link_box_area dl.txt_list{
width:60%;
min-width:310px;
margin-top:5px;
}

#contents #link_box_area dl.txt_list dd ul li{
margin-bottom:10px;
}

#contents #link_box_area dl.txt_list dd ul li a{
padding:2px 0 6px 30px;
}

#contents #link_box_area dl.txt_list dd ul li a:link{color:#06c;}
#contents #link_box_area dl.txt_list dd ul li a:visited{color:#579ab9;}
#contents #link_box_area dl.txt_list dd ul li a.hover,
#contents #link_box_area dl.txt_list dd ul li a:active{
color:#0cf;
}

@media screen and (max-width:767px){
#contents #link_box_area{width:100%;}
#contents #link_box_area ul.bnr_list li img{width:90%;}
#contents #link_box_area dl.txt_list{width:88%;min-width:auto;}
}





/* =============================================================================
他、背景色を変える際、色によっては変更したほうがよさそうな色部分
============================================================================= */
/* #contents .thanks_txt h2 完了、期限切れ、エラーページの見出し色
-------------------------------------------------- */
#contents .thanks_txt h2{color:#89182c;}

/* 確認画面、完了、期限切れ、エラーページのテキスト色
-------------------------------------------------- */
#contents #form_wrapper .btca_box,
#contents .thanks_txt p.info,
#contents .type_msg p.lead{
color:#444;
}



