/* image */
[data-sp-aspect-ratio="750:1350"]:before { padding-top: calc((1350 / 750) * 100%); }
[data-aspect-ratio="364:590"]:before { padding-top: calc((590 / 364) * 100%); }
[data-aspect-ratio="276:82"]:before { padding-top: calc((82 / 276) * 100%) }
[data-aspect-ratio="277:82"]:before { padding-top: calc((82 / 277) * 100%) }
[data-sp-aspect-ratio="750:400"]:before { padding-top: calc((400 / 750) * 100%); }
[data-sp-aspect-ratio="750:422"]:before { padding-top: calc((422 / 750) * 100%); }


/* style */
.app-heading {
  font-size: 17px;
  text-align: center;
}
.kv_wrapper { position: relative;}
.kvApp_wrapper {
  position: absolute;
  bottom: 21px;
  width: 77.6%;
  margin: 0 12%;
  justify-content: space-between;
}
.kvAppImg_wrapper {
  width: calc(50% - 2vw);
}

.app-melit {
  display: flex;
  flex-wrap: wrap;
  padding-top: 21px;
}
.app-melit_item {
  width: 100%;
  margin: 0 auto;
}
.app-melit_item .u-imgAdjustBox {
  width: 60%;
  margin: auto;
}
.app-melit_number {
  justify-content: center;
}
.app-melit_number,.app-melit_numberBox{
  align-items: center;
  display: flex;
}
.app-melit_numberBox {
  border: 2px solid #dadada;
  font-size: 24px;
  font-family: "UniqloPro Light", sans-serif;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.app-melit_title {
  font-family: ヒラギノ角ゴ Pro W6,sans-serif;
  font-weight: 700;
  font-size: 14px;
  flex: none;
  line-height: 21px;
  margin-left: 4vw;
}
.app-melit_text  {
  text-align: center;
  padding-top: 21px;
}
.app-melit_itemInner {
  padding-top: 21px;
}
.app-melit_itemInner .fr-img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.-narrow { display: none;}

.banner_wrapper { padding: 0 4vw; }
.banner_list { margin-top: 21px; }
.banner_list:first-child { margin-top: 0; }

.splitBox.-getApp {
  justify-content: space-between;
  margin: 9px 7.7% 0;
}
.splitBox {
  display: flex;
  flex-wrap: wrap;
}
.appImg_wapper { width: calc(50% - 2vw); }
.appText {
  font-size: 11px;
  color: #7d7d7d;
  margin-top: 21px;
}
.subTitle,
.mainTitle,
.movieTitle {
  font-family: "ヒラギノ角ゴ Pro W6", sans-serif;
  font-weight: 700;
}
.subTitle {
  font-size: 16px;
}
.mainTitle {
  font-size: 18px;
}
.specialContents_talkList {
  display: flex;
  flex-wrap: wrap;
}
.specialContents_talkItem {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 21px;
}
.specialContents_talkImg {
  width: 91px;
  margin-right: 18px;
}
.specialContents_caption {
  margin-top: 3px;
}
.specialContents_talkItem.-reverse {
  flex-direction: row-reverse;
}
.specialContents_talkItem.-reverse .specialContents_talkImg {
  margin-right: 0;
  margin-left: 18px;
}
.specialContents_comment {
  flex: 1;
  position: relative;
  padding: 9px;
  background-color: #fff;
  border: 1px solid #ababab;
  border-radius: 7px
}
.specialContents_comment:before {
  left: -11px;
  border-right: 11px solid #ababab
}
.specialContents_comment:after,
.specialContents_comment:before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 35%;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent
}
.specialContents_comment:after {
  left: -10px;
  border-right: 12px solid #fff
}
.specialContents_comment.-reverse:before,
.specialContents_comment.-reverse:after {
  content: "";
  position: absolute;
  display: block;
  left: auto;
  top: 40%;
  border-right: 0px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent
}
.specialContents_comment.-reverse:before {
  right: -11px;
  border-left: 11px solid #ababab;
  z-index: 1;
}
.specialContents_comment.-reverse:after {
  right: -10px;
  border-left: 12px solid #fff;
  z-index: 2
}
.movieTitle {
  font-size: 14px;
}

