@charset "utf-8";

#pan {
	margin-bottom: 10px;
}

#head_wrap {
	width: 100%;
	background-color: #ebe8e1;
	margin: 20px 0;
}
	#head_wrap #head h1 {
      margin: 0 auto;
      padding-top: 10px;
	  width: 200px;
	}
	#head_wrap #head h1 img {
		width: 100%;
		height: auto;
	}

#suntory_contents #wrapper {
    width: calc( 100% - 20px );
    margin: 0 10px 70px 10px;
}

#link_tour {
    float: right;
    overflow: hidden;
	margin: 0 10px 20px 10px;
}
	#link_tour a {
		display: block;
		position: relative;
	    padding: 10px 40px 10px 20px;
    	color: #000;
		border: 2.5px solid #a5dfea;
		border-radius: 50px;
		line-height: 100%;		
	}
	#link_tour a:hover {
		text-decoration: none;
	}
#link_tour a::after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    position: absolute;
    top: 45%;
    right: 20px;
    transform: rotate(45deg) translateY(-50%);
}

#wrapper #menu ul {
	width: calc( 100% - 20px );
	overflow: hidden;
	margin: 0 10px;
}
#wrapper #menu ul li {
    width: calc( ( 100% - 79px ) / 2 );
    float: left;
	font-weight: bold;
	line-height: 110%;
	margin:0 15px 10px 0;
	padding: 0 30px 0 0;
	border: 1px solid #ae5215;
	position: relative;
	height: 46px;
}
#wrapper #menu ul li:nth-child(odd) {
	margin-right: 0;
}
#wrapper #menu ul li:nth-child(1),
#wrapper #menu ul li:nth-child(2),
#wrapper #menu ul li:nth-child(3) {
    width: calc( ( 100% - 126px ) / 3 )
}
#wrapper #menu ul li:nth-child(1) {
	margin-right: 15px;
}


#wrapper #menu ul li::after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    position: absolute;
    top: 35%;
    right: 13px;
    transform: rotate(135deg) translateY(-50%);
}
#wrapper #menu ul li span {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 8%;
	width: 80%;
	color: #333;
}


#wrapper  .faq {
    width: 100%;
    border-top: 5px solid #ebe8e1;
    margin-top: 20px;
}

	#wrapper  .faq h2 {
 		margin: 0 0 0 10px;
		padding: 25px 0 15px 0;
		font-size: 20px;
		color: #ae5215;
    }

	#wrapper  .faq dl {
		width: calc( 100% - 20px );
		margin: 0 10px;
    }


	#wrapper  .faq dt {
		font-size: 18px;
    	color: #000;
    	padding: 22px 2% 22px 20%;
    	background: url(../img/n_icon_question.png) 4% 16px no-repeat;
    	background-size: 45px;
    	border-bottom: 2px solid #ebe8e1;
		line-height: 170%;
    }

	#wrapper  .faq dt.last_child {
		border-bottom: none;
    }

	#wrapper  .faq dt a {
		font-size: 18px;
		color: #000;
    }




	#wrapper  .faq dd {
		font-size: 18px;
    	color: #000;
    	line-height: 170%;
    	margin: 0;
    	padding: 65px 2% 6% 4%;
    	background: url(../img/n_icon_answer.png) 4% 15px no-repeat;
    	background-size: 45px;
    	background-color: #fff6e4;
		display: none;
    }

	#wrapper  .faq dd span.factory_link_wrap {
		display: block;
    	margin-top: 10px;
	}

	#wrapper  .faq dd span.factory_link {
		display: block;
    	padding-top: 8px;
		padding-left: 2em;
    	text-indent: -2em;
	}
/*
	#wrapper  .faq dd a {
		font-size: 18px;
		color: #000;
	}
 */ 

#wrapper .faq a { word-break: break-all; }

@media screen and (max-width:400px) {
#wrapper #menu ul li {font-size: 15px;}
#wrapper #menu ul li span {left: 7%;}
}
@media screen and (max-width:370px) {
#wrapper #menu ul li span {left: 5%;}
}
@media screen and (max-width:360px) {
#wrapper #menu ul li {font-size: 14px;letter-spacing: -0.5px;}
}
@media screen and (max-width:350px) {
#wrapper #menu ul li {font-size: 13px;}
}
@media screen and (max-width:340px) {
#wrapper #menu ul li {font-size: 12px;}
}