@charset "utf-8";

/*
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


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

#suntory_contents {
	width: 100%;
}
#contents {
	width: 100%;
	color: #334466;
	font-family: 'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,sans-serif;
}
#contents h1,#contents h2,#contents h3,
#contents p,#contents ul,#contents li,#contents dl,#contents dt,#contents dd {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 100%;
}
*/

/* head */
#head_wrap {
	width: 100%;
	height: 1030px;
	background: url(../img/head_bg_wide.jpg) center top no-repeat;
	background-size: 2000px auto;
}
#head {
	width: 1164px;
	margin: 0 auto;
	height: 1030px;
    background: url(../img/pc_mv1.svg) center top 25px no-repeat,url(../img/pc_mv2.png) center top 205px no-repeat,url(../img/head_bg.jpg) center top no-repeat;
    background-size: 937px 234px,1094px 144px,1164px auto;
}
#head h1 {
	padding-top: 395px;
	font-size: 32px;
	color: #334466;
	text-align: center;
	line-height: 100%;	
}
#head #head_exp {
	margin-top: 35px;
	font-size: 15px;
	text-align: center;
	line-height: 180%;
}
#head #head_exp a {
	color: #0066cc;
}
#head ul {
	margin-top: 50px;
	width: 1164px;
}
#head ul li {
	width: 358px;
	height: 360px;
	float: left;
	 margin: 10px 25px 10px 10px;
	box-shadow: 0 0 10px rgba(51,170,238,0.4);
	position: relative;
	border-radius: 20px;	
}
#head ul li:first-child {
	margin-left: 5px;
}
#head ul li:last-child {
	margin-right: 5px;
}

#head ul li p.sub_title {
	padding-top: 30px;
	font-size: 25px;
	color: #334466;
	text-align: center;
	font-weight: bold;
	letter-spacing: -0.5px;
}
#head ul li p.sub_catch {
	margin: 20px 45px 0 45px;
    font-size: 14px;
    text-align: left;
    line-height: 160%;
}

#head ul li p.sub_btn {
	width: 140px;
	height: 60px;
	font-size: 15px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	position: absolute;
	top: 140px;
	left: 50%;
	transform: translateX(-50%);
}
#head ul li p.sub_btn:hover {
	cursor: pointer;
}
#head ul li#acquisition {
	background: url(../img/head1.svg) center bottom 31px no-repeat;
    background-size: 207px 106px;
	background-color: #fff;
}
#head ul li#utilization {
	background: url(../img/head2.svg) center bottom 20px no-repeat;
    background-size: 236px 117px;
	background-color: #fff;
}
#head ul li#cooperation {
	background: url(../img/head3.svg) center bottom 28px no-repeat;
    background-size: 219px 109px;
	background-color: #fff;
}
#head ul li#acquisition p.sub_btn {
	background: url(../img/top_link_arrow.png) center bottom 10px no-repeat,url(../img/head1_btn.svg) center top no-repeat;
    background-size: 12px 12px,140px 60px,;
}
#head ul li#utilization p.sub_btn {
	background: url(../img/top_link_arrow.png) center bottom 10px no-repeat,url(../img/head2_btn.svg) center top no-repeat;
    background-size: 12px 12px,140px 60px;
}
#head ul li#cooperation p.sub_btn {
	background: url(../img/top_link_arrow.png) center bottom 10px no-repeat,url(../img/head3_btn.svg) center top no-repeat;
    background-size: 12px 12px,140px 60px;
}

#head ul li#acquisition p.sub_title span {color: #33aaee;}
#head ul li#utilization p.sub_title span {color: #33ccdd;}
#head ul li#cooperation p.sub_title span {color: #22ccbb;} 



#acquisition_block_wrap {
	width: 100%;
	height: 770px;
	background: url(../img/acquisition_bg.jpg) left top repeat-x;
	background-size: 20px 810px;
}
#acquisition_block  {
	width: 1164px;
	height: 810px;
	margin: 0 auto;
	background: url(../img/acquisition_bg.jpg) left top repeat-x;
	background-size: 20px 810px;
	position: relative;
}

