h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

.swiper {
  position: relative;
}
.swiper .slideNav {
  margin: auto;
  width: 13px;
  height: 26px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 20;
}
.swiper .slideNav.next {
  background: url("../img/icon/arrow_l.svg") no-repeat center center/contain;
  left: 0;
  right: auto;
}
.swiper .slideNav.prev {
  background: url("../img/icon/arrow_r.svg") no-repeat center center/contain;
  left: auto;
  right: 0;
}

/*===================================================
	common
====================================================*/
.ttl01 .en {
  font-size: clamp(14px, 2.362vw, 17px);
  font-family: "Lato", serif;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  display: block;
}
@media (max-width: 768px) {
  .ttl01 .en {
    font-size: 1.6rem;
  }
}
.ttl01 .jp {
  font-size: clamp(15.2px, 5.278vw, 38px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7631578947;
  display: block;
}
@media (max-width: 768px) {
  .ttl01 .jp {
    font-size: 2.4rem;
    margin-top: 5px;
  }
}

.ttlBox {
  align-items: end;
  justify-content: space-between;
}
.ttlBox .commonBtn {
  margin-bottom: 1em;
}

/*===================================================
	FV
====================================================*/
#fvWrap {
  margin-top: 100px;
  width: 100%;
  height: auto;
  position: relative;
}
@media (max-width: 768px) {
  #fvWrap {
    margin-top: 70px;
  }
}
#fvWrap #fvSliderArea {
  width: 93.75%;
  margin: 0 auto;
  height: auto;
}
@media (max-width: 768px) {
  #fvWrap #fvSliderArea {
    width: 100%;
  }
}
#fvWrap #fvSliderArea .swiper {
  width: 100%;
}
#fvWrap #fvSliderArea .swiper .swiper-wrapper li.swiper-slide picture {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#fvWrap #fvSliderArea .swiper .swiper-wrapper li.swiper-slide picture::before {
  content: "";
  padding-top: 54.81%;
  display: block;
}
@media (max-width: 768px) {
  #fvWrap #fvSliderArea .swiper .swiper-wrapper li.swiper-slide picture::before {
    padding-top: 80%;
  }
}
@media (max-width: 480px) {
  #fvWrap #fvSliderArea .swiper .swiper-wrapper li.swiper-slide picture::before {
    padding-top: 139.2%;
  }
}
#fvWrap #fvSliderArea .swiper .swiper-wrapper li.swiper-slide picture source, #fvWrap #fvSliderArea .swiper .swiper-wrapper li.swiper-slide picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#fvWrap .fvNewsBox {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
  background: #53565A;
  padding: 20px 25px;
  max-width: 500px;
  width: 90%;
}
#fvWrap .fvNewsBox .newsSlider {
  padding-right: 85px;
  position: relative;
}
@media (max-width: 768px) {
  #fvWrap .fvNewsBox .newsSlider {
    padding-right: 100px;
  }
}
@media (max-width: 480px) {
  #fvWrap .fvNewsBox .newsSlider {
    padding-right: 0;
  }
}
#fvWrap .fvNewsBox ul li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}
#fvWrap .fvNewsBox ul li a .fl {
  align-items: center;
}
#fvWrap .fvNewsBox ul li a .fl time {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
#fvWrap .fvNewsBox ul li a .fl span {
  padding: 0 1.5em;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px solid #fff;
  border-radius: 12px;
  margin-left: 27px;
}
#fvWrap .fvNewsBox ul li a p {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 10px;
}
#fvWrap .fvNewsBox .newsNav {
  position: absolute;
  width: 100px;
  display: flex;
  gap: 25px;
  top: 50%;
  right: -20px;
  translate: 0 -50%;
  z-index: 10;
  background: #53565A;
}
@media (max-width: 768px) {
  #fvWrap .fvNewsBox .newsNav {
    right: 0;
  }
}
@media (max-width: 480px) {
  #fvWrap .fvNewsBox .newsNav {
    position: absolute;
    top: -10px;
    translate: 0 0;
    width: auto;
    justify-content: flex-end;
  }
}
#fvWrap .fvNewsBox .newsNav .swiper-button-prev,
#fvWrap .fvNewsBox .newsNav .swiper-button-next {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0;
  color: #53565a;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#fvWrap .fvNewsBox .newsNav .swiper-button-prev::after,
