@charset "UTF-8";
.top-section .sub-label {
  font-size: 14px;
  margin-bottom: 8px;
}
.top-section .main-label {
  font-size: 40px;
  font-weight: bold;
  margin-right: 16px;
}

@media screen and (max-width: 1339px) {
  .top-section .main-label {
    font-size: 32px;
  }
}
.top-section-link {
  display: flex;
  align-items: center;
}
.top-section-link .label {
  font-weight: bold;
  margin-right: 16px;
}

/* HEADER */
.top-header {
  background-size: cover;
  height: 880px;
  display: flex;
  justify-content: center;
  background-image: url("../images/pc/top-background.png");
  background-color: var(--top-background-color);
}
.top-header .top-header-inner {
  padding: 0 80px;
  width: calc(100% - 160px);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.top-header .top-header-inner .top-title {
  font-size: 44px;
  margin-top: 300px;
  margin-bottom: auto;
  line-height: 150%;
}
.top-header .top-header-inner .top-headline-container {
  margin-bottom: 32px;
  min-height: 82px;
  max-height: 82px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--black-10);
  background: var(--white);
}
.top-header .top-header-inner .top-headline-container .top-headline {
  width: calc(100% - 48px);
  /* height: 100%; */
  display: flex;
  align-items: center;
  padding: 24px;
  /* お知らせを縦並びにしたいとき */
}
.top-header
  .top-header-inner
  .top-headline-container
  .top-headline
  .top-headline-col
  .top-headline-col-label {
  display: flex;
  margin-bottom: 8px;
}
.top-header
  .top-header-inner
  .top-headline-container
  .top-headline
  .top-headline-header {
  margin-right: 24px;
  color: var(--red);
  font-weight: bold;
  font-size: 14px;
}
.top-header
  .top-header-inner
  .top-headline-container
  .top-headline
  .top-headline-date {
  color: var(--black-50);
  margin-right: 24px;
  font-size: 14px;
}
.top-header
  .top-header-inner
  .top-headline-container
  .top-headline
  .top-headline-arrow {
  margin-left: auto;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.top-header
  .top-header-inner
  .top-headline-container
  .top-headline
  .top-headline-text {
  width: calc(100% - 310px);
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* for wide tablet and laptop */
.top-header .top-header-inner .top-headline-container .top-headline-mb {
  display: none;
}

/* for mini tablet and mobile phone common*/
@media screen and (max-width: 1023px) {
  .top-header .top-header-inner {
    width: calc(100% - 80px);
    padding: 0 40px;
  }
  .top-header .top-header-inner .top-headline-container {
    min-height: 140px;
    max-height: 140px;
  }
  .top-header .top-header-inner .top-headline-container .top-headline-pc {
    display: none;
  }
  .top-header .top-header-inner .top-headline-container .top-headline-mb {
    display: block;
  }
  .top-header .top-header-inner .top-headline-container .top-headline {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .top-header
    .top-header-inner
    .top-headline-container
    .top-headline
    .top-headline-above {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
  }
  .top-header
    .top-header-inner
    .top-headline-container
    .top-headline
    .top-headline-above
    .top-headline-date {
    margin-right: 0;
  }
  .top-header
    .top-header-inner
    .top-headline-container
    .top-headline
    .top-headline-above
    .top-headline-arrow {
    margin-left: auto;
  }
  .top-header
    .top-header-inner
    .top-headline-container
    .top-headline
    .top-headline-text {
    width: 100%;
  }
}
/* for mini tablet */
@media screen and (max-width: 1023px) {
  .top-header {
    height: 980px;
  }
  .top-header .top-header-inner .top-title {
    margin-top: 200px;
    font-size: 32px;
  }
}
/* for mobile phone */
@media screen and (max-width: 767px) {
  .top-header {
    height: auto;
    background-image: none;
  }
  .top-header .top-header-inner {
    width: calc(100% - 48px);
    padding: 0 24px;
    /* モバイルの場合背景画像の範囲を変えるため若干複雑にレイアウトする */
  }
  .top-header .top-header-inner .top-title {
    background-image: url(../images/mb/top-background.png);
    background-size: cover;
    height: 600px;
    margin-top: 0px;
    width: calc(100% + 48px);
    margin-left: -24px;
  }
  .top-header .top-header-inner .top-title .title-text {
    padding: 140px 0 40px 40px;
  }
}
/* SHORTCUT */
.top-shortcut-area {
  padding-bottom: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-shortcut-area .top-shortcut {
  width: calc(30% - 32px);
  border-radius: 8px;
  border: 1px solid var(--black-10);
  background-color: var(--white);
  display: flex;
  align-items: center;
  padding: 16px 16px 16px 16px;
}
.top-shortcut-area .top-shortcut .top-shortcut-contents {
  display: flex;
  align-items: center;
  width: calc(100% - 80px);
}
.top-shortcut-area .top-shortcut .top-shortcut-contents .top-shortcut-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 24px;
}
.top-shortcut-area
  .top-shortcut
  .top-shortcut-contents
  .top-shortcut-text
  .top-shortcut-header {
  color: var(--black-50);
}
.top-shortcut-area
  .top-shortcut
  .top-shortcut-contents
  .top-shortcut-text
  .top-shortcut-label {
  font-weight: bold;
}
.top-shortcut-area .top-shortcut .top-shortcut-contents .top-shortcut-link {
  margin-left: auto;
}
.top-shortcut-area .top-shortcut .wide-tablet {
  display: none;
}

/* for wide tablet and mini laptop */
/* wide tabletだけデザインが特殊なためmin-widthを付ける */
@media screen and (max-width: 1439px) and (min-width: 1023px) {
  .top-shortcut-area .top-shortcut {
    flex-direction: column;
  }
  .top-shortcut-area .top-shortcut .top-shortcut-image {
    width: 100%;
    margin-bottom: 16px;
  }
  .top-shortcut-area .top-shortcut .top-shortcut-contents {
    width: 100%;
  }
  .top-shortcut-area .top-shortcut .top-shortcut-contents .top-shortcut-text {
    margin: 0;
  }
  .top-shortcut-area .top-shortcut .wide-tablet {
    display: block;
  }
  .top-shortcut-area .top-shortcut .pc {
    display: none;
  }
}
/* for mini tablet */
@media screen and (max-width: 1023px) {
  .top-shortcut-area {
    flex-direction: column;
  }
  .top-shortcut-area .top-shortcut {
    width: calc(100% - 32px);
  }
  .top-shortcut-area .top-shortcut:not(:last-child) {
    margin-bottom: 24px;
  }
}
/* for mobile phone */
@media screen and (max-width: 767px) {
  .top-shortcut-area {
    flex-direction: column;
  }
  .top-shortcut-area .top-shortcut {
    width: calc(100% - 32px);
  }
  .top-shortcut-area .top-shortcut:not(:last-child) {
    margin-bottom: 16px;
  }
}
@keyframes nextAnimation {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes prevAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/* PRODUCT */
.top-product {
  width: 100%;
  padding: 120px 0;
  background-color: var(--white);
  display: flex;
}
.top-product .top-product-image-container {
  position: relative;
  width: 630px;
}
.top-product .top-product-image-container .top-product-image {
  position: absolute;
  width: 100%;
  overflow: hidden;
}
.top-product .top-product-image-container .top-product-image img {
  width: 630px;
}
.top-product .top-product-image-container #top-product-mock-0,
.top-product .top-product-image-container #top-product-mock-tablet-0,
.top-product .top-product-image-container #top-product-mock-mb-0 {
  z-index: 3;
}
.top-product .top-product-image-container #top-product-mock-1,
.top-product .top-product-image-container #top-product-mock-tablet-1,
.top-product .top-product-image-container #top-product-mock-mb-1 {
  z-index: 2;
}
.top-product .top-product-image-container #top-product-mock-2,
.top-product .top-product-image-container #top-product-mock-tablet-2,
.top-product .top-product-image-container #top-product-mock-mb-2 {
  z-index: 1;
}
.top-product .top-product-content {
  width: calc(100% - 240px - 630px);
  padding: 0 120px;
}
.top-product .top-product-header {
  display: flex;
  margin-bottom: 32px;
}
.top-product .top-product-header .top-product-link {
  margin-left: auto;
  margin-top: auto;
}
.top-product .top-product-carousel {
  margin: 40px 0;
}
.top-product .top-product-carousel .top-product-carousel-area {
  overflow: hidden;
}
.top-product
  .top-product-carousel
  .top-product-carousel-area
  .top-product-carousel-inner {
  display: flex;
  align-items: center;
}
.top-product
  .top-product-carousel
  .top-product-carousel-area
  .top-product-carousel-inner
  .top-product-carousel-item:not(:last-child) {
  margin-right: 40px;
}
.top-product .top-product-carousel-footer {
  display: flex;
  align-items: center;
}
.top-product
  .top-product-carousel-footer
  [class^="top-product-carousel-footer-elipsis-"] {
  font-size: 35px;
}
.top-product .top-product-carousel-footer .top-product-carousel-footer-left {
  margin-right: 40px;
}
.top-product .top-product-carousel-footer .top-product-carousel-footer-right {
  margin-left: 40px;
}

.top-product-tablet {
  display: none;
}

@media screen and (max-width: 1439px) {
  .top-product-pc {
    display: none;
  }

  .top-product-tablet {
    display: block;
    flex-direction: column;
  }
  .top-product-tablet .top-product-above {
    width: calc(100% - 240px);
  }
  .top-product-tablet .top-product-above .top-product-summary {
    margin-bottom: 80px;
  }
  .top-product-tablet .top-product-below {
    width: 100%;
    display: flex;
  }
  .top-product-tablet .top-product-below .top-product-tablet-image {
    display: none;
  }
  .top-product-tablet .top-product-below .top-product-mb-image {
    display: none;
  }
  .top-product-tablet .top-product-below .top-product-carousel {
    width: calc(60% - 80px);
    margin-left: 80px;
  }

  .top-product .top-product-carousel {
    margin: 0;
  }
  .top-product .top-product-carousel .top-product-carousel-area {
    margin-bottom: 40px;
  }
  .top-product
    .top-product-carousel
    .top-product-carousel-area
    .top-product-carousel-inner
    .top-product-carousel-item:not(:last-child) {
    margin-right: 24px;
  }
}
@media screen and (max-width: 1439px) {
  .top-product .top-product-content {
    padding: 0 80px;
    width: calc(100% - 160px);
  }
  .top-product .top-product-below .top-product-pc-image {
    display: none;
  }
  .top-product .top-product-below .top-product-tablet-image {
    display: block;
  }
  .top-product .top-product-below .top-product-mb-image {
    display: none;
  }

  .top-product-tablet .top-product-below .top-product-image-container {
    max-width: 415px;
  }
  .top-product-tablet
    .top-product-below
    .top-product-image-container
    .top-product-image
    img {
    width: 415px;
  }
  .top-product-tablet .top-product-below .top-product-carousel {
    width: calc(100% - 80px - 470px);
  }
}
@media screen and (max-width: 1023px) {
  .top-product-tablet .top-product-below .top-product-image-container {
    max-width: 350px;
  }
  .top-product-tablet .top-product-below .top-product-carousel {
    width: calc(100% - 80px - 350px);
  }
}
@media screen and (max-width: 767px) {
  .top-product {
    padding: 80px 24px;
    width: calc(100% - 48px);
  }
  .top-product .top-product-below .top-product-image-container {
    width: 100%;
  }
  .top-product .top-product-below .top-product-pc-image {
    display: none;
  }
  .top-product .top-product-below .top-product-tablet-image {
    display: none;
  }
  .top-product .top-product-below .top-product-mb-image {
    display: block;
  }
  .top-product .top-product-below .top-product-image-container {
    position: relative;
    max-width: none;
    width: 480px;
    height: 300px;
  }
  .top-product
    .top-product-below
    .top-product-image-container
    .top-product-image {
    width: 100%;
    height: 100%;
  }
  .top-product
    .top-product-below
    .top-product-image-container
    .top-product-image
    img {
    height: 300px;
    width: 480px;
  }

  .top-product-tablet .top-product-above {
    width: 100%;
    padding: 0;
  }
  .top-product-tablet .top-product-above .top-product-summary {
    margin-bottom: 40px;
  }
  .top-product-tablet .top-product-below {
    flex-direction: column;
    align-items: center;
  }
  .top-product-tablet .top-product-below .top-product-carousel {
    width: 365px;
    z-index: 10;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: -40px 0 0 0;
  }
  .top-product-tablet
    .top-product-below
    .top-product-carousel
    .top-product-carousel-footer {
    justify-content: center;
  }
}
/* 小さいモバイルだとうまく表示できないので特別に対応する */
@media screen and (max-width: 480px) {
  .top-product .top-product-below .top-product-image-container {
    width: 350px;
    height: 200px;
  }
  .top-product
    .top-product-below
    .top-product-image-container
    .top-product-image
    img {
    width: 350px;
    height: 200px;
  }
}
.top-news {
  padding: 120px 80px;
  display: flex;
}
.top-news .top-news-header {
  width: 30%;
}
.top-news .top-news-header .top-news-section {
  margin-bottom: 40px;
}
.top-news .top-news-contents {
  width: 70%;
}

/* for mobile and mini, wide tablet */
@media screen and (max-width: 1439px) {
  .top-news {
    flex-direction: column;
  }
  .top-news .top-news-header {
    display: flex;
    width: 100%;
  }
  .top-news .top-news-header .top-section-link {
    margin-left: auto;
  }
  .top-news .top-news-contents {
    width: 100%;
  }
}
/* スマホの時だけ「ニュース一覧」のラベルを消す */
@media screen and (max-width: 767px) {
  .top-news {
    padding: 80px 24px;
    width: calc(100% - 48px);
  }

  .top-news-section-link-label-pc {
    display: none;
  }
}
/* COLUMN */
.top-column {
  background-color: var(--white);
  padding: 120px 80px;
  width: calc(100% - 160px);
}
.top-column .top-column-header {
  display: flex;
  margin-bottom: 40px;
}
.top-column .top-column-header .top-section-link {
  margin-top: auto;
  margin-left: auto;
}
.top-column .top-column-contents {
  width: 100%;
  display: flex;
}
.top-column .top-column-contents .top-column-item:not(:last-child) {
  border-right: solid 1px var(--black-10);
  padding-right: 2.5%;
}
.top-column .top-column-contents .top-column-item:not(:first-child) {
  padding-left: 2.5%;
}
.top-column .top-column-contents .top-column-item {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.top-column .top-column-contents .top-column-item img {
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}
.top-column .top-column-contents .top-column-item .top-column-title {
  font-weight: bold;
}
.top-column .top-column-contents .top-column-item .top-column-sentence {
  font-size: 14px;
  margin: 8px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  min-height: 65px;
}
.top-column .top-column-contents .top-column-item .top-column-footer {
  display: flex;
  align-items: center;
}
.top-column
  .top-column-contents
  .top-column-item
  .top-column-footer
  .top-column-category {
  font-size: 14px;
  font-weight: bold;
  color: var(--red);
  margin-right: 16px;
}
.top-column
  .top-column-contents
  .top-column-item
  .top-column-footer
  .top-column-date {
  font-size: 14px;
  color: var(--black-50);
}

/* for mini tablet */
@media screen and (max-width: 1023px) {
  .top-column .top-column-contents .top-column-item {
    width: 45%;
  }
  .top-column .top-column-contents .top-column-item-pc {
    display: none;
    border-bottom: none;
  }
}
/* for mobile */
@media screen and (max-width: 767px) {
  .top-column {
    padding: 80px 24px;
    width: calc(100% - 48px);
  }
  .top-column .top-column-header .top-section-link .top-section-link-label-pc {
    display: none;
  }
  .top-column .top-column-contents {
    flex-direction: column;
  }
  .top-column .top-column-contents .top-column-item {
    width: 100%;
  }
  .top-column .top-column-contents .top-column-item:not(:last-child) {
    border: none;
    padding: 0;
    padding-bottom: 40px;
    border-bottom: solid 1px var(--black-10);
  }
  .top-column .top-column-contents .top-column-item:not(:first-child) {
    padding-left: 0;
    padding-top: 40px;
  }
}
/* 下記は汎用ページ用のテストcss */
.wordpress-content li {
  list-style: none;
}
.wordpress-content td {
  background-color: red;
}
.wordpress-content .hogehoge {
  color: blue;
}

/*# sourceMappingURL=page-top.css.map */