/* image */
[data-aspect-ratio="206:214"]:before { padding-top: calc((214/206) * 100%); }
[data-aspect-ratio="216:136"]:before { padding-top: calc((136/216) * 100%); }
[data-aspect-ratio="240:152"]:before { padding-top: calc((152/240) * 100%); }
[data-aspect-ratio="750:375"]:before { padding-top: calc((375/750) * 100%); }

[data-sp-aspect-ratio="690:304"]:before { padding-top: calc((304/690) * 100%); }

/* Element */
video { cursor: pointer; }

/* Base Style */
.fr-heading.-h1 { background-color: #f4f4f4; }
.note { font-size: 11px; color: #919191; }
.font-bold { font-weight: bold; }
.u-uqFont { font-family: "UniqloPro Bold", sans-serif; }
.catch .font-bold { font-size: 14px; }
.catch .fr-body span { display: block; }
.fr-linkButton { margin-bottom: 0; }

/* .fr-anchorButton */
.fr-anchorButton { flex-wrap: nowrap; }
.fr-anchorButton_item { width: calc(100%/3); box-sizing: border-box; position: relative; }
.fr-anchorButton_item:nth-child(2) { border-left: 1px solid #dadada; border-right:  1px solid #dadada; }
.anchorTxtWrapper { display: block; }
.anchorSubTxt { display: block; font-size: 10px; font-weight: normal; }

/* .fr-anchorButton NEW iCon */
.fr-anchorButton_item.new:before { display: flex; justify-content: center; align-items: center; content: "NEW"; width: 42px; height: 18px; font-size: 9px; color: #fff; position: absolute; top: 0; left: 0; background-color: #378694; }
.fr-anchorButton_itemLink { padding-top: 25px; }

/* .fr-accordion */
.fr-accordion:last-child .fr-accordion_label { border-bottom: 0; }
.fr-accordion:last-child .fr-accordion_checkBox:checked + .fr-accordion_label { border-bottom: 1px solid #f4f4f4; }

/* .lineupLists */
.lineupLists {  margin: 0 auto; padding: 0; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.lineupLists li { display: inline-block; width: 40%; padding-right: 5.2%; }
.lineupLists li:first-child { margin-left: 4vw; }
.lineupLists .fr-body { white-space: normal; }
.lineupLists .font-bold + .fr-body { margin: 0; }

/* Leadmore Button */
.leadMore-wrap { position: relative; transition: all 300ms 0s ease; }
.leadMore-btn { width: 100%; height: 94px; background: #fff; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; }
.leadMore-btn-inner { display: flex; justify-content: center; align-items: center; width: 100%; height: 67px; font-size: 14px; font-weight: bold; cursor: pointer; transition: .2s ease; border-top: 1px solid #dadada; position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; }
.leadMore-btn-inner:before { content: "もっと見る" }
.leadMore-btn-inner:after { display: flex; justify-content: center; align-items: center; content: ""; background: url(https://169.p.syniva.es/jp/ja/special-feature/common/icons/chevron_updown.svg) 0/cover no-repeat; transition: .2s; width: 24px; height: 24px; margin-left: 13px; }
.leadMore-item { position: relative; overflow: hidden; visibility: hidden; height: 0; opacity: 0; transition: .5s; padding-bottom: 94px; }
.leadMore-item::before { display: block; position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 40px; background: #fff; }
.leadMore-trigger {display: none; }
.leadMore-trigger:checked ~ .leadMore-btn .leadMore-btn-inner:before { content: "閉じる"; }
.leadMore-trigger:checked ~ .leadMore-btn .leadMore-btn-inner:after { transform: rotate(-180deg); }
.leadMore-trigger:checked ~ .leadMore-item { height: auto; opacity: 1; visibility: visible; }
.leadMore-trigger:checked ~ .leadMore-item::before { display: none; }

/* .policyModal */
.policyModal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; }
.policyModal:not(:target) { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
.policyModal:target { opacity: 1; visibility: visible; transition: opacity 0.5s, visibility 0.5s; }
.policyModal .overlay { display: block; width: 100%; height: 100%; background-color: #000; opacity: 0.7; position: absolute; top: 0; left: 0; }
.policyModal-wrapper { width: 100%; height: 100%; max-width: 960px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; }
.policyModal-contents { overflow: auto; width: 100%; height: 100%; box-sizing: border-box; position: relative; }
.policyModal-content { margin-top: 50px; position: relative; }
.policyModal-close { position: absolute; top: 5px; right: 25px; color: red; font-size: 30px; font-weight: bold; }
.policyMainContents { min-height: 100px; margin: 40px 0 25px; }
.cancelBtn { text-align: center; }
.cancelBtn .fr-body { margin: 0; }
.policyModal a[href] { font-weight: bold; text-decoration: underline; }
.policyModal a[href]:hover,
.policyModal .policyModal-close[href],
.policyModal .fr-linkButton[href] { text-decoration: none; }
.policyModal .fr-linkButton[href] { padding: 10px 0; line-height: 1.5; }
.agreemLink { font-size: 17px; }

/* .checkBox */
.checkBox { display: block; width: 144.5px; margin: 0 auto 16.5px; }
.checkBoxInput { display: none; }
.checkBoxParts { display: flex; align-items: center; padding-left: 27.5px; position:relative; }
.checkBoxParts::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 2px solid #ababab; }
.checkBoxInput:checked + .checkBoxParts:before { background-color: #1b1b1b; border: 2px solid #1b1b1b;}
.checkBoxInput:checked + .checkBoxParts:after { content: ""; display: block; position: absolute; top: 5px; left: 8px; width: 3.5px; height: 7px; transform: rotate(40deg); border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
.speechBubble { display: flex; justify-content: center; align-items: center; text-align: center; height: 90.5px; background: #fff; border: solid 2px #378694; box-sizing: border-box; box-shadow: 2px 2px 4px -2px #d2d2d2; margin-left: 4vw; margin-right: 4vw; position: relative; }
.speechBubble:before { content: ""; position: absolute; top: -24px; left: 50%; margin-left: -15px; border: 12px solid transparent; border-bottom: 12px solid #FFF; z-index: 2; }
.speechBubble:after { content: ""; position: absolute; top: -29px; left: 50%; margin-left: -17px; border: 14px solid transparent; border-bottom: 14px solid #378694; z-index: 1; }
.entryBox .fr-linkButton { display: flex; justify-content: center; align-items: center; height: 52px; line-height: 1; margin-left: 0; margin-right: 0; margin-bottom: 15px; color: #fff; background-color: #dadada; border-color:  #dadada; }
.entryBox .fr-linkButton.on { background-color: #1b1b1b; border-color:  #1b1b1b; }
.entryBox .txtLink { text-decoration: underline; font-weight: bold; }
.entryBox .txtLink:hover { text-decoration: none; }

/* #tax */
.fr-tax { position: relative; margin-top: 32px; font-size: 13px; }
.fr-tax:before { display: block; content: ""; width: 100%; height: 2px; background: #1b1b1b; position: absolute; top: -8.5px; left: 0; }

/* #agreement */
#agreement .fr-body { margin-top: 0; }
.agreement-Open .fr-body:nth-child(2) { margin-bottom: 0; }

/* #giftcard */
.cardPrice { display: flex; }
.cardPrice li { font-size: 18px; font-family: "UniqloPro Bold", sans-serif; padding-right: 18px; position: relative; }
.cardPrice li:after { display: block; content: "/"; width: 6px; position: absolute; top: 0; right: 8px; }
.cardPrice li:last-child:after { display: none; }
.flow { padding-top: 15px; padding-bottom: 15px; background-color: #f4f4f4; margin-left: 4vw; margin-right: 4vw; }
.flow ul { display: flex; flex-wrap: wrap; padding: 0 7.5px; }
.flow li { width: calc(100%/2); padding: 0 7.5px; }
.flow .fr-body { margin-bottom: 0; }
.itemLists .fr-body { margin: 0; }
.itemListBox { display: flex; }
.itemListBox-thum { width: 32vw; }
.itemListBox-txt { flex: 1; padding-left: 15px; }
.fr-linkButton.-customize { line-height: 1.5; padding-top: 15px; padding-bottom: 15px; }
.fr-linkButton.-customize .tiny { display: inline-block; text-align: left; font-size: 11px; font-weight: normal; }

/* #giftbox */
#giftbox .fr-body:last-child { margin-bottom: 0; }

/* MP4 Movie */
.videoWrapper { position: relative; padding-top: calc(9 / 16 * 100%); }
.videoElem { width: 100%; display: block; position: absolute; top: 0; left: 0; }

/* youtube iframe API */
.o-movie_wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.o-movie_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* #faq */
#faq .fr-accordion_contentInner a { text-decoration: underline; }
#faq .fr-accordion_contentInner a:hover { text-decoration: none; }

/* #privacyPolicy */
#privacyPolicy .fr-heading.-h2 { padding-top: 0; }
#privacyPolicy .fr-body { margin-top: 0; }
#privacyPolicy .articleSubTitle { display: block; font-weight: bold; }
#privacyPolicy .leadMore-btn-inner { border-bottom: 1px solid #dadada; }

/* #agreement */
.terms_wrapper { word-break: break-all }
.termsList_wrapper { margin-left: 1.8em }
.termsList_inner { list-style-type: decimal }
.termsList_inner+.termsList_inner { margin-top: 21px }
.nestList_wrapper+.termsList_inner,
.nestList_wrapper+.termsList_inner { margin-top: 9px }
.nestList_wrapper {
  margin-left: 2em;
  margin-top: 6px;
}
.nestList_wrapper.-noneNumber { margin-left: 0}
.nestList_inner {
	list-style-type: none;
	counter-increment: cnt;
}
.nestList_inner:before {
	content: "(" counter(cnt) ")";
	display: inline-block;
	margin-left: -2em;
	width: 2em;
}
.nestList_inner+.nestList_inner { margin-top: 9px }
.-noneNumber li { list-style-type: none }
.-noneNumber li:before { content: "" }

/* announce */
.announce_wrapper {
  background-color: #f4f4f4;
  padding: 0 0 21px;
}
.announce_inner {
  padding: 24px 4vw;
  margin: 0 4vw;
  background-color: #fff;
  border: 1px solid #1b1b1b;
}
.announce_heading {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

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

  /* image */
  [data-pc-aspect-ratio="598:192"]:before { padding-top: calc((192/598) * 100%); }
  [data-pc-aspect-ratio="936:468"]:before { padding-top: calc((468/936) * 100%); }

  /* .swiper */
  .swiper-button-next,
  .swiper-button-prev { margin-top: -40px; }
  .lineupSlide .swiper-button-next,
  .lineupSlide .swiper-button-prev { margin-top: -60px; }

  /* .fr-heading.-h1 */
  .fr-heading.-h1 { background-color: #fff; }
  .fr-heading.-h1.fr-pc-my-l { margin-top: 0; }

  /* .u-align-pc-center */
  .u-align-pc-center { text-align: center; }

  /* .banner */
  .banner-egift { width: 598px; margin-left: auto; margin-right: auto; }

  /* .catch */
  .catch .font-bold { font-size: 20px; }

  /* .fr-anchorButton */
  .anchorSubTxt { font-size: 13px; color: #7d7d7d; }

  /* .policyModal */
  .policyMainContents { margin-left: 2vw; margin-right: 2vw; }

  /* .fr-anchorButton NEW iCon */
  .fr-anchorButton_item.new:before { width: 52px; height: 24px; font-size: 10px; }
  .fr-anchorButton_itemLink { padding-top: 0; }

  /* .fr-accordion */
  .fr-accordion { margin-left: 172px; margin-right: 172px; }
  .fr-accordion:last-child .fr-accordion_label { border-bottom: 1px solid #dadada; }

  /* #tax */
  #tax { margin-left: 25px; margin-right: 25px; }
  .fr-tax { padding: 19px 15px 17px; font-size: 20px; font-weight: bold; text-align: center; border: 3px solid #f00; max-width: 960px; margin: 0 auto 15px; }
  .fr-tax:before { display: none; }

  /* .lineupLists */
  .lineupLists { display: flex; justify-content: space-between; max-width: 933px; overflow-x: visible; white-space: normal; }
  .lineupLists li { width: calc((216/933)*100%); padding-right: 0; }
  .lineupLists li:first-child { margin-left: 0; }

  /* Leadmore Button */
  .leadMore-btn-inner { border-bottom: 1px solid #dadada; }
  .leadMore-btn-inner:before { font-size: 17px; }

  /* .checkBox */
  .entryBox .checkBoxParts { white-space: nowrap; }
  .entryBox .speechBubble { max-width: 456px; margin-left: auto; margin-right: auto; }
  .entryBox .fr-linkButton { margin-left: auto; margin-right: auto; }

  /* section common box */
  .box936 { max-width: 936px; margin-left: auto; margin-right: auto; }
  .box616 { max-width: 616px; margin-left: auto; margin-right: auto; }

  /* .originalDesign */
  /* .originalDesign { max-width: 598px; margin-left: auto; margin-right: auto; } */

  /* #egift */
  .movieHowToUse { max-width: 616px; margin-left: auto; margin-right: auto; }
  .movieHowToUse .fr-video { margin-left: 0; margin-right: 0; }

  /* #giftcard */
  .cardPrice { justify-content: center; }
  .cardPrice li { font-size: 20px; padding-right: 21px; }
  .cardPrice li:after { width: 7px; right: 7px; }
  .flow { max-width: 936px; padding-top: 20px; padding-bottom: 20px; background-color: #f4f4f4; margin-left: auto; margin-right: auto; }
  .flow ul { flex-wrap: nowrap; padding: 0 12px; }
  .flow li { width: calc(100%/2); padding: 0 12px; }
  .itemLists { display: flex; justify-content: space-between; max-width: 936px; margin-left: auto; margin-right: auto; }
  .itemLists li { width: calc(100%/2); }
  .itemListBox-thum { width: 216px; }
  .itemListBox-txt { padding-left: 25px; }

  /* #giftbox */
  #giftbox .lineupSlide { max-width: 693px; margin-left: auto; margin-right: auto; }

  /* #faq */
  #faq .fr-accordion_content { padding-left: 0; padding-right: 0; }

  /* #agreement */
  .nestList_wrapper { margin-top: 8px }
  .termsList_inner+.termsList_inner { margin-top: 20px }
  .nestList_wrapper+.termsList_inner { margin-top: 12px }
  .agreement-txt { margin-left: 12px; margin-right: 12px; }

  /* announce */
  .announce_wrapper {
    background-color: #fff;
    padding: 0;
  }
  .announce_inner {
    padding: 40px calc((80 / 960) * 100%);
    margin: 0 0 28px;
  }
  .announce_heading {
    font-size: 23px;
  }
}