@charset "UTF-8";
/* ----------------------------------------------------------
article
---------------------------------------------------------- */

body.page-rewards-enjoy_latte .mainContents {
  overflow: visible;
  position: relative;
  margin-right: 0;
}

body.page-rewards-enjoy_latte .mainContents article {
  padding-bottom: 0;
  width: auto;
}


/* ----------------------------------------------------------
SNS
---------------------------------------------------------- */

.mainContentsIn {
  position: relative;
  background-color: #006241;
}
@media screen and (max-width: 909px) {
  .mainContentsIn {
    background-color: #fff;
  }
}

._layer {
  position: relative;
}
.contArea__anchor {
  position: absolute;
  width: 0;
  height: 0;
}
@media screen and (max-width: 415px) {
  .contArea__anchor {
    top: -6.547vw;
  }
}
.content-wrap {
  padding: 41px 35px 37px 36px;
}
@media screen and (max-width: 909px) {
  .content-wrap {
    padding: 8.183vw 5.728vw 7.365vw 6.547vw;
  }
}
@media screen and (max-width: 415px) {
  .content-wrap {
    padding: 6.183vw 5.728vw 7.1vw 6.547vw;
  }
}
@media screen and (max-width: 415px) {
  .latte .content-wrap {
    padding-bottom: 8vw;
  }
}
@media screen and (max-width: 415px) {
  .story04 .content-wrap {
    padding-bottom: 8vw;
  }
}
@media screen and (max-width: 415px) {
  .content-notice .content-wrap {
    padding-bottom: 7.7vw;
  }
}

p.catch-text,
h3.catch-text {
  font-size: 30px;
  color: #1e3932;
  font-weight: bold;
  margin-bottom: 14px;
}
@media screen and (max-width: 909px) {
  p.catch-text,
  h3.catch-text {
    font-size: 4.910vw;
    margin-bottom: 6.547vw;
  }
}
@media screen and (max-width: 415px) {
  p.catch-text,
  h3.catch-text {
    margin-bottom: 1.6vw;
  }
}

h3.catch-text {
  position: relative;
  padding-left: 107px;
  margin: 30px 0 45px;
}
@media screen and (max-width: 909px) {
  h3.catch-text {
    padding-left: 18.331vw;
  }
}
@media screen and (max-width: 415px) {
  h3.catch-text {
    margin: 4vw 0 8vw;
    padding-left: 17.331vw;
  }
}

.story02 h3.catch-text {
  margin: 3px 0 20px;
  line-height: 1.7;
}
@media screen and (max-width: 415px) {
  .story02 h3.catch-text {
    margin: 0 0 4vw;
  }
  .story04 h3.catch-text {
    margin-bottom: 7vw;
  }
}

h3.catch-text::before {
  content: '';
  display: inline-block;
  width: 86px;
  height: 86px;
  position: absolute;
  left: -0.5%;
  top: -50%;
}
@media screen and (max-width: 909px) {
  h3.catch-text::before {
    width: 14.075vw;
    height: 14.075vw;
    top: -3.273vw;
  }
}
@media screen and (max-width: 415px) {
  h3.catch-text::before {
    left: -1%;
  }
}
.story01 h3.catch-text::before {
  background: url(/rewards/enjoy_latte/images/i-story01.png) no-repeat;
  background-size: contain;
}
.story02 h3.catch-text::before {
  background: url(/rewards/enjoy_latte/images/i-story02.png) no-repeat;
  background-size: contain;
  top: 5%;
}
@media screen and (max-width: 415px) {
  .story02 h3.catch-text::before {
    top: 10%;
  }
}
.story03 h3.catch-text::before {
  background: url(/rewards/enjoy_latte/images/i-story03.png) no-repeat;
  background-size: contain;
}
.story04 h3.catch-text::before {
  background: url(/rewards/enjoy_latte/images/i-story04.png) no-repeat;
  background-size: contain;
}

p.content-text {
  font-size: 27px;
  color: #1e3932;
  margin-bottom: 0;
}
@media screen and (max-width: 909px) {
  p.content-text {
    font-size: 4.419vw;
  }
}

.latte p.content-text {
  color: #ffffff;
  font-size: 25px;
  line-height: 1.76;
}
@media screen and (max-width: 909px) {
  .latte p.content-text {
    font-size: 4vw;
  }
}