#contents .blocks h2 {
	font-size: 32px;
    text-align: center;
    line-height: 100%;
    display: inline-block;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 35px;
    color: #fff;
    font-weight: normal;
    border-radius: 50px;	
	letter-spacing: -0.5px;
}
#contents #acquisition_block.blocks h2 { background-color: #2393e8; }
#contents #utilization_block.blocks h2 { background-color: #16a7bc; }
#contents #cooperation_block.blocks h2 { background-color: #16bca7; }

#contents .blocks p.exp {
	margin: 0 auto 10px auto;
	padding-top: 70px;
    font-size: 19px;
    color: #334466;
    text-align: center;
    line-height: 150%;
}
#contents #cooperation_block.blocks p.exp {
    text-align: left;
    width: 90%;
    margin-right: auto;
	margin-left: auto;
}
#contents .blocks p.exp span {
	display: block;
	font-size: 13px;
	font-weight: normal;
}





#acquisition_contents {
	width: 1164px;
	margin: 0 auto;
}

#acquisition_contents dl#acquisition_customers {
	overflow: hidden;
}
#acquisition_contents #at_customer {
	width: 100%;
    height: 162px;
    margin: 0 0 10px 177px;
    background: url(../img/acquisition1_bg.png) left bottom no-repeat,url(../img/acquisition1.svg) left 376px top no-repeat;
    background-size: 806px 74px,56px 72px;
    position: relative;
}
#acquisition_contents #at_customer1 {
	width: 340px;
    height: 160px;   
    margin: 0;
	float: left;
	background: url(../img/acquisition2.svg) center top 24px no-repeat;
	background-size: 206px 114px;
	border: 20px solid #cdeafd;
	position: relative;
}
#acquisition_contents #at_customer2 {
	width: 340px;
    height: 160px;   
    margin: 0;
	float: left;
	background: url(../img/acquisition3.svg) center top 24px no-repeat;
	background-size: 242px 119px;
	border: 20px solid #cdeafd;
	border-left: none;
	position: relative;
}
#acquisition_contents #at_customer3 {
	width: 340px;
    height: 160px;   
    margin: 0 0 0 40px;
	float: left;
	background: url(../img/acquisition4.svg) center top 37px no-repeat;
	background-size: 273px 100px;
	border: 20px solid #cdeafd;
	position: relative;
}

#acquisition_contents p.customers {
	height: 40px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 40px;
	border-radius: 20px;
	background-color: #33aaee;
	position: absolute;
}
#acquisition_contents #at_customer p.customers {
    width: 200px;
	top: 72px;
	left: 303px;
}
#acquisition_contents #at_customer1 p.customers {
    width: 200px;
	top: -30px;
	left: 70px;
}
#acquisition_contents #at_customer2 p.customers {
    width: 320px;
	top: -30px;
	left: 10px;
	letter-spacing: -0.5px;
}
#acquisition_contents #at_customer3 p.customers {
    width: 200px;
	top: -30px;
	left: 70px;
}
span.asta {
	font-size: 10px;
	vertical-align: top;
	margin-left: 5px;
}

#acquisition_contents dl#acquisition_suntory {
	overflow: hidden;
	width: 100%;
	height: 150px;
	background: url(../img/acquisition5.png) left 366px top no-repeat;
	background-size: 537px 150px;
	position: relative;
}
#acquisition_contents #at_suntory {
	width: 322px;
    height: 102px;
    text-indent: -9999px;
    position: absolute;
    top: 50px;
    left: 420px;
    background: url(../img/acquisition5_logo.svg) center center no-repeat;
    background-size: 210px 29px;
}
#acquisition_contents .suntorys {
	font-size: 12px;
	color: #334466;
	text-align: center;
	line-height: 140%;	
	position: absolute;
	top: 18px;
	width: 195px;
	height: 102px;
	background-size: 237px 102px;
}
#acquisition_contents .suntorys span {
	font-size: 16px;
	color: #334466;
	text-align: center;	
	display: block;
	margin-bottom: 10px;
	background-color: #fff;
	font-weight: bold;
}
#acquisition_contents #at_suntory1 {
	left: 124px;
    background: url(../img/acquisition5_balloon1.png) left top no-repeat;
	background-size: 237px 102px;
	padding: 15px 27px 15px 15px;
}
#acquisition_contents #at_suntory2 {
	left: 908px;
    background: url(../img/acquisition5_balloon2.png) left top no-repeat;
	background-size: 237px 102px;
	padding: 15px 15px 15px 27px;
}

