@import url(reset.css);

/* 
---------------------------------------------------- */
body{
font-family:"HraKakuProN-W6", "HelveticaNeue";
line-height:1;
-webkit-text-size-adjust:none;
}
#suntory_contents{
background-color:#ffffff;
color:#555;
padding:10px 0;
}
header{
text-align:center;
margin-bottom:10px;
}
#suntory_contents h1{
text-align:center;
margin:0 auto 10px auto;
}
#suntory_contents h1 span{
font-size:20px;
color:#669900;
padding:3px 0 0 0;
}

#container{
padding:0 10px;
}

#container p.done{
font-weight:bold;
color:#886633;
margin:0;
padding:5px 0 0 0;
}
#container p.lead{
margin:0;
padding:5px 0 0 0;
}
#container p.lead2{
margin:0;
padding:5px 0 0 0;
color:#E80;
}
#container p .kome{
color:#F00;
}
#container a{
font-weight:normal;
}
#container p.lead2 a{
background:url(../img/ico_totel.png) no-repeat left center;
-webkit-background-size:25px 25px;
padding:5px 0 6px 30px;
}
#container p.lead a.tel{
background:url(../img/ico_totel.png) no-repeat left center;
-webkit-background-size:25px 25px;
padding:5px 0 6px 30px;
}

#container .notes{
padding:5px 0 0 0;
}
#container .notes p{
margin:0;
padding:0;
}
#container .notes span{
color:#F00;
}
#container .inputErr{
display:block;
border:solid #F00 2px;
padding:10px;
margin:10px 0 0 0;
}
#container .inputErr .inputErr_msg1{
font-weight:bold;
color:#F00;
background:url(../img/ico_err.png) no-repeat 0 0;
-webkit-background-size:18px 18px;
margin:0;
padding:0 0 2px 24px;
}
#container .inputErr ol.inputErr_list{
margin:0 0 0 24px;
font-size:18px;
}
#container .inputErr ol.inputErr_list li{
line-height:1.4;
color:#F00;
}
#container .loginErr{
display:block;
border:solid #F00 2px;
padding:10px;
margin:10px 0 0 0;
}
#container .loginErr .loginErr_msg1{
font-weight:bold;
color:#F00;
background:url(../img/ico_err.png) no-repeat 0 4px;
-webkit-background-size:18px 18px;
margin:0;
padding:0 0 2px 24px;
}
#container .loginErr .loginErr_msg2{
color:#F00;
margin:2px 0 0 0;
}
#container .loginErr .loginErr_msg3{
margin:4px 0 0 0;
}
#container .shoppingBox{
background:#EDEBDC;
padding:10px;
margin:10px 0;
-webkit-border-radius:6px;
}
#container .shoppingBoxErr{
background:#FFE3E3;
padding:10px;
margin:10px 0;
-webkit-border-radius:6px;
}
#container .err_msg{
font-weight:bold;
color:#F00;
background:url(../img/ico_err.png) no-repeat 0 center;
-webkit-background-size:40px 40px;
padding:10px 0 10px 45px;
}
#container dt{
}
#container dt:after{
display:block;
height:1px;
content:"";
clear:both;
}
#container dt .title,
#container dt .title2{
float:left;
font-size:18px;
font-weight:bold;
line-height:1.2;
color:#886633;
margin:0 0 5px 0;
padding:2px 0;
}
#container dt .title2{
}
#container dt.creditcard .title{
background-image:none;
margin:0 0 0 0;
padding:2px 0;
}
#container dt.creditcard_top .title{
background-image:none;
margin:10px 0 0 0;
padding:2px 0;
}
#container dt .required{
float:left;
background-color:#F70;
color:#FFF;
font-size:16px;
font-weight:normal;
text-shadow:none;
-webkit-border-radius:2px;
padding:2px 4px;
margin:2px 0 0 5px;
}
#container dt.creditcard .required{
margin:0 0 0 5px;
}
#container dt.creditcard_top .required{
margin:10px 0 0 5px;
}
#container dd{
font-size:18px;
line-height:1.4;
color:#555;
}
#container dd .card_month{
width:90px;
float:left;
margin-right:5px;
}
#container dd .card_year{
width:110px;
float:left;
}
#container dd .card_code{
width:60px;
}
#container dd .code_type{
font-weight:bold;
text-align:center;
}
#container #naiyou_00{
font-size:16px;
font-weight:bold;
}
#container #naiyou_01 .title,
#container #naiyou_02 .title,
#container #naiyou_03 .title,
#container #naiyou_04 .title,
#container #naiyou_05 .title,
#container #naiyou_06 .title,
#container #naiyou_07 .title,
#container #naiyou_08 .title,
#container #naiyou_09 .title,
#container #naiyou_11 .title{
color:#886633;
font-weight:bold;
}
#container #naiyou_01 .example,
#container #naiyou_01 .example2,
#container #naiyou_02 .example,
#container #naiyou_02 .example2,
#container #naiyou_03 .example,
#container #naiyou_03 .example2,
#container #naiyou_05 .example,
#container #naiyou_05 .example2,
#container #naiyou_06 .example,
#container #naiyou_06 .example2,
#container #naiyou_07 .example,
#container #naiyou_07 .example2,
#container #naiyou_08 .example,
#container #naiyou_08 .example2,
#container #naiyou_09 .example,
#container #naiyou_09 .example2,
#container #naiyou_11 .example,
#container #naiyou_11 .example2{
background:#FEFBD8;
border:solid #EEBB88 1px;
-webkit-border-radius:6px;
margin:8px 0 10px 0;
padding:10px;
}
#container #naiyou_01 .example2,
#container #naiyou_02 .example2,
#container #naiyou_03 .example2,
#container #naiyou_05 .example2,
#container #naiyou_06 .example2,
#container #naiyou_07 .example2,
#container #naiyou_08 .example2,
#container #naiyou_09 .example2,
#container #naiyou_11 .example2{
margin-bottom:0;
}
#container #naiyou_05 dd.dd_2nd,
#container #naiyou_07 dd.dd_2nd{
padding-bottom:10px;
}
#container dd .kome{
color:#F00;
}
#container dd:after{
display:block;
height:0;
content:"";
clear:both;
}
#container dd .inner{
background:#FFF;
-webkit-border-radius:4px;
margin:0;
padding:5px 10px 10px 10px;
}
#container dd .inner p{
margin:5px 0 0 0;
padding:0;
word-wrap:break-word;
}
#container dd .inner p span{
color:#886633;
font-weight:bold;
}
#container .mailBox{
margin-top:5px;
padding-right:5px;
overflow:hidden;
}