#fvWrap .fvNewsBox .newsNav .swiper-button-next::after {
  display: none;
}
#fvWrap .fvNewsBox .newsNav .swiper-button-prev::before,
#fvWrap .fvNewsBox .newsNav .swiper-button-next::before {
  content: "";
  display: block;
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 225deg;
}
@media (max-width: 480px) {
  #fvWrap .fvNewsBox .newsNav .swiper-button-prev,
  #fvWrap .fvNewsBox .newsNav .swiper-button-next {
    width: 26px;
    height: 26px;
  }
  #fvWrap .fvNewsBox .newsNav .swiper-button-prev::before,
  #fvWrap .fvNewsBox .newsNav .swiper-button-next::before {
    width: 6px;
    height: 6px;
  }
}
#fvWrap .fvNewsBox .newsNav .swiper-button-prev:hover,
#fvWrap .fvNewsBox .newsNav .swiper-button-next:hover {
  opacity: 0.7;
}
#fvWrap .fvNewsBox .newsNav .swiper-button-next::before {
  rotate: 45deg;
}
@media (max-width: 768px) {
  #fvWrap .fvNewsBox {
    position: relative;
    width: 100%;
    padding: 25px 10px 20px 10px;
    max-width: 100%;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  #fvWrap .fvNewsBox ul li a p {
    letter-spacing: 0.05em;
  }
}

/*===================================================
	ABOUT
====================================================*/
#topAboutArea {
  padding: min(230px,31.944vw) 0 min(300px,41.666vw);
  position: relative;
}
@media (max-width: 768px) {
  #topAboutArea {
    padding: min(80px,11.112vw) 6.4% 160px;
  }
}
@media (max-width: 480px) {
  #topAboutArea {
    padding-top: 42px;
  }
}
#topAboutArea::before {
  content: "";
  background: linear-gradient(180deg, #F2F2EE 30%, #F3F3EF, #F5F5F2, #F7F7F5, #F9F9F8, #FBFBFA, #FDFDFC, #FFFFFF);
  width: 100%;
  height: min(300px,41.666vw);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
#topAboutArea h2.ttl01 {
  margin: 0 auto min(40px,5.556vw);
  text-align: center;
}
@media (max-width: 480px) {
  #topAboutArea h2.ttl01 {
    margin-bottom: 54px;
  }
}
#topAboutArea h2.ttl01 .en {
  font-size: clamp(14px, 2.778vw, 20px);
}
@media (max-width: 480px) {
  #topAboutArea h2.ttl01 .en {
    font-size: 1.6rem;
  }
}
#topAboutArea h2.ttl01 .jp {
  font-size: clamp(14px, 4.166vw, 30px);
  letter-spacing: 0.08em;
  margin-top: 1em;
}
@media (max-width: 480px) {
  #topAboutArea h2.ttl01 .jp {
    font-size: 2.2rem;
    line-height: 1.7272727273;
    margin-top: 20px;
  }
}
#topAboutArea .textBox {
  text-align: center;
  position: relative;
  z-index: 3;
}
@media (max-width: 768px) {
  #topAboutArea .textBox {
    margin-top: 50px;
  }
}
@media (max-width: 480px) {
  #topAboutArea .textBox {
    text-align: left;
  }
}
#topAboutArea .textBox p {
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2.2222222222;
}
@media (max-width: 480px) {
  #topAboutArea .textBox p {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    line-height: 2;
  }
}
#topAboutArea .commonBtn {
  text-align: center;
  margin: min(70px,9.722vw) auto 0;
  position: relative;
  z-index: 3;
}
@media (max-width: 768px) {
  #topAboutArea .commonBtn {
    margin-top: 60px;
    text-align: right;
  }
}
#topAboutArea .commonBtn a .arrow {
  margin-left: min(165px,22.916vw);
}
@media (max-width: 768px) {
  #topAboutArea .commonBtn a .arrow {
    margin-left: 54px;
  }
}
#topAboutArea .fig {
  background: #F2F2EE;
  position: absolute;
  width: 100%;
  height: 100%;
}
#topAboutArea .fig img {
  height: auto;
}
#topAboutArea .fig01 {
  position: absolute;
  top: 3.6111111111vw;
  left: 7.9861111111vw;
  width: 19.375vw;
  height: 15.4861111111vw;
}
@media (max-width: 768px) {
  #topAboutArea .fig01 {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: 161px;
    height: auto;
    margin: 0 0 40px auto;
  }
}
#topAboutArea .fig02 {
  position: absolute;
  top: 21.6666666667vw;
  right: 6.9444444444vw;
  width: 16.5972222222vw;
  height: 14.1666666667vw;
}
@media (max-width: 1024px) {
  #topAboutArea .fig02 {
    top: 10%;
  }
}
@media (max-width: 768px) {
  #topAboutArea .fig02 {
    display: none;
  }
}
#topAboutArea .fig03 {
  position: absolute;
  bottom: 233px;
  left: 4.6527777778vw;
  width: 17.4305555556vw;
  height: 11.9444444444vw;
  z-index: 3;
}
@media (max-width: 768px) {
  #topAboutArea .fig03 {
    display: block;
    position: relative;
    bottom: auto;
    left: auto;
    width: 172px;
    height: auto;
  }
}