/*
#acquisition_contents #at_suntory1:before {
	content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -23px;
    border: 8px solid transparent;
    border-left: 14px solid #FFF;
    z-index: 2;
}
#acquisition_contents #at_suntory1:after {
	content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -28px;
    border: 10px solid transparent;
    border-left: 16px solid #cdeafd;
    z-index: 1;
}
#acquisition_contents #at_suntory2:before {
	content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -22px;
    border: 8px solid transparent;
    border-right: 14px solid #FFF;
    z-index: 2;
}
#acquisition_contents #at_suntory2:after {
	content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -28px;
    border: 10px solid transparent;
    border-right: 16px solid #cdeafd;
    z-index: 1;
}
*/















#utilization_block_wrap {
	width: 100%;
	height: 1270px;
	background: url(../img/utilization_bg.jpg) left top repeat-x;
	background-size: 20px 1270px;
}
#utilization_block  {
	width: 1164px;
	height: 1270px;
	margin: 0 auto;
	background: url(../img/utilization_bg.jpg) left top repeat-x;
	background-size: 20px 1270px;
	position: relative;
}
#utilization_block ul {
	width: 1164px;
	margin-top: 40px;
}
#utilization_block ul li {
	width: 350px;
	height: 415px;
	border: 5px solid #c8eef2;
	float: left;
	margin: 0 42px 40px 0;
	padding: 65px 0 0 0;

	position: relative;
}
#utilization_block ul li:nth-child(3n) {
	margin-right: 0;
}
#utilization_block ul li:nth-child(1) {
	background: url(../img/utilization1.svg) center top 240px no-repeat;
	background-size: 268px 129px;
	background-color: #fff;
}
#utilization_block ul li:nth-child(2) {
	background: url(../img/utilization2.svg) center top 243px no-repeat;
	background-size: 220px 86px;
	background-color: #fff;
}
#utilization_block ul li:nth-child(3) {
	background: url(../img/utilization3.svg) center top 238px no-repeat;
	background-size: 248px 93px;
	background-color: #fff;
}
#utilization_block ul li:nth-child(4) {
	background: url(../img/utilization4.svg) center top 210px no-repeat;
	background-size: 291px 228px;
	background-color: #fff;
}
#utilization_block ul li:nth-child(5) {
	background: url(../img/utilization5.svg) center top 210px no-repeat;
	background-size: 247px 235px;
	background-color: #fff;
}
#utilization_block ul li:nth-child(6) {
	background: url(../img/utilization6.svg) center top 280px no-repeat;
	background-size: 235px 127px;
	background-color: #fff;
}
#utilization_block ul li p.uti_number {
	width: 70px;
	height: 45px;
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	line-height: 45px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	background-color: #22bbcc;
}
#utilization_block ul li h3 {
	font-size: 25px;
	font-weight: bold;
	color: #334466;
	text-align: center;
	line-height: 100%;
	margin-bottom: 25px;
	letter-spacing: -0.5px;
}
#utilization_block ul li p.uti_exp {
    font-size: 16px;
    text-align: left;
    line-height: 145%;
    letter-spacing: -0.5px;
    margin: 0 20px 0 20px;
}
#utilization_block ul li p.uti_sub_exp {
    font-size: 13px;
    text-align: left;
    line-height: 150%;
    letter-spacing: -0.5px;
    width: calc( 100% - 60px );
    position: absolute;
    bottom: 25px;
    left: 0;
    margin: 0 30px;
}
#utilization_block ul li p.uti_sub_exp span {
	display: block;
	margin-top: 10px;
}



