@font-face {
  font-family: UniqloPro Light;
  src: url(/jp/ja/contents/feature/common/fonts/UniqloProLight.woff2) format("woff2"), url(/jp/ja/contents/feature/common/fonts/UniqloProLight.woff) format("woff");
  font-display: swap
}

@font-face {
  font-family: UniqloPro Regular;
  src: url(/jp/ja/contents/feature/common/fonts/UniqloProRegular.woff2) format("woff2"), url(/jp/ja/contents/feature/common/fonts/UniqloProRegular.woff) format("woff");
  font-display: swap
}

@font-face {
  font-family: UniqloPro Bold;
  src: url(/jp/ja/contents/feature/common/fonts/UniqloProBold.woff2) format("woff2"), url(/jp/ja/contents/feature/common/fonts/UniqloProBold.woff) format("woff");
  font-display: swap
}

body {
  line-height: 1.35;
  font-family: HelveticaNeue-Light,Roboto -light,Helvetica,-apple-system,Yu Gothic UI,Segoe UI,sans-serif;
  font-weight: 300;
}
.main{
  min-width: 320px;
}

html.en body,
html.en .fr-anchorButton_item,
html.en .fr-textLink_itemInner,
html.de body,
html.de .fr-heading,
html.de .fr-anchorButton_item,
html.de .fr-textLink_itemInner,
html.de .enter,
html.de .fr-linkButton,
html.es body,
html.es .fr-heading,
html.es .fr-anchorButton_item,
html.es .fr-textLink_itemInner,
html.es .enter,
html.es .fr-linkButton,
html.id body,
html.id .fr-heading,
html.id .fr-anchorButton_item,
html.id .fr-textLink_itemInner,
html.id .enter,
html.id .fr-linkButton,
html.it body,
html.it .fr-heading,
html.it .fr-anchorButton_item,
html.it .fr-textLink_itemInner,
html.it .enter,
html.it .fr-linkButton,
html.th body,
html.th .fr-heading,
html.th .fr-anchorButton_item,
html.th .fr-textLink_itemInner,
html.th .fr-linkButton{
  font-family: HelveticaNeue-Light, Helvetica, -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, meiryo, sans-serif;
}

html.fr body,
html.fr .fr-heading,
html.fr .fr-anchorButton_item,
html.fr .fr-textLink_itemInner,
html.fr .enter,
html.fr .fr-linkButton{
  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, "Segoe UI", "Noto Sans", Roboto, Arial, "Arial Unicode MS", sans-serif !important;
}

html.hk-zh body,
html.hk-zh .pfa-heading.-h4,
html.hk-zh .fr-heading,
html.hk-zh .fr-anchorButton_item,
html.hk-zh .fr-textLink_itemInner,
html.hk-zh .enter,
html.hk-zh .fr-linkButton{
  font-family: PingFang, 方正兰亭黑, Arial, Helvetica, simsun, sans-serif !important;
}
html.ko body,
html.ko .fr-heading,
html.ko .fr-anchorButton_item,
html.ko .fr-textLink_itemInner,
html.ko .enter,
html.ko .fr-linkButton{
  font-family: HelveticaNeue-Light, Helvetica, Apple SD Gothic Neo, MS P Gothic, sans-serif
}
html.tw-zh body,
html.tw-zh .pfa-heading.-h4,
html.tw-zh .fr-heading,
html.tw-zh .fr-anchorButton_item,
html.tw-zh .fr-linkButton,
html.tw-zh .enter,
html.tw-zh .fr-textLink_itemInner {
  font-family: meiryo, MS P Gothic, sans-serif !important;
}

html.vn-vi body,
html.vn-vi .fr-heading,
html.vn-vi .fr-anchorButton_item,
html.vn-vi .fr-linkButton,
html.vn-vi .enter,
html.vn-vi .fr-textLink_itemInner {
  font-family: arial, sans-serif
}

/* header */
.Header {
  background-color: #fff;
  background-color: var(--color-white);
  border-bottom: 1px solid #dadada;
  border-bottom: 1px solid var(--color-gray150);
  padding: 14.5px 15px;
  width: 100%;
  top: 0;
  right: 0;
  text-align: center;
  z-index: 2
}
.Header_Inner{
  position: relative;
}
.Header_UqLogoLink {
  position: absolute;
  left: 0px;
  width: 65px;
  top: 50%;
  transform: translateY(-50%)
}
.Header_UqLogoLink.Header_UqSingleLogo{
  width: 35px;
}
.Header_UqLogoImg {
  width: 100%;
  height: auto;
}
.Header_LogoLink {
  display: inline-block;
}

/* Navi */

.Navigation {
  overflow: hidden;
  margin-top: 12px
}

.Navigation_Link.js-Track {
  display: block
}

.Navigation_Logo {
  margin-right: 9px;
  width: auto;
  height: 28px
}

