@charset "utf-8";

#suntory_contents {
    padding-bottom: 100px;
    position: relative;
}

#suntory_contents #container {
	position: relative;
}


/***announcement***/
#suntory_contents #announcement {
    width: calc( 100% - ( 22.336769759% + 40px));
    margin: -32px 0 40px 0;
}
#suntory_contents #announcement dd p a {
    color: #000;
}
#suntory_contents #announcement dd p a:after {
    border-top: 3px solid #0f96b8;
    border-right: 3px solid #0f96b8;
}
#suntory_contents #announcement dd p a:hover:after {
    border-top: 3px solid #007694;
    border-right: 3px solid #007694;
}


/***サントリーID***/
#suntory_contents #aside {
    margin-top: 0 !important;
    top: 44px !important;	
}

#suntory_contents #aside #aside_inner {
	margin-top: 0 !important;
}


/***矢印個別調整***/
#suntory_contents a.arrow2_big:before, #suntory_contents span.arrow2_big:before {
    top: .6em;
    right: .6em;
}



/*h2*/
#suntory_contents .title_bar {
	width: 100%;
	overflow: hidden;
	margin: 0 0 15px 0 !important;
}

	#suntory_contents .title_bar h2,
	#suntory_contents .title_bar h2 a {
		font-size: 24px;
    	font-weight: bold;
    	color: #0f9abd;
		line-height: 30px;
		float: left;
	}

	#suntory_contents .title_bar h2 a:hover {
		color: #007694;
		text-decoration: underline;
		text-decoration-color: #007694;
	}

	#suntory_contents .title_bar h2 span.h2_thin,
	#suntory_contents .title_bar h2 a span.h2_thin {
		color: #000;
		font-weight: normal;
	}


/*一覧リンクボタン*/
#suntory_contents .title_bar .btn_list  {
	float: right;
	height: 30px;
	line-height: 30px;
    padding-right: 0;
}

	#suntory_contents .title_bar .btn_list a {
		height: 24px;
    	line-height: 32px;
    	font-size: 16px;
    	display: inline-block;
    	padding: 0 29px 0 0;
    	position: relative;
		font-weight: bold;
		color: #000;
    	background: none;
    	border: none;
		border-radius: 0;
	}


/*#campaign_container*/
#suntory_contents #campaign_container {
	width: calc( 100% - ( 22.336769759% + 40px));
	padding-bottom: 0;
	padding-left: 0;
}

/*実施中のキャンペーン*/
#suntory_contents #campaign_container ul {
    margin-bottom: 70px;
}

#suntory_contents #campaign_container ul li {
    margin-bottom: 0;
    width: calc( ( 99% - 50px) / 3);
    margin-right: 25px;
}


/*地域のキャンペーン*/
#suntory_contents #campaign_container select {
	padding: 0 15px;
}

#suntory_contents #campaign_container .select_wrap {
 	float: left;
    margin-left: 20px;
    height: 26px;
    line-height: 26px;
    border-radius: 13px;
	width: 211px;
}
#suntory_contents #campaign_container .select_wrap:after {
	content: none;
}


/*地域のキャンペーン*/
#suntory_contents #campaign_container .caption {
	display: none;
}



/*CM・動画*/
#suntory_contents #movie_container {
    width: calc( 100% - ( 22.336769759% + 40px));
    box-sizing: border-box;
    margin-bottom: 75px;
    padding: 0 ;
}

#suntory_contents #movie_container.movie_container_login {
    margin-bottom: 0;
}

#suntory_contents #movie_container ul {
    width: 100%;
}

#suntory_contents #movie_container li {
    width: calc( ( 100% - 25px ) / 2 );
	font-size: 16px;
}

#suntory_contents #movie_container li:nth-child(1) {
    margin: 0 25px 0 0;
}

#suntory_contents #movie_container .schImage img {
    margin-bottom: 15px;
}

#suntory_contents #movie_container ul li .schTtl,
#suntory_contents #movie_container ul li .schTtl a {
    font-size: 16px;
}


@media screen and (min-width: 961px) {
#suntory_contents #movie_container .inner {
	padding: 0;
}	
}




/*サントリーIDは登録無料特典盛りだくさん！*/

#suntory_contents #water_container {
	width: 100%;
	margin: 0 0 80px 0;
	padding: 0;
	background: url(/enjoy/top/img/img2019_wave_top.jpg) left top repeat-x,url(/enjoy/top/img/img2019_wave_bottom.jpg) left bottom repeat-x;
	background-size: 28px 12px,28px 12px;
	background-color: #f1f5f6;
}

#suntory_contents #water_container .inner {
    width: 100%;
    max-width: 1164px;
	margin: 0 auto;
	padding: 0;
	background: none;
}

#suntory_contents #water_container .inner #benefit {
    width: calc( 100% - ( 22.336769759% + 40px));
	padding: 55px 0 65px 0;
}

@media screen and (max-width: 960px){
#suntory_contents #water_container .inner {
    width: 960px;
    max-width: 960px;	
}
}





