@charset "Shift_JIS";

/* =======================================================================
#suntory_contents 背景色
======================================================================= */
#suntory_contents{background:#000;}


/* =======================================================================
#suntory_contents #container 横幅、メイン画像
======================================================================= */
#container{
width:960px;
padding-bottom:35px;
}

#container h1{
margin-bottom:20px;
}

#container h1 img{
width:100%;
}

@media screen and (max-width:767px){
#container{width:100%;}
}


/* =======================================================================
FONT-SIZE 一括変更 初期設定 PC-13px SP-14px
======================================================================= */
#contents_hd,#form_wrapper .box,#contents .type_msg{font-size:13px;}

@media screen and (max-width:767px){
#contents_hd,#form_wrapper .box,#contents .type_msg{font-size:14px;}
}


/* =======================================================================
#contents #contents_hd メイン画像下 応募要項等 フリーカスタムエリア
======================================================================= */

#contents.border_area {
    color: #FFFFFF;
    width: 888px;
    margin: 0 auto;
    padding: 15px 35px 0;
    border: 1px solid #3e3e3e;
}

#contents .border_area {
    color: #FFFFFF;
    width: 888px;
    margin: 0 auto;
    padding: 15px 35px 0;
    border: 1px solid #3e3e3e;
}



#suntory_contents .link_list a:link, #suntory_contents .link_list a:visited {
	color: #ceb968;
}
#suntory_contents .link_list a:hover {
	color: #FFEA9A;
}

#captcha_inner {
    color: #000;
}

#suntory_contents dl.info a:link, #suntory_contents dl.info a:visited {
	color: #ceb968;
}
#suntory_contents dl.info a:hover {
	color: #FFEA9A;
}


#submit_box ul li {
    padding-bottom: 20px;
}

#form_wrapper .box > dl._err > dt {
    color: #000;
}

#form_wrapper .box > dl._err > dd {
    color: #000;
}

#form_wrapper .box.mm_read > dl._err > dt, #form_wrapper .box > dl.mm_read._err > dt {
    color: #000;
}

#form_wrapper #enquete dl._err dt em i {
    color: #000;
}

#form_wrapper .box.mm_read > dl._err > dd {
    background-color: #fff7ff;
}

#contents #form_wrapper .btca_box h3 {
    color: #fff;
}

#contents #form_wrapper .btca_box p.lead {
    color: #fff;
}


#form_wrapper .box dl.name dd ul li input[type=text] {
    width: 180px;
}

#contents #link_box_area {
    margin-top: 45px;
}

#form_wrapper .box > dl._modified > dd {
    color: #000;
}

#form_wrapper p.er_msg {
    background: #000;
}

#form_wrapper .box dl dd label.hover{
color:black
}


@media screen and (max-width:767px){

#contents.border_area {
	margin: 0;
    padding: 0;
    border: none;
    width: 100%;
}

#contents .border_area {
	margin: 0;
    padding: 0;
    border: none;
    width: 100%;
}

#contents .link_list ul li {
    margin-left: 15px;
    margin-right: 15px;
}

#form_wrapper .box dl.name dd ul li input[type=text] {
    width: 90px;
}

}



#contents_hd{
padding:0 5px 40px 5px;
color:#fff;
}

/* #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:#ceb968;
}

#contents_hd #outline_area h2{
margin-top:1em;
}

#contents_hd #outline_area h2:before{
content:"\0025A0";
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;
}

#contents_hd #outline_area a{color:#00e;}

/* #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 テーブル・フォーム周り関連スタイル
======================================================================= */
/* #form_wrapper h2.tit ■応募フォーム／■アンケート　等のタイトル部分
============================================================ */
#form_wrapper h2.tit{
color:#000;
margin-bottom:0.5em;
}


#form_wrapper h2.tit {
    color: #FFF;
    background-color: #3e3e3e;
    line-height: 1.5;
    padding: 4px 0 4px 5px;
}

#form_wrapper h2.tit.enquete {
    margin-bottom: 0;
}


#form_wrapper h2.tit:before{
content:"\0025a0";
padding-right:3px;
}


#form_wrapper h2.tit.enquete.confirm,
#form_wrapper h2.tit.form.confirm {
     background: none;
}

#contents .type_msg dl.info {
    background: #000;
    color: #fff;
}




@media screen and (max-width:767px){
#form_wrapper h2.tit {
    margin-left: 0;
}

