@charset "utf-8";

:root {

  --header-height: 90px;

  --accent-color: #3c79e3;

  --color: #09203b;

  --padding-lr: 20px;

}

html,

body {

  height: 100%;

  line-height: 1.5;

  color: var(--color);

  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

a {

  text-decoration: none;

  color: var(--color);

}

#wrap {

  padding-top: var(--header-height);

}

.inner-wrap {

  max-width: 920px;

  margin: 0 auto;

}

.mv-common .main-title::first-letter,

.article-list .box .cat::first-letter {

  font-feature-settings: "palt";

}

.js-animation,

.js-parent-animation>* {

  opacity: 0;

  transform: translateY(30px);

  transition: all 1s ease;

}

.js-parent-animation .fade-up,

.js-animation.fade-up {

  opacity: 1;

  transform: translateY(0);

}

[class^="mv"].js-animation,

[class^="mv"].js-parent-animation>* {

  transform: translateY(0);

  transition: all 1.4s ease;

}

/*---------------------------------------------

 slick Slider

---------------------------------------------*/

/* default */

.slick-slider {

  position: relative;

  display: block;

  box-sizing: border-box;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  -webkit-touch-callout: none;

  -khtml-user-select: none;

  -ms-touch-action: pan-y;

  touch-action: pan-y;

  -webkit-tap-highlight-color: transparent;

}

.slick-list {

  position: relative;

  display: block;

  overflow: visible;

  margin: 0;

  padding: 0;

}

.slick-list:focus {

  outline: none;

}

.slick-list.dragging {

  cursor: pointer;

  cursor: hand;

}

.slick-slider .slick-track,

.slick-slider .slick-list {

  -webkit-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

  -ms-transform: translate3d(0, 0, 0);

  -o-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

}

.slick-track {

  position: relative;

  top: 0;

  left: 0;

  display: block;

}

.slick-loading .slick-track {

  visibility: hidden;

}

.slick-slide {

  display: none;

  outline: none;

}

[dir="rtl"] .slick-slide {

  float: right;

}

.slick-slide img {

  display: block;

  margin: 0 auto;

}

.slick-slide.slick-loading img {

  display: none;

}

.slick-slide.dragging img {

  pointer-events: none;

}

.slick-initialized .slick-slide {

  display: flex;

  justify-content: center;

}

.slick-loading .slick-slide {

  visibility: hidden;

}

.slick-vertical .slick-slide {

  display: block;

  height: auto;

  border: 1px solid transparent;

}

.slick-arrow.slick-hidden {

  display: none;

}

.slick-prev,

.slick-next {

  position: absolute;

  top: 50%;

  z-index: 2;

  padding: 0;

  text-indent: -9999px;

  width: 48px;

  height: 48px;

  border: none;

  display: block;

  cursor: pointer;

  border-radius: 50%;

  transition: all 0.3s ease;

}

.slick-prev {

  transform: translate(-50%, -50%);

  left: 0;

  background: rgba(9, 32, 59, 0.8) url(../images/arr_slide_l.svg) no-repeat center / 7px auto;

}

.slick-next {

  right: 0;

  transform: translate(50%, -50%);

  background: rgba(9, 32, 59, 0.8) url(../images/arr_slide_r.svg) no-repeat center / 7px auto;

}

.slick-prev:hover,

.slick-next:hover {

  background-color: rgba(59, 121, 227, 0.8);

}

.slick-arrow.slick-disabled {

  opacity: 0.2;

  cursor: auto;

}

.slick-dots {

  position: absolute;

  bottom: -25px;

  display: block;

  width: 100%;

  padding: 0;

  list-style: none;

  text-align: center;

}

.slick-dots li {

  position: relative;

  display: inline-block;

  width: 10px;

  height: 10px;

  margin: 0 8px;

  padding: 0;

  cursor: pointer;

}

.slick-dots li button {

  font-size: 0;

  line-height: 0;

  display: block;

  width: 10px;

  height: 10px;

  padding: 5px;

  cursor: pointer;

  color: transparent;

  border: 0;

  outline: none;

  background: transparent;

}

.slick-dots li button:hover,

.slick-dots li button:focus {

  outline: none;

}

.slick-dots li button:before {

  font-size: 6px;

  line-height: 10px;

  position: absolute;

  top: 0;

  left: 0;

  width: 10px;

  height: 10px;

  content: "";

  background: rgba(244, 125, 28, 0.25);

  background-repeat: no-repeat;

  -webkit-background-size: 6px;

  background-size: 6px;

  text-align: center;

  opacity: 1;

  color: black;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  background-position: center top;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -o-border-radius: 50%;

  border-radius: 50%;

}

