/* CSS Document */

body { min-width: 320px; }
article { margin-left: 0; }
article,
body.forSubdomain {
	width: auto;
	min-width: 320px;
}
header.global { position: static; }
aside.welcome,
aside.welcome.align,
div.mainContents,
body.forSubdomain div.mainContents article,
body.forSubdomain footer.global,
div.mainContents.notLocalNav + footer.global { margin: 0; }
body.forSubdomain div#mainCanvas { position: static; }
header.global nav.megaNav li.english,
header.global nav.megaNav li.international { display: none; }
body.forSubdomain div.mainContents {
	width: auto;
	margin-left: 0;
}
div.mainContents.notExNav article,
div.mainContents.migration article,
div.mainContents.withLocalNav.migration article,
div.mainContents.notExNav.migration article { width: auto; }
article#page { margin-bottom: 30px; }
div.mainContents,
div.mainContents article { min-height: 0; }
/* --------------------------------------------------
**
** header
**
** -------------------------------------------------- */
header.global {
	padding: 0;
	width: auto;
	overflow: hidden;
	position: relative;
	z-index: 1010;
	min-height: 0;
}
header.global h1,
header.global p.logo,
header.global nav.megaNav { float: left; }
header.global h1,
header.global p.logo {
	margin: 30px 0 30px 2%;
	width: 18%;
	text-align: center;
}
header.global h1 i,
header.global p.logo i { width: 100%; }
header.local h1,
.mainContents header.local h2 {
	padding: 0 100px 18px 0;
	vertical-align: middle;
	height: auto;
}
header.global li { font-weight: normal; }
/*-------------------------- maga navi ----*/
header.global nav.megaNav {
	width: 75%;
	margin-right: 5%;
}
header.global nav.megaNav.min {
	width: 80%;
	margin-right: 0;
}
header.global nav.megaNav ul {
	width: 100%;
	display: table;
}
header.global nav.megaNav li {
	display: table-cell;
	font-size: 160%;
	height: 130px;
	padding: 0 25px;
	vertical-align: middle;
	cursor: pointer;
}
header.global nav.megaNav li.active { background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-arrow-meganavi-tab.png) no-repeat 50% 100%; }
header.global nav.megaNav li a {
	padding: 0;
	margin: 0 auto;
	display: table;
}
header.global nav.megaNav li a span.indention { display: inline; }

header.global nav.megaNav li li  {
	float: none;
	display: block;
	height: auto;
}
header.global nav.megaNav li li a { display: inline; }
header.global nav.megaNav li.serviceAndLogin.login a span {	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-icon-login-meganavi.png) no-repeat 100% 0.5em; }


/*-------------------------- overlay ----*/
header.global .overlay {
	position: static;
	width: auto;
	height: auto;
	overflow: hidden;
	clear: both;
	padding: 0;
}
header.global .overlay .inner {	padding: 55px 45px 35px; }
header.global .overlay li.parent .topics a,
header.global .overlay.serviceAndLogin li.parent .name { font-size: 100%; }
header.global .overlay li.parent ul li { font-size: 65%; }
header.global .overlay li.parent .notTabCol2of4 {
	float: none;
	width: auto;
}
header.global .overlay li.parent .notTabCol2of4 ul {
	float: left;
	width: 25%;
}
header.global .overlay.serviceAndLogin li.parent ul li.btn span.bgArea{	font-weight: normal; }
header.global .overlay.serviceAndLogin li.parent ul li.btn {
	height: auto;
	text-align: left;
}

/*-------------------------- cafe ----*/
header.global .overlay.cafe { width: auto; }

/*-------------------------- companyAndJob ----*/
header.global .overlay.companyAndJob li.parent ul {
	float: left;
	width: 50%;
}
/*-------------------------- serviceAndLogin ----*/
header.global .overlay.serviceAndLogin .inner {	padding: 50px 45px 10px; }
header.global .overlay.serviceAndLogin ul {
	display: block;
	width: auto;
}
header.global .overlay.serviceAndLogin li.parent { margin-bottom: 20px; }
header.global .overlay.serviceAndLogin li.parent ul {
	width: 100%;
	display: table;
}
header.global .overlay.serviceAndLogin li.parent ul li {
	width: auto;
	margin-top: 15px;
}
header.global .overlay.serviceAndLogin li.parent ul li.btn {
	width: 25%;
	margin-top: 0;
}
header.global .overlay.serviceAndLogin li.parent ul li.btn.myPage + li,
header.global .overlay.serviceAndLogin li.parent ul li.btn.rewards { clear: none; }
header.global .overlay.serviceAndLogin li.parent ul li.btn a span {
	display: block;
	margin: 0 10px;
}