#suntory_contents #water_container .inner h2,
#suntory_contents #coupon_container h2,
#suntory_contents #recommend_event_container h2 {
	font-size: 32px;
    font-weight: bold;
    text-align: center;
	line-height: 38px;
	margin: 0 0 10px 0;
}
#suntory_contents #water_container .inner h2 {
    margin: 0 0 30px 0;
}

#suntory_contents #water_container .inner h2 span.h2_thin,
#suntory_contents #coupon_container h2 span.h2_thin,
#suntory_contents #recommend_event_container h2 span.h2_thin {
	color: #000;
    font-weight: normal;
}

#suntory_contents #water_container .inner h2 span.benefit_u {
	background:url(/enjoy/top/img/img2019_benefit_bg.jpg) left bottom 10px repeat-x;
	background-size: auto 10px;
}

#suntory_contents #water_container .inner ul {
	width: 100%;
	overflow: hidden;
}

#suntory_contents #water_container .inner ul li {
	width: calc(( 99% - 120px ) / 3 );
	margin-right: 59.9px;
	padding-top: 145px;
	float: left;
}

#suntory_contents #water_container .inner ul li:last-child {
	margin-right: 0;
}

#suntory_contents #water_container .inner ul li#benefit1 {
	background:url(/enjoy/top/img/img2019_benefit1.png) center top no-repeat;
	background-size: 140px;	
}
#suntory_contents #water_container .inner ul li#benefit2 {
	background:url(/enjoy/top/img/img2019_benefit2.png) center top no-repeat;
	background-size: 140px;	
}
#suntory_contents #water_container .inner ul li#benefit3 {
	background:url(/enjoy/top/img/img2019_benefit3.png) center top no-repeat;
	background-size: 140px;	
}




	#suntory_contents #water_container .inner ul li h3 {
		font-size: 24px;
		color: #0f96b8;
		line-height: 160%;
		font-weight: bold;
	}
		#suntory_contents #water_container .inner ul li h3 span.benefit_s {
			font-size: 19px;
			background:url(/enjoy/top/img/img2019_benefit_bg.jpg) left bottom 10px repeat-x;
			background-size: auto 10px;
			display: inline-block;
		}
		#suntory_contents #water_container .inner ul li h3 span.benefit_l {
			font-size: 36px;
		}

	#suntory_contents #water_container .inner ul li p {
		font-size: 14px;
		color: #000;
		line-height: 140%;

	}

#suntory_contents #water_container .inner .btn_list {
	display: block;
    margin: 50px auto 25px auto;
	padding: 0;
}


#suntory_contents #water_container #suntory_id {
	width: 100%;
	text-align: center;
}

#suntory_contents #water_container #suntory_id a {
	display: inline-block;
	padding-right: 20px;
	position: relative;
}

#suntory_contents #water_container #suntory_id a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: .5em;
    right: .3em;
    width: .4em;
    height: .4em;
    margin: auto;
    border-top: 2px solid #0f96b8;
    border-right: 2px solid #0f96b8;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#suntory_contents #water_container #suntory_id a:hover:after {
    border-top: 2px solid ##007694;
    border-right: 2px solid ##007694;
}








/** container2 **/
#suntory_contents #container2 {
    margin: 0 auto;
    width: 100%;
    max-width: 1164px;
}
#suntory_contents #container2_inner {
     width: calc( 100% - ( 22.336769759% + 40px));
}

@media screen and (max-width: 960px){
#suntory_contents #container2 {
    width: 960px;
	max-width: 960px;
}	
#suntory_contents #point,
#suntory_contents #point_use,
#suntory_contents #coupon_container {
    width: 100%;
}	
}

/*サントリーポイントをためよう！*/
#suntory_contents #point {
    margin: 0 auto 80px auto;
}

#suntory_contents #point #point01,
#suntory_contents #point #point02 {
    margin-bottom: 60px;
}


#suntory_contents #point .title_bar,
#suntory_contents #point_use .title_bar {
    margin: 0 0 10px 0 !important;
}

#suntory_contents #point .title_bar h2,
#suntory_contents #point_use .title_bar h2 {
	width: 100%;
    text-align: center;
    font-size: 32px;
	line-height: 38px;
}

#suntory_contents #point .title_bar h2 span.sp_mark,
#suntory_contents #point_use .title_bar h2 span.sp_mark {
	padding-right: 36px;
    background: url(/enjoy/top/img/img2019_icon_sp.png) right 1px top 5px no-repeat;
    background-size: 32px;
}

#suntory_contents #point .lead {
	font-size: 16px;
    text-align: center;
    margin-bottom: 30px;
	color: #000;
}

#suntory_contents #point  #point01 .title_bar,
#suntory_contents #point  #point02 .title_bar,
#suntory_contents #point  #point03 .title_bar {
	height: 57px;
	line-height: 57px;
	margin-bottom: 20px !important;
}

#suntory_contents #point .title_bar h3 {
    font-size: 19px;
    font-weight: bold;
	padding-left: 67px;
	float: left;
}