.slick-dots li.slick-active button:before {

  opacity: 1;

  color: black;

  background-position: center top;

  background: rgba(244, 125, 28, 1);

}

.slick-list {

  overflow: hidden;

}

.mv-slider .slick-track {

  display: flex;

}

.slider .slick-track {

  display: flex;

  gap: 40px;

}

.box-wrap {

  margin-top: 45px;

}

.slider-wrap {

  padding: 0 80px;

  width: min(100%, 1080px);

  margin-inline: auto;

}

.slider {}

.slider .slick-list {

  margin: 0 -10px;

}

.slider-wrap .slick-prev {

  left: -52px;

}

.slider-wrap .slick-next {

  right: -52px;

}

/*---------------------------------------------

 header

---------------------------------------------*/

#header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  padding: 56px 30px;

  z-index: 900;

  transition: all 0.4s ease;

}

#header:after {

  position: absolute;

  content: "";

  inset: 0;

  background: linear-gradient(90deg, #4692cb, #3d5390);

  z-index: -1;

  transition: all 0.4s ease;

  opacity: 0;

  pointer-events: none;

}

.header-fixed #header {

  padding-top: 24px;

  padding-bottom: 24px;

}

.header-fixed #header:after {

  opacity: 1;

}

#header>.inner-wrap {

  max-width: 1152px;

  display: flex;

  justify-content: end;

  align-items: center;

}

#header .logo {

  margin-right: auto;

  padding: 0;

}

#header .logo a {

  color: #fff;

}

#header .logo .ttl {

  font-size: 2.8rem;

  font-weight: bold;

  letter-spacing: 0.1em;

  display: block;

}

#header .logo .lead {

  font-size: 1.1rem;

  display: block;

  transition: all 0.3s ease;

}

.header-fixed #header .logo .lead {

  opacity: 0;

  height: 0;

}

.gnav {

  margin-left: 20px;

}

.gnav .parents-list {

  display: flex;

  height: 100%;

  gap: 30px;

}

.gnav .parents-list>li {

  display: flex;

}

.gnav .parents-list>li>a {

  display: flex;

  align-items: center;

  font-size: 1.2rem;

  padding: 8px 0 8px 38px;

  color: #fff;

}

.gnav .parents-list>li:nth-child(1)>a {

  background: url(../images/icon_nav_01.svg) no-repeat left center;

}

.gnav .parents-list>li:nth-child(2)>a {

  background: url(../images/icon_nav_02.svg) no-repeat left center;

}

.gnav .parents-list>li:nth-child(3)>a {

  background: url(../images/icon_nav_03.svg) no-repeat left center;

}

.gnav .parents-list>li:nth-child(4)>a {

  background: url(../images/icon_nav_04.svg) no-repeat left center;

}

.gnav .parents-list>li:nth-child(5)>a {

  background: url(../images/icon_nav_05.svg) no-repeat left center;

}

.gnav .parents-list>li>a.cur {

  background: #eee;

}

.btn-search {

  width: 35px;

  height: 35px;

  background: #fff url(../images/icon_search_black.svg) no-repeat center;

  border-radius: 200px;

  text-indent: -9999px;

  overflow: hidden;

  margin-left: 40px;

}

.btn-search.cur {

  background-color: #3b79e3;

  background-image: url(../images/icon_search_white.svg);

}

.search-drop {

  position: fixed;

  top: 124px;

  max-width: 1208px;

  width: 100%;

  left: 50%;

  transform: translateX(-50%);

  transition: top 0.3s ease;

  display: none;

}

.header-fixed .search-drop {

  top: 92px;

}

.search-drop:before {

  content: "";

  position: absolute;

  right: 35px;

  top: 0;

  transform: translateY(-100%);

  width: 20px;

  height: 20px;

  background: #fff;

  clip-path: polygon(50% 25%, 0% 100%, 100% 100%);

}

.search-box {

  display: flex;

  align-items: center;

  gap: 20px;

  background: #fff;

  padding: 24px;

  width: 390px;

  margin-left: auto;

}

.search-box .hd {

  font-weight: bold;

  font-size: 1.2rem;

}

.search-input-wrap {

  position: relative;

}