/*ログイン、個人情報*/
#loginBox2 p{
margin:0;
padding:0;
}
#loginBox2 p .kome{
color:#F00;
}
#loginBox2 h2,
#personal h2{
font-weight:bold;
font-size:18px;
color:#886633;
margin:0 0 5px 0;
padding:2px 0;
}
#loginBox2 h2{
background:url(../img/ico_key.png) no-repeat 0 center;
padding:2px 0 2px 22px;
}
#loginBox2 dt .title,
#personal dt .title{
float:left;
font-weight:bold;
font-size:18px;
color:#886633;
background-image:none;
margin:0 0 3px 0;
padding:2px 0 2px 2px;
}
#loginBox2 dd.inpt,
#personal dd{
padding-bottom:10px;
}
#naiyou_05 dd.inpt{
padding-bottom:4px;
}
#naiyou_05 dd.kakunin{
padding-bottom:10px;
}
#container .nameBoxL1,
#container .nameBoxR1{
width:45px;
font-size:20px;
font-weight:bold;
margin:10px 5px 0 0;
padding:3px 0 0 0;
text-align:right;
float:left;
}
#container .nameBoxR1{
clear:both;
}
#container .nameBoxL2,
#container .nameBoxR2{
width:80%;
float:left;
}
#container .nameBoxL2{
margin-bottom:10px;
}