#suntory_contents #point  #point01 .title_bar h3 {
    background: url(/enjoy/top/img/img2019_icon_game.png) left top no-repeat;
    background-size: 57px;
}
#suntory_contents #point  #point02 .title_bar h3 {
    background: url(/enjoy/top/img/img2019_icon_read.png) left top no-repeat;
    background-size: 57px;
}
#suntory_contents #point  #point03 .title_bar h3 {
    background: url(/enjoy/top/img/img2019_icon_mm.png) left top no-repeat;
    background-size: 57px;
}

#suntory_contents #point  #point01 .title_bar .btn_list,
#suntory_contents #point  #point02 .title_bar .btn_list,
#suntory_contents #point  #point03 .title_bar .btn_list {
	height: 57px;
    padding-right: 0;
}

#suntory_contents #point  #point01 .title_bar .btn_list a,
#suntory_contents #point  #point02 .title_bar .btn_list a,
#suntory_contents #point  #point03 .title_bar .btn_list a {
	top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
}

#suntory_contents #point  #point01 ul,
#suntory_contents #point  #point02 ul,
#suntory_contents #point  #point03 ul {
	width: 100%;
	margin: 0;
}

#suntory_contents #point  #point01 ul li,
#suntory_contents #point  #point02 ul li {
	width: calc(( 99% - 75px ) / 4 );
	margin-right: 25px !important;
}

#suntory_contents #point  #point03 ul li {
	width: calc(( 99% - 50px ) / 2 );
	margin-right: 25px !important;
}

#suntory_contents #point #point01 ul li:last-child,
#suntory_contents #point #point02 ul li:nth-child(4),
#suntory_contents #point #point03 ul li:last-child {
	margin-right: 0 !important;
}

#suntory_contents #point #point02 li img {
    margin-top: 0;
}

#suntory_contents #point #point02 h4 {
	margin-top: 10px;
    width: 100%;
    height: 30px;
	line-height: 30px;

}

#suntory_contents #point #point02 h4 a {
	display: block;
    width: 100%;
    height: 30px;
	line-height: 30px;
    text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	border-radius: 15px;
}

#suntory_contents #point #point02 ul li#point02_recipe h4 a {background-color: #bb521f;}
#suntory_contents #point #point02 ul li#article_area h4 a {background-color: #0f9abd;}
/*#suntory_contents #point #point02 ul li#environment h4 a {background-color: #4cb0f4;}*/
#suntory_contents #point #point02 ul li#mizutoikiru h4 a {background-color: #4cb0f4;}
#suntory_contents #point #point02 ul li#environment h4 a.company {background-color: #4cb0f4;}
#suntory_contents #point #point02 ul li#environment h4 a.culture {background-color: #009e96;}

#suntory_contents #point #point02 h4 a:hover {
	color: #fff !important;
	text-decoration: none;
	opacity: 0.7;
}


#suntory_contents #point .get_point {
    width: 100%;
    height: 40px;
    text-align: center;
    background-color: #f3b530;
    border-radius: 10px;
    line-height: 40px;
    font-size: 14px;
	margin-bottom: 15px;
    position: relative;
}

#suntory_contents #point .get_point span.get_point_number {
    font-size: 24px;
	font-weight: bold;
	letter-spacing: -1px;
}

#suntory_contents #point .get_point span.get_point_sp {
	font-weight: bold;
}

#suntory_contents #point .get_point:after {
content: "";
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #f3b530 transparent transparent transparent;
    border-width: 10px 6px 0 6px;
}


#suntory_contents #point #point03 a .mmg_title {
	font-size: 16px;
    margin-bottom: 10px;
	height: 30px;
	line-height: 30px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-radius: 15px;	
}
#suntory_contents #point #point03 a #enews {
	background-color: #4fbb59;
}
#suntory_contents #point #point03 a #idnews {
	background-color: #22bbff;	
}
#suntory_contents #point #point03 a:hover {
	text-decoration: none !important;
}
#suntory_contents #point #point03 a:hover p {
	text-decoration: none !important;
}
#suntory_contents #point #point03 a:hover .mmg_title {
	color: #fff !important;
	opacity: 0.7;
}
#suntory_contents #point #point03 a .mmg_text {
	font-size: 12px;
    line-height: 1.5;
}
#suntory_contents #point #point03 a:hover .mmg_text {
	text-decoration: underline !important;
}



/*サントリーポイントをつかおう！*/
#suntory_contents #point_use {
    margin: 0 auto 80px auto;
}

#suntory_contents #point_prize {
	width: calc( 100% - 4px );
    border: 2px solid #5bc2dc;
    border-radius: 15px;
	padding: 45px;
}

#suntory_contents #point_prize a h3 {
	font-size: 19px;
    color: #0f9abd;
    text-align: center;
    font-weight: bold;
	margin-bottom: 15px;
}

#suntory_contents #point_use .lead {
	font-size: 16px;
    text-align: center;
    margin-bottom: 30px;
	color: #000;
}

#suntory_contents #point_use #point_prize .lead {
	color: #0f9abd;
	font-weight: bold;
}