.content-top ._layer.is-bg-top {
  background: url(/rewards/enjoy_latte/images/top-bg.png) center 100%/ 100% no-repeat;
}

.content-top .top-head {
  padding: 300px 85px 22px 30px;
}
@media screen and (max-width: 909px) {
  .content-top .top-head {
    padding: 48vw 13.912vw 3vw 4.910vw;
  }
}
@media screen and (max-width: 415px) {
  .content-top .top-head {
    padding: 48.8vw 13.912vw 4vw 4.910vw;
  }
}

.content-top ._layer.is-bg-top-color {
  background-color: #d4e9e2;
}

.is-bg-story-color {
  background-color: #f1efea;
}
.is-bg-latte-color {
  background-color: #006241;
}

.content-story {
  margin-top: 20px;
  padding-bottom: 565px;
  position: relative;
}
@media screen and (max-width: 909px) {
  .content-story {
    margin-top: 3.273vw;
    padding-bottom: 89vw;
  }
}
@media screen and (max-width: 415px) {
  .content-story {
    margin-top: 4vw;
    padding-bottom: 92.7vw;
  }
}

.content-notice p {
  font-size: 15px;
  color: #000;
  margin-bottom: 0;
  font-weight: bold;
}
@media screen and (max-width: 909px) {
  .content-notice p {
    font-size: 2.455vw;
  }
}

.content-story.story01 {
  background: url(/rewards/enjoy_latte/images/story01-bg.png) center 100%/ contain no-repeat;
}
.content-story.story02 {
  background: url(/rewards/enjoy_latte/images/story02-bg.png) center 100%/ contain no-repeat;
}
.content-story.story03 {
  background: url(/rewards/enjoy_latte/images/story03-bg.png) center 100%/ contain no-repeat;
}
.content-story.story04 {
  background: url(/rewards/enjoy_latte/images/story04-bg.png) center 100%/ contain no-repeat;
}
.content-story.latte {
  background: url(/rewards/enjoy_latte/images/latte-bg.png) center 100%/ contain no-repeat;
  margin-top: 21px;
}
@media screen and (max-width: 909px) {
  .content-story.latte {
    margin-top: 1vw;
  }
}
@media screen and (max-width: 415px) {
  .content-story.latte {
    margin-top: 3vw;
    padding-bottom: 92.8vw;
  }
}

.block-scene .latte-btn {
  margin: 20px auto 0;
  background: url(/rewards/enjoy_latte/images/btn-bg.png) center 100%/ contain no-repeat;
  position: relative;
  width: 400px;
}
@media screen and (max-width: 909px) {
  .block-scene .latte-btn {
    margin: 4.910vw auto 0;
    width: 65.466vw;
  }
}
@media screen and (max-width: 415px) {
  .block-scene .latte-btn {
    margin-top: 5.1vw;
  }
}

.block-scene .latte-btn a {
  display: block;
  padding: 20px 30px;
  font-size: 21px;
  color: #1e3932;
  text-align: center;
}
@media screen and (max-width: 909px) {
  .block-scene .latte-btn a {
    padding: 3.273vw 4.910vw;
    font-size: 3.437vw;
  }
}

.clear-cookie {
  padding: 10px;
  margin: 10px;
  text-align: center;
  background: #ffc;
  color: #000;
  font-size: 14px;
}

header.global {
  z-index: 3000;
}

@media screen and (min-width: 1280px) {

  body.page-rewards-enjoy_latte {
    margin-left: 0;
  }

  body.page-rewards-enjoy_latte .mainContents article {
    margin-left: 0;
  }
}

@media screen and (min-width: 910px) {

  body.page-rewards-enjoy_latte .mainContents {
    min-width: 900px;
  }

  body.page-rewards-enjoy_latte .mainContents {
    min-width: 1140px;
  }

  body.page-rewards-enjoy_latte aside.welcome {
    margin-left: 120px;
  }

  body.page-rewards-enjoy_latte footer.global {
    margin-left: 120px;
  }

  .page-rewards-enjoy_latte {
    min-width: 1260px;
  }

  .page-rewards-enjoy_latte .mainContents {
    position: relative;
    background-size: 100% auto;
  }

  .page-rewards-enjoy_latte article a.js--hover:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }

  .mainContentsIn {
    letter-spacing: 0.05em;
  }
}
@media screen and (min-width: 910px) and (max-width: 1279px) {

  body.page-rewards-enjoy_latte .mainContents article {
    margin-left: 0;
  }
}