#container dd.case_panel.open{
background:#fff;
border:solid #2489ce 1px;
-webkit-border-radius:4px;
margin:5px 0 10px 0;
padding:6px 10px;
}
#container dd.case_panel .tit{
font-size:18px;
background:url(../img/ico_othermail.png) 0 center no-repeat;
-webkit-background-size:18px;
}
#container dd.case_panel .tit a{
font-weight:bold;
color:#0080ff;
display:block;
background:url(../img/ico_open2.png) no-repeat right center;
padding:3px 18px 3px 20px;
}
#container dd.case_panel.open .tit a{
text-decoration:none;
background:url(../img/ico_close2.png) no-repeat right center;
}
#container dd.case_panel .txt{
font-size:18px;
}

#login dd.qst,
#loginBox2 dd.qst{
padding:5px 0 10px 0;
}
#login dd.qst a,
#loginBox2 dd.qst a{
font-weight:bold;
display:block;
color:#0080ff;
background:url(../img/ico_qst.png) no-repeat 0 center;
padding:3px 0 2px 20px;
}
#loginBox2 #login_close{
width:50%;
margin:0 auto 10px auto;
}
#loginBox2 #login_close a{
text-decoration:none;
padding:8px 0;
}

#container #login .btn_orng a,
#container #login_close .btn_orng a{
background:url(../img/sns/ico_open.png) 98% center no-repeat;
-webkit-background-size:20px;
}
#container #login h2,
#container #login_open h2{
font-weight:bold;
font-size:16px;
color:#886633;
background:url(../img/ico_key.png) no-repeat 0 center;
margin:0 0 5px 0;
padding:2px 0 2px 22px;
}
#container #login p .kome,
#container #login_open p .kome{
color:#F00;
}
#container #login dd,
#container #login_open dd{
padding-bottom:8px;
}
#container #login_open .close{
text-align:center;
}

#container #domainBox{
margin-bottom:20px;
}
#container #domainBox p{
font-size:14px;
line-height:1.4;
margin-top:10px;
}
#container #domainBox input{
font-size:16px;
}

/*ボタン*/
#container p.login,
#container #submit,
#container p.submit{
display:block;
border:1px solid #ff7701;
-webkit-border-radius:6px;
-moz-box-shadow:0 2px 4px rgba(0,0,0,.3);
-webkit-box-shadow:0 2px 4px rgba(0,0,0,.3);
box-shadow:0 2px 4px rgba(0,0,0,.3);
background:-webkit-gradient(linear, center top, center bottom, from(#FDB06C),
			color-stop(0.01,#FDB06C),
			color-stop(0.49,#FF811A),
			color-stop(0.50,#FF5900),
			color-stop(0.99,#FF8B1E),
			to(#FF8B1E));
margin:15px 0;
}
#container p.submit2{
margin:5px 0;
}
#container p.login{
margin:10px 0 0 0;
}
#container p.login a,
#container p.submit a,
#container p.submit2 a{
display:block;
text-align:center;
font-size:18px;
font-weight:bold;
line-height:1.2;
text-decoration:none;
text-shadow:1px 1px 3px #B40;
color:#fff;
background:url(../img/btn_go.png) 14px center no-repeat;
-webkit-background-size:14px 14px;
padding:18px 0;
}
#container p.login a{
padding:8px 0;
}

#container p.btn_gry,
#container #submitGry{
display:block;
border:1px solid #BCBCBC;
-webkit-border-radius:6px;
-moz-box-shadow:0 2px 4px rgba(0,0,0,.3);
-webkit-box-shadow:0 2px 4px rgba(0,0,0,.3);
box-shadow:0 2px 4px rgba(0,0,0,.3);
background:-webkit-gradient(linear, center top, center bottom, from(#FDFDFD),
			color-stop(0.01,#FDFDFD),
			color-stop(0.49,#E0E0E0),
			color-stop(0.50,#C6C6C6),
			color-stop(0.99,#E0E0E0),
			to(#E0E0E0));
margin:15px 0;
}
#container p.btn_gry a{
display:block;
text-align:center;
font-size:20px;
font-weight:bold;
text-decoration:none;
text-shadow:none;
color:#664F03;
background:url(../img/btn_go2.png) 14px center no-repeat;
-webkit-background-size:14px 14px;
padding:15px 0;
}
#container p.btn_gry a.popup{
padding:10px 0;
}

#container p.btn_rd{
display:block;
border:1px solid #F00;
-webkit-border-radius:6px;
-moz-box-shadow:0 2px 4px rgba(0,0,0,.3);
-webkit-box-shadow:0 2px 4px rgba(0,0,0,.3);
box-shadow:0 2px 4px rgba(0,0,0,.3);
background:-webkit-gradient(linear, center top, center bottom, from(#FDCACA),
			color-stop(0.01,#FDCACA),
			color-stop(0.49,#FD8888),
			color-stop(0.50,#FD3333),
			color-stop(0.99,#FD7777),
			to(#FD8888));
margin:10px 0 0 0;
}
#container p.btn_rd a{
display:block;
text-align:center;
font-size:20px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 3px #B00;
color:#FFF;
background:url(../img/btn_go3.png) 14px center no-repeat;
-webkit-background-size:14px 14px;
padding:10px 0;
}


#container p{
font-size:18px;
color:#555;
line-height:1.5;
margin-bottom:5px;
}

#container .back{
}
#container .back p{
}

/*入力欄サイズ*/
input[type=text]{
height:24px;
font-size:16px;
-webkit-border-radius:0;
background:#FFF;
}
input[type=email]{
height:25px;
width:95%;
font-size:16px;
-webkit-border-radius:0;
background:#FFF;
}
input[type=tel]{
height:25px;
font-size:16px;
-webkit-border-radius:0;
background:#FFF;
}
input[type=radio]{
vertical-align:bottom;
height:22px;
width:22px;
}
input[type=password]{
height:24px;
font-size:16px;
-webkit-border-radius:0;
background:#FFF;
}
input[type=checkbox]{
vertical-align:bottom;
height:20px;
width:20px;
}

/*ソーシャルログイン*/
#social_login{
	margin:15px 0;
	padding:10px 0;
	text-align:center;
	background-color:#EDEBDC;
	-webkit-border-radius:6px;
}
#social_login h2{
	width:264px;
	height:32px;
	margin:0 auto 5px;
	padding:0;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../img/sns/ico_sns2.png) no-repeat;
	-webkit-background-size:100%;
}
#social_login h3{
	margin:0 0 10px;
	padding:0;
	font-size:16px;
	font-weight:normal;
	line-height:1.4;
	color:#555;
}
#social_login ul{
	width:280px;
	margin:0 auto;
}
#social_login ul li{
	margin-bottom:16px;
	-webkit-border-radius:5px;
	-webkit-box-shadow:0 2px 4px rgba(0,0,0,.3);
}
#social_login ul li.mainte{
	opacity:0.5;
	-webkit-box-shadow:none;
}
#social_login ul li a{
	width:280px;
	height:44px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}
#social_login ul li a.btn_yahoo{
	background:url(../img/sns/btn_yahoo_login.png) no-repeat;
	-webkit-background-size:100%;
}
#social_login ul li a.btn_google{
	background:url(../img/sns/btn_google_login.png) no-repeat;
	-webkit-background-size:100%;
}
#social_login ul li a.btn_facebook{
	background:url(../img/sns/btn_facebook_login.png) no-repeat;
	-webkit-background-size:100%;
}
#social_login ul li a.btn_suntorytown{
	background:url(../img/sns/btn_suntorytown_login.png) no-repeat;
	-webkit-background-size:100%;
}
#social_login .mainte_text{
	margin:-10px 0 10px;
	font-size:11px;
	line-height:1.2;
	text-align:center;
}
#social_login #social_link{
	width:280px;
	margin:0 auto;
	font-size:18px;
	line-height:1.4;
	text-align:left;
}
#social_login #social_link a{
	color:#2489ce;
	font-weight:normal;
}
