@font-face {
  font-family: 'Noto-B';
  src: url("/asset/font/NotoSansJP-Bold.eot");
  src: url("/asset/font/NotoSansJP-Bold.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Bold.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-L';
  src: url("/asset/font/NotoSansJP-Light.eot");
  src: url("/asset/font/NotoSansJP-Light.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Light.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-R';
  src: url("/asset/font/NotoSansJP-Regular.eot");
  src: url("/asset/font/NotoSansJP-Regular.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Regular.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-M';
  src: url("/asset/font/NotoSansJP-Medium.eot");
  src: url("/asset/font/NotoSansJP-Medium.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Medium.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'TexGyreHeros';
  src: url("../font/texgyreheros-regular.eot");
  src: url("../font/texgyreheros-regular.eot?iefix") format("eot"), url("../font/texgyreheros-regular.woff") format("woff");
  font-display: swap; }

a {
  cursor: pointer; }

@media only screen and (max-width: 767px) {
  .dn-sp {
    display: none !important; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .dn-tablet {
    display: none !important; } }

@media only screen and (min-width: 1025px) {
  .dn-pc {
    display: none !important; } }

@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) {
  .dn-tab_pc {
    display: none !important; } }

.lazyload {
  opacity: 0; }

.lazyloaded {
  opacity: 1;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms; }

li {
  list-style: none; }

@media only screen and (min-width: 1025px) {
  .wrapBox {
    margin-bottom: 100px; }
    .wrapBox a {
      -webkit-transition: opacity 300ms;
      transition: opacity 300ms; }
      .wrapBox a:hover {
        opacity: .8; } }

@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
  .wrapBox {
    margin-bottom: 60px; } }

.mainVisual {
  margin-top: 0; }
  .mainVisual img {
    width: 100%; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
    .mainVisual {
      padding: 0; } }

.mainText {
  color: #000;
  text-align: center;
  margin: 50px 0 60px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
    .mainText {
      padding: 0;
      margin: 40px 20px; } }

@media only screen and (min-width: 1025px) {
  .featureSection {
    width: 1360px;
    min-width: 1360px;
    margin: 0 auto; } }

@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
  .featureSection {
    text-align: left;
    margin-top: 40px; } }

@media only screen and (min-width: 1025px) {
  .itemList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 60px; } }

@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
  .itemList {
    padding: 0 15px; } }

.itemList_node {
  width: calc(50% - 30px); }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
    .itemList_node {
      width: 100%; }
      .itemList_node + .itemList_node {
        margin-top: 40px; } }
  @media only screen and (min-width: 1025px) {
    .itemList_node {
      -webkit-transition: opacity 300ms;
      transition: opacity 300ms; }
      .itemList_node:hover {
        opacity: .7; } }

.itemList_node_link {
  display: block; }

.itemCategory {
  display: block;
  font-weight: bold;
  font-size: 16px;
  margin-top: 20px;
  text-align: center; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
    .itemCategory {
      font-size: 15px; } }

.itemText {
  display: block;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 15px;
  text-align: center; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
    .itemText {
      font-size: 14px;
      padding: 0 5px; } }

.styleLook_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media only screen and (min-width: 1025px) {
    .styleLook_list {
      margin-top: 100px; } }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
    .styleLook_list {
      margin: 60px auto 0;
      width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      overflow: hidden;
      overflow-x: scroll; } }

@media only screen and (min-width: 1025px) {
  .styleLook_listNode {
    width: 31%; } }

@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
  .styleLook_listNode {
    width: 85%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 15px; }
    .styleLook_listNode:last-child {
      margin-right: 0; } }

.itemButton {
  background-color: #f4f4f4;
  color: #000;
  padding: 12px 0;
  text-decoration: none;
  width: 180px;
  margin: 20px auto 0;
  display: block;
  text-align: center;
  font-weight: 600;
  border: 1px solid #f4f4f4; }
  @media only screen and (min-width: 1025px) {
    .itemButton {
      -webkit-transition: all 0.3s;
      transition: all 0.3s; }
      .itemButton:hover {
        opacity: .7; } }