#contents #form_wrapper .btca_box h3 {
    background-color: #3e3e3e;
    padding: 10px 15px;
}

}





/* #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:#3e3e3e;
background-color: #222222;
color: #fff;
}

#form_wrapper .box > dl > dt,
#form_wrapper .box.mm_read > dl > dt,
#form_wrapper .box > dl.mm_read > dt{
background:#141414;
color: #fff;
}

#form_wrapper .box.mm_read > dl > dd.bg,
#form_wrapper .box > dl.mm_read > dd.bg{
background:#141414;
}

#form_wrapper .box.mm_read > dl > dd {
    background-color: #222222;
}


#form_wrapper .box > dl.mm_read dd ul.caution li {
    color: #fff;
}

#form_wrapper .box > dl.mm_read dd ul.caution li.info {
    font-size: 0.8em;
    color: #9f9f9f;
}


@media screen and (max-width:767px){
#form_wrapper .box.mm_read > dl > dd.bg, #form_wrapper .box > dl.mm_read > dd.bg {
    background: #3e3e3e;
}

#form_wrapper #form_area {
    margin-bottom: 0;
}
}


/* #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:#fff;
}

#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;}

/* #form_wrapper #submit_box フォームボタン
============================================================ */
#submit_box{padding-top:40px;}

#submit_box ul li a{
width:300px;
background:#ff7f04;
border:solid 1px #ff7f04;
box-shadow:2px 2px 2px #ffb76b inset,-1px -1px 1px #ff7c00 inset;
color:#fff;
}

#submit_box a.hover,
#submit_box a:active{
background-color:#ffa73d;
box-shadow:2px 2px 2px #ff7f04 inset,-1px -1px 1px #ffb76b inset;
}

@media screen and (max-width:767px){
#submit_box{padding-top:20px;}

#submit_box ul li a{
width:96%;
border:solid 1px #fff;
background:#ffb76b;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));
background:-webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
}

#submit_box ul li a.hover,
#submit_box ul li a:active{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f04), color-stop(50%,#ff7c00), color-stop(51%,#ffa73d), color-stop(100%,#ffb76b));
background:-webkit-linear-gradient(top, #ff7f04 0%,#ff7c00 50%,#ffa73d 51%,#ffb76b 100%);
}
}

/* #container.regist_confirm #contents #form_wrapper #submit_box フォームボタン（確認画面）
============================================================ */
#container.regist_confirm #form_wrapper #submit_box ul li.to_done a{margin-right:250px;}

#container.regist_confirm #form_wrapper #submit_box ul li.to_back a{
margin-top:8px;
width:140px;
background:#999;
border:solid 1px #999;
box-shadow:2px 2px 2px #ccc inset,-1px -1px 1px #666 inset;
}

#container.regist_confirm #form_wrapper #submit_box ul li.to_back a.hover,
#container.regist_confirm #form_wrapper #submit_box ul li.to_back a:active{
background-color:#666;
}

@media screen and (max-width:767px){
#container.regist_confirm #form_wrapper #submit_box ul li.to_done a,
#container.regist_confirm #form_wrapper #submit_box ul li.to_back a{
width:96%;
margin:4px auto;
}

#container.regist_confirm #form_wrapper #submit_box ul li.to_back a{
background:#aaa;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaa), color-stop(50%,#999), color-stop(51%,#666), color-stop(100%,#888));
background:-webkit-linear-gradient(top, #aaa 0%,#999 50%,#666 51%,#888 100%);
}

#container.regist_confirm #form_wrapper #submit_box ul li.to_back a.hover,
#container.regist_confirm #form_wrapper #submit_box ul li.to_back a:active{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(50%,#666), color-stop(51%,#999), color-stop(100%,#aaa));
background:-webkit-linear-gradient(top, #888 0%,#666 50%,#999 51%,#aaa 100%);
}
}






/* =======================================================================
#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: #ceb968;
}

/* 確認画面、完了、期限切れ、エラーページのテキスト色
-------------------------------------------------- */
#contents #form_wrapper .btca_box,
#contents .thanks_txt p.info,
#contents .type_msg p.lead{
color:#fff;
}


/* =======================================================================
お詫び文言
======================================================================= */
#suntory_contents p.apology {
  color: #ff0000;
  background-color: #ffffff;
  border: 4px double #ff0000;
  padding: 10px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.5
}