@charset "utf-8";

#suntoryCommonWrapper .sp_none{
display:none;
}

/* clearfix */

.clearfix:after {
    content: "."; 
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
 
.clearfix {
    min-height: 1px;
}
 
* html .clearfix {
    height: 1px;
    /*¥*//*/
    height: auto;
    overflow: hidden;
    /**/
}
 
.pc_only { display: none;}
.sp_only { display: block;}


/* Reset
======================================================================== */
html, body{
margin:0;
padding:0;
border:0;
}

img{
border:0;
}

/* #wrapper Reset
======================================================================== */
#wrapper{
margin:0;
padding:0;
border:0;
overflow:hidden;
}

#wrapper h1,#wrapper h2,#wrapper h3,#wrapper h4,#wrapper h5,#wrapper h6,#wrapper p,#wrapper a,#wrapper ol,#wrapper ul,#wrapper li,#wrapper dl,#wrapper dt,#wrapper dd,#wrapper table,#wrapper thead,#wrapper tbody,#wrapper th,#wrapper td,#wrapper form,#wrapper br,#wrapper address,#wrapper button,#wrapper i,#wrapper span,#wrapper strong{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
font-style:normal;
vertical-align:baseline;
outline:none;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
font-family:"suntory sabon";
-webkit-text-size-adjust:100%;
}

#wrapper table{
border-collapse:collapse;
text-align:left;
}

#wrapper input{
vertical-align:middle;
}

#wrapper ol,#wrapper ul,#wrapper li{
list-style:none;
}

#wrapper a{
cursor:pointer;
outline:none;
text-decoration:none;
color:#552209;
}

#wrapper .on a.hover{
cursor:default;
}

#wrapper a,
#wrapper input,
#wrapper button{
background-color:transparent;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

/*
#wrapper a:link{color:#06c;}
#wrapper a:visited{color:#579ab9;}
#wrapper a.hover,#wrapper a:active{color:#0cf;}
*/

#wrapper img{
-ms-interpolation-mode:bicubic;
}


/* #container .contents
======================================================================= */
#container .contents{
	background: #efece3;
}


/* #container .contents #main_contents
======================================================================= */
#main_contents{
padding: 20px 3.125% 20px 3.125%;
background-color: #efece3;
text-align: left;
color: #322517;
}


/* #qa_contents
======================================================================= */
#qa_contents {
	width: 100%;
	padding-top: 0.3%;
	padding-bottom: 20px;
	background-color: #fff;
	margin-bottom: 20px;
}


/* #main_title
=========================== */

/* top */

#qa_contents #main_visual {
	margin: 4.6% 3.5% 0 3.5%;
    width: 93%;
}

#qa_contents #main_visual img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

#qa_contents #main_title.top {
	background: #f9ecd4;
    padding: 2%;
    margin: 2.3% 3.5% 0 3.5%;
}

#qa_contents #main_title h1 {
    font-size: 24px;
    font-weight: bold;
    color: #6a4b34;
    line-height: 130%;
    padding: 2% 6% 0;
    background: url(https://www.suntory.com/factory/qa/img/bg_ttl_top.gif) left center no-repeat;
}


/* yamazaki/hakushu */
#qa_contents #main_title.detail {
	background: #f9ecd4;
	padding: 2%;
    margin: 2.3% 4.6% 0 4.6%;
}

#qa_contents #main_title.detail h1 {
	padding: 2% 4% 0;
	background: none;
	font-size: 18px;
}

#qa_contents #main_title.detail h1.yamazaki {
	border-left: 8px solid #743a1d;
}

#qa_contents #main_title.detail h1.hakushu {
	border-left: 8px solid #009a22;
}

#qa_contents .btn_back {
    margin: 4.6% 4.6% 0 4.6%;
    text-align: center;
}

#qa_contents .btn_back a img {
    width: 60%;
    height: auto;
}


#qa_contents #menu {
    margin: 2.3% 3.5% 6% 3.5%;
}

#qa_contents #menu ul {
	width: 100%;
}