.search-input-wrap input[type="search"] {

  background: #e4ebf7;

  border: none;

  border-radius: 100px;

  width: 220px;

  height: 36px;

  padding: 5px 10px;

  font-size: 1.4rem;

}

.search-input-wrap button {

  position: absolute;

  right: 0;

  top: 0;

  bottom: 0;

  background: url(../images/icon_search_black.svg) no-repeat center / 12px auto;

  width: 40px;

  height: 100%;

  border: none;

  text-indent: -9999px;

  cursor: pointer;

}

.footer-top {

  background: #f9f9fa;

}

.footer-bottom {

  text-align: center;

  background: #3b4960;

  color: #fff;

  padding: 60px var(--padding-lr) 28px;

}

.footer-bottom a {

  color: #fff;

  text-decoration: underline;

}

.footer-bottom .lead {

  font-size: 1.4rem;

  line-height: 1.8;

}

.footer-bottom .copy {

  font-size: 1.2rem;

  margin-top: 54px;

  font-family: "Work Sans";

}

.mv-common {

  height: 472px;

  padding: 160px 160px 60px;

  margin-top: calc(var(--header-height) * -1);

  background: linear-gradient(90deg, #3e95d6, #193480);

  color: #fff;

  display: flex;

  align-items: center;

}

.mv-common.detail-common {

  padding: 160px var(--padding-lr) 60px;

}

.mv-common .inner-wrap {

  width: min(920px, 100%);

}

.mv-common .main-title {

  font-size: 4.8rem;

  letter-spacing: 0.08em;

  font-weight: 600;

  position: relative;

}

.mv-common .main-title.icon:before {

  content: "";

  position: absolute;

  top: 50%;

  left: -30px;

  transform: translate(-100%, -50%);

  width: 70px;

  height: 70px;

  border-radius: 50%;

}

.mv-common .main-title.icon.category01:before {

  background: rgba(117, 183, 234, 0.3) url(../images/icon_nav_02.svg) no-repeat center;

}

.mv-common .main-title.icon.category02:before {

  background: rgba(117, 183, 234, 0.3) url(../images/icon_nav_05.svg) no-repeat center;

}

.mv-common .main-title.icon.category03:before {

  background: rgba(117, 183, 234, 0.3) url(../images/icon_nav_03.svg) no-repeat center;

}

.mv-common .main-title.icon.category04:before {

  background: rgba(117, 183, 234, 0.3) url(../images/icon_nav_04.svg) no-repeat center;

}

.mv-common .sub-title {

  font-size: 1.6rem;

}

.mv-common .box {

  display: flex;

  flex-direction: row-reverse;

  gap: 40px;

  align-items: center;

}

.mv-common .box .img {

  width: 280px;

}

.mv-common .box .txt-wrap {

  flex: 1;

  padding-top: 30px;

}

.mv-common .box .cat {

  font-size: 1.3rem;

  color: #fff;

  background: url(../images/icon_mazeru_white.svg) no-repeat left 6px center;

  padding: 7px 12px 7px 25px;

}

.mv-common .box .ttl {

  font-size: 3.2rem;

  font-weight: 500;

  letter-spacing: 0.08em;

}

.mv-common .box .tag-list {

  margin-top: 25px;

}

.mv-common .box .tag-list li a {

  color: #fff;

  background: none;

  border-color: #fff;

}

.mv-common .box .tag-list li a:hover {

  opacity: 0.7;

}

.mv-common .box .date {

  font-size: 1.5rem;

  color: #fff;

  margin-top: 10px;

  display: block;

}

.breadcrumbs+.section {

  padding-top: 160px;

}

.breadcrumbs {

  position: relative;

  font-size: 1.2rem;

  color: var(--color);

  margin: 0 20px;

}

.breadcrumbs .inner-wrap {

  position: absolute;

  inset: 0;

}

.breadcrumbs ul {

  display: flex;

  gap: 10px;

  align-items: center;

  flex-wrap: wrap;

  padding: 26px 0 20px;

}

.breadcrumbs ul li {

  display: flex;

  gap: 10px;

  align-items: center;

}

.breadcrumbs ul li:after {

  content: "";

  width: 18px;

  height: 1px;

  background: #888f9b;

}

.breadcrumbs ul li:last-child:after {

  display: none;

}

.breadcrumbs ul li a {

  color: #888f9b;

}

.mv {

  margin-top: calc(var(--header-height) * -1);

  height: 616px;

  padding: 260px 40px 0;

  background: url(../images/img_mv_pickup.svg) no-repeat 15% 33%, url(../images/bg_mv.webp) no-repeat center / cover;

}

.mv-slider .box {

  display: flex;

  background: #fff;

  position: relative;

}

.mv-slider .box .area {

  position: absolute;

  inset: 0;

  z-index: 2;

}

.mv-slider .box .img {

  width: min(40%, 352px);

  transition: all 0.3s ease;

}

.mv-slider .box .img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.mv-slider .box .txt-wrap {

  flex: 1;

  padding: 36px 40px;

}

.mv-slider .box .ttl {

  font-size: 2.6rem;

  font-weight: bold;

  letter-spacing: 0.08em;

  margin-top: 5px;

  display: block;

  transition: all 0.3s ease;

}

.mv-slider .box .date {

  display: block;

  font-size: 1.5rem;

}

.mv-slider .box .cat {

  color: var(--accent-color);

  padding-left: 24px;

  font-size: 1.4rem;

  background: url(../images/icon_mazeru.svg) no-repeat left 3px center;

}

.mv-slider .box .date {

  font-size: 1.5rem;

  margin-top: 10px;

}

.date {

  font-family: "Work Sans";

  color: #6a6e72;

}

.tag-list {

  display: flex;

  font-size: 1.3rem;

  margin-top: 22px;

  gap: 8px;

  flex-wrap: wrap;

  position: relative;

  z-index: 3;

}

.tag-list li a {

  display: inline-block;

  border: 1px solid #d0d4db;

  border-radius: 4px;

  padding: 2px 12px;

  background: #fff;

}

.section {

  padding: 96px var(--padding-lr) 128px;

  background: url(../images/bg_section.png) right top / cover;

}

.trends {

  display: flex;

  gap: 54px;

  padding-bottom: 45px;

  margin-bottom: 112px;

  border-bottom: 1px solid #888f9b;

}

.trends dt {

  font-size: 2.2rem;

  font-weight: bold;

  letter-spacing: 0.08em;

  width: 21%;

}

.trends dd {

  flex: 1;

}

.trends .tag-list {

  margin-top: 0;

  font-size: 1.4rem;

  gap: 14px;

}

.trends .tag-list li a {

  padding: 7px 16px;

}

.article-list {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 55px 40px;

}

.box-wrap .box {

  position: relative;

}

.box-wrap .box .area {

  position: absolute;

  inset: 0;

  z-index: 2;

}

.box-wrap .box .img {

  transition: all 0.3s ease;

}

.box-wrap .box .img img {

  width: 100%;

  aspect-ratio: 139/86;

  object-fit: cover;

}

.box-wrap .box .cat {

  position: absolute;

  top: 10px;

  left: -8px;

  padding: 6px 12px;

  font-size: 1.3rem;

  color: #fff;

  background: url(../images/icon_mazeru_white.svg) no-repeat left 6px center, linear-gradient(90deg, #3e95d6, #193480);

  padding: 7px 12px 7px 25px;

}

.box-wrap .box .ttl {

  font-size: 2rem;

  margin-top: 20px;

  display: block;

  font-weight: bold;

  letter-spacing: 0.08em;

  transition: all 0.3s ease;

}

.box-wrap .box .date {

  margin-top: 10px;

  display: block;

}

.btn-center {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 56px;

}

.btn-center .btn {

  display: flex;

  width: min(248px, 100%);

  height: 48px;

  justify-content: center;

  align-items: center;

  background: var(--color);

  color: #fff;

  border-radius: 100px;

  position: relative;

  font-size: 1.4rem;

}

.btn-center .btn:after {

  content: "";

  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%) scale(0.3);

  background: rgba(255, 255, 255, 0.3) center;

  border-radius: 50%;

  width: 25px;

  height: 25px;

  transition: all 0.3s ease;

}

.btn-center .btn.back:after {

  right: initial;

  left: 12px;

  transform: translateY(-50%) scale(0.3);

}

.footer-top {

  padding: 80px var(--padding-lr);

}

.footer-top .inner-wrap {

  max-width: 748px;

}

.bnr-wrap {

  display: flex;

  gap: 48px;

}

.bnr-wrap a {

  flex: 1;

  height: 100px;

  border: 1px solid #d0d4db;

  border-radius: 4px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 10px;

  position: relative;

}

.bnr-wrap a .txt01 {

  font-size: 1.1rem;

}

.bnr-wrap a .txt02 {

  font-size: 1.4rem;

  display: flex;

  align-items: center;

}

.bnr-wrap a .txt02 img {

  margin-left: 15px;

}

.bnr-wrap a .ttl {

  font-size: 1.6rem;

  letter-spacing: 0.08em;

}

.bnr-wrap a[target="_blank"]:after {

  content: "";

  position: absolute;

  right: 12px;

  bottom: 12px;

  width: 24px;

  height: 24px;

  background: #e4ebf7 url(../images/icon_blank.svg) no-repeat center;

  border-radius: 100px;

}

.mt-site-search__pagination ul,

.pager {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 54px;

  gap: 20px;

}

.mt-site-search-pagination-item--previous a,

.mt-site-search-pagination-item--next a,

.pager .prev,

.pager .next {

  text-indent: 100%;

  white-space: nowrap;

  overflow: hidden;

  display: block;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: rgba(9, 32, 59, 0.8) url(../images/arr_slide_l.svg) no-repeat center / 7px auto;

}

.mt-site-search-pagination-item--previous a,

.pager .prev {

  margin-right: 5px;

}

.mt-site-search-pagination-item--next a,

.pager .next {

  margin-left: 5px;

  background: rgba(9, 32, 59, 0.8) url(../images/arr_slide_r.svg) no-repeat center / 7px auto;

}

.pager span.prev,

.pager span.next {

  opacity: 0.3;

}

.pager .more:before {

  content: "...";

}

.mt-site-search-pagination-item,

.pager .num {

  padding: 0;

  text-align: center;

  min-width: 32px;

  font-family: "Work Sans";

  font-size: 1.8rem;

  position: relative;

}

.mt-site-search-pagination-item--current,

.pager .cur.num {

  color: var(--accent-color);

}

.mt-site-search-pagination-item--current:before,

.pager .cur.num:before {

  content: "";

  position: absolute;

  height: 2px;

  background: var(--main-color);

  bottom: -3px;

  left: 2px;

  right: 2px;

}

.white-box {

  background: #fff;

  padding: 64px;

  border-radius: 20px;

}

.wysiwyg {

  line-height: 2;

  font-size: 1.4rem;

  letter-spacing: 0.02em;

}

.wysiwyg *:first-child {

  margin-top: 0;

}

.wysiwyg *:last-child {

  margin-bottom: 0;

}

.wysiwyg h2 {

  background: #dcebf7;

  font-size: 2.6rem;

  padding: 10px 24px;

  font-weight: 500;

  margin-bottom: 40px;

  margin-top: 90px;

  letter-spacing: 0.08em;

}

.wysiwyg h3 {

  font-size: 2.2rem;

  display: flex;

  gap: 16px;

  margin-bottom: 24px;

  margin-top: 40px;

  letter-spacing: 0.08em;

}

.wysiwyg h3:before {

  content: "";

  width: 6px;

  margin: 8px 0;

  background: linear-gradient(180deg, #3e95d6, #193480);

}

.wysiwyg>p,

.wysiwyg>ul,

.wysiwyg>ol {

  margin-top: 20px;

  margin-bottom: 20px;

}

.wysiwyg figure {

  text-align: center;

  margin-top: 38px;

  margin-bottom: 28px;

}

.wysiwyg figcaption {

  text-align: center;

  font-size: 1.4rem;

  margin-top: 10px;

}

.wysiwyg strong {

  font-weight: bold;

}

.wysiwyg a {

  text-decoration: underline;

  color: var(--color);

  position: relative;

  display: inline-block;

}

.wysiwyg a:not([class])[target="_blank"]:after {

  content: "";

  background: url(../images/icon_blank.svg) no-repeat center;

  width: 11px;

  height: 9px;

  display: block;

  position: absolute;

  right: -10px;

  top: 50%;

  transform: translate(100%, -50%);

}

.wysiwyg .notice-list {

  font-size: 1.2rem;

}

.wysiwyg .notice-list li {

  display: flex;

  gap: 8px;

  margin-top: 5px;

}

.wysiwyg .notice-list li:before {

  content: "※";

  display: inline-block;

}

.wysiwyg .notice-num-list {

  font-size: 1.2rem;

  counter-reset: item;

}

.wysiwyg .notice-num-list li {

  display: flex;

  gap: 8px;

  margin-top: 5px;

}

.wysiwyg .notice-num-list li:before {

  counter-increment: item;

  content: "※" counter(item);

  display: inline-block;

}

.wysiwyg ul:not([class]) li {

  display: flex;

  align-items: baseline;

  gap: 8px;

  margin-top: 5px;

}

.wysiwyg ul:not([class]) li:before {

  content: "";

  min-width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--accent-color);

  margin-top: 0.85em;

}

.wysiwyg ol:not([class]) {

  counter-reset: item;

}

.wysiwyg ol:not([class]) li {

  display: flex;

  gap: 8px;

  margin-top: 5px;

}

.wysiwyg ol:not([class]) li:before {

  counter-increment: item;

  content: counter(item) ".";

  color: var(--accent-color);

}

.grid-col {

  display: grid;

  gap: 48px;

  grid-template-columns: repeat(2, 1fr);

}

.recommend-box {

  margin-top: 110px;

  border-top: 1px solid #000;

  padding: 60px 0 28px;

}

.recommend-box .title {

  font-size: 2.2rem;

  font-weight: 600;

  display: grid;

  place-items: center;

  margin-bottom: 25px;

}

.recommend-box .title:after {

  content: "";

  width: 36px;

  height: 4px;

  background: linear-gradient(90deg, #3e95d6, #193480);

}

.recommend-list {

  display: flex;

  flex-wrap: wrap;

  width: min(100%, 800px);

  margin: 0 auto;

  gap: 36px;

  justify-content: center;

}

.recommend-list li {

  position: relative;

  max-width: 240px;

}

.recommend-list li .link-area {

  position: absolute;

  inset: 0;

  display: block;

  z-index: 1;

}

.recommend-list li .img {

  border-radius: 8px;

  border: 1px solid #d0d4db;

  position: relative;

  transition: all 0.3s ease;

}

.recommend-list li a[target="_blank"]+.img:after {

  content: "";

  background: #e4ebf7 url(../images/icon_blank.svg) no-repeat center / 11px auto;

  display: block;

  position: absolute;

  right: 10px;

  bottom: 10px;

  width: 24px;

  height: 24px;

  border-radius: 50%;

}

.recommend-list li .ttl {

  text-align: center;

  margin-top: 10px;

  transition: all 0.3s ease;

}

.hd02 {

  font-size: 6rem;

  font-family: "Work Sans", sans-serif;

  font-weight: 500;

  margin-top: 126px;

  padding-top: 68px;

  border-top: 1px solid #888f9b;

  line-height: 1.5;

  letter-spacing: 0.02em;

}

.hd02-lead {

  font-size: 1.4rem;

  letter-spacing: 0.08em;

}

.article-list.slider {

  margin-top: 44px;

}

.mt-site-search-result {

  margin-bottom: 2em;

}

.mt-site-search-result-item {

  margin: 2em 0;

}

.mt-site-search-result-item__label {

  font-size: 2.2rem;

  margin-bottom: 5px;

}

.mt-site-search-result-item__url {

  color: var(--accent-color);

  font-size: 1.2rem;

}

.mt-site-search-result-item__excerpt {

  font-size: 1.4rem;

  margin-top: 5px;

}

/*==========================================================================================================

hover

==========================================================================================================*/

@media (hover: hover) {

  #header a:hover,

  a:hover img {

    opacity: 0.7;

  }

  .gnav .parents-list>li>a:hover {}

  .btn-center .btn:hover {

    background: var(--accent-color);

  }

  .btn-center .btn:hover:after {

    transform: translateY(-50%);

    background: rgba(255, 255, 255, 0.3) url(../images/arr_btn_right.svg) center no-repeat;

  }

  .btn-center .btn.back:hover:after {

    background: rgba(255, 255, 255, 0.3) url(../images/arr_btn_left.svg) center no-repeat;

  }

  .tag-list li a:hover {

    border: 1px solid var(--accent-color);

    color: var(--accent-color);

  }

  .bnr-wrap a:hover {

    opacity: 1;

    background: #f9f9fa;

    color: var(--accent-color);

    border-color: var(--accent-color);

  }

  .bnr-wrap a:hover img {

    opacity: 1;

  }

  .bnr-wrap a[target="_blank"]:hover:after {

    background-image: url(../images/icon_blank_blue.svg);

  }

  .box .area:hover~.img {

    opacity: 0.7;

  }

  .box .area:hover~.txt-wrap .ttl {

    color: var(--accent-color);

  }

  .wysiwyg a:hover {

    color: var(--accent-color);

  }

  .breadcrumbs ul li a:hover {

    color: var(--accent-color);

  }

  .footer-bottom a:hover {

    text-decoration: none;

  }

  .pager a.prev:hover,

  .pager a.next:hover {

    background-color: rgba(59, 121, 227, 0.8);

  }

  .pager .num:hover {

    color: var(--accent-color);

  }

  .recommend-list li .link-area:hover+.img {

    border-color: var(--accent-color);

  }

  .recommend-list li .link-area:hover~.ttl {

    color: var(--accent-color);

  }

}

/*==========================================================================================================

PC Only

==========================================================================================================*/

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

  .pc-only {

    display: block !important;

  }

  .sp-only {

    display: none !important;

  }

}

/*==========================================================================================================

NAV SP Only

==========================================================================================================*/

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

  body.side-open {

    overflow: hidden;

  }

  body.side-open #header>.inner-wrap {}

  #header {

    padding: 32px 20px;

  }

  #header>.inner-wrap {

    flex-wrap: wrap;

  }

  #header .logo {

    order: 1;

  }

  #header .logo .ttl {

    font-size: 1.8rem;

  }

  #header .logo .lead {

    font-size: 1rem;

    margin-top: 5px;

  }

  .btn-search {

    order: 2;

  }

  .sp-menu-btn {

    order: 3;

    width: 35px;

    height: 35px;

    background-color: transparent;

    display: block;

    position: relative;

    right: 0;

    top: 0;

    z-index: 202;

    background: #fff;

    border-radius: 50%;

    margin-left: 12px;

  }

  .sp-menu-btn span,

  .sp-menu-btn:after,

  .sp-menu-btn:before {

    background-color: #1f2326;

    content: "";

    display: block;

    width: 12px;

    height: 1px;

    position: absolute;

    left: 50%;

    right: auto;

    top: 50%;

    bottom: auto;

    transition: all 0.3s ease;

    transform: translate(-50%, 0);

  }

  .sp-menu-btn.active {}

  .sp-menu-btn.active span {

    opacity: 0;

  }

  .sp-menu-btn:before {

    transform: translate(-50%, -3px);

  }

  .sp-menu-btn:after {

    transform: translate(-50%, 3px);

  }

  .sp-menu-btn.active:before {

    background: #1f2326;

    transform: translate(-50%, 0) rotate(-45deg);

  }

  .sp-menu-btn.active:after {

    background: #1f2326;

    transform: translate(-50%, 0) rotate(45deg);

  }

  .gnav {

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    order: 4;

    width: 100%;

    display: none;

    margin: 0;

    background: #f9f9fa;

    padding: 40px;

    z-index: 100;

  }

  .gnav .parents-list {

    flex-direction: column;

    gap: 0;

    justify-content: center;

    margin-bottom: 24px;

  }

  .gnav .parents-list>li {

    border-bottom: 1px solid #d0d5de;

    flex-direction: column;

  }

  .gnav .parents-list>li>a {

    width: 100%;

    padding: 20px 24px 20px 48px;

    color: var(--color);

    font-size: 1.6rem;

  }

  .gnav .parents-list>li:nth-child(1)>a {

    background: url(../images/icon_nav_01_sp.svg) no-repeat left center;

  }

  .gnav .parents-list>li:nth-child(2)>a {

    background: url(../images/icon_nav_02_sp.svg) no-repeat left center;

  }

  .gnav .parents-list>li:nth-child(3)>a {

    background: url(../images/icon_nav_03_sp.svg) no-repeat left center;

  }

  .gnav .parents-list>li:nth-child(4)>a {

    background: url(../images/icon_nav_04_sp.svg) no-repeat left center;

  }

  .gnav .parents-list>li:nth-child(5)>a {

    background: url(../images/icon_nav_05_sp.svg) no-repeat left center;

    padding-left: 40px;

  }

  .search-drop {

    right: 20px;

    left: 20px;

    top: 96px;

    transform: none;

    width: auto;

  }

  .search-drop:before {

    width: 16px;

    height: 16px;

    right: 56px;

  }

  .header-fixed .search-drop {

    top: 82px;

  }

  .search-box {

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    padding: 28px 20px;

    width: 100%;

  }

  .search-box .hd {

    text-align: center;

  }

  .search-input-wrap {

    width: 100%;

  }

  .search-input-wrap input[type="search"] {

    width: 100%;

    font-size: 1.6rem;

  }

}