#cooperation_block_wrap {
	width: 100%;
	height: 720px;
	background: url(../img/cooperation_bg.jpg) left top repeat-x;
	background-size: 20px 758px;
}
#cooperation_block {
	width: 1164px;
	height: 758px;
	margin: 0 auto;
	background: url(../img/cooperation_bg.jpg) left top repeat-x;
	background-size: 20px 758px;
	position: relative;
}

#cooperation_block #cooperation_contents {
	width: 1164px;
	height: 460px;
	/*height: 431px;*/
	margin: 55px auto 0 auto;
	/*background: url(../img/cooperation.jpg) center top no-repeat;
	background-size: 1164px 431px;*/
	background: url(../img/coop_arrow1.png) left 302px top 100px no-repeat,url(../img/coop_arrow3.png) left 690px top 160px no-repeat;
	background-size: 85px 24px,172px 61px;
	position:relative;
}
#cooperation_block #cooperation_contents dl {
	position:absolute;
	top:0;
	width:260px;
	height:350px;
	padding-top: 30px;
	border: 20px solid #c8f2ee;
}
#cooperation_block #cooperation_contents dl#coop_user {
	left: 0;
	background: url(../img/cooperation1.svg) center top 40px no-repeat;
	background-size: 213px 309px;
	background-color: #fff;
}
#cooperation_block #cooperation_contents dl#coop_suntory {
	left: 390px;
	background: url(../img/cooperation2.svg) center bottom 10px no-repeat;
	background-size: 200px 163px;
	background-color: #fff;
}
#cooperation_block #cooperation_contents dl#coop_external {
	left: 860px;
	background: url(../img/cooperation3.svg) center bottom 40px no-repeat;
	background-size: 195px 72px;
	background-color: #fff;
}
#cooperation_block #cooperation_contents .coop_title {
	width: 200px;
	height: 40px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 40px;
	border-radius: 20px;
	background-color: #21ccba;
	position: absolute;
	top: -30px;
	left: 35px;
}
#cooperation_block #cooperation_contents .coop_item {
	width: 200px;
	height: 50px;
	margin: 0 auto 5px auto;  
	text-align: center;
	line-height: 50px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: -0.5px;
	background: url(.../img/coop_item_bg.png) left top no-repeat;
	background-size: 200px 50px;
}
#cooperation_block #cooperation_contents #coop_suntory .coop_item {
	margin-bottom: 0;
}
#cooperation_block #cooperation_contents #coop_suntory .coop_item_sub {
	height: 63px;
	line-height: 63px;
	padding-left: 50px;
	background: url(../img/coop_arrow2.png) left 147px top 0 no-repeat;
	background-size: 44px 65px;
}
#cooperation_block #cooperation_contents .coop_item.double {
	line-height: 115%;
	padding-top: 5px;
}

#cooperation_block #cooperation_contents .coop_item_exp {
	width: 100%;
	font-size: 10px;
	position:absolute;
	bottom: 10px;
	left: 0;
	text-align: center;	
}

#cooperation_block #cooperation_contents div#coop_subblk {
	position:absolute;
	top:0;
	left: 690px;
	width: 142px;
	height: 460px;
	margin: 0 13px;
}

#cooperation_block #cooperation_contents div#coop_subblk #coop_subblk1 {
	position:absolute;
	top: 18px;
	left: 0;
	width: 140px;
	height: 85px;
	background: url(../img/coop_subblk1_bg.png) left top no-repeat;
	background-size: 140px 110px;
	text-align: center;
	padding: 15px 0 10px 0;
}