#suntory_contents #point_use #point_prize li .numbers {
    font-size: 16px;
    line-height: 1.5;
    color: #da3a07;
	font-weight: bold;
}

	#suntory_contents #point_use #point_prize li .numbers span {
    	font-size: 24px;
	}

#suntory_contents #point_use #point_prize li .caption {
    font-size: 14px;
    line-height: 1.4;
    color: #000;
}

#suntory_contents #point_use .btn_list,
#suntory_contents #coupon_container .btn_list{
	display: block;
    margin: 30px auto 0 auto;
	padding: 0;
}


@media screen and (max-width: 960px){
#suntory_contents #point {
    margin: 0 auto 80px auto;
}
}


/*　おトクなクーポン　*/
#suntory_contents #coupon_container {
    margin: 0 auto;
}

#suntory_contents #coupon_container .lead {
	font-size: 16px;
    color: #000;
    text-align: center;
    width: 100%;
}

#suntory_contents #coupon_container ul {
	/*width: 100%;*/
	width: calc( 75% + 50px );
    margin: 0 auto;
}

#suntory_contents #coupon_container ul li {
    margin-bottom: 0;
    height: 170px;
    /*width: calc(( 99% - 75px ) / 4);*/
    width: calc(( 99% - 50px ) / 3);
    margin: 0 25px 0 0;
	height: auto;
}

#suntory_contents #coupon_container ul li:last-child {
    margin-right: 0;
}

#suntory_contents #coupon_container li a .caption {
    font-size: 15px;
    line-height: 100%;
    color: #000;
    margin-top: 15px;
}

#suntory_contents #coupon_container h3 {
margin: 60px 0 30px 0;
    font-size: 19px;
    font-weight: bold;
    color: #0f9abd;
    text-align: center;
}	

#suntory_contents #coupon_container p#bnr_catalina {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

#suntory_contents #coupon_container p#bnr_catalina a {
    background: url(https://ssl1.suntory.co.jp/ec/suntoryid/top/img/bnr_catalina_pc.png) left top no-repeat;
    background-size: 100% auto;
    padding-bottom: 15%;
}


/*　過去のイベント*/
#suntory_contents #recommend_event_container {
    margin-top: 80px;
}

#suntory_contents #recommend_event_container p {
    font-size: 16px;
    text-align: center;
    display: block;
    margin: 0 auto 30px auto;
    padding: 0;
}

#suntory_contents #recommend_event_container ul {
	margin: 0 0 45px 0;
}

#suntory_contents #recommend_event_container ul li {
	background: none;
	width: calc(( 99% - 50px ) / 3 );
	margin: 0 25px 0 0;
}

#suntory_contents #recommend_event_container ul li img {
	float: none;
}
	
#suntory_contents #recommend_event_container ul li .members_only,
#suntory_contents #recommend_event_container ul li .members_only span {
	display: none;
}
	
#suntory_contents #recommend_event_container ul li:last-child {
	margin-right: 0;
}

	/* testonly*/
	#suntory_contents #recommend_event_container ul li:nth-child(3) {
		margin-right: 0;
	}
	#suntory_contents #recommend_event_container ul li:nth-child(4) {
		display: none;
	}
	/* testonly*/


#suntory_contents #recommend_event_container .text_block {
	height: auto !important;
	padding: 0;
	margin-top: 15px;
	background: none;
	float: none;
    text-align: right;

}

#suntory_contents #recommend_event_container .text_block .text,
#suntory_contents #recommend_event_container .text_block .date,
#suntory_contents #recommend_event_container .text_block .place {
    display: none;
}

#suntory_contents #recommend_event_container .text_block .label p.area,
#suntory_contents #recommend_event_container .text_block .label p.report {
 	font-size: 12px;
	background-color: #f1f5f6;
	padding: 8px 11px;
	line-height: 100%;
	border-radius: 40px;
	display: inline-block;
	color: #000;
	margin: 0 0 0 10px;
}

#suntory_contents #recommend_event_container #past_events a {
    height: 55px;
}



/*2021.1.31対応*/
#suntory_contents #point02_recipe #recipeimg_wrap {
    position: relative;
    padding-top: 100%;
    margin-bottom: 12px;
    background-color: #f7e7c6;
}
#suntory_contents #point02_recipe #recipeimg_wrap img {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
    height: auto;
}
#suntory_contents #point02_recipe #recipeimg_wrap p#recipe_nme {
	position: absolute;
    left: 0;
    color: #7f5f26;
    font-size: 10px;
    top: 72%;
    padding: 0 6px;
	line-height: 1.35;
}






/**********************************************/
/*              renewal 2023-5-29             */
/**********************************************/

/* h1 */
#suntory_contents #title {
    margin: 0 0 60px 0;
	padding: 55px 0 0 0;
    margin: 0 0 50px 0;
    padding: 45px 0 0 0;
	height: 36px;
}
#suntory_contents #title h1 {
    font-size: 36px;
    font-weight: bold;
    color: #000;
	text-align: center;
	line-height: 100%;
	float: none;
}