@media screen and (min-width: 813px) {
  /* image */
  [data-pc-aspect-ratio="2:1"]:before {
    padding-top: 50%;
  }
  [data-pc-aspect-ratio="649:271"]:before { padding-top: calc((271 / 649) * 100%) }
  [data-pc-aspect-ratio="629:351"]:before { padding-top: calc((351 / 629) * 100%) }

  /*  override */
  a:hover,
  a:hover img,
  a:hover p,
  a[href]:hover,
  a[href]:hover img,
  a[data-link]:hover,
  a[data-link]:hover img,
  .fr-accordion_label:hover,
  .fr-video:hover,
  .more_link:hover {
    cursor: pointer;
    opacity: 0.8;
    text-decoration: none;
  }
  .fr-linkButton,
  .fr-accordion_label,
  .fr-video {
    transition: 0.5s;
  }

  /* style */
  .app-heading {
    font-size: 30px;
    line-height: 1.375em;
  }
  .kvQR_wrapper {
    position: absolute;
    bottom: calc((168 / 588) *100%);
    width: calc((105 / 1176) * 100%);
    margin-left: calc((598 / 1176) * 100%);
  }
  .kvQRImg_wrapper {
    width: 80%;
    margin-left: 10%;
  }
  .kvQR_text {
    font-size: 0.8vw;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding-top: 3px;
  }
  .kvApp_wrapper {
    bottom: calc((61 / 588) * 100%);
    width: calc((346 / 1176) * 100%);
    margin-left: calc((159 / 1176) * 100%);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
  .kvAppImg_wrapper {
    width: 47.98%;
    margin-top: 40px;
  }

  .app-melit {
    padding-top: 40px;
  }
  .app-melit_item {
    width: calc(99.99999% / 3);
    margin: 0;
  }
  .app-melit_item:nth-child(n+4) {
    margin-top: 64px;
  }
  .app-melit_number {
    flex-wrap: wrap;
  }
  .app-melit_numberBox {
    font-size: 36px;
    width: 56px;
    height: 56px;
  }
  .app-melit_title {
    font-size: 20px;
    line-height: 28px;
    margin-left: 2vw;
  }
  .app-melit_item .u-imgAdjustBox {
    width: calc(100% - 56%);
  }
  .app-melit_text {
    padding-top: 20px;
    text-align: center;
  }
  .app-melit_itemInner {
    padding-top: 20px;
  }

  .banner_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
  }
  .banner_list {
    width: calc((100% - 24px) / 2);
    margin-top: 28px;
  }

  .app_wrapper {
    width: 588px;
    margin-right: auto;
    margin-left: auto;
  }
  .splitBox.-getApp {
    width: 100%;
    margin: 20px auto 0;
    justify-content: center;
  }
  .appImg_wapper {
    width: calc((100% - 43.533%) / 2);
  }
  .appImg_wapper:first-child {
    margin-right: 14px;
  }
  .appText {
    text-align: center;
    margin-top: 20px;
  }
  .bannerContents {
    width: 649px;
    margin-right: auto;
    margin-left: auto;
  }
  .specialContents {
    width: 624px;
    margin-right: auto;
    margin-left: auto;
  }
  .subTitle {
    font-size: 23px;
  }
  .mainTitle {
    font-size: 30px;
  }
  .leadText {
    font-size: 17px;
  }
  .specialContents_talkItem {
    margin-top: 0;
  }
  .specialContents_talkImg {
    width: 111px;
  }
  .specialContents_caption {
    margin-top: 5px;
  }
  .specialContents_comment {
    max-width: 278px;
    padding: 12px;
  }
  .specialContents_comment.-reverse {
    max-width: 300px;
  }
  .movieTitle {
    font-size: 20px;
  }
}

@media screen and (max-width: 952px) and (min-width: 813px) {
  .-narrow { display: block;}
}

/* service */
.o-service_Inner {
  margin-left: auto;
  margin-right: auto;
}

.o-service_Inner p {
  margin: 0;
  padding: 0;
}

.o-service_Inner li {
  list-style: none;
}