#qa_contents #menu ul li {
	width: calc( 100% - 42px );
    padding: 11px 0 11px 40px;
    border: 1px solid #6a4b34;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    color: #6a4b34;
    box-sizing: content-box;
	margin-bottom: 10px;
	position: relative;
}

#qa_contents #menu ul li#q2 {
    padding-top: 6px;
	padding-bottom: 6px;
}

#qa_contents #menu ul li:after {
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 2px #6a4b34;
    border-right: solid 2px #6a4b34;
    position: absolute;
    top: 45%;
    right: 30px;
    transform: translateY(-50%) translateX(-50%) rotate(135deg);
}

#qa_contents #menu ul li span.menu_small {
	font-size: 90%;
    line-height: 100%;
    display: block;
}

#qa_contents #menu ul li:last-child {
	margin-bottom: 0;
}



/* #qa_contents h2
   #qa_contents h3
=========================== */
#qa_contents h2 {
	color: #743a1d;
	font-size: 22px;
	font-weight: bold;
	margin: 0 3.5% 0 3.5%;
}

#qa_contents h2.yamazaki,
#qa_contents h2.hakushu {
    font-size: 18px;
	font-weight: normal;
    margin: 4.6% 4.6% 0 4.6%;
    padding: 0 0 2% 0;
    border-bottom: 2px solid #743a1d;
}

#qa_contents h2 p.title {
	border-left: 8px solid #743a1d;
    padding: 0 0 0 2%;
}

#qa_contents h2.hakushu p.title {
	border-left: 8px solid #009a22;
}

#qa_contents h3 {
	color: #743a1d;
	font-size: 18px;
	margin: 0 0 20px 0;
	border-bottom: 2px solid #743a1d;
	line-height: 1.2em;
	padding: 0 0 2% 0;
}

#qa_contents a:hover img{
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
}

#qa_contents p.explain_head {
	font-size: 18px;
	line-height: 130%;
}

#qa_contents p.explain_mbt {
	font-size: 18px;
	margin-bottom: 10px;
}

#qa_contents p.explain {
	font-size: 16px;
	line-height: 130%;
	text-indent: -1em;
	padding-left: 1em;
	margin: 15px 0 15px 0;
}
#qa_contents p.explain_em {
	color: #dd0000;
	font-size: 16px;
	line-height: 130%;
	text-indent: -1em;
	padding-left: 1em;
	margin: 15px 0 15px 0;
}
#qa_contents span.explain_em {
	color: #dd0000;
}
#qa_contents ul.explain_list li {
	font-size: 16px;
	line-height: 150%;
	text-indent: -1em;
	padding-left: 1em;
	margin: 0 0 5px 0;
}


#qa_contents .qa_category {
    margin-bottom: 10%;
}
#qa_contents .qa_category #q1_1 .question,
#qa_contents .qa_category #q2_1 .question,
#qa_contents .qa_category #q3_1 .question {
    margin-top: 1.3%;
}



/* #FAQ top
=========================== */
#qa_contents p.btn {
	text-align: center;
	margin: 20px 0 60px 0;
}
#qa_contents p.btn_tour {
	margin: 0 auto 30px auto;
	width: 80%;
}

#qa_contents .wrapper {
	margin: 4.6% 4.6% 6.2% 4.6%;
} 

#qa_contents .sub_block {
	margin: 4.6% 4.6% 0 4.6%;
}
#qa_contents .sub_block img {
	width: 100%;
	margin: 3% 0;
}

#qa_contents .question{
	margin: 2.6% 3.5% 0 3.5%;
	padding: 10px 0;
	font-weight: bold;
	font-size: 14px;
	background: #faf7f0 url(https://www.suntory.com/factory/qa/img/qa_btn_on.png) 97% 50% no-repeat;
	background-size:25px 25px;
	display: block;
	overflow: hidden;
}

#qa_contents .Q{
	margin: 0 0 0 8px;
	width: calc( 16% - 8px );
	color: #d6500d;
	font-size: 24px;
    display: block;
    float: left;
    line-height: 100%;
}

#qa_contents .q_detail{
    margin: 0 6px 0 6px;
    font-size: 18px;
    width: 70%;
    display: block;
    margin-left: 16%;
}

