#suntory_contents, #suntory_contents form, #suntory_contents input, #suntory_contents select {
    letter-spacing: 0;
}

body {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

html {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
	font-size: 30px;
	color: #333;
	line-height: 100%;
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 400;
}

@media screen and (max-width: 750px) { html { font-size: 29px; } }
@media screen and (max-width: 700px) { html { font-size: 28px; } }
@media screen and (max-width: 650px) { html { font-size: 27px; } }
@media screen and (max-width: 625px) { html { font-size: 26px; } }
@media screen and (max-width: 600px) { html { font-size: 25px; } }
@media screen and (max-width: 575px) { html { font-size: 24px; } }
@media screen and (max-width: 550px) { html { font-size: 23px; } }
@media screen and (max-width: 525px) { html { font-size: 22px; } }
@media screen and (max-width: 500px) { html { font-size: 21px; } }
@media screen and (max-width: 475px) { html { font-size: 20px; } }
@media screen and (max-width: 450px) { html { font-size: 19px; } }
@media screen and (max-width: 425px) { html { font-size: 18px; } }
@media screen and (max-width: 400px) { html { font-size: 17px; } }
@media screen and (max-width: 380px) { html { font-size: 16px; } }
@media screen and (max-width: 360px) { html { font-size: 15px; } }
@media screen and (max-width: 340px) { html { font-size: 15px; } }
@media screen and (max-width: 330px) { html { font-size: 14px; } }

.pc_only { display: none; } 
.sp_only { display: block; } 

ul,li,h1,h2,h3,dl,dt,dd,p {
	list-style-type: none;
	margin: 0;
	padding: 0;
}


img {
	width: 100%;
	height: auto;
}


h1 { font-size: 206.67%; /*calc( 62 / 30 * 100%)*/ line-height: 100%; font-weight: 700; }
h2 { font-size: 146.67%; /*calc( 44 / 30 * 100%)*/ line-height: 100%; font-weight: 700; }
h3 { font-size: 106.67%; /*calc( 32 / 30 * 100%)*/ line-height: 100%; font-weight: 700; }
h1 span { font-size: 66.7% }
#header p span { font-size: 86.67%; /*calc( 26 / 30 * 100%)*/ }
.search_input { font-size: 73.33%; /*calc( 22 / 30 * 100%)*/}
.search_submit { font-size: 100%; /*calc( 30 / 30 * 100%)*/ }
.topicpath { font-size: 83.33%; /*calc( 25 / 30 * 100%)*/ }



a {
	color: #333;
	text-decoration: none;
}



	#searchbar_wrap {
		width: 100%;
		padding: 6.6% 0 0 0;
		background-color: rgba(174,226,241,0.6);
	}

	#searchbar_inner {	
  		width: 92%;
		margin: 0 4%;
	}

	#searchbar_block {
		padding: 4% 0 6.6% 0;
	}

		#searchbar_block #searchbar {
	
		}


			.search_block {
				width: 100%;
				height: 100px;
			}

			.search_icon {
				width: 12%;
    			height: 100px;
    			/*display: inline-block;*/
    			margin: 0;
    			padding: 0;
    			vertical-align: bottom;
			    background: url(../img/img2018/icon_search.png) left 50% center no-repeat;
				background-size: 60% auto;
    			background-color: #fff;
				display: block;
    			float: left;
			}
			
			.search_icon img {
				display: none;
			}

			input[type="button"],
			input[type="text"]{
   				-webkit-appearance: none;
			}

			.search_input {
				border: none;
    			width: 69%;
    			height: 100px;
    			padding-left: 0;
    			background-color: #fff;
				vertical-align: middle;
				color: #46555e;
				display: block;
    			float: left;
    			margin: 0;
    			padding: 0;
    			border-radius: 0;
			}
		

			#suntory_contents input.search_input {
				letter-spacing: -1.2px;
			} 

				input:-webkit-autofill {
    				-webkit-box-shadow: 0 0 0px 1000px white inset;
			
				}


			.search_input:focus {
  				outline: 0;
			}

			.search_submit {
				border: none;
    			color: #fff;
    			background-color: #54b0ce;
    			margin: 0;
    			width: 19%;
    			height: 100px;
    			text-align: center;
    			line-height: 52px;
				border-top-right-radius: 50px;
				border-bottom-right-radius: 50px;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;				
				font-weight: 700;
    			letter-spacing: 4px !important;
				vertical-align: middle;
				float: left;
    			padding: 0;
			}

			.search_submit:hover {
				cursor: pointer;
				opacity: 0.7;
			}


		#searchbar_block ul#keyword_link {
			width: 100%;
			margin-top: 6.6%;
			overflow: hidden;
		}

		#searchbar_block ul#keyword_link li {
			width: 48%;
			float: left;
			margin-right: 4%;
		}

		#searchbar_block ul#keyword_link li:last-child {
			margin-right: 0;
		}

		#searchbar_block ul#keyword_link li a {
			height: 80px;
			line-height: 80px;
			display: block;
			font-weight: 700;
			letter-spacing: 0.1px;
		}

		#searchbar_block ul#keyword_link li:first-child a {
		    padding-left: 30%;
    		width: auto;
    		background: url(../img/icon_list.png) left 15% center no-repeat;
    		background-size: auto 45%;
    		background-color: #fff;
   		 	border-radius: 45px;
		}

		#searchbar_block ul#keyword_link li:last-child a {
			padding-left: 37%;
    		width: auto;
    		margin-right: 0;
    		background: url(../img/img2018/icon_new.png) left 15% center no-repeat;
    		background-size: auto 60%;
    		background-color: #fff;
    		border-radius: 45px;
		}



.topicpath {
	max-width: 1164px;		
  	width: 92%;
	margin: 0 4%;
	color: #2d8fc1;
	line-height: 200%;	
}
	
	.topicpath a {
		color: #2d8fc1;
	}

	.topicpath span {
		color: #333;
	}

	.topicpath span.gt {
		padding: 0 5px;
	}



	#footer_inner #pagetop.fixed {
    	position: fixed;
    	width: 12%;
    	right: 2% !important;
    	bottom: 2%;
    	z-index: 15;
    	display: none;
	}

	#footer_inner #pagetop.absolute {
		position: absolute;
    	width: 12%;
    	bottom: -3%;
    	right: 2% !important;
	}

	#footer_inner #pagetop img {
		width: 100%;
		height: auto;
	}





@media screen and (max-width: 550px) {
  .search_block { height: 80px; }
  .search_icon { width: 9%; height: 80px; }
  .search_input { height: 80px; width:72% }
  .search_submit { height: 80px; }
  #searchbar_block ul#keyword_link li a { height: 70px; line-height: 70px; }
  #suntory_contents input.search_input { letter-spacing: -0.8px; } 
}

@media screen and (max-width: 460px) {
  #searchbar_block ul#keyword_link li a { height: 60px; line-height: 60px; }
}

@media screen and (max-width: 430px) {
  .search_block { height: 60px; }
  .search_icon { height: 60px; }
  .search_input { height: 60px; }
  .search_submit { height: 60px; letter-spacing: 2px; }
  #searchbar_block ul#keyword_link li a { height: 50px; line-height: 50px; }
}