/*==========================================================================================================

 SP Only

==========================================================================================================*/

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

  body {

    font-size: 1.4rem;

  }

  .pc-only {

    display: none !important;

  }

  .sp-only {

    display: block !important;

  }

  .mv-common {

    padding: 120px 12px 60px 58px;

    height: auto;

  }

  .mv-common.detail-common {

    padding: 120px 20px 60px 20px;

  }

  .mv-common .main-title {

    font-size: 2.8rem;

  }

  .mv-common .main-title.icon:before {

    width: 35px;

    height: 35px;

    background-size: 18px auto;

    left: -5px;

  }

  .mv {

    height: auto;

    padding: 190px 48px 96px;

    background: url(../images/img_mv_pickup.svg) no-repeat 20px 147px /264px auto, url(../images/bg_sp.webp) no-repeat center / cover;

  }

  .mv-slider .box {

    flex-direction: column;

  }

  .mv-slider .box .img {

    width: 100%;

  }

  .mv-slider .box .txt-wrap {

    padding: 25px 20px 30px;

  }

  .mv-slider .box .cat {

    font-size: 1.2rem;

  }

  .mv-slider .box .ttl {

    font-size: 2rem;

  }

  .mv-slider .box .date {

    font-size: 1.4rem;

    margin-top: 12px;

  }

  .slick-prev,

  .slick-next {

    width: 36px;

    height: 36px;

    background-size: 5px auto;

  }

  .slick-prev {

    transform: translate(-75%, -50%);

  }

  .slick-next {

    transform: translate(75%, -50%);

  }

  .trends {

    flex-direction: column;

    gap: 24px;

    margin-bottom: 80px;

  }

  .trends dt {

    width: 100%;

    font-size: 1.6rem;

  }

  .trends .tag-list li a {

    font-size: 1.3rem;

  }

  .breadcrumbs+.section {

    padding-top: 100px;

  }

  .section {

    padding: 80px var(--padding-lr) 96px;

  }

  .article-list {

    grid-template-columns: 1fr;

  }

  .article-list .box .ttl {

    font-size: 1.8rem;

  }

  .btn-center {

    margin-top: 48px;

  }

  .footer-top {

    padding: 60px var(--padding-lr);

  }

  .bnr-wrap {

    flex-direction: column;

    gap: 20px;

  }

  .bnr-wrap a {

    flex: none;

  }

  .footer-bottom .lead {

    text-wrap: balance;

    word-break: auto-phrase;

  }

  .footer-bottom .copy {

    font-size: 1rem;

  }

  .pager {

    gap: 10px;

  }

  .pager .prev,

  .pager .next {

    width: 38px;

    height: 38px;

  }

  .mv-common .box .ttl {

    font-size: 2.6rem;

  }

  .mv-common .box .txt-wrap {

    padding-top: 0;

  }

  .mv-common .box {

    gap: 20px;

    flex-direction: column-reverse;

  }

  .white-box {

    padding: 40px 20px;

  }

  .wysiwyg {

    font-size: 1.3rem;

  }

  .wysiwyg h2 {

    font-size: 2rem;

    padding: 5px 18px;

    line-height: 1.75;

    margin-bottom: 30px;

    margin-top: 40px;

  }

  .wysiwyg h3 {

    font-size: 1.6rem;

    margin-bottom: 20px;

    margin-top: 30px;

    line-height: 1.75;

  }

  .wysiwyg>p,

  .wysiwyg>ul,

  .wysiwyg>ol {

    margin-top: 10px;

    margin-bottom: 10px;

  }

  .wysiwyg figure {

    margin-top: 14px;

    margin-bottom: 10px;

  }

  .wysiwyg figcaption {

    font-size: 1.2rem;

  }

  .grid-col {

    gap: 18px;

    grid-template-columns: 1fr;

  }

  .recommend-list {

    gap: 18px;

  }

  .recommend-box {

    margin-top: 50px;

    padding: 20px 0 20px;

  }

  .recommend-box .title {

    font-size: 2rem;

  }

  .hd02 {

    font-size: 3.8rem;

    margin-top: 60px;

    padding-top: 30px;

  }

  .hd02-lead {

    font-size: 1.2rem;

  }

  .slider .slick-list {

    margin: 0;

  }

  .slider .slick-track {

    gap: 0;

  }

  .slider-wrap {

    padding: 0 40px;

  }

  .slider-wrap .slick-prev {

    left: -20px;

  }

  .slider-wrap .slick-next {

    right: -20px;

  }

  .slider-wrap .box-wrap .box .cat {

    left: 0;

  }

  .mt-site-search-result-item__label {

    font-size: 1.8rem;

  }

}