@charset "UTF-8";
/* =================================
トップページ
================================= */
.toppage {
  padding-bottom: 150px;
  overflow: hidden; }
  @media print, screen and (max-width: 768px) {
    .toppage {
      padding-bottom: 80px; } }
  .toppage .anime, .toppage .anime_b, .toppage .anime_l, .toppage .anime_r {
    opacity: 0; }
    .toppage .anime.is-animated, .toppage .anime_b.is-animated, .toppage .anime_l.is-animated, .toppage .anime_r.is-animated {
      opacity: 1;
      transform: translate(0, 0);
      transition: all 1s; }
  .toppage .anime_b {
    transform: translate(0, 4em); }
  .toppage .anime_l {
    transform: translate(-4em, 0); }
  .toppage .anime_r {
    transform: translate(4em, 0); }
  .toppage h2 {
    font-family: "DF-HeiSeiMinCho-W7";
    transform: rotate(0.05deg);
    font-size: 48px;
    margin-bottom: 35px;
    text-align: left;
    line-height: 1; }
  .toppage .anchor {
    margin-top: -75px;
    padding-top: 75px; }
  @media print, screen and (max-width: 768px) {
    .toppage h2 {
      font-size: 28px;
      margin-bottom: 25px; }
    .toppage .anchor {
      margin-top: -60px;
      padding-top: 60px; } }
  .toppage .hero {
    margin-bottom: 75px;
    position: relative;
    z-index: 0; }
    .toppage .hero .smp {
      display: none; }
    .toppage .hero img {
      object-fit: cover;
      width: 100%;
      height: calc(85vh - 105px); }
    .toppage .hero .slick-dotted.slick-slider {
      margin-bottom: 0; }
    .toppage .hero .slick-dots {
      bottom: px-to-rem(15px); }
      .toppage .hero .slick-dots li {
        width: px-to-rem(12px);
        height: px-to-rem(12px);
        margin: 0 px-to-rem(5px); }
        .toppage .hero .slick-dots li button {
          width: px-to-rem(12px);
          height: px-to-rem(12px); }
          .toppage .hero .slick-dots li button::before {
            font-size: 0;
            background: #313030;
            border-radius: 50%;
            opacity: 1;
            width: px-to-rem(12px);
            height: px-to-rem(12px); }
        .toppage .hero .slick-dots li.slick-active button::before {
          background: #e5e5e5; }
  @media print, screen and (max-width: 768px) {
    .toppage .hero {
      margin-bottom: 80px; }
      .toppage .hero .pc {
        display: none; }
      .toppage .hero .smp {
        display: block; }
      .toppage .hero img {
        height: calc(65svh - 55px); }
      .toppage .hero .slick-dots {
        bottom: 10px; } }
  .toppage .news_area .bg_g {
    background: #F9F9F9;
    padding: 25px 0; }
  .toppage .news_area li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 20px;
    margin-bottom: 20px;
    position: relative; }
    .toppage .news_area li:has(a):hover {
      text-decoration: none;
      opacity: .5;
      transition: all .2s ease-in; }
    .toppage .news_area li a {
      position: absolute;
      inset: 0;
      z-index: 1;
      text-indent: -9999px; }
  .toppage .news_area dl {
    display: flex;
    align-items: center;
    justify-content: flex-start; }
  .toppage .news_area dt {
    font-size: 14px;
    margin-right: 10px; }
  .toppage .news_area dd {
    background: #5e5e5e;
    color: #fff;
    min-width: 100px;
    font-size: 12px;
    padding: 3px 0;
    line-height: 1; }
  .toppage .news_area p {
    font-size: 14px;
    text-align: left; }
  .toppage .news_area li:has(a):hover p {
    text-decoration: none; }
  .toppage .news_area li:has(a) p {
    text-decoration: underline; }
  @media print, screen and (max-width: 768px) {
    .toppage .news_area li {
      flex-direction: column;
      row-gap: 5px; } }
  .toppage .concept_area {
    position: relative;
    z-index: 0;
    padding: 200px 0;
    max-width: 1600px;
    margin: 0 auto 120px; }
    .toppage .concept_area .inner {
      display: flex;
      align-items: center;
      justify-content: space-between; }
    .toppage .concept_area p {
      text-align: left;
      line-height: 2.3; }
    .toppage .concept_area .concept_01 {
      max-width: 573px;
      width: 60%; }
    .toppage .concept_area .concept_02 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      margin: auto;
      max-width: 531px;
      width: 50%; }
  @media print, screen and (max-width: 768px) {
    .toppage .concept_area {
      margin-bottom: 80px;
      padding: 80px 0 0; }
      .toppage .concept_area .inner {
        display: block; }
      .toppage .concept_area .concept_01 {
        width: 85%;
        margin-top: 20px; }
      .toppage .concept_area .concept_02 {
        top: 30px;
        bottom: auto;
        width: 75%;
        max-width: 380px; } }
  .toppage .brands_area p {
    text-align: left;
    margin-bottom: 60px; }
  .toppage .brands_area .flex_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 5%;
    margin-bottom: 25px; }
  .toppage .brands_area li {
    max-width: 300px;
    width: 30%;
    position: relative;
    overflow: hidden; }
    .toppage .brands_area li:hover div {
      opacity: 1; }
    .toppage .brands_area li a {
      color: inherit; }
      .toppage .brands_area li a:hover {
        opacity: 1; }
  .toppage .brands_area .hover_inn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 0 8%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .toppage .brands_area .hover_inn em {
      margin-bottom: 15px;
      display: block; }
      .toppage .brands_area .hover_inn em:has(span) img {
        margin-bottom: 20px; }
    .toppage .brands_area .hover_inn img {
      margin: 0 auto; }
    .toppage .brands_area .hover_inn .logo_img_v {
      max-width: 208px; }
    .toppage .brands_area .hover_inn .logo_img_adi {
      max-width: 233px; }
    .toppage .brands_area .hover_inn span {
      font-size: 20px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1; }
      .toppage .brands_area .hover_inn span strong {
        font-size: 26px;
        font-weight: 600;
        font-family: "DF-HeiSeiMinCho-W7";
        display: inline; }
    .toppage .brands_area .hover_inn p {
      text-align: left;
      margin-bottom: 12px; }
    .toppage .brands_area .hover_inn .arw {
      font-weight: 500;
      font-size: 14px;
      text-align: right;
      padding-right: 65px; }
      .toppage .brands_area .hover_inn .arw:before, .toppage .brands_area .hover_inn .arw:after {
        background: #5e5e5e; }
      .toppage .brands_area .hover_inn .arw:before {
        top: 21px; }
      .toppage .brands_area .hover_inn .arw:after {
        top: 4px; }
  @media print, screen and (max-width: 768px) {
    .toppage .brands_area p {
      margin-bottom: 40px; }
    .toppage .brands_area .flex_area {
      flex-direction: column;
      row-gap: 40px;
      margin-bottom: 40px; }
    .toppage .brands_area li {
      width: 100%;
      max-width: none; }
      .toppage .brands_area li a:hover {
        opacity: .5; }
    .toppage .brands_area img {
      max-width: 300px;
      margin: 0 auto 25px; }
    .toppage .brands_area .hover_inn {
      position: static;
      background: 0;
      opacity: 1;
      padding: 0; }
      .toppage .brands_area .hover_inn em {
        margin-bottom: 12px; }
        .toppage .brands_area .hover_inn em:has(span) img {
          margin-bottom: 15px; }
      .toppage .brands_area .hover_inn .logo_img_v {
        max-width: 150px; }
      .toppage .brands_area .hover_inn .logo_img_adi {
        max-width: 180px; }
      .toppage .brands_area .hover_inn span {
        font-size: 18px; }
        .toppage .brands_area .hover_inn span strong {
          font-size: 22px; }
      .toppage .brands_area .hover_inn p {
        margin-bottom: 10px; } }