/* menu */
#suntory_contents #menu {
    width: 100%;
    margin: 0 0 60px 0;
}
#suntory_contents #menu ul {
    width: 100%;
	overflow: hidden;
}
#suntory_contents #menu ul li {
    width: calc(( 100% - 40px) / 3 );
    height: 90px;
    float: left;
    margin-right: 20px;
	position: relative;
    background-color: #f1f5f6;
}
#suntory_contents #menu ul li a {
	width: 100%;
	height: 90px;
	display: block;
    background-color: #f1f5f6;
}
#suntory_contents #menu ul li a:hover {
    background-color: #0077da;
}
#suntory_contents #menu ul li:last-child {
    margin-right: 0;
}
/*
#suntory_contents #menu ul li#l1 {
	background-color: #f1f5f6;
}
#suntory_contents #menu ul li#l2 {
	background-color: #f1f5f6;
}
#suntory_contents #menu ul li#l3,#suntory_contents #menu ul li#l4 {
	background-color: #f1f5f6;
}
*/
#suntory_contents #menu ul li#l1 a {
    background: url(/enjoy/top/img/menu_01.svg) left 15% top 45% no-repeat;
    background-size: 9% auto;
}
#suntory_contents #menu ul li#l2 a {
    background: url(/enjoy/top/img/menu_02.svg) left 22% top 45% no-repeat;
    background-size: 11% auto
}
#suntory_contents #menu ul li#l3 a,#suntory_contents #menu ul li#l4 a {
    background: url(/enjoy/top/img/menu_03.svg) left 17% top 45% no-repeat;
    background-size: 12% auto;
}

#suntory_contents #menu ul li#l1:hover,
#suntory_contents #menu ul li#l2:hover,
#suntory_contents #menu ul li#l3:hover,
#suntory_contents #menu ul li#l4:hover {
	background-color: #0077da;
}
#suntory_contents #menu ul li span {
	font-size: 20px;
	font-weight: bold;
    color: #00266b;
    display: block;
 	position: absolute;
    top: 30%;
	width: 100%;
}
#suntory_contents #menu ul li#l1 span { left: 27%; }
#suntory_contents #menu ul li#l2 span { left: 35%; }
#suntory_contents #menu ul li#l3 span,#suntory_contents #menu ul li#l4 span { left: 31%; }
#suntory_contents #menu ul li:hover span {
    color: #fff;
}
#suntory_contents #menu ul li a:after {
content: "";
    vertical-align: middle;
    position: absolute;
    bottom: 13px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: auto;
    border-top: 3px solid #2299ee;
    border-right: 3px solid #2299ee;
    transform: translateY(-50%) rotate(135deg);
}
#suntory_contents #menu ul li a:hover:after {
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}


/* announcement */
#suntory_contents #announcement {
    width: calc( 100% - ( 22.336769759% + 40px));
    margin: 0 0 40px 0;
    background-color: #fff;
    padding: 20px 30px;
    border: 1px solid #0077da;
}
#suntory_contents #announcement dt {
    display: table-cell;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 20px;
    line-height: 1.5;
    font-weight: bold;
    padding-right: 25px;
}
#suntory_contents #announcement dd p a {
    color: #0077da;
    font-size: 16px;
}
#suntory_contents #announcement dd p a:hover {
    color: #0077da !important;
}
#suntory_contents #announcement dd p a:after {
	content: none;
}



/* campaign */
#suntory_contents .title_bar {
    width: 100%;
    overflow: hidden;
    margin: 0 0 20px 0 !important;
}
#suntory_contents .title_bar h2, #suntory_contents .title_bar h2 a {
    font-size: 25px;
    font-weight: bold;
    color: #000;
    line-height: 35px;
    float: left;
}
#suntory_contents #campaign_container .title_bar {
    display: block;
}
#suntory_contents #campaign_container .btn_list {
    display: table-cell;
    vertical-align: middle;
    padding-left: 0;
}
#suntory_contents .title_bar .btn_list {
    float: right;
    height: 35px;
    /* line-height: 35px; */
    padding-right: 0;
}
#suntory_contents .title_bar .btn_list a {
    /*height: auto;*/
    /* line-height: 35px; */
    font-size: 15px;
    /* display: inline-block; */
    padding: 0 29px 0 0;
    position: relative;
    font-weight: bold;
    color: #fff;
    /* background: none; */
    /* border: none; */
    border-radius: 0;
    background-color: #0077DA;
    padding: 0 35px 0 20px;
    display: block;
    border-radius: 20px;
    /* vertical-align: middle; */
    line-height: 35px;
    height: 35px;
    display: inline-block;
    letter-spacing: 2px;
}
#suntory_contents .title_bar .btn_list a:hover {
    background-color: #0055bb;
}
#suntory_contents .title_bar .btn_list a span {
	line-height: 35px;
    height: 35px;
    display: inline-block;
    letter-spacing: 2px;
}
#suntory_contents .title_bar .btn_list a:hover {
	color: #fff !important;
	text-decoration: none;
}
#suntory_contents a.arrow2_big:before, #suntory_contents span.arrow2_big:before {
    FONT-VARIANT: JIS83;
    top: 13px;
    right: 18px;
}
#suntory_contents a.arrow2_big:after, #suntory_contents span.arrow2_big:after {
	content: none;
}