/*===================================================
	CONTENTS
====================================================*/
#topContentsArea {
  padding: min(190px,26.388vw) 0 min(180px,25vw);
  position: relative;
  background: #fff;
}
@media (max-width: 768px) {
  #topContentsArea {
    padding: 20px 0 155px;
  }
  #topContentsArea .ttlBox .commonBtn {
    position: absolute;
    bottom: 80px;
    right: 6.4%;
  }
  #topContentsArea .ttlBox .commonBtn .arrow {
    margin-left: 20px;
  }
}
#topContentsArea p.read {
  margin-top: 10px;
}
#topContentsArea ul {
  margin-top: min(70px,9.722vw);
  gap: 2.82%;
  justify-content: space-between;
  row-gap: 80px;
}
@media (max-width: 768px) {
  #topContentsArea ul {
    margin-top: 40px;
  }
}
@media (max-width: 480px) {
  #topContentsArea ul {
    row-gap: 40px;
  }
}
#topContentsArea ul li {
  width: 31.45%;
}
@media (max-width: 480px) {
  #topContentsArea ul li {
    width: 48%;
  }
}
#topContentsArea ul li a {
  display: block;
}
#topContentsArea ul li a span.pickup {
  color: #fff;
  background: #53565A;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-family: "Lato", serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  position: absolute;
  top: -30px;
  right: 0;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 480px) {
  #topContentsArea ul li a span.pickup {
    top: -25px;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
  }
}
#topContentsArea ul li a figure {
  width: 100%;
  margin-bottom: min(18px,2.5vw);
  overflow: hidden;
  display: block;
  position: relative;
}
#topContentsArea ul li a figure::before {
  content: "";
  padding-top: 100%;
  display: block;
}
#topContentsArea ul li a figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@media (max-width: 768px) {
  #topContentsArea ul li a figure {
    margin-bottom: 15px;
  }
}
#topContentsArea ul li a span.category {
  border: 1px solid #53565A;
  border-radius: 12px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0 1em;
  display: inline-block;
  margin-bottom: 12px;
  line-height: 24px;
  height: 24px;
  text-align: center;
}
@media (max-width: 768px) {
  #topContentsArea ul li a span.category {
    margin-bottom: 8px;
    font-size: 1.1rem;
  }
}
#topContentsArea ul li a p {
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6666666667;
}
@media (max-width: 768px) {
  #topContentsArea ul li a p {
    font-size: 1.6rem;
    line-height: 1.4;
  }
}
#topContentsArea ul li:hover a figure img {
  transform: scale(1.05);
}
@media (max-width: 480px) {
  #topContentsArea ul li:hover a figure img {
    transform: none;
  }
}

