@charset "UTF-8";
/* font
-----------------------------------------------------------------*/
@font-face {
  font-family: MyYuGothicM;
  font-weight: 400;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular"); }

@font-face {
  font-family: MyYuGothicM;
  font-weight: 700;
  src: local("YuGothic-Bold"), local("Yu Gothic Bold"); }

@font-face {
  font-family: MyYuMinchoM;
  font-weight: 400;
  src: local("YuMincho-Medium"), local("Yu Mincho Medium"), local("YuMincho-Regular"); }

@font-face {
  font-family: MyYuMinchoM;
  font-weight: 700;
  src: local("YuMincho-Demibold"), local("Yu Mincho"); }

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100;
  src: url("webfont.eot");
  /* IE9 Compat Modes */
  src: local("myfont Regular"), url("../font/notoserifcjkjp_regular.eot?#iefix") format("embedded-opentype"), url("../font/notoserifcjkjp_regular.woff") format("woff"), url("../font/notoserifcjkjp_regular.ttf") format("truetype"); }

@font-face {
  font-family: TradeGothic;
  unicode-range: U+0000-2BFF;
  src: url("../fonts/2CC084_0_0.eot"), url("../fonts/2CC084_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2CC084_0_0.woff2") format("woff2"), url("../fonts/2CC084_0_0.woff") format("woff"), url("../fonts/2CC084_0_0.ttf") format("truetype"), url("../fonts/2CC084_0_0.svg#wf") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: TradeGothic-bold;
  unicode-range: U+0000-2BFF;
  src: url("../fonts/e4693908-7208-4b04-93c4-8d004c3b4e1f.eot") format("eot"), url("../fonts/e4693908-7208-4b04-93c4-8d004c3b4e1f.eot?iefix") format("embedded-opentype"), url("../fonts/e2fbc63c-e7b1-4828-b0b6-275131d16fd0.woff") format("woff"), url("../fonts/805d9356-a4a5-46df-8390-957c803e33bc.ttf") format("truetype"), url("../fonts/df0f9c50-3ce3-4b1f-8120-074ca66b83b1.svg#df0f9c50-3ce3-4b1f-8120-074ca66b83b1") format("svg"); }