#suntory_contents #campaign_container ul {
    margin-bottom: 60px;
}
#suntory_contents #campaign_container ul li {
    margin-bottom: 0;
    width: calc( ( 100% - 50px) / 3);
    margin-right: 25px;
}
#suntory_contents #campaign_container .select_wrap {
    float: left;
    margin-left: 20px;
    height: auto;
    width: 190px;
	border: none;
	border-radius: 30px;
    border: 1px solid #ccddee;
}
#suntory_contents #campaign_container .select_wrap:hover {
    background-color: #0077da;
}
#suntory_contents #campaign_container .select_wrap:after {
    position: absolute;
    top: 12px;
    right: 20px;
    width: 6px;
    height: 6px;
    padding: 0;
    content: '';
    border-left: none;
    pointer-events: none;
    transform: rotate(135deg);
    border-top: 2px solid #2299ee;
    border-right: 2px solid #2299ee;
}
#suntory_contents #campaign_container .select_wrap:hover:after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

#suntory_contents #campaign_container select {
    padding: 10px 20px 10px 20px;
    font-size: 15px;
    color: #0077da;
    line-height: 100%;
	letter-spacing: -0.5px;
	outline: none;
}
#suntory_contents #campaign_container select:hover {
	color: #fff;
}
#suntory_contents #campaign_container select option {
    color: #0077da;
}


/* area_information */
#suntory_contents #area_container, 
#suntory_contents #otherinfo_area {
    width: calc( 100% - ( 22.336769759% + 40px));
    padding-bottom: 0;
    padding-left: 0;
}
#suntory_contents #area_container .select_wrap {
    float: left;
    margin-left: 20px;
    height: auto;
    border-radius: 30px;
    width: 190px;
    border: 1px solid #ccddee;
    position: relative;
}

#suntory_contents #area_container .select_wrap:hover {
    background-color: #0077da;
}
#suntory_contents #area_container .select_wrap:after {
    position: absolute;
    top: 12px;
    right: 20px;
    width: 6px;
    height: 6px;
    padding: 0;
    content: '';
    border-left: none;
    pointer-events: none;
    transform: rotate(135deg);
    border-top: 2px solid #2299ee;
    border-right: 2px solid #2299ee;
}
#suntory_contents #area_container .select_wrap:hover:after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
#suntory_contents #area_container select {
    margin: 0;
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    z-index: 1000;
    box-sizing: border-box;
    background: transparent;
    padding: 10px 20px 10px 20px;
    font-size: 15px;
	letter-spacing: -0.5px;
    color: #0077da;
    line-height: 100%;
	outline: none;
}
#suntory_contents #area_container select:hover {
	color: #fff;
}
#suntory_contents #area_container select option {
    color: #0077da;
}

#suntory_contents #area_container ul#area_event {
	width: 100%;
	margin-bottom: 60px;
	padding-bottom: 60px;
	border-bottom: 1px solid #ccddee;
	overflow: hidden;
}
#suntory_contents #area_container ul#area_event li {
	width: 50%;
    float: left;
}
#suntory_contents #area_container ul#area_event li#area_event_msg {
	width: 100%;
}
#suntory_contents #area_container ul#area_event li a {
	display: block;
	width: 100%;
	height: auto;
}
#suntory_contents #area_container ul#area_event li a img {
	display: block;
	width: 150px;
    height: auto;
	float: left;
    margin-right: 20px;
}
#suntory_contents #area_container ul#area_event li a p {
	padding: 20px 10px 0 0;
	color: #0077da;
	font-size: 15px;
	line-height: 150%;
}
#suntory_contents #area_container ul#area_event li a:hover p,
#suntory_contents #area_container ul#area_event li a p:hover {
	color: #0077da !important;
}