/*===================================================
	BRAND
====================================================*/
#topBrandArea {
  padding: min(180px,25vw) 0 min(180px,25vw);
  position: relative;
}
@media (max-width: 768px) {
  #topBrandArea {
    padding: 80px 0;
  }
}
#topBrandArea ul {
  margin-top: min(70px,9.722vw);
  gap: 2px;
}
@media (max-width: 480px) {
  #topBrandArea ul {
    gap: 0;
    margin-top: 26px;
  }
}
#topBrandArea ul li {
  width: 24.5%;
}
@media (max-width: 768px) {
  #topBrandArea ul li {
    width: 49.7%;
  }
}
@media (max-width: 480px) {
  #topBrandArea ul li {
    width: 100%;
  }
}
#topBrandArea ul li a {
  display: block;
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#topBrandArea ul li a::before {
  content: "";
  padding-top: 74.6666%;
  display: block;
}
@media (max-width: 768px) {
  #topBrandArea ul li a::before {
    padding-top: 66.67%;
  }
}
@media (max-width: 768px) {
  #topBrandArea ul li a::after {
    content: "";
    background: rgba(115, 114, 102, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: multiply;
  }
}
#topBrandArea ul li a .hoverBox {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@media (max-width: 768px) {
  #topBrandArea ul li a .hoverBox {
    z-index: auto;
  }
}
#topBrandArea ul li a .hoverBox .hoverBefore, #topBrandArea ul li a .hoverBox .hoverAfter {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
}
#topBrandArea ul li a .hoverBox .hoverBefore {
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}
#topBrandArea ul li a .hoverBox .hoverBefore figure:not(.white) img {
  filter: invert(15%) sepia(6%) saturate(301%) hue-rotate(201deg) brightness(91%) contrast(90%);
}
#topBrandArea ul li a .hoverBox .hoverBefore p {
  font-size: clamp(15.2px, 5.278vw, 38px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.7631578947;
}
@media (max-width: 768px) {
  #topBrandArea ul li a .hoverBox .hoverBefore {
    background: none;
    position: relative;
    z-index: 3;
  }
  #topBrandArea ul li a .hoverBox .hoverBefore figure img {
    width: 80%;
  }
  #topBrandArea ul li a .hoverBox .hoverBefore figure:not(.white) img {
    filter: invert(100%) sepia(58%) saturate(270%) hue-rotate(332deg) brightness(107%) contrast(90%);
  }
  #topBrandArea ul li a .hoverBox .hoverBefore p {
    font-size: 2.4rem;
    letter-spacing: 0.06em;
    color: #F2F2EE;
  }
}
@media (max-width: 480px) {
  #topBrandArea ul li a .hoverBox .hoverBefore p {
    font-size: 2rem;
  }
}
#topBrandArea ul li a .hoverBox .hoverAfter {
  top: 100%;
  transition: top 0.7s;
}
#topBrandArea ul li a .hoverBox .hoverAfter figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#topBrandArea ul li a .hoverBox .hoverAfter figure::before {
  content: "";
  padding-top: 74.6666%;
  display: block;
}
@media (max-width: 768px) {
  #topBrandArea ul li a .hoverBox .hoverAfter figure::before {
    padding-top: 66.67%;
  }
}
#topBrandArea ul li a .hoverBox .hoverAfter figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@media (max-width: 768px) {
  #topBrandArea ul li a .hoverBox .hoverAfter {
    top: 0;
  }
}
#topBrandArea ul li a:hover .hoverBox .hoverBefore, #topBrandArea ul li a:hover .hoverBox .hoverAfter {
  top: 0;
}
@media (max-width: 768px) {
  #topBrandArea ul li a:hover .hoverBox .hoverBefore, #topBrandArea ul li a:hover .hoverBox .hoverAfter {
    top: auto;
  }
}

/*===================================================
	SERVICE
====================================================*/
#topServiceArea {
  padding: 0 0 min(180px,25vw);
  position: relative;
}
@media (max-width: 768px) {
  #topServiceArea {
    padding: 0 0 156px;
  }
  #topServiceArea .ttlBox .commonBtn {
    position: absolute;
    bottom: 75px;
    right: 6.4%;
  }
  #topServiceArea .ttlBox .commonBtn .arrow {
    margin-left: 54px;
  }
}
#topServiceArea .serviceSlider {
  margin: min(40px,5.556vw) 0 0 calc((100vw - 1240px) / 2 + 5.56vw);
}
@media (max-width: 1200px) {
  #topServiceArea .serviceSlider {
    margin-left: 6.94%;
  }
}
@media (max-width: 768px) {
  #topServiceArea .serviceSlider {
    margin-left: 6.4%;
  }
}
#topServiceArea .serviceSlider .swiper .swiper-wrapper li a span {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(23.2px, 8.056vw, 58px);
  letter-spacing: 0;
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: #F2F2EE;
  -webkit-text-stroke-color: #53565A;
  transition: -webkit-text-fill-color 0.7s ease;
}
@media (max-width: 768px) {
  #topServiceArea .serviceSlider .swiper .swiper-wrapper li a span {
    font-size: 3.6rem;
    margin-bottom: 8px;
  }
}
#topServiceArea .serviceSlider .swiper .swiper-wrapper li a figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  margin-bottom: 15px;
}
#topServiceArea .serviceSlider .swiper .swiper-wrapper li a figure::before {
  content: "";
  padding-top: 70.588%;
  display: block;
}
#topServiceArea .serviceSlider .swiper .swiper-wrapper li a figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@media (max-width: 768px) {
  #topServiceArea .serviceSlider .swiper .swiper-wrapper li a figure {
    margin-bottom: 8px;
  }
}
#topServiceArea .serviceSlider .swiper .swiper-wrapper li a p {
  font-size: clamp(14px, 3.334vw, 24px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5833333333;
}
@media (max-width: 768px) {
  #topServiceArea .serviceSlider .swiper .swiper-wrapper li a p {
    font-size: 1.8rem;
  }
}
#topServiceArea .serviceSlider .swiper .swiper-wrapper li a:hover span {
  -webkit-text-fill-color: #53565A;
}
#topServiceArea .serviceSlider .swiper .swiper-wrapper li a:hover figure img {
  transform: scale(1.05);
}