/* footer breadcrumbs */
.fr-breadcrumbs.u-only-sp {
  margin-top: 60px;
  margin-bottom: 21px;
}
.Breadcrumbs_Item {
  display: inline;
}
.Breadcrumbs_ItemLink {
  text-decoration: underline;
}
.Breadcrumbs_Item+.Breadcrumbs_Item:before {
  content: " / ";
}
.Breadcrumbs {
  margin-bottom: 24px;
}


/* SNS */
.OtherNavigation {
  text-align: center;
  min-width: 320px;
}

.OtherNavigation {
  border-top: 1px solid #dadada;
}
.OtherNavigation_Logo {
  margin-top: 24px;
}
.OtherNavigation_LogoImg {
  width: auto;
  height: 36px;
}
.OtherNavigation_ListItem {
  font-size: 14px;
  line-height: 19.5px;
}

.OtherNavigation_ListItem {
  margin-top: 24px;
}

.LanguageSwitch, .Sns_Inner {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.LanguageSwitch_Item {
  line-height: 18px;
}
.LanguageSwitch_Item+.LanguageSwitch_Item {
  border-left: 1px solid #1b1b1b;
  border-left: 1px solid var(--color-black900);
  margin-left: 9px;
  margin-left: var(--sp-v-s);
  padding-left: 9px;
  padding-left: var(--sp-v-s);
}

.Sns_Inner {
  padding-right: 4vw;
  padding-left: 4vw;
}
.Sns_Icon{
  display: flex;
  justify-content: center;
  align-items: center;
}
.Sns_Icon+.Sns_Icon {
  margin-left: 31px;
}

.Sns_IconImg.-tiktok  {
  width: 24px;
  height: auto;
  vertical-align: middle;
}
.Sns_IconImg.-youtube {
  width: 27px;
  height: auto;
  vertical-align: middle;
}

/* footer */
.Footer {
  text-align: center;
  margin-top: 28px;
  min-width: 320px;
}

.Footer {
  background-color: #f4f4f4;
  border-top: 1px solid #dadada;
  padding: 15px 4vw;
}
html.jp-ja .Footer {
  margin-top: 24px;
}
.Footer_Copyright {
  color: #ababab;
  display: block;
  font-family: UniqloPro Light,sans-serif;
  font-size: 11px;
  line-height: 1;
}

@media screen and (min-width:813px) {
  body {
    font-size: 14px;
    letter-spacing: 0
  }

  #main{
    margin-top: 0;
    padding-top: 0;
  }

  a:hover:not(.fr-tabs_itemLink),
  a:hover img,
  a:hover p,
  a[href]:not(.fr-tabs_itemLink):hover,
  a[href]:hover img,
  a[data-link]:hover,
  a[data-link]:hover img,
  .js-video:hover {
    cursor: pointer;
    opacity: 0.8;
    text-decoration: none;
  }
  .fr-linkButton {
    transition: 0.5s;
  }
  .Header {
    padding: 0;
    height: 65px
  }

  .Header_Inner {
    position: relative;
    height: 100%
  }
  
  .Header_LogoLink {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .6s;
    transition: opacity var(--transition-speed-normal)
  }
  
  .Header_UqLogoLink {
    left: 0;
    margin-left: 15px;
    transition: opacity .6s;
    transition: opacity var(--transition-speed-normal)
  }
  
  .Header_UqLogoLink:hover {
    opacity: .6
  }
  
  .Navigation_Link {
    transition: opacity .6s;
    transition: opacity var(--transition-speed-normal)
  }
  
  .Navigation_Link:hover {
    opacity: .6
  }
  
  .OtherNavigation_Inner {
    max-width: 1224px;
    width: 100%;
    padding-top: 28px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
  }
  .OtherNavigation_Logo {
    margin-top: 0;
    transition: opacity .6s;
  }
  .OtherNavigation_List {
    display: flex;
    justify-content: center;
  }
  .OtherNavigation_ListItem {
    margin-top: 0;
    margin-left: 31px;
    transition: opacity .6s;
  }
  .Footer {
    padding: 28px 0;
    text-align: left;
    margin-top: 24px;
  }
  .Footer_Inner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    max-width: 1224px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 24px;
    padding-left: var(--pc-h-m);
    padding-right: 24px;
    padding-right: var(--pc-h-m);
  }
  .Sns_Inner {
    margin-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .Sns_Icon {
    transition: opacity .6s;
  }
  .Sns_IconImg {
    border-radius: 5px;
    width: 24px;
    height: 24px;
  }
  .Sns_Icon {
    transition: opacity .6s;
  }
  .fr-pagetop[data-pagetop-is-active-bottom=true] {
    opacity: 0;
    visibility: hidden;
  }
  .fr-pagetop{
    right: 56px;
    bottom: 56px;
  }
  .LanguageSwitch {
    margin-top: 0;
    margin-left: auto;
  }
  .LanguageSwitch_Item {
    line-height: 15.6px;
    transition: opacity .6s;
    transition: opacity var(--transition-speed-normal);
  }
}