.guideOfferItem_point {
  font-family: TradeGothic-bold, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic ProN", "MyYuGothicM", MyYuGothicM, YuGothic, "Yu Gothic", -apple-system, BlinkMacSystemFont, Meiryo, sans-serif; }

/* easing
-----------------------------------------------------------------*/
/* ブレークポイント
-----------------------------------------------------------------*/
/* color
-----------------------------------------------------------------*/
/* コンテンツ変数
-----------------------------------------------------------------*/
.br::before {
  content: "\A";
  white-space: pre;
  font-family: "serif"; }

/* クリアフィックス
-----------------------------------------------------------------*/
/* arrow Animation
-----------------------------------------------------------------*/
@-webkit-keyframes arrowAnimation {
  0% {
    opacity: 0; }
  40% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes arrowAnimation {
  0% {
    opacity: 0; }
  40% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

.c-button-yellow-large, .c-button-yellow-medium, .c-button-hasBorder-black-medium, .c-button-gray-large, .c-button-gray-medium {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bold;
  border: solid 1px #000;
  width: 100%;
  height: 48px;
  font-size: 16px;
  background-color: transparent; }
  @media only screen and (min-width: 960px) {
    .c-button-yellow-large, .c-button-yellow-medium, .c-button-hasBorder-black-medium {
      transition: color .3s, border-color .3s, background-color .3s;
      cursor: pointer; } }

.c-button-yellow-large {
  font-size: 16px; }

.c-button-yellow-medium, .c-button-hasBorder-black-medium {
  width: 176px;
  font-size: 13px; }

.c-button-gray-large, .c-button-gray-medium {
  border-color: #E3E3E3;
  background-color: #E3E3E3; 
  cursor: not-allowed}
  @media only screen and (min-width: 960px) {
    .c-button-gray-large:hover, .c-button-gray-medium:hover {
      color: #E3E3E3;
      border-color: #000;
      background-color: #000; } }
  @media only screen and (min-width: 960px) {
    .c-button-gray-large:hover svg, .c-button-gray-medium:hover svg {
      fill: #E3E3E3; } }
  @media only screen and (min-width: 960px) {
    .c-button-gray-large svg, .c-button-gray-medium svg {
      transition: fill .3s; } }

.c-button-yellow-large, .c-button-yellow-medium {
  border-color: #FFE512;
  background-color: #FFE512; }
  @media only screen and (min-width: 960px) {
    .c-button-yellow-large:hover, .c-button-yellow-medium:hover {
      color: #FFE512;
      border-color: #000;
      background-color: #000; } }
  @media only screen and (min-width: 960px) {
    .c-button-yellow-large:hover svg, .c-button-yellow-medium:hover svg {
      fill: #FFE512; } }
  @media only screen and (min-width: 960px) {
    .c-button-yellow-large svg, .c-button-yellow-medium svg {
      transition: fill .3s; } }

.c-button-hasBorder-black-medium {
  border: solid 2px #000000; }
  @media only screen and (min-width: 960px) {
    .c-button-hasBorder-black-medium:hover {
      color: #fff;
      background-color: #000; } }
  @media only screen and (min-width: 960px) {
    .c-button-hasBorder-black-medium:hover svg {
      fill: #fff; } }
  @media only screen and (min-width: 960px) {
    .c-button-hasBorder-black-medium svg {
      transition: fill .3s; } }

.newsletterContents_input_mm {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: solid 1px #C8C8CB;
  border-radius: 0px;
  font-weight: bold;
}
.newsletterContents_input {
  /* .js-placeholder_string */ }
  .newsletterContents_input input[type='button'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: 0px; }
  .newsletterContents_input input[type='text'], .newsletterContents_input input[type='mail'], .newsletterContents_input input[type='tel'], .newsletterContents_input input[type='password'], .newsletterContents_input input[type='number'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: solid 1px #C8C8CB;
    border-radius: 0px; }
    .cartForm_section .is-error input[type='text'],
    .cartForm_section .is-error input[type='mail'],
    .cartForm_section .is-error input[type='button'],
    .cartForm_section .is-error input[type='password'],
    .cartForm_section .is-error input[type='number'],
    .cartForm_section .is-error input[type='tel'] {
      border-color: #CC0E0E;
      background-color: #FAE6E6; }
  @media only screen and (max-width: 959px) {
    .newsletterContents_input input[type='radio'] {
      width: 16px;
      height: 16px; } }
  @media only screen and (max-width: 959px) {
    .newsletterContents_input input[type='checkbox'] {
      width: 20px;
      height: 20px; } }
  @media only screen and (max-width: 959px) {
    .newsletterContents_input input, .newsletterContents_input label {
      vertical-align: middle; } }
  @media only screen and (min-width: 960px) {
    .newsletterContents_input input, .newsletterContents_input label {
      vertical-align: baseline; } }
  .newsletterContents_input label {
    cursor: pointer; }
    .newsletterContents_input label a {
      text-decoration: underline; }
      .newsletterContents_input label a:hover {
        text-decoration: none; }
  .newsletterContents_input select {
    position: relative;
    width: 100%;
    height: 100%; }
  .newsletterContents_input textarea {
    width: 100%;
    border: 1px solid #C8C8CB;
    border-radius: 0;
    box-shadow: 0;
    line-height: 1.2;
    outline: none; }
    @media only screen and (max-width: 959px) {
      .newsletterContents_input textarea {
        padding: 10px; } }
    @media only screen and (min-width: 960px) {
      .newsletterContents_input textarea {
        padding: 15px; } }
  .newsletterContents_input .js-formItem input:placeholder-shown ~ .js-placeholder_string {
    background-color: transparent; }
  .newsletterContents_input .js-placeholder_string {
    background-color: #fff;
    padding: 0 3px; }

.c-index {
  font-size: 24px;
  text-align: center; }
  @media only screen and (max-width: 599px) {
    .c-index {
      padding: 32px 0; } }
  @media only screen and (min-width: 600px) {
    .c-index {
      padding: 48px 0; } }

.header {
  background-color: #000000; }
  @media only screen and (max-width: 959px) {
    .header {
      height: 48px; } }
  @media only screen and (min-width: 960px) {
    .header {
      position: relative;
      height: 80px; } }

.headerLogo {
  position: absolute;
  top: -100%;
  bottom: -100%;
  margin: auto 0; }
  @media only screen and (max-width: 959px) {
    .headerLogo {
      left: 16px;
      width: 62px;
      height: 36px; } }
  @media only screen and (min-width: 960px) {
    .headerLogo {
      width: 83px;
      height: 48px;
      left: 24px; } }

.footer {
  text-align: center; }
  @media only screen and (max-width: 959px) {
    .footer {
      padding: 18px 0; } }
  @media only screen and (min-width: 960px) {
    .footer {
      padding: 26px 24px; } }

.footerCopy {
  position: static; }

.wrapper {
  background-color: #E3E3E3; }

@media only screen and (max-width: 599px) {
  .contents {
    padding-bottom: 40px; } }

@media only screen and (min-width: 600px) and (max-width: 959px) {
  .contents {
    margin-bottom: 96px; } }

@media only screen and (min-width: 960px) {
  .contents {
    padding-bottom: 96px; } }

.newsletterLead {
  letter-spacing: 0.05em; }
  @media only screen and (max-width: 959px) {
    .newsletterLead {
      line-height: 1.714;
      padding: 0 16px;
      margin-bottom: 24px; } }
  @media only screen and (min-width: 960px) {
    .newsletterLead {
      text-align: center;
      margin-bottom: 48px; } }

.newsletterContents {
  background-color: #fff; }
  @media only screen and (max-width: 959px) {
    .newsletterContents {
      padding: 32px 16px;
      margin: 0 2px; } }
  @media only screen and (min-width: 960px) {
    .newsletterContents {
      padding: 40px; } }

.newsletterContents_title {
  font-size: 18px;
  font-weight: bold; }
  @media only screen and (max-width: 959px) {
    .newsletterContents_title {
      margin-bottom: 24px; } }
  @media only screen and (min-width: 960px) {
    .newsletterContents_title {
      margin-bottom: 32px; } }

@media only screen and (min-width: 960px) {
  .newsletterContents_input {
    width: 70.588%; } }

.newsletterContents_agree {
  margin-top: 24px; }

.newsletterContents_text {
  letter-spacing: 0.05em;
  line-height: 1.714;
  margin-top: 16px; }
  .newsletterContents_text span {
    color: #2381A7;
    font-weight: bold; }
    @media only screen and (min-width: 960px) {
      .newsletterContents_text span {
        transition: opacity 0.3s; } }
    @media only screen and (min-width: 960px) {
      .newsletterContents_text span:hover {
        opacity: 0.7; } }
    @media only screen and (min-width: 960px) {
      .newsletterContents_text span {
        cursor: pointer; } }

.newsletterContents_resultText {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bold; }
  .newsletterContents_resultText:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 16px;
    background-color: transparent;
    background-image: url(./../images/svg/icon_check.svg);
    background-position: left center;
    background-size: 100% 100%; }

@media only screen and (max-width: 959px) {
  .newsletterContents_button {
    margin-top: 32px; } }

@media only screen and (min-width: 960px) {
  .newsletterContents_button {
    margin-top: 48px; } }

@media only screen and (max-width: 959px) {
  .newsletterContents_toTopButton {
    margin: 32px auto 0; } }

@media only screen and (min-width: 960px) {
  .newsletterContents_toTopButton {
    margin: 48px auto 0; } }

@media only screen and (max-width: 959px) {
  .toTopPageButton {
    margin: 40px auto 0; } }

@media only screen and (min-width: 960px) {
  .toTopPageButton {
    margin: 48px auto 0; } }

.modalBg {
  transition: opacity 0.3s, visibility 0s ease 0.3s;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  z-index: 10000; }
  .modalBg.is-show {
    transition-delay: 0s;
    opacity: 1;
    visibility: visible; }
  .modalBg.is-show {
    opacity: .75; }

.mailModal {
  transition: opacity 0.3s, visibility 0s ease 0.3s;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000; }
  .mailModal.is-show {
    transition-delay: 0s;
    opacity: 1;
    visibility: visible; }
  @media only screen and (max-width: 959px) {
    .mailModal {
      width: calc(100vw - 32px);
      height: calc(100vh - 96px);
      padding: 40px 20px;
      -webkit-overflow-scrolling: touch; } }
  @media only screen and (min-width: 960px) {
    .mailModal {
      width: calc(((100% - (11 + 2) * 24px) / 12) * 8 + (24px * 9) + 48px);
      max-width: 858px;
      height: calc(100vh - 160px);
      padding: 72px 40px; } }

.mailModal_close {
  position: absolute;
  width: 24px;
  height: 24px; }
  @media only screen and (max-width: 959px) {
    .mailModal_close {
      top: 8px;
      right: 8px; } }
  @media only screen and (min-width: 960px) {
    .mailModal_close {
      top: 24px;
      right: 24px; } }
  .mailModal_close:before, .mailModal_close:after {
    background-color: #000000; }

.mailModal_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center; }
  @media only screen and (max-width: 959px) {
    .mailModal_title {
      margin-bottom: 32px; } }
  @media only screen and (min-width: 960px) {
    .mailModal_title {
      margin-bottom: 40px; } }

.mailModal_text {
  letter-spacing: 0.05em;
  line-height: 1.714; }
  .mailModal_text .newsletterTextHead {
    font-weight: bold;
    margin-bottom: 32px; }
  .mailModal_text .newsletterText + .newsletterTextHead {
    margin-top: 60px; }

.guideOfferItem {
  margin-top: 24px; }
  @media only screen and (max-width: 599px) {
    .guideOfferItem {
      padding-bottom: 24px; } }
  @media only screen and (min-width: 960px) {
    .guideOfferItem {
      margin-bottom: 32px; } }

@media only screen and (max-width: 599px) {
  .guideOfferItem_node {
    padding-top: 24px; } }

@media only screen and (min-width: 600px) {
  .guideOfferItem_node {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; } }

@media only screen and (max-width: 959px) {
  .guideOfferItem_node + .guideOfferItem_node {
    margin-top: 16px; } }

@media only screen and (min-width: 960px) {
  .guideOfferItem_node + .guideOfferItem_node {
    margin-top: 8px; } }

.guideOfferItem_img {
  position: relative; }
  @media only screen and (max-width: 599px) {
    .guideOfferItem_img {
      margin: 0 50px; } }
  @media only screen and (min-width: 600px) {
    .guideOfferItem_img {
      width: calc(22.5% + 48px); } }
  .guideOfferItem_img img {
    width: 100%; }

@media only screen and (max-width: 599px) {
  .guideOfferItem_info {
    margin: 9px 16px 0; } }

@media only screen and (min-width: 600px) {
  .guideOfferItem_info {
    margin-left: 24px; } }

@media only screen and (max-width: 599px) {
  .guideOfferItem_info .otherText {
    margin-top: 9px; } }

.guideOfferItem_point {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 12px;
  background-color: #000000;
  font-size: 24px;
  letter-spacing: .04em;
  line-height: 1; }
  .guideOfferItem_point .num {
    color: #FFE512; }
  .guideOfferItem_point .ruby {
    padding-left: 6px;
    color: #ffffff; }

  div.msg {
    line-height: 120%;
    margin-top: 0.3em;
    color: #c33;
    font-size: 16px;
    font-weight: bold;
  }

.line-btn{
  color: #E3E3E3;
  border-color: #E3E3E3;
  background-color: #E3E3E3;
  border: none;
}

.line-btn:hover{
	background-color: #E3E3E3;
}

.line-btn > img{
	height: 48px;
	width: auto;
}

.line-text{
  text-align: center;
  margin: 45px 0 0 0;
  font-size: 20px;
  font-weight: bold;
}

.line-text-small{
  text-align: center;
  margin: 0 0 10px 0;
  font-size: 14px;
}

.line-banner{
  margin-top: 30px;
}

.line-banner-btn > img{
  margin: auto;
  display: block;
  max-width: 80%;
}

@media only screen and (min-width: 959px) {
  .thanks-page.width-cx {
    margin: 0 auto;
    width: 92.3%;
    max-width: 1185px;
  }

  .newsletterContents.width-cx {
    width: 63.5%;
  } 
}

@media only screen and (max-width: 599px) {
  .index-page-text {
      padding: 0 10px;
      text-align: left;
  } 
}
@media only screen and (min-width: 600px) {
  .index-page-text {
      text-align: center;
  } 
}

@media only screen and (max-width: 599px) {
  .thanks-page-text {
      padding: 0 16px;
      text-align: left;
  } 
}
@media only screen and (min-width: 600px) {
  .thanks-page-text {
      text-align: center;
  } 
}