/*===================================================
	STORE
====================================================*/
.topStoreArea {
  padding: min(255px,35.416vw) 0 min(180px,25vw);
  position: relative;
  background: none;
}
@media (max-width: 768px) {
  .topStoreArea {
    padding-bottom: 80px;
  }
}
.topStoreArea::before {
  content: "";
  background: url("../img/top/store_bg.svg") no-repeat top center/cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.topStoreArea .logo {
  position: absolute;
  top: 6.0416666667vw;
  left: calc((100vw - 1240px) / 2 + 4.17vw);
  z-index: 2;
}
.topStoreArea .logo figure {
  width: 9.1666666667vw;
  height: 19.375vw;
}

/*===================================================
	NEWS
====================================================*/
#topNewsArea {
  padding: min(180px,25vw) 0;
  background: #F2F2EE;
  position: relative;
}
@media (max-width: 768px) {
  #topNewsArea {
    padding: 80px 0 156px;
  }
  #topNewsArea .ttlBox .commonBtn {
    position: absolute;
    bottom: 80px;
    right: 6.4%;
  }
  #topNewsArea .ttlBox .commonBtn .arrow {
    margin-left: 20px;
  }
}
#topNewsArea ul {
  margin-top: min(70px,9.722vw);
  gap: 2.82%;
}
@media (max-width: 480px) {
  #topNewsArea ul {
    flex-direction: column;
  }
}
#topNewsArea ul li {
  width: 31.45%;
}
@media (max-width: 480px) {
  #topNewsArea ul li {
    width: 100%;
  }
  #topNewsArea ul li + li {
    margin-top: 40px;
  }
}
#topNewsArea ul li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
#topNewsArea ul li a figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#topNewsArea ul li a figure::before {
  content: "";
  padding-top: 61.54%;
  display: block;
}
#topNewsArea ul li a figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#topNewsArea ul li a span.tag {
  color: #fff;
  background: #FF0000;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-family: "Lato", serif;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  position: absolute;
  top: -30px;
  right: 0;
}
#topNewsArea ul li a span.pickup {
  color: #fff;
  background: #53565A;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-family: "Lato", serif;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  position: absolute;
  top: -30px;
  right: 0;
  border-radius: 0;
  padding: 0;
}
#topNewsArea ul li a .textBox {
  margin-top: 20px;
}
@media (max-width: 768px) {
  #topNewsArea ul li a .textBox {
    margin-top: 12px;
  }
}
#topNewsArea ul li a .textBox .head span.date {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
#topNewsArea ul li a .textBox .head span.category {
  font-size: 1.2rem;
  font-weight: 600;
  margin-left: 20px;
  letter-spacing: 0.06em;
  line-height: 24px;
  height: 24px;
  padding: 0 2em;
  text-align: center;
  border: 1px solid #53565A;
  border-radius: 12px;
}
#topNewsArea ul li a .textBox p {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6470588235;
  margin-top: 10px;
}
@media (max-width: 768px) {
  #topNewsArea ul li a .textBox p {
    font-size: 1.5rem;
    line-height: 1.6666666667;
    margin-top: 8px;
  }
}
#topNewsArea ul li a:hover figure img {
  transform: scale(1.05);
}