.o-service_anchorButton {
  max-width: 624px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.o-service_anchorButton_List {
  width: 25%;
  font-weight: 600;
  text-align: center;
}

.o-service_anchorButton_List.-category-1 {
  border-bottom: solid 6px #ffba00;
}

.o-service_anchorButton_List.-category-2 {
  border-bottom: solid 6px #1cb148;
}

.o-service_anchorButton_List.-category-3 {
  border-bottom: solid 6px #ff789e;
}

.o-service_anchorButton_List.-category-4 {
  border-bottom: solid 6px #4265dd;
}

.o-service_List-Item {
  width: 100%;
}

.o-service_List-Item:nth-of-type(1) {
  border-top: 0;
}

.o-service_List-Item-Content {
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  height: 81px;
}

.o-service_List-Item-Content-Number {
  position: relative;
  margin-right: 20px;
  border-radius: 50%;
  width: 17px;
  height: 15px;
  line-height: 80px;
}

.o-service_List-Item-Content-Number-Line {
  position: absolute;
  top: -37px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 88px;
}

.o-service_List-Item-Content-Number.-category-1 {
  background: #ffba00;
}

.o-service_List-Item-Content-Number.-category-1 .o-service_List-Item-Content-Number-Line {
  background: #ffba00;
}

.o-service_List-Item-Content-Number.-category-2 {
  background: #1cb148;
}

.o-service_List-Item-Content-Number.-category-2 .o-service_List-Item-Content-Number-Line {
  background: #1cb148;
}

.o-service_List-Item-Content-Number.-category-3 {
  background: #ff789e;
}

.o-service_List-Item-Content-Number.-category-3 .o-service_List-Item-Content-Number-Line {
  background: #ff789e;
}

.o-service_List-Item-Content-Number.-category-4 {
  background: #4265dd;
}

.o-service_List-Item-Content-Number.-category-4 .o-service_List-Item-Content-Number-Line {
  background: #4265dd;
}

.o-service_List-Item-Content-Inner {
  box-shadow: 0 0 3px 0 rgba(77, 77, 77, 0.5);
  display: flex;
  align-items: center;
  width: 100%;
}

.o-service_List-Item-Content-Inner.-category-1 {
  border-left: #ffba00 5px solid;
}

.o-service_List-Item-Content-Inner.-category-2 {
  border-left: #1cb148 5px solid;
}

.o-service_List-Item-Content-Inner.-category-3 {
  border-left: #ff789e 5px solid;
}

.o-service_List-Item-Content-Inner.-category-4 {
  border-left: #4265dd 5px solid;
}

.o-service_List-Item-Content-Inner::after {
  align-items: center;
  display: flex;
  justify-content: center;
  content: "";
  background: url(/jp/ja/contents/feature/app/img/ico-unread.svg) 0/cover no-repeat;
  margin-left: auto;
  transition: 0.2s;
  width: 18px;
  height: 13px;
  margin-right: 15px;
}

.o-service_List-Item-Content-Inner.-read::after {
  background: url(/jp/ja/contents/feature/app/img/ico-read.svg) 0/cover no-repeat;
}

.o-service_List-Item-Content-Title {
  font-size: 20px;
  font-family: "UniqloPro Light", sans-serif;
  margin-left: 2vw;
  margin-right: 2vw;
}

.o-service_List-Item-Content-Description {
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  margin-left: 6px;
  margin-right: 6px;
  width: 46%;
}

.o-service_List-Item-Content-Img {
  width: 81px;
  height: 81px;
}

.o-slideParent {
  display: none;
  position: relative;
  background-color: #fff;
}

.o-slideParent::after {
  content: "";
  display: block;
  background: var(--color-key);
  size: 100% 75px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 101;
}

.o-slideParent .swiper-container {
  padding-bottom: 0;
}

.o-slideParent .swiper-slide {
  width: 100%;
  height: auto;
}

.o-slideItem {
  padding-bottom: 90px;
}

.o-slideItem_textContainer {
  padding: 0 var(--sp-h-1g);
}

.o-slideItem_itemLink {
  font-size: 13px;
  line-height: 1.5;
  text-decoration: underline;
  color: #000;
  font-weight: 600;
  text-align: right;
}

.o-slideItem_name {
  font-size: 14px;
  line-height: 21px;
  font-family: "ヒラギノ角ゴ Pro W6", sans-serif;
}

.o-slideItem_Head {
  padding: 0 15% 0 var(--sp-h-1g);
}

.o-slideItem_Text {
  font-size: 13px;
  line-height: 19.5px;
}

.o-slideItem_category {
  color: #fff;
  padding: var(--sp-v-xxs) 0;
  width: 56px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}

.o-slideItem.-category-1 {
  background-color: #ffba00;
}

.o-slideItem.-category-2 {
  background-color: #1cb148;
}

.o-slideItem.-category-3 {
  background-color: #ff789e;
}

.o-slideItem.-category-4 {
  background-color: #4265dd;
}

.fr-stepFlow_itemInner {
  height: 75px;
}

.fr-stepFlow_heading {
  font-size: 16px;
  line-height: 24px;
}

.fr-stepFlow_number {
  font-family: "UniqloPro Light", sans-serif;
  font-weight: 400;
}

.o-modal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
  width: 100%;
  font-size: 12px;
}

.o-modal_buttonClose {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 2vw;
  right: 2vw;
  z-index: 102;
}

.o-modal_buttonClose::before{
  content: "";
  display: block;
  width: 2px;
  height: 25px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -14px;
}

.o-modal_buttonClose::after {
  content: "";
  display: block;
  width: 2px;
  height: 25px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -14px;
}

.o-modal_buttonClose::before {
  transform: rotate(45deg);
}

.o-modal_buttonClose::after {
  transform: rotate(-45deg);
}

.o-modal_buttonClose_Text {
  position: absolute;
  bottom: -6px;
  right: 3px;
  font-size: 10px;
}

.swiper-button-prev.o-slideParent_buttonPrev {
  top: 35%;
}

.swiper-button-next.o-slideParent_buttonNext {
  top: 35%;
}