/* other_information */
#suntory_contents #otherinfo_area {
	width: calc( 100% - ( 22.336769759% + 40px));
}
#suntory_contents #otherinfo_area ul {
	width: 100%;
	overflow: hidden;
}
#suntory_contents #otherinfo_area ul li {
	width: calc( 50% - 20px );
	margin-right: 20px;
	margin-bottom: 50px;	
    float: left;
}
#suntory_contents #otherinfo_area ul li:nth-child(2n) {
	width: calc( 50% - 20px );
	margin-right: 0;
	margin-left: 20px;
    float: right;
}
#suntory_contents #otherinfo_area ul li .otherinfo_title {
	width: 100%;
	height: 34px;
	line-height: 34px;
	margin-bottom: 20px;
}
#suntory_contents #otherinfo_area ul li#marude .otherinfo_title {
	height: auto;
	position: relative;
	overflow: hidden;
	margin-bottom: 9px;
}
#suntory_contents #otherinfo_area ul li .otherinfo_title h3 {
	font-size: 25px;
	font-weight: bold;
    color: #000;
    float: left;
}
#suntory_contents #otherinfo_area ul li .otherinfo_title h3.otherinfo_title_long {
	letter-spacing: -0.7px;
}
#suntory_contents #otherinfo_area ul li .otherinfo_title h3.comp {
	letter-spacing: -1.5px;
}
#suntory_contents #otherinfo_area ul li#marude .otherinfo_title h3 {
	line-height: 90%;
}
#suntory_contents #otherinfo_area ul li .otherinfo_title h3 span.h3_small2 {
    font-size: 16px;
}
@media screen and (max-width: 1050px) {
    #suntory_contents #otherinfo_area ul li .otherinfo_title h3 span.h3_small2 { font-size: 15px; }
}
@media screen and (max-width: 1010px) {
    #suntory_contents #otherinfo_area ul li .otherinfo_title h3 span.h3_small2 { font-size: 14px; }
}
@media screen and (max-width: 980px) {
    #suntory_contents #otherinfo_area ul li .otherinfo_title h3 span.h3_small2 { font-size: 13px; }
}
#suntory_contents #otherinfo_area ul li .otherinfo_title h3 span.h3_sub {
	font-size: 18px;
	display: block;
}
#suntory_contents #otherinfo_area ul li .otherinfo_title .btn_list {
	width: 34px;
    height: 34px;
    float: right;
    position: relative;
    background-color: #0077da;
    border-radius: 20px;
}
#suntory_contents #otherinfo_area ul li .otherinfo_title .btn_list:hover {
    background-color: #0055bb;
}
#suntory_contents #otherinfo_area ul li#marude .otherinfo_title .btn_list {
	/*margin-top: 15px;*/
}
#suntory_contents #otherinfo_area ul li .otherinfo_title .btn_list a {
	width: 34px;
    height: 34px;
	display: block;
}
#suntory_contents #otherinfo_area ul li .otherinfo_title .btn_list a .arrow2_big:before {
    right: 14px;
}
#suntory_contents #otherinfo_area ul li .otherinfo_info {
	width: 100%;
	height: auto;


}
#suntory_contents #otherinfo_area ul li .otherinfo_info a {
	display: block;
	width: 100%;
	height: auto;
}
#suntory_contents #otherinfo_area ul li .otherinfo_info a .otherinfo_img {
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}
#suntory_contents #otherinfo_area ul li .otherinfo_info a .otherinfo_img img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
#suntory_contents #otherinfo_area ul li .otherinfo_info a .otherinfo_catch {
	font-size: 15px;
    color: #000;
    line-height: 150%;
	letter-spacing: -0.7px;
}
#suntory_contents #otherinfo_area ul li .otherinfo_info a:hover .otherinfo_catch,
#suntory_contents #otherinfo_area ul li .otherinfo_info a .otherinfo_catch:hover {
    color: #000 !important;
}

#suntory_contents  #container2 .title_bar_new {
	text-align: center;
}
#suntory_contents  #container2 h2 {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 100px;
	display: inline-block;
}
#suntory_contents #container2 #point h2 {
    background: url(/enjoy/top/img/img2019_benefit2.png) left 10px top 20px no-repeat;
    background-size: 100px;
}
#suntory_contents #container2 #point_use h2 {
    background: url(/enjoy/top/img/img2019_benefit3.png) left 10px top 20px no-repeat;
    background-size: 100px;
}
#suntory_contents  #container2 h2 span {
    display: inline-block;
    font-size: 35px;
    font-weight: bold;
    color: #000;
    line-height: 100%;
    padding-bottom: 25px;
    border-bottom: 4px solid #2299ee;
    padding: 50px 5px 25px 5px;
}





