@charset "UTF-8";
/**
 * Stylesheet for Top Page
 * 
 * @package ghakata-jh
 *
 */

footer {
  position: relative;
}

a:hover figure,
a:hover picture {
  overflow: hidden;
}

a figure img,
a picture img {
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

a:hover figure img,
a:hover picture img {
  transform: scale(1.1);
}

@media screen and (max-width: 767px) {}

/*------------------------------------------
  Main Visual (Slide+Conversion)
--------------------------------------------*/

@media screen and (min-width: 768px) {
  .main_visual {
    display: flex;
    flex-direction: row;
    height: 62.5vw;
    min-width: 62.5vw;
    overflow: hidden;
  }
}

/*------------------------------------------
  Slide Area
--------------------------------------------*/
.slide_area {
  position: relative;
}

.metaslider .flexslider {
  margin: 0 !important;
}

.metaslider .flex-control-nav {
  width: fit-content !important;
  bottom: 18px !important;
  left: 19px;
  text-align: left;
}

.slide_overtext {
  position: absolute;
  top: 5.6em;
  right: 1.33em;
  z-index: 50;
  writing-mode: vertical-rl;
  font-family: 'Noto serif JP', serif;
  font-size: 93.7%;
  letter-spacing: 0.15em;
}

.flex-control-paging li a {
  background: #fff !important;
}

.flex-control-paging li a.flex-active {
  background: #D3525F !important;
}

@media screen and (min-width: 768px) {
  .slide_area {
    width: 76.9%
  }

  .slide_area .metaslider img {
    width: 100%;
    height: auto;
  }

  .slide_area>div {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .slide_overtext {
    top: 67px;
    right: 8%;
    font-size: 150%;
  }

}

@media screen and (max-width: 767px) {
  .slide_overtext span {
    display: inline-block;
    margin: 0.2em;
    font-size: calc(15 / 320 * 100vw);
    line-height: 1.9;
    text-indent: 0.8em;
    color: rgba(63, 63, 63, 0.9);
    text-shadow: 1px 1px 1px #fff;
    background-color: rgba(255, 236, 238, 0.75);
  }
}

/*------------------------------------------
  Guide
--------------------------------------------*/
.scroll_guide {
  z-index: 2;
  text-decoration: none;
  position: absolute;
  left: 50%;
  top: calc(100vh - 35vh);
  transform: translateX(-10%);
  writing-mode: vertical-rl;
  border-left: 2px solid;
  color: var(--accent-color);
  text-shadow:
    1px 1px 1px #dddddd,
    -1px 1px 1px #dddddd,
    1px -1px 1px #dddddd,
    -1px -1px 1px #dddddd,
    1px 0px 1px #dddddd,
    0px 1px 1px #dddddd,
    -1px 0px 1px #dddddd,
    0px -1px 1px #dddddd;

}

.scroll_guide:before {
  content: 'SCROLL';
  padding-top: 2em;
  padding-bottom: 2em;
}

.scroll_guide:after {
  display: block;
  content: '';
  border-left: 2px solid;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  bottom: -10px;
  position: absolute;
  left: 10%;
}

@media screen and (min-width: 768px) {
  .scroll_guide {
    top: calc(100vh - 35vh);
  }
}

/*------------------------------------------
  Conversion Button
--------------------------------------------*/
.conv_area {
  padding: 2rem 0;
  background-color: #FBEEEF;
}

.conv_area .container div.row {
  gap: 0.75rem;
}

.conv_item {
  width: 47.8%;
  max-width: 164px;
}

.btn_conv {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 134/130;
  padding: 0.5em;
  padding-bottom: 2em;
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(239, 173, 180, 0.5);
  background-color: #fff;
  color: var(--text-color) !important;
  text-decoration: none;
  text-align: center;
  font-weight: normal;
  font-size: 112.5%;
  line-height: 1;
  letter-spacing: 0.1em;
}

.btn_conv:before {
  position: absolute;
  content: '';
  display: block;
  width: 90%;
  height: 3px;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.btn_conv_os:before {
  border-top: 1px solid #F6D4D7;
}

.btn_conv_siryou {
  padding-top: 1em;
}

.btn_conv_siryou:before {
  border-top: 1px solid #B2E9CF;
}

.btn_conv span {
  display: block;
  font-size: 61%;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  padding-bottom: 0.6em;
}

.btn_conv span.guide {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  min-height: 0;
  padding: 9px 0;
  border: none;
  border-radius: 4px;
  text-align: center;
  line-height: 1;
  color: var(--text-color);
}

.btn_conv span.guide:after {
  position: absolute;
  content: '';
  width: 1em;
  height: 1em;
  aspect-ratio: 1/1;
  top: 50%;
  transform: translateY(-50%);
  right: 0.6em;
  background-image: url(/img/jh/common/arrow_right-round.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.btn_conv_os span.guide {
  background-color: rgba(246, 212, 215, 0.5);
}

.btn_conv_siryou span.guide {
  background-color: #B6E6CF;
}

@media screen and (min-width: 768px) {
  .conv_area {
    width: 23%;
  }

  .conv_area .container {
    position: absolute;
    bottom: 3.125em;
    right: 50%;
    transform: translateX(50%);
    width: 100%;
  }

  .conv_area .container div.row {
    flex-direction: column;
    align-items: center;
    gap: 1.875em;
  }

  .conv_item {
    width: 60.7%;
  }

  .btn_conv {
    font-size: 137%;
    padding: 0.5em;
  }

  .btn_conv:before {
    top: 7px;
  }

  .btn_conv.btn_conv_os {
    padding-bottom: 2.3em;
  }

  .btn_conv.btn_conv_siryou {
    padding-bottom: 3em;
  }

  .btn_conv span.guide {
    bottom: 0.45em;
    min-height: 2.78em;
    padding: 0.67em 0;
    line-height: 1.45;
  }

  .btn_conv_siryou {
    padding-top: 1.5em;
  }

  .btn_conv span.guide:after {
    font-size: 100%;
    right: 10px;
  }
}

/*------------------------------------------
  feature
--------------------------------------------*/
/* wrap(entry-content) */
.entry-content {
  margin-top: 1.25rem;
}

.container {
  width: 87.5%;
}

.sub_slide_area {
  width: 85.6%;
  margin: 1.25rem auto;
}

.sub_slide_area .metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a {
  width: 20px;
  height: 20px;
  background: rgba(118, 118, 118, 0.5) !important;
}

.sub_slide_area .metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a:after {
  mask-size: 12px auto;
}

.sub_slide_area .metaslider .flex-direction-nav .flex-prev,
.sub_slide_area .metaslider .flexslider:hover .flex-direction-nav .flex-prev {
  left: -12px;
}

.sub_slide_area .metaslider .flex-direction-nav .flex-next,
.sub_slide_area .metaslider .flexslider:hover .flex-direction-nav .flex-next {
  right: -12px;
}


.feature_area {
  padding: 0;
  overflow-x: hidden;
}

.feature_area .feature_point {
  position: relative;
  display: block;
  padding: 2.375rem 0;
  text-align: center;
  background: #fffddf;
}

.feature_area .feature_point h2 {
  position: relative;
  display: inline-block;
  font-size: 112.5%;
  font-weight: 400;
  color: #D3525F;
}

.feature_area .feature_point h2::before {
  position: absolute;
  top: -1rem;
  left: -3rem;
  content: "";
  width: 3rem;
  height: 3.12rem;
  background-image: url(/img/jh/home/top_point_title01.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.feature_area .feature_point h2::after {
  position: absolute;
  top: -1rem;
  right: -3rem;
  content: "";
  width: 3rem;
  height: 3.12rem;
  background-image: url(/img/jh/home/top_point_title02.png);
  background-repeat: no-repeat;
  background-size: cover;

}

.feature_area .feature_point p {
  position: relative;
  display: block;
  width: 60.4%;
  margin: 1em auto 0;
  font-size: 75%;
}

.feature_area .feature_point p::before {
  position: absolute;
  bottom: 0;
  left: -3.5rem;
  content: "";
  width: 2.625rem;
  height: 7rem;
  background-image: url(/img/jh/home/top_point_title03.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.feature_area .feature_point p::after {
  position: absolute;
  bottom: 0;
  right: -3rem;
  content: "";
  width: 1.875rem;
  height: 6.75rem;
  background-image: url(/img/jh/home/top_point_title04.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.feature_area h2 img {
  width: 86.2%;
}

.feature_item {
  position: relative;
  padding: 0 0 1.5rem;
}

.feature_item:after {
  content: '';
  display: block;
  position: absolute;
  width: 200%;
  height: 52%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.feature_item h3 {
  display: flex;
  font-weight: normal;
  font-size: 112.5%;
  line-height: 1.33;
  margin-left: 1em;
  margin-bottom: 1.19em;
}

.feature_item h3 span {
  display: block;
  height: 3em;
  width: auto;
  margin-right: 0.875rem;
  line-height: 1;
}

.feature_item .img_area {
  position: relative;
}

.feature_item .img_area:after {
  content: '';
  display: block;
  position: absolute;
  top: -22px;
  right: -8px;
  width: 54px;
  height: 51px;
  background-image: url(/img/jh/home/feature_icon.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.feature_item .btn {
  position: relative;
  border-radius: 6px;
  padding: 1.61em 0;
  font-size: 81%;
  min-height: 3.125em;
  line-height: 1;
  color: var(--text-color) !important;
}

.feature_item .btn.line-2 {
  padding: 0.7em;
  line-height: 1.4;
}

.feature_item .btn:hover {
  background-color: #FAA2B5;
  color: #fff !important;
}

.feature_item .btn span {
  position: static;
  transform: none;
}

.feature_item .btn::after {
  position: absolute;
  content: '';
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 1;
  bottom: 0;
  right: 0;
  border-radius: 0.18rem 0 0.31rem 0;
  background-color: #ccc;
  background-image: url(/img/jh/common/arrow_right.svg);
  background-repeat: no-repeat;
  background-size: 0.5rem;
  background-position: 55% center;
}

.feature_item .btn:hover::before {
  position: absolute;
  content: '';
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 1;
  bottom: 0;
  right: 0;
  border-radius: 0.18rem 0 0.31rem 0;
  background-color: #FFF;
  z-index: 1;
}

.feature_item .btn:hover::after {
  background-color: #FAA2B5;
  background-image: none;
  mask: url(/img/jh/common/arrow_right.svg) no-repeat 55% center;
  mask-size: 0.5rem;
  z-index: 2;
}

.feature_item00 {
  display: flex;
  align-items: center;
  background-color: #fffddf;
}

.feature_item01 h3 span {
  color: #8cb6e2;
}

.feature_item01 .btn::after {
  background-color: #F0A3B4;
}

.feature_item01:after {
  background-color: #FEEDF1;
}

.feature_item01 .btn {
  border: 1px solid #F4B9C6;
}

.feature_item02 h3 span {
  color: #ac9dcd;
}

.feature_item02 .btn:after {
  background-color: #A5E2D2;
}

.feature_item02:after {
  background-color: #E9FCF4;
}

.feature_item02 .btn {
  border: 1px solid #A5E2D2;
}

.feature_item03 h3 span {
  color: #72c7df;
}

.feature_item03 .btn::after {
  background-color: #EBB382;
}

.feature_item03:after {
  background-color: #FFF0E4;
}

.feature_item03 .btn {
  border: 1px solid #F3C7A1;
}

.feature_item p {
  margin: 1.3em 0 0.92em;
  font-size: 81%;
  line-height: 1.38;
}

.feature_item .btn_area {
  width: 47%;
}



@media screen and (min-width: 768px) {
  .sub_slide_area {
    width: 76.9%;
    max-width: 1100px;
  }

  .feature_area {
    padding: 5.25rem 0 7.875rem;
    background-image: url(/img/jh/common/bg-pastel-blur3.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .feature_area .feature_point {
    background: transparent;
    width: 76.9%;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
  }

  .feature_area .feature_point h2 {
    width: 62.6%;
    margin: 0 auto;
    padding-top: 0;
    font-size: 175%;
    line-height: 1;
  }

  .feature_area .feature_point h2::before {
    width: 7rem;
    height: 7.5rem;
    top: -2rem;
    left: -23%;
  }

  .feature_area .feature_point h2::after {
    width: 7rem;
    height: 7.5rem;
    top: -2rem;
    right: -23%;
  }

  .feature_area .feature_point p {
    width: 45.66%;
    margin: 2.25rem auto 0;
    font-size: 87.5%;
  }

  .feature_area .feature_point p::before {
    bottom: -2rem;
    left: -6rem;
    width: 4.25rem;
    height: 11.18rem;
  }

  .feature_area .feature_point p::after {
    bottom: -1.5rem;
    right: -5.5rem;
    width: 3rem;
    height: 10.68rem;
  }

  .feature_area .container {
    width: 76.9%
  }

  .feature_item {
    width: 100%;
    padding: 4.4% 6.6% 3.3%;
    background-color: #fff;
    z-index: 1;
    border-radius: 1rem;
    border: 1px solid rgba(140, 182, 226, 0.1);
  }

  .feature_item h3 {
    font-size: 137.5%;
    margin-left: 0;
  }

  .feature_item h3 span img {
    height: 3.15em;
  }

  .feature_item>p {
    margin: 0;
    font-size: 81.25%;
    line-height: 1.69;
  }


  .feature_item:nth-child(2n) h3 {
    position: absolute;
    width: 38.8%;
    top: 9.6%;
    right: 6.6%;
  }

  .feature_item:nth-child(2n)>p {
    position: absolute;
    width: 38.9%;
    top: 48.7%;
    right: 6.6%;
  }

  .feature_item:nth-child(2n) .btn_group {
    position: absolute;
    width: 38.8%;
    bottom: 9.2%;
    right: 6.6%;
  }

  .feature_item:nth-child(2n) .img_area {
    width: 44.8%;
    float: left;
  }


  .feature_item:nth-child(2n-1) h3 {
    position: absolute;
    width: 38.8%;
    top: 9.6%;
    left: 6.6%;
  }


  .feature_item:nth-child(2n-1)>p {
    position: absolute;
    width: 38.9%;
    top: 48.7%;
    left: 6.6%;
  }

  .feature_item:nth-child(2n-1) .btn_group {
    position: absolute;
    width: 38.8%;
    bottom: 9.2%;
    left: 6.6%;
  }

  .feature_item:nth-child(2n-1) .img_area {
    width: 44.8%;
    float: right;
  }

  .feature_item:after {
    width: 100%;
    border-radius: 0 0 1rem 1rem;
    height: 58.6%;
  }


  .feature_item .img_area:after {
    top: -20px;
    right: -32px;
  }
}

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

  .feature_item>p,
  .feature_item .btn {
    font-size: 87.5%;
  }
}

/*------------------------------------------
  Course
--------------------------------------------*/
.course_area h2 {
  display: block;
  width: 93%;
  margin: 0 auto;
  text-align: center;
}

.course_area h2 span.small {
  font-family: 'Noto Sans JP';
  font-size: 58.3%;
  font-weight: normal;
}

.course_area h2 span.num {
  font-size: 166%;
  color: #e895ac;
  font-family: 'Noto Serif JP';
  font-weight: normal;
}

.course_area .container>.row {
  gap: 15px;
}

.course_item {
  width: 100%;
  padding: 0.75rem 0.94rem 1.125rem;
}

.course_item h3 {
  margin-bottom: 0.64em;
  font-size: 87.5%;
  font-weight: normal;
  line-height: 1.71;
}

.course_item h4 {
  margin-bottom: 0;
  font-size: 81.2%;
  font-weight: normal;
  line-height: 1.23;
}

.course_futsu {
  background-color: #e2edf8;
}

.course_btn_item {
  width: 48%;
  text-decoration: none;
}

.course_btn_item figure img {
  border-radius: 0.375rem 0.375rem 0 0;
}

.course_btn_item h4 {
  position: relative;
  display: block;
  border-radius: 0 0 0.375rem 0.375rem;
  background-color: #7dc2ed;
  padding: 0.625em 0;
  line-height: 1.4;
  color: #fff;
}

.course_btn_item h4::before {
  position: absolute;
  content: '';
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 1;
  bottom: 0;
  right: 0;
  border-radius: 0.18rem 0 0.31rem 0;
  background-color: #fff;
}

.course_btn_item h4::after {
  position: absolute;
  content: '';
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 1;
  bottom: 0;
  right: 0;
  border-radius: 0.18rem 0 0.31rem 0;
  background-color: #fff;
  mask: url(/img/jh/common/arrow_right.svg) no-repeat center center;
  mask-size: 0.5rem;
  mask-position: 55% center;
}

.course_btn_item_tokushin h4,
.course_btn_item_tokushin h4::after {
  background-color: #7dc2ed;
}

.course_btn_item_futsu h4,
.course_btn_item_futsu h4::after {
  background-color: #73C3D9;
}

.course_total {
  background-color: #fcedf0;
}

.course_btn_item_superlicense h4,
.course_btn_item_superlicense h4::after {
  background-color: #f19fb7;
  letter-spacing: -0.1em;
}

.course_btn_item_totalbusiness h4,
.course_btn_item_totalbusiness h4::after {
  background-color: #f3a770;
}

.course_btn_item figure img,
.course_btn_item picture img {
  transform: unset;
  transition: unset;
}

.course_btn_item:hover figure img,
.course_btn_item:hover picture img {
  transform: unset;
}

@media screen and (min-width: 768px) {
  .course_area {
    padding: 5.31rem 0 6.25rem;
  }

  .course_area .container {
    width: 76.9%;
  }

  .course_area h2 {
    width: 64.1%;
    margin: 0 auto 1.63em;
  }

  .course_item {
    width: 48.4%;
    border-radius: 1rem;
    padding: 2.25rem;
  }

  .course_item h3 {
    margin-bottom: 1.59em;
    font-size: 137.5%;
    line-height: 1.09;
    letter-spacing: 0.1em;
  }

  .course_btn_item h4 {
    font-size: 112.5%;
    padding: 1.25em 0;
  }
}

/*------------------------------------------
  Icon Menu
--------------------------------------------*/
.icon_menu_area {
  padding: 2.375rem 0 3.75rem;
  background-image: url(/img/jh/home/bg_icon_menu.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.icon_menu_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 31%;
  height: 31%;
  aspect-ratio: 1/1;
  margin-top: 1rem;
  padding: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 2px 2px rgba(134, 180, 209, 0.3);
  background-color: #fff;
  text-decoration: none;
  color: var(--text-color) !important;
  line-height: 1.2;
}

.icon_menu_item:hover figure {
  overflow: unset;
}

.icon_menu_item figure {
  width: 40%;
  aspect-ratio: 1/1;
  margin: auto;
  background-color: #FDC4D1;
  border-radius: 50%;
}

.icon_menu_item img {
  width: 100%;
}

.icon_menu_item h3 {
  margin: 5px 0 0;
  font-size: 68.75%;
  font-weight: normal;
}

.icon_menu_item:nth-child(1) h3,
.icon_menu_item:nth-child(3) h3 {
  letter-spacing: 0.1em;
}

.icon_menu_conv {
  position: relative;
  display: block;
  width: 88.6%;
  min-height: 40px;
  border: none;
  border-radius: 1.5rem;
  padding: 0.83em 0;
  font-size: 75%;
  text-decoration: none;
  color: #fff !important;
  background-color: #31cf82;
}

.icon_menu_conv::after {
  position: absolute;
  content: '';
  width: 0.84em;
  height: 0.84em;
  aspect-ratio: 1/1;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  background-image: url(/img/jh/common/arrow_right-round.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.icon_menu_conv:hover {
  background-color: #31cf82;
}

@media screen and (min-width: 768px) {
  .icon_menu_item {
    height: 200px;
  }

  .icon_menu_item h3 {
    font-size: 100%;
  }

  .icon_menu_conv {
    height: 70px;
  }
}

/*------------------------------------------
  pickup
--------------------------------------------*/
.pickup_area {
  padding: 2.25rem 0 2.875rem;
}

/* .pickup_area a figure img,
.pickup_area a picture img {
  transform: unset;
  transition: unset;
}

.pickup_area a:hover figure img,
.pickup_area a:hover picture img {
  transform: unset;
} */

.pickup_area>h2 {
  margin-bottom: 0.857em;
  font-family: 'Noto Serif JP', serif;
  text-transform: uppercase;
  font-size: 175%;
  font-weight: normal;
  color: #D3525F;
}

.pickup_area>h2 span {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 42.85%;
  color: var(--text-color);
}

.pickup_area .container {
  width: 87.5%;
}

.pickup_area .container div.row {
  gap: 1.6rem;
}

.pickup_item {
  display: block;
  text-decoration: none;
  color: #fff !important;
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .pickup_area {
    padding: 5.125rem 0 8.81rem;
    background-color: #FFF;
  }

  .pickup_area .container {
    width: 61.5%;
  }

  .pickup_area>h2 {
    font-size: 300%;
  }

  .pickup_area .container .col-md-6 {
    width: 100%;
  }
}

/*------------------------------------------
  新着情報
--------------------------------------------*/
.news_area {
  padding: 2rem 0 2.25rem;
  background-color: #fff9e8;
}

.news_area>h2 {
  font-family: 'Noto Serif JP', serif;
  text-transform: uppercase;
  font-size: 175%;
  font-weight: normal;
  letter-spacing: 0.1em;
  color: #D3525F;
}

.news_area>h2 span {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 42.85%;
  letter-spacing: 0;
  color: var(--text-color);
}

.news_item {
  width: 25%;
  color: var(--text-color) !important;
  text-decoration: none;
}

.news_item .news_thumbnail {
  position: relative;
  aspect-ratio: 134 / 100;
  overflow: hidden;
}

.news_item .news_cat {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #eee;
  margin-left: 5px;
  padding: 3px 7px;
  font-size: 68.75%;
}

.news_item .news_cat_event {
  background-color: #4B9BDC;
  color: #fff;
}

.news_item .news_cat_information {
  background-color: #31cf82;
  color: #fff;
}

.news_item img {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.news_item:hover figure img {
  transform: scale(1.1) translate(-50%, -50%);
}

.news_meta {
  font-size: 68.75%;
}

.news_date {
  letter-spacing: 0.04em;
}

.news_btn {
  text-align: center;
}

.news_btn a {
  position: relative;
  font-size: 75%;
  color: var(--text-color) !important;
}

.news_btn a:after {
  position: absolute;
  top: 52%;
  right: -1.5em;
  transform: translateY(-50%);
  content: '';
  width: 1em;
  height: 1em;
  aspect-ratio: 1 / 1;
  background-color: #000;
  mask: url(/img/jh/common/arrow_right-round.svg) no-repeat center center;
  mask-size: cover;
}

@media screen and (min-width: 768px) {
  .news_area {
    padding: 4.125rem 0 4.65rem;
  }

  .news_area>h2 {
    font-size: 300%;
  }

  .news_area .container>div a:nth-child(5),
  .news_area .container>div a:nth-child(6) {
    display: none;
  }

  .news_item {
    padding: 1rem;
  }

  .mb60.news_item {
    margin-bottom: 0;
  }

  .news_meta {
    font-size: 85.6%;
  }

  .news_btn a {
    font-size: 92%;
  }
}

@media screen and (max-width: 767px) {
  .news_item {
    padding: 0;
    width: 47.8%;
  }
}