header.global .overlay.serviceAndLogin li.parent ul li.btn.card a span,
header.global .overlay.serviceAndLogin li.parent ul li.btn.rewards a span,
header.global .overlay.serviceAndLogin li.parent ul li.btn.eGift a span { margin-right: 10%; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.os a span { margin-right: 25%; }

header.global .overlay.serviceAndLogin li.parent ul.notTabCol2of4 li {
	float: left;
	width: 50%;
	margin-top: 5px;
}
/* --------------------------------------------------
**
** header-min
**
** -------------------------------------------------- */
header.global nav.megaNav.min {
	width: 80%;
	margin-right: 0;
	padding: 0;
}
header.global nav.megaNav.min li.name,
header.global nav.megaNav.min li.return { font-size: 160%; }
header.global nav.megaNav.min li.name {	margin: 0; }
header.global nav.megaNav.min li.name span.indention { display: inline; }
header.global nav.megaNav.min li.return {
	position: static;
	padding: 0 30px;
	width: 110px;
	text-align: right;
}
header.global nav.megaNav.min li.return a {
	padding: 0;
	display: inline;
}
header.global nav.megaNav.min li.return span.indention { display: inline; }

/* --------------------------------------------------
**
** header-local
**
** -------------------------------------------------- */
.mainContents header.local { margin: 0; }
header.local h1,
.mainContents header.local h2 {
	margin: 18px 100px 18px 15px;
	padding: 0;
	display: block;
	height: auto;
	font-weight: normal;
}
#mainCanvas h1 { font-weight: normal; }
.mainContents header.local h1 { font-weight: normal; }
header.local .cartOsBtnS {
	background-color: #65b830;
	background: -moz-linear-gradient(top, #83cb55, #57a921);
	background: -webkit-gradient(linear, left top, left bottom, from(#83cb55), to(#57a921));
	border-radius: 2px;
	font-size: 12px;
	font-weight: bold;
	margin: 10px 15px 0;
	padding-left: 7px;
	text-align: center;
	display: inline-block;
}

header.local .cartOsBtnS a {
	color:#ffffff;
	display:block;
	height:24px;
	line-height:24px;
	padding:0 6px;
	text-decoration:none;
}

header.local .cartOsBtnS a span {
	background:url(https://cart.starbucks.co.jp/smartphone/sp-common_os/images/osform/arrow-procure-btns-sp.png) no-repeat right center transparent;
	-webkit-background-size:6px 8px;
	background-size:6px 8px;
	display:block;
	padding-right:12px;
}
/**/
header.local ul.sns { top: 0; right: 25px; padding-left: 10px; border-left: 1px dotted #A8A8A8; z-index: 10; height: 28px; }
header.local ul.sns li { margin: 0; padding: 0; }
header.local ul.sns li a { text-decoration: none; color: #777471; width: auto; }
/**/
header.local ul.pulldown { position: absolute; top: 4.0em; right: -25px; background-color: #f4f2ef; padding: 15px; width: 205px }
header.local ul.pulldown.refine { display: none; }
header.local ul.pulldown.refine.is-opened { display: block; }
header.local ul.pulldown li { float: left; margin: 0; padding: 15px; text-align: center; }
header.local ul.sns li.forNotSp { display: none; }
header.local ul.sns li.forSp { display: table; height: 100%; width: 28px; }
header.local ul.sns li.forSp a {
	display: table-cell;
	vertical-align: middle;
}

header.local ul.pulldown:after {
	bottom: 100%;
	right: 30px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #f4f2ef;
	border-width: 8px;
}
header.local ul.pulldown .close.js-closeButton {
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	text-indent: 0;
	cursor: pointer;
}
/* --------------------------------------------------
**
** titleArea
**
** -------------------------------------------------- */
div.titleArea {
	display: block;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
div.titleArea .row {
	padding: 8px 0 8px 9px;
	position: relative;
	overflow: visible;
	border-bottom: 1px solid #b2b2b2 !important;
}
div.titleArea .pageTop {
	margin-right: 75px;
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-arrow-titlearea.png) no-repeat 100% 50%;
}
div.titleArea p.img,
div.titleArea p.title {
	display: table-cell;
	vertical-align: middle;
	font-size: 16px;
}
div.titleArea p.title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
div.titleArea p.img { padding-right: 20px; }

div.titleArea p.img img {
	width: 30px;
	height: 30px;
}
div.titleArea ul.sns { top: 12px; right: 20px; padding-left: 20px; border-left: 1px dotted #c5c0bc; }
div.titleArea ul.sns li { margin: 0; padding: 0; }
div.titleArea ul.sns li a { text-decoration: none; color: #3d3935; }
/**/
div.titleArea ul.pulldown { position: absolute; top: 2.5em; right: -20px; background-color: #f4f2ef; padding: 15px; width: 205px }
div.titleArea ul.pulldown li { float: left; margin: 0; padding: 15px; text-align: center; }
div.titleArea ul.sns li.forNotSp { display: none; }
div.titleArea ul.sns li.forSp { display: block; }
div.titleArea ul.pulldown:after {
	bottom: 100%;
	right: 25px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #f4f2ef;
	border-width: 10px;
}
div.titleArea ul.pulldown .close.js-closeButton {
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	text-indent: 0;
	cursor: pointer;
}
/* --------------------------------------------------
**
** footer
**
** -------------------------------------------------- */
footer.global { margin: 0; }
footer.global p.pageTop { display: none !important; }
div.mainContents.notExNav + footer.global { margin-left: 0; }


div.mainContents { margin-left: 0; }
div.titleArea ul.sns { float: right; }
ul.sns.footer { display: none; }
@media all and (max-width: 750px) {
header.global nav.megaNav li a span.indention { display: block; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.card a { background-size: 23px 14px; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.os a { background-size: 25px 24px; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.rewards a { background-size: 28px 22px; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.eGift a { background-size: 21px 19px; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.card a span,
header.global .overlay.serviceAndLogin li.parent ul li.btn.os a span,
header.global .overlay.serviceAndLogin li.parent ul li.btn.rewards a span,
header.global .overlay.serviceAndLogin li.parent ul li.btn.eGift a span { margin-right: 25%; }
}
@media all and (max-width: 599px) {
body,
body.forSubdomain { font-family: Arial, san-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Helvetica; }
/* --------------------------------------------------
**
** header
**
** -------------------------------------------------- */
header.global h1,
header.global p.logo { margin: 15px 0; }
header.global h1 img,
header.global p.logo img {
	width: 35px;
	height: 35px;
}
header.global h1 i,
header.global p.logo i { height: 35px; }
/*-------------------------- megaNav ----*/
header.global nav.megaNav {
	margin: 0;
	width: 80%;
}
header.global nav.megaNav li {
	font-size: 120%;
	height: 65px;
	padding: 0 10px;
}
header.global nav.megaNav li.active { background-size: 10px 5px; }
header.global nav.megaNav li.serviceAndLogin span { position: relative; }
header.global nav.megaNav li.serviceAndLogin.login a {
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-icon-login-meganavi.png) no-repeat 100% 100%;
	background-size: 4px 4px;
	padding: 6px 0;
}
header.global nav.megaNav li.serviceAndLogin.login a span {
	padding: 0;
	background: none;
}


/*-------------------------- overlay ----*/
header.global .overlay .inner,
header.global .overlay.serviceAndLogin .inner { padding: 25px 10px 0; }
header.global .overlay li.parent { font-size: 150%; }
header.global .overlay li.parent ul li {
	font-size: 80%;
	margin: 0 10px 15px;
}
header.global .overlay li.parent .topics a {
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-arrow-topics-meganavi-sp.png) no-repeat 100% 50%;
	background-size: 7px 11px;
}
header.global .overlay li.parent .topics a:hover {
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-arrow-topics-meganavi-sp-on.png) no-repeat 100% 50% #FFF;
	background-size: 7px 11px;
}
header.global .overlay li.parent .notTabCol2of4 {
	width: 50%;
	float: left;
}
header.global .overlay li.parent .notTabCol2of4 ul { width: 100%; }

/*-------------------------- cafe ----*/
header.global .overlay.cafe li.parent .col2of4ForSp {
	width: 50%;
	float: left;
}
header.global .overlay.cafe li.parent ul { width: auto; }
/*-------------------------- companyAndJob ----*/
header.global .overlay.companyAndJob li.parent ul {
	float: none;
	width: auto;
}

/*-------------------------- serviceAndLogin ----*/
header.global .overlay.serviceAndLogin li.parent ul li,
header.global .overlay.serviceAndLogin li.parent ul li.btn { width: 50%; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.login { font-size: 100%; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.login a { padding: 5px 0 4px; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.logout a { padding: 6px 0 5px; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.myPage a { padding: 7px 0 6px; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.myPage + li,
header.global .overlay.serviceAndLogin li.parent ul li.btn.rewards { clear: both; }
header.global .overlay.serviceAndLogin li.parent ul li.btn.card a {
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-icon-card-meganavi-sp.png) no-repeat 14% 50% #2c2a29;
	background-size: 30px 18px;
}
header.global .overlay.serviceAndLogin li.parent ul li.btn.os a {
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-icon-os-meganavi-sp.png) no-repeat 13% 50% #2c2a29;
	background-size: 23px 27px;
}
header.global .overlay.serviceAndLogin li.parent ul li.btn.rewards a {
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-icon-rewards-meganavi-sp.png) no-repeat 10% 50% #2c2a29;
	background-size: 28px 27px;
}
header.global .overlay.serviceAndLogin li.parent ul li.btn.eGift a {
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-icon-gift-meganavi-sp.png) no-repeat 12% 50% #2c2a29;
	background-size: 27px 25px;
}
header.global .overlay.serviceAndLogin li.parent ul li.btn.card a span,
header.global .overlay.serviceAndLogin li.parent ul li.btn.rewards a span,
header.global .overlay.serviceAndLogin li.parent ul li.btn.eGift a span { margin-right: 10%; }
header.global .overlay.serviceAndLogin li.parent ul li { margin: 0 0 15px; }
header.global .overlay.serviceAndLogin li.parent ul.notTabCol2of4 li { width: 100%; }


header.global .overlay p.js-close {
	position: static;
	margin-bottom: 30px;
	clear: both;
	text-align: center;
}
header.global .overlay p.js-close .forNotSp { display: none; }
header.global .overlay p.js-close .forSp { display: inline-block; }

/**/
header.global .overlay.cafe ul.footer li { width: 50%; }
/* --------------------------------------------------
**
** header-min
**
** -------------------------------------------------- */
header.global nav.megaNav.min { width: 82%; }
header.global nav.megaNav.min li.name { font-size: 100%; }
header.global nav.megaNav.min li.return {
	font-size: 120%;
	padding: 0 15px;
}


/* --------------------------------------------------
**
** header-local
**
** -------------------------------------------------- */
.mainContents header.local { margin: 18px 0; }
.mainContents header.local h2 {
	font-size: 15px;
	margin: 0 70px 0 15px;
}
header.local ul.sns { height: 100%; }
body.storeSearch div.mainContents.searchResult header.local ul.sns li.forSp ul {
	top: 45px;
	right: -15px;
	padding: 15px;
	width: 205px;
}
/* --------------------------------------------------
**
** titleArea
**
** -------------------------------------------------- */
div.titleArea p.title,
div.titleArea p.img,
div.titleArea ul.sns li { font-size: 10px; }
div.titleArea p.img { padding-right: 10px; }
div.titleArea p.img img {
	width: 20px;
	height: 20px;
}
div.titleArea .pageTop {
	margin-right: 50px;
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-arrow-titlearea-sp.png) no-repeat 100% 50%;
	background-size: 19px 6px;
}
div.titleArea ul.sns {
	right: 10px;
	top: 10px;
	padding-left: 10px;
}
/* --------------------------------------------------
**
** welcome
**
** -------------------------------------------------- */
aside.welcome {
	height: auto;
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-welcome-sp.png) no-repeat 100% 100% #ece4d4;
	background-size: 182px 109px;
}
aside.welcome .container {
	padding: 15px;
	background-color: transparent;
}
aside.welcome ul li a { font-size: 12px; }
aside.welcome p.attention {	margin: 0 0 15px; }
aside.welcome ul.info li {
	padding-left: 15px 20px 20px 15px;
	margin-bottom: 10px;
}
aside.welcome .close {
	top: 10px;
	right: 10px;
}
aside.welcome .indention { display: block; }
/* --------------------------------------------------
**
** footer
**
** -------------------------------------------------- */
footer.global {	padding: 15px 15px 10px; }
footer.global li { display: none; }
footer.global li.sitemap {
	display: block;
	padding: 0;
	border: none;
	margin-bottom: 8px;
}
footer.global p.copyright {
	font-size: 100%;
	margin: 0;
}

aside.welcome,
article,
footer.global { margin: 0; }

}

/*  2015.07.30 storeページshare改修 --------------------------------------------------------------------- */
article.store header.local ul.sns { z-index: 11; }
/*---------------------------------------------------------------------------- storeページshare改修 END*/

/* メガナビSERVICEの画像をCSSから読み込むための改修 ここまで */


/* HOLIDAY ここから */
/*
div.titleArea .row{
	background: #d61c38;
}
div.titleArea p.title{
	color: #fff;
}
div.titleArea ul.sns li a{
	color: #fff;
}
div.titleArea .pageTop{
	background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-arrow-titlearea-sp-holiday2017.png) no-repeat 100% 50%;
}
div.titleArea ul.sns{
	border-left: 1px dotted #fff;
}
@media (max-width: 909px){
	header.global {
		background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-global-header-sp-holiday2019.jpg) #d61c38 right top no-repeat;
		background-size: 100% auto;
	}
	#meganav2018 nav.megaNav li.active{
		background: url(//d3vgbguy0yofad.cloudfront.net/common/images/mnav2018-tab-sp-holiday2019.svg) no-repeat 50% 101%;
		background-size: 22px 11px;
	}
	div.titleArea .pageTop{
		background-size: 3%;
	}
}
@media (max-width: 599px){
	#meganav2018 .overlay li.parent .topics{
		background-color: #faf4e6;
	}
	#meganav2018 .overlay li.parent ul li a:hover {
		color: #3d3935;
	}
	#meganav2018 .nav-item.has-sub > .nav-item-content .caret:before{
		background-image: url(//d3vgbguy0yofad.cloudfront.net/common/images/mnav2018-plus-holiday2019.svg);
	}
	#meganav2018 .nav-item.has-sub.expanded > .nav-item-content .caret:before{
		background-image: url(//d3vgbguy0yofad.cloudfront.net/common/images/mnav2018-minus-holiday2019.svg);
	}
	#meganav2018 .overlay li.parent, #meganav2018 .overlay li.parent a.nav-item-content {
		border-top: 1px solid #EDE8DA;
	}
	#meganav2018 .overlay .footer {
		border-top: 1px solid #EDE8DA;
		border-bottom: 1px solid #EDE8DA;
	}
	#meganav2018 .news{
		border-top: 1px solid #EDE8DA;
	}
	div.titleArea .pageTop{
		background-size: 19px 6px;
	}
}
*/
/* HOLIDAY ここまで */

/* SAKURA ここから */
div.titleArea .row{
	background: #fae3e8;
}
div.titleArea p.title{
	color: #000;
}
div.titleArea ul.sns li a{
	color: #000;
}
div.titleArea .pageTop{
	/*background: url(//d3vgbguy0yofad.cloudfront.net/common/images/bg-arrow-titlearea-sp-holiday2017.png) no-repeat 100% 50%;*/
}
div.titleArea ul.sns{
	/*border-left: 1px dotted #fff;*/
}
@media (max-width: 909px){
	header#meganav2018.global {
		background: url(//d3vgbguy0yofad.cloudfront.net/common/images/sakura2020/sp_meganav_bg.jpg) #faebee left top no-repeat;
		background-size: auto 130px;
		width: 100%;
	}
	header#meganav2018.global .overlay{
		background: url(//d3vgbguy0yofad.cloudfront.net/common/images/sakura2020/sp_meganavopen_bg.jpg) #fae3e8 no-repeat right top;
		background-size: 100%;
	}
	#meganav2018 nav.megaNav li.active{
		background: url(//d3vgbguy0yofad.cloudfront.net/common/images/sakura2020/bg-arrow-meganavi-sp.svg) no-repeat 50% 101%;
		background-size: 22px 11px;
	}
	div.titleArea .pageTop{
		background-size: 3%;
	}
}
@media (max-width: 599px){
	header#meganav2018.global {
		background-size: 100% 65px;
		width: 100%;
	}
	#meganav2018 .overlay li.parent .topics{
		background-color: #fae3e8;
	}
	#meganav2018 .overlay li.parent ul li a:hover {
		color: #3d3935;
	}
	#meganav2018 .nav-item.has-sub > .nav-item-content .caret:before{
		background-image: url(//d3vgbguy0yofad.cloudfront.net/common/images/mnav2018-plus-holiday2019.svg);
	}
	#meganav2018 .nav-item.has-sub.expanded > .nav-item-content .caret:before{
		background-image: url(//d3vgbguy0yofad.cloudfront.net/common/images/mnav2018-minus-holiday2019.svg);
	}
	#meganav2018 .overlay li.parent, #meganav2018 .overlay li.parent a.nav-item-content {
		border-top: 1px solid #EDE8DA;
	}
	#meganav2018 .overlay .footer {
		border-top: 1px solid #EDE8DA;
		border-bottom: 1px solid #EDE8DA;
	}
	#meganav2018 .news{
		border-top: 1px solid #EDE8DA;
	}
	div.titleArea .pageTop{
		background-size: 19px 6px;
	}
}
/* SAKURA ここまで */