#qa_contents .answer {
	margin: 2.6% 3.5% 0 3.5%;
	overflow: hidden;
}

#qa_contents .A{
	margin: 0 0 0 8px;
	width: calc( 16% - 8px );
	color: #552209;
	font-size: 24px;
	font-weight: bold;
	float:left;
	display: block;
}

#qa_contents span.small {
	font-size: 80%;
}

#qa_contents .a_detail{
	color: #552209;
	font-size: 18px;
	line-height: 1.5em;
	width: 75%;
	float:left;
	display: block;
}

#qa_contents .a_detail .outside_link {
	font-weight: bold;
}
#qa_contents .a_detail .outside_link a {
	text-decoration: underline;
}


#qa_contents .answer p.ex{
	text-indent: -1em;
	padding-left: 1em;
}

#qa_contents ul.linkbt {
	width: 100%;
	margin: 3.5% auto 4.6% auto;
}

#qa_contents ul.linkbt li {
	width: 48.5%;
	margin-right: 3%;
	float: left;
}

#qa_contents ul.linkbt li:last-child {
	margin-right: 0;
}

#qa_contents ul.linkbt li a {
	width: 100%;
	display: block;
}

#qa_contents ul.linkbt li a img{
	width: 100%;
	height: auto;
}

#qa_contents ul.text_link {
	margin-top: 5px;
}

#qa_contents ul.text_link li a {
	display: block;
	padding-left: 30px;
	position: relative;
	text-decoration: underline;
}

#qa_contents ul.text_link li a:before {
	content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 2px #552209;
    border-right: solid 2px #552209;
    transform: rotate(45deg);
    position: absolute;
    top: 7px;
    left: 10px;
}





#qa_contents a:hover img{
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
}

.question {
	cursor:pointer;
}

#qa_contents .question.active{
	background: #faf7f0 url(https://www.suntory.com/factory/qa/img/qa_btn_off.png) 97% 50% no-repeat;
	background-size:25px 25px;

}

.answer {
	display : none;
}


/* make_reservation
=========================== */
#qa_contents .make_reservation {
	background: #f9ecd4;
	margin: 0 0 20px 0;
	padding: 20px;
	font-size: 16px;
	line-height: 1.2em;
}
#qa_contents .make_reservation h3 {
	color: #6a4b34;
	font-size: 18px;
    margin: 0 0 20px 0;
    border-bottom: none;
    padding: 0;
}
#qa_contents .make_reservation .hl_em {
	color: #dd0000;
	font-size: 16px;
	text-indent: -0.8em;
	padding: 0 0 20px 0.8em;
}

#qa_contents .make_reservation .left_box{
	margin-bottom: 20px;
}
#qa_contents .make_reservation .left_box .hl{
	background: #e1ac52;
	text-align: center;
	color: #fff;
	font-size: 20px;
	padding: 10px 0;
}
#qa_contents .make_reservation .left_box .in{
	background: #fff;
	padding: 20px;
}
#qa_contents .make_reservation .left_box .in img{
	padding: 10px 0;
}
#qa_contents .make_reservation .left_box .in .cap{
	width:70%;
	margin: 0 auto;
}
#qa_contents .make_reservation .left_box .in p.complete{
	font-size: 18px;
	padding: 30px 0 10px 0;
	padding-top: 15px;
}
#qa_contents .make_reservation .left_box .in p.indent{
	text-indent: -1.4em;
	padding: 0 0 0 1.4em;
	font-size: 18px;
}
#qa_contents .make_reservation .left_box .in p.em{
	color: #dd0000;
	font-size: 16px;
	padding: 0;
}
#qa_contents .make_reservation .left_box .in p.mt1em{
	margin-top: 1em;
}
#qa_contents .make_reservation .right_box{
}
#qa_contents .make_reservation .right_box .hl{
	background: #479bad;
	text-align: center;
	color: #fff;
	font-size: 20px;
	padding: 10px 0;
}
#qa_contents .make_reservation .right_box .in{
	background: #fff;
	padding: 20px 20px 0 20px;
}
#qa_contents .make_reservation .right_box .in p.phone{
	display: block;
	width: 100%;
	border: 1px solid #000;
    margin: 0 auto 10px auto;
    padding: 10px 0 10px 15px;
}
#qa_contents .make_reservation .right_box .in p.phone a{
	color: #322517;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 1px;
	background: url(https://www.suntory.com/factory/qa/img/tel_ico_sp.png) no-repeat 0 52%;
	-moz-background-size: 14px 18px;
	-webkit-background-size: 14px 18px;
	padding: 0 0 0 20px;
}
#qa_contents .make_reservation .right_box .in p.em{
	text-indent: -1em;
	padding: 0 0 1em 1em;
	font-size: 16px;
}
#qa_contents .make_reservation .right_box .in p.em.red{
	color: #dd0000;
}
#qa_contents .make_reservation .right_box .in p.please{
	font-size: 18px;
	padding: 0 0 10px 0;
}
#qa_contents .make_reservation .right_box .in ul{
	padding: 0 0 20px 0;
}
#qa_contents .make_reservation .right_box .in ul li{
	font-size: 16px;
	text-indent: -1em;
	padding: 0 0 0 1em;
}