.o-modal_Button {
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 102;
}

.o-contents {
  padding-left: 4vw;
  padding-right: 4vw;
  position: relative;
  overflow: hidden;
  padding-top: 36px;
}

.o-contents_Title {
  font-size: 18px;
  line-height: 27px;
}

.o-contents_Head {
  display: flex;
  align-items: center;
  justify-content: center;
}

.o-contents_Headtext {
  font-size: 13px;
  font-weight: 600;
}

.l-overlay {
  opacity: 0;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
}

.is-fixed {
  overflow: hidden;
  size: 100vw 100vh;
  position: fixed;
}

.is-hidden {
  overflow: hidden;
}

.wrapper {
  position: relative;
}

[aria-hidden="true"] {
  height: 0;
  overflow: hidden;
}

.o-slideItem_category.-category-1 {
  background-color: #ffba00
}

.o-slideItem_category.-category-2 {
  background-color: #1cb148
}

.o-slideItem_category.-category-3 {
  background-color: #ff789e
}

.o-slideItem_category.-category-4 {
  background-color: #4265dd
}

@media screen and (min-width: 813px) {
  .o-service_anchorButton_List {
    cursor: pointer;
  }

  .o-service_anchorButton_Text {
    font-size: 15px;
  }

  .o-service_List {
    max-width: 624px;
    margin-left: auto;
    margin-right: auto;
  }

  .o-service_List-Item-Content {
    height: 111px;
    cursor: pointer;
  }
  
  .o-service_List-Item-Content-Number {
    width: 23px;
    height: 21px;
    margin-right: 40px;
  }

  .o-service_List-Item-Content-Number-Line {
    top: -59px;
    height: 120px;
  }

  .o-service_List-Item-Content-Inner {
    height: 111px;
    border-left: #ffba00 8px solid;
  }

  .o-service_List-Item-Content-Inner::after {
    margin-right: 30px;
    width: 29px;
    height: 21px;
  }

  .o-service_List-Item-Content-Title {
    font-size: 32px;
    margin-left: 24px;
    margin-right: 24px;
  }

  .o-service_List-Item-Content-Description {
    font-size: 17px;
    line-height: 23.8px;
    margin-left: 24px;
    margin-right: 24px;
  }

  .o-service_List-Item-Content-Img {
    width: 111px;
    height: 111px;
  }

  .o-slideParent::after {
    height: 80px;
  }

  .o-slideItem {
    padding-bottom: 105px;
  }

  .o-slideItem_containerList {
    display: flex;
    align-items: center;
  }

  .o-slideItem_Img {
    width: calc(50% - 6px);
    margin-right: 6px;
  }

  .o-slideItem_textContainer {
    width: calc(50% - 6px);
    margin-left: 6px;
    padding: 0;
  }

  .o-slideItem_itemLink {
    font-size: 14px;
  }

  .o-slideItem_name {
    font-size: 20px;
    line-height: 28px;
  }

  .o-slideItem_Head {
    padding: 0;
  }

  .o-slideItem_Line {
    border-bottom: 1px solid #dadada;
    margin-left: -24px;
    margin-right: -24px;
  }

  .o-slideItem_Text {
    font-size: 14px;
    line-height: 19.6px;
  }

  .o-slideItem_category {
    width: 66px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 13px;
  }

  .o-slideItem_container {
    padding: 0 24px;
  }

  .fr-stepFlow_itemInner {
    height: 82px;
  }

  .fr-stepFlow_heading {
    font-size: 23px;
    line-height: 32.2px;
  }

  .fr-stepFlow_number {
    font-size: 28px;
    width: 40px;
    height: 40px;
  }

  .o-modal {
    font-size: 14px;
    width: 900px;
    left: 50%;
    margin-left: -450px;
  }

  .o-modal_buttonClose {
    cursor: pointer;
    top: 20px;
    right: 24px;
  }

  .o-modal_CloseModal {
    cursor: pointer;
  }

  .o-slideItem_Head_Line {
    border-bottom: 1px solid #dadada;
    margin-left: -24px;
    margin-right: -24px
  }

  .swiper-button-prev.o-slideParent_buttonPrev {
    left: 24px;
    top: 50%;
  }

  .swiper-button-next.o-slideParent_buttonNext {
    top: 50%;
    left: calc(50% - 46px);
  }

  .o-modal_Button {
    cursor: pointer;
  }

  .o-contents {
    padding: 0;
    padding-top: 64px;
  }

  .o-contents_Title {
    font-size: 30px;
    line-height: 41px;
  }

  .o-contents_Headtext {
    font-size: 17px;
  }
}

@media screen and (max-width: 980px) and (min-width: 813px) {
  .o-modal {
    width: 760px;
    left: 50%;
    margin-left: -380px;
  }
}