@media screen and (max-width: 909px) {

  .page-rewards-enjoy_latte {
    position: relative;
  }

  /* ----------------------------------------------------------
.block-header
---------------------------------------------------------- */

  .area-header-wap {
    position: relative;
    height: 18.66667vw;
  }

  .area-header {
    position: relative;
    height: 18.66667vw;
    background: #1a3c34;
    color: #fff;
  }

  .area-header img {
    width: 100%;
  }

  .area-header ._title {
    position: absolute;
    width: 27.332vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* ----------------------------------------------------------
.block-scene
---------------------------------------------------------- */

  .block-scene {
    position: relative;
    color: #fff;
    overflow: hidden;
  }

  .block-scene img {
    width: 100%;
  }
}

@media print,
screen and (min-width: 910px) {
  /* ----------------------------------------------------------
.block-header
---------------------------------------------------------- */

  .area-header-wap {
    height: 100px;
  }

  .area-header {
    position: relative;
    width: 611px;
    margin: 0 auto;
    height: 100px;
    z-index: 100;
    background: #1a3c34;
  }

  .area-header img {
    width: 100%;
  }

  .area-header ._title {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 167px;
    transform: translate(-50%, -50%);
  }

  /* ----------------------------------------------------------
.block-scene
---------------------------------------------------------- */

  .block-scene {
    position: relative;
    color: #fff;
    width: 611px;
    overflow: hidden;
    margin: 0 auto;
    background-color: #fff;
  }

  .block-scene img {
    width: 100%;
  }

}
@media screen and (min-width: 910px) {
  p.content-textNote{
    margin: 10px 0 0;
    font-size: 15px;
    color: #1e3932;
  }
}
@media screen and (max-width: 909px) {
  p.content-textNote{
    margin: calc(10/611*100vw) 0 0;
    font-size: 2.45vw;
    color: #1e3932;
  }
}
ul.sns.footer { font-size: 10px; position: absolute; right: 59px; top: auto; bottom: 0.3%; z-index: 5; }

ul.sns { position: absolute; right: 2%; top: 30px; z-index: 60; }
ul.sns li { display: table-cell; vertical-align: middle; padding: 0 0 0 10px; }
ul.sns li a { display: block; width: 33px; text-align: center; margin: 0 auto; }
ul.sns li img { width: auto; }
ul.sns.footer { position: absolute; bottom: 30px; right: 2%; font-size: 10px; }
ul.sns.footer li { display: table-cell; vertical-align: middle; padding: 10px 0 0 10px; }
ul.sns.footer li a {
	display: block;
	width: 33px;
	text-align: center;
	margin: 0 auto;
}
ul.sns.footer li a:hover { opacity: 0.8; }

@media screen and (min-width: 909px) {
  ul.sns li.forSp { display: none; }
}

@media screen and (max-width: 909px) {
  ul.sns { display: block; z-index: 1; top: 0; right: 0;}
  ul.sns li.forNotSp { display: none; }
  ul.sns li.forSp a { display: table-cell; vertical-align: middle; }
  ul.sns li.forSp a.js-pulldown { padding: 10px; color: #fff; font-size: 10px;}
  ul.sns li.forSp ul.pulldown { background-color: #f4f2ef; padding: 15px; position: absolute; right: 0; top: 3.5em; width: 205px; }
  ul.sns li.forSp ul.pulldown:after { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: transparent transparent #f4f2ef; border-image: none; border-style: solid; border-width: 8px; bottom: 100%; content: " "; height: 0; pointer-events: none; position: absolute; right: 15px; width: 0; }
  ul.sns li.forSp ul.pulldown .close.js-closeButton { background: none repeat scroll 0 0 transparent; cursor: pointer; position: absolute; right: 0; text-indent: 0; top: 0; }
  ul.sns li.forSp ul.pulldown li { float: left; margin: 0; padding: 15px; text-align: center; }
  ul.sns li.forSp ul.pulldown li a.js-shareLn img, ul.sns li.forSp ul.pulldown li a.js-shareTw img, ul.sns li.forSp ul.pulldown li a.js-shareFb img { width: 29px; }
  ul.sns li.forSp ul.pulldown li.close img { width: 13px; }
  ul.sns .btn { bottom: 5%; position: absolute; text-align: center; width: 100%; }
}

/*# sourceMappingURL=maps/index.css.map */