/* suntory account service */
#suntory_contents #water_container {
    width: calc( 100% - ( 22.336769759% + 40px));
    margin: 0;
    padding: 0;
	background: none;
    background-color: #f1f5f6;
}
#suntory_contents #water_container .inner {
    width: 100%;
}
#suntory_contents #water_container .inner #benefit {
    width: 86%;
    padding: 55px 7% 60px 7%;
}
#suntory_contents #water_container .inner h2, #suntory_contents #coupon_container h2, #suntory_contents #recommend_event_container h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 42px;
    margin: 0 0 30px 0;
    color: #000;
}
#suntory_contents #water_container .inner ul li {
    width: calc(( 100% - 12% ) / 3 );
    margin-right: 6%;
    padding-top: 145px;
    float: left;
}
#suntory_contents #water_container .inner ul li h3 {
    font-size: 26px;
    color: #000;
    line-height: 140%;
    font-weight: bold;
    letter-spacing: -0.5px;
	text-align: center;
}
#suntory_contents #water_container .inner ul li h3 span.h3_blue {
	color: #00aaee;
}
#suntory_contents #water_container .inner ul li h3 span.h3_small1 {
    font-size: 16px;
}
#suntory_contents #water_container .inner ul li h3 span.h3_benefit {
    font-size: 1.6vw;
    letter-spacing: -0.5px;
}
#suntory_contents #water_container .inner ul li p {
    font-size: 15px;
    color: #000;
    line-height: 160%;
    text-align: center;
    letter-spacing: -0.5px;
	margin-top: 5px;
}
@media screen and (max-width: 1200px) {
#suntory_contents #water_container .inner ul li h3 span.h3_benefit { font-size: 21px; }
#suntory_contents #water_container .inner ul li p { font-size: 13px; }
}
@media screen and (max-width: 1050px) {
#suntory_contents #water_container .inner ul li h3 span.h3_benefit { font-size: 19px; }
#suntory_contents #water_container .inner ul li p { font-size: 12px; }
}
#suntory_contents #water_container .inner .btn_list,
#suntory_contents #container2 #container2_inner .btn_list {
    display: block;
    margin: 50px auto 25px auto;
    padding: 0;
    width: 300px;
    height: 50px;
}
#suntory_contents #container2 #container2_inner #point .btn_list {
    width: 450px;
}
#suntory_contents #water_container .inner .btn_list a,
#suntory_contents #container2 #container2_inner .btn_list a{
    background-color: #0077da;
    color: #fff;
    font-weight: normal;
	box-shadow: 2px 2px 2px rgba(34,153,238);
}
#suntory_contents #water_container .inner .btn_list a:hover,
#suntory_contents #container2  #container2_inner .btn_list a:hover{
  	color: #fff !important;
	background-color: #0055bb;
}
#suntory_contents #water_container .inner .btn_list a:after,
#suntory_contents #container2  #container2_inner .btn_list a:after{
	border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 0.4em;
    height: 0.4em;
    right: 30px;
}
#suntory_contents #water_container #suntory_id {
    width: 290px;
    text-align: center;
    height: 40px;
    margin: 0 auto;
}
#suntory_contents #water_container #suntory_id a {
    width: 270px;
    padding-right: 20px;
    position: relative;
    display: block;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    border-radius: 20px;
    font-size: 15px;
    color: #0077da;
	box-shadow: 1px 2px 2px rgba(216,236,251);
}
#suntory_contents #water_container #suntory_id a:hover {
    background-color: #0077da;
	color: #fff !important;
	text-decoration: none;
}
#suntory_contents #water_container #suntory_id a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: 1.2em;
    width: 0.4em;
    height: 0.4em;
    margin: auto;
    border-top: 2px solid #0077da;
    border-right: 2px solid #0077da;
    transform: translateY(-50%) rotate(45deg);
}
#suntory_contents #water_container #suntory_id a:hover:after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}


/* point use */
#suntory_contents #point {
    margin: 0 auto;
    border-bottom: 1px solid #ccddee;
}
#suntory_contents #point .lead {
    font-size: 15px;
    text-align: center;
    margin-bottom: 30px;
    color: #000;
}
#suntory_contents #point_use .lead {
    font-size: 15px;
    text-align: center;
    margin-bottom: 30px;
    color: #000;
}
#suntory_contents #point #point01 ul li, 
#suntory_contents #point #point02 ul li {
    width: calc(( 99% - 60px ) / 4 );
    margin-right: 20px !important;
}



/* point priz */
#suntory_contents #point_prize {
    width: calc( 100% - 4px );
    border: none;
    border-radius: 0;
    padding: 45px;
    background-color: #e8f6ff;
}
#suntory_contents #point_prize a h3 {
    font-size: 24px;
    color: #0071CC;
    text-align: center;
    font-weight: bold;
	margin-bottom: 20px;
    line-height: 100%;
	letter-spacing: -0.3px;
}
#suntory_contents #point_use #point_prize .lead {
    color: #000 !important;
    font-size: 15px;
    font-weight: normal;
	margin-bottom: 40px;
}
#suntory_contents #point_use #point_prize li img {
    margin-bottom: 20px;
    width: 100%;
    background-color: #fff;
}
#suntory_contents #point_use #point_prize li {
    float: left;
    margin-right: 3.2338308455%;
    width: calc((100% - 60px ) / 4);
    margin-right: 20px;
}
#suntory_contents #point_use #point_prize li:last-child {
    margin-right: 0;
}
#suntory_contents #point_use #point_prize li .numbers {
    font-size: 20px;
    line-height: 100%;
    color: #DC0066;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
#suntory_contents #point_use #point_prize li .caption {
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    text-align: center;
}
#suntory_contents #container2 #point_use .btn_list {
    display: block;
    margin: 30px auto 0 auto;
    padding: 0;
    width: 300px;
    height: 50px;
}
#suntory_contents #point_prize:hover {
    border: none;
}

#suntory_contents #point_prize a:hover {
    opacity: 1.0 !important;
    text-decoration: none !important;
}
#suntory_contents #point_prize a:hover .lead,
#suntory_contents #point_prize a:hover img,
#suntory_contents #point_prize a:hover .numbers,
#suntory_contents #point_prize a:hover .caption {
    opacity: 1.0 !important;
    text-decoration: none !important;
}
#suntory_contents #point_prize a:hover .numbers {
	color: #e60066 !important;
}
#suntory_contents #point_prize a:hover .caption {
	color: #000 !important;
}




/* aside */
#suntory_contents #aside.top {
	margin: 0;
    max-width: 260px;
    top: 290px !important;
}