/* download_app
=========================== */
#qa_contents .download_app {
	background: #f9ecd4;
	margin: 0 0 20px 0;
	padding: 20px;
	font-size: 16px;
	line-height: 1.2em;
}
#qa_contents .download_app p {
	margin-top: 1em;
}
#qa_contents .download_app a {
	text-decoration: underline;
}
#qa_contents .download_app a:hover {
	text-decoration: none;
}


/* important_attention
=========================== */
#suntory_contents #important_attention {
	width: calc( 93% - 2px );
    margin: 3.125% 3.5%;
    border: 1px solid #dc0000;
	background-color: #fff;
}
#suntory_contents #important_attention p a {
    color: #000;
	display: block;
	font-size: 14px;
    padding: 3.125%;
    position: relative;
}
#suntory_contents #important_attention p a span.part1 {
    padding: 1.5% 0.7%;
    background-color: #dc0000;
    color: #fff;
    font-weight: bold;
    float: left;
}
#suntory_contents #important_attention p a span.part2 {
	margin-left: 95px;
    display: block;
    line-height: 130%;
    font-weight: bold;
    text-align: left;
	height: auto;
    line-height: 130%;
}	


@media screen and (max-width: 520px) { 
#qa_contents .Q { width: calc( 18% - 8px ); }
#qa_contents .q_detail { margin-left: 18%; }
#qa_contents .A { width: calc( 18% - 8px ); }
#qa_contents .a_detail { width: 75%; }
}

@media screen and (max-width: 470px) { 
#qa_contents .Q { width: calc( 20% - 8px ); }
#qa_contents .q_detail { margin-left: 20%; }
#qa_contents .A { width: calc( 20% - 8px ); }
#qa_contents .a_detail { width: 75%; }
}

@media screen and (max-width: 420px) { 
#qa_contents .Q { width: calc( 22% - 8px ); }
#qa_contents .q_detail { margin-left: 22%;  width: 60%; }
#qa_contents .A { width: calc( 22% - 8px ); }
#qa_contents .a_detail { width: 70%; }
}


@media screen and (max-width: 380px) { 
#qa_contents .Q { width: calc( 24% - 8px ); }
#qa_contents .q_detail { margin-left: 24%; }
#qa_contents .A { width: calc( 24% - 8px ); }
#qa_contents .a_detail { width: 70%; }
#qa_contents #menu ul li { width: calc( 100% - 32px ); padding-left: 30px; }
#qa_contents #menu ul li:after { right: 20px; }	
}

@media screen and (max-width: 350px) { 
#qa_contents .Q { width: calc( 26% - 8px ); }
#qa_contents .q_detail { margin-left: 26%; }
#qa_contents .A { width: calc( 26% - 8px ); }
#qa_contents .a_detail { width: 65%; }
#qa_contents #menu ul li { width: calc( 100% - 22px ); padding-left: 20px; }
#qa_contents #menu ul li:after { right: 15px; }	
}