#cooperation_block #cooperation_contents div#coop_subblk #coop_subblk2 {
	position:absolute;
	top: 138px;
	left: 0;
	width: 100%;
	text-align: center;
}
#cooperation_block #cooperation_contents div#coop_subblk #coop_subblk3 {
	position:absolute;
	top: 226px;
	left: 0;
	width: 100%;
	text-align: center;
}
#cooperation_block #cooperation_contents div#coop_subblk #coop_subblk4 {
	position:absolute;
	top: 255px;
	left: 0;
	width: calc( 100% - 6px );
	width: 140px;
	height: 95px;
	background: url(../img/coop_subblk4_bg.png) left top no-repeat;
	background-size: 140px 145px;
	text-align: center;
	padding: 35px 0 15px 0;
}
#cooperation_block #cooperation_contents div#coop_subblk .coop_subblk_title {
	font-size: 16px;
	font-weight: bold;
} 
#cooperation_block #cooperation_contents div#coop_subblk .coop_subblk_exp {
	font-size: 12px;
	line-height: 140%;
	background-color: #fff;
} 
#cooperation_block #cooperation_contents div#coop_subblk .coop_subblk_exp span {
	display: block;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
}
/*
#cooperation_block #cooperation_contents div#coop_subblk #coop_subblk1:before {
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top: 14px solid #FFF;
    z-index: 2;
}
#cooperation_block #cooperation_contents div#coop_subblk #coop_subblk1:after {
	content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top: 16px solid #b7eee9;
    z-index: 1;
}
#cooperation_block #cooperation_contents div#coop_subblk #coop_subblk4:before {
    content: "";
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom: 14px solid #FFF;
    z-index: 2;
}
#cooperation_block #cooperation_contents div#coop_subblk #coop_subblk4:after {
	content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom: 16px solid #b7eee9;
    z-index: 1;
}
*/




/* breadcrumbs */
/*
#suntory_contents #breadcrumbs ul:after{content:""; clear:both; display:block;}
#suntory_contents #breadcrumbs  {
	width: 1164px;
	margin: 0 auto;
}
#suntory_contents #breadcrumbs ul{
    width: 98%;
    margin: 0 auto;
    text-align: left;	
	padding:15px 0;
}
#suntory_contents #breadcrumbs ul li{
	float:left;
	font-size:12px;
	line-height:1.5;
	letter-spacing:1px;
	position:relative;
	color: #334466;
}
#suntory_contents #breadcrumbs ul li a {
	text-decoration:  none;
	color: #46555e;
}

#suntory_contents #breadcrumbs ul li:after{
	content:"\003e";
	padding:0 5px;
}
#suntory_contents #breadcrumbs ul li:last-child:after{
	display:none;
}
#suntory_contents #breadcrumbs ul li a:link,
#suntory_contents #breadcrumbs ul li a:visited,
#suntory_contents #breadcrumbs ul li a:hover,
#suntory_contents #breadcrumbs ul li a:active{
	color:#46555e;
}
#suntory_contents #breadcrumbs ul li a:hover,
#suntory_contents #breadcrumbs ul li a:active{
	text-decoration:underline;
}
*/

/* page_top */
/*
#suntory_contents .page_top{
	padding:10px 3px;
}
#suntory_contents .page_top p{
	width:100%;
	margin:0 auto;
	color: #46555e;
}
@media screen and (min-width:961px){#suntory_contents .page_top p{max-width:1164px;}}
@media only screen and (max-width:767px){#suntory_contents .page_top p{width:100%;max-width:100%;}}

#suntory_contents .page_top p:after{content:""; clear:both; display:block;}
#suntory_contents .page_top p i{
	float:right;
	position:relative;
	display:inline-block;
	padding-right:32px;
	font-size:13px;
	line-height:26px;
	letter-spacing:0.5px;
	color:#46555e;
	cursor:pointer;
}
#suntory_contents .page_top p i:before,
#suntory_contents .page_top p i:after{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
	content:"";
	vertical-align:middle;
}
#suntory_contents .page_top p i:before{
	width:25px;
	height:25px;
	-webkit-border-radius:50%;
	border-radius:50%;
	background:#fff;
	border:1px solid #5bc2dc;
}
#suntory_contents .page_top p i:after{
	top:2.5px;
	right:7%;
	width:6px;
	height:6px;
	border-top:3px solid #5bc2dc;
	border-right:3px solid #5bc2dc;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#suntory_contents .page_top p i:hover{
	text-decoration:underline;
}
#suntory_contents .page_top p i:hover:before{background:#5bc2dc;}
#suntory_contents .page_top p i:hover:after{border-color:#fff;}
*/