@charset "UTF-8";

/* 設定 */
:root {
  --base-font-size: 16;
  --color-grad: linear-gradient(135deg, #F0831E 0%, #F0A31E 75.96%);
}

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mt-xs {
  margin-top: 12px !important;
}

.u-border {  
  width: 100%;
  height: 1px;
  background: var(--color-grayC);
  margin-block: 30px;
}

/* 共通 */
.bg {
  background-color: #fff;
}

.section {
  padding-block: 50px;
}

@media screen and (min-width: 768px) {
  .section {
    padding-block: 80px;
  }
}

.section:last-of-type {
  padding-bottom: 110px;
}

.titH2 {
  margin-bottom: 32px;
  padding-bottom: 15px;
  border-bottom: var(--cl-border) solid 2px;
}

.titH2 .titH2_en {
  font-family: var(--font-en02);
  font-size: calc(16 / var(--base-font-size) * 1rem);
  line-height: 1.2;
  margin-bottom: 4px;
  display: flex;
  gap: 7px;
}

.titH2 .titH2_en::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--color-grad);
  display: block;
  margin-top: 6px;
}

.titH2 .titH2_ja {
  font-size: calc(28 / var(--base-font-size) * 1rem);
  font-weight: 300;
}

@media screen and (min-width: 768px) {
  .titH2 {
    margin-bottom: 48px;
    padding-bottom: 20px;
  }

  .titH2 .titH2_en {
    font-size: calc(20 / var(--base-font-size) * 1rem);
  }

  .titH2 .titH2_en::before {
    width: 12px;
    height: 12px;
    margin-top: 6px;
  }

  .titH2 .titH2_ja {
    font-size: calc(36 / var(--base-font-size) * 1rem);
  }
}

.titH3 {
  margin-top: 40px;
  margin-bottom: 24px;
  padding-left: 14px;
  font-size: calc(22 / var(--base-font-size) * 1rem);
  font-weight: 300;
  position: relative;
}

.titH3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 54%;
  translate: 0 -50%;
  background: var(--color-grad);
  border-radius: 1px;
  width: 6px;
  height: calc(100% - 0.64em);
}

@media screen and (min-width: 768px) {
  .titH3 {
    margin-top: 66px;
    margin-bottom: 42px;
    padding-left: 16px;
    font-size: calc(28 / var(--base-font-size) * 1rem);
  }
}

.titH4 {
  margin-top: 32px;
  margin-bottom: 16px;
  padding-left: 20px;
  font-size: calc(20 / var(--base-font-size) * 1rem);
  position: relative;
}

.titH4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  background: var(--color-grad);
  border-radius: 1px;
  width: 12px;
  height: 12px;
}

@media screen and (min-width: 768px) {
  .titH4 {
    margin-top: 40px;
    margin-bottom: 32px;
    padding-left: 22px;
    font-size: calc(22 / var(--base-font-size) * 1rem);
  }

  .titH4::before {
    top: 12px;
  }
}

.titH5 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-size: calc(16 / var(--base-font-size) * 1rem);
}

@media screen and (min-width: 768px) {
  .titH5 {
    margin-top: 32px;
    margin-bottom: 20px;
    font-size: calc(20 / var(--base-font-size) * 1rem);
  }
}

.btn {
  --border-color: #e7e7e7;
  --btn-bg-color: #fff;
  --btn-text-color: var(--base-color-txt);
  width: 100%;
  background-color: var(--btn-bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--btn-text-color);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  text-align: center;
}

.btn>span {
  width: 100%;
  text-align: center;
}

.btn::after {
  content: "";
  width: 18px;
  aspect-ratio: 1;
  background-image: url(/assets/images/common/icon_arrow_circle.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.btn[target=_blank]::after {
  content: "";
  width: 13px;
  aspect-ratio: 1;
  background-image: url(/assets/images/common/icon_out_link02.svg);
  background-size: 100% 100%;
  display: inline-block;
  margin-left: 10px;
}

.btn[target=_blank][href$=".pdf"]::after,
.btn[target=_blank][href$=".xls"]::after,
.btn[target=_blank][href$=".xlsx"]::after,
.btn[target=_blank][href$=".doc"]::after,
.btn[target=_blank][href$=".docx"]::after {
  width: auto;
  background-image: none;
}

.btn[target=_blank][href$=".pdf"]::after {
  content: "pdf";
  aspect-ratio: unset;
  background-color: #e54242;
  border-radius: 4px;
}

.btn[href$=".pdf"] {
  display: inline-flex;
  position: relative;
  text-decoration: none;
  padding-right: 14px;
}

.btn[href$=".pdf"]::after {
  font-family: var(--font-en02);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2727272727;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  width: auto;
  background: unset;
  aspect-ratio: unset;
  display: inline-block;
  vertical-align: middle;
  border-radius: 1.37px;
  padding-inline: 4px;
  margin-left: 10px;
  border-radius: 4px;
}

.btn[href$=".pdf"]::after {
  content: "pdf";
  background-color: #e54242;
}

.btnAuto {
  margin: 24px auto 0;
  width: min(480px, 100%);
}

.btnAuto+p {
  margin-top: 32px;
}

.btnLeft {
  width: min(480px, 100%);
  margin-top: 24px;
}

@property --color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #F0831E;
}

@property --color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #F0A31E;
}

.btn--grad {
  background:linear-gradient(95deg, var(--color-1) 6.82%, var(--color-2) 97.17%);
  color: #FFF;
  border: none;
  transition: --color-1 0.5s, --color-2 0.5s;
}

.btn--grad:hover {
  opacity: 1;
  --color-1: #F0A31E;
  --color-2: #F0831E;
}

.btn--grad:not([target=_blank])::after {
  background-image: url(../images/icon_arrow_circle.svg) !important;
}

.btn--grad[target=_blank]::after {
  filter: brightness(0) invert(1);
}

@media screen and (min-width: 768px) {
  .btn {
    min-height: 80px;
    border-radius: 6px;
    font-size: calc(19 / var(--base-font-size) * 1rem);
    padding-block: 5px;
    padding-left: 23px;
    padding-right: 26px;
  }

  .btn::after {
    width: 20px;
  }

  .btnAuto {
    margin: 32px auto 0;
  }

  .btnAuto+p {
    margin-top: 40px;
  }

  .btnLeft {
    margin-top: 32px;
  }

  .btn[href$=".pdf"] {
    padding-right: 26px;
  }

  .btn[href$=".pdf"]::after {
    font-size: 0.75rem;
    line-height: 1.3333333333;
    padding-inline: 6px;
  }
}

.list>li {
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  font-size: calc(15 / var(--base-font-size) * 1rem);
  padding-left: 1em;
  position: relative;
}

.list>li::before {
  content: "・";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}

@media screen and (min-width: 768px) {
  .list>li {
    font-size: calc(17 / var(--base-font-size) * 1rem);
  }
}

.notelist>li {
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  font-size: calc(12 / var(--base-font-size) * 1rem);
  text-indent: -1.1em;
  padding-left: 1.1em;
}

@media screen and (min-width: 768px) {
  .notelist>li {
    font-size: calc(14 / var(--base-font-size) * 1rem);
  }
}

.notelistNum>li {
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  font-size: calc(12 / var(--base-font-size) * 1rem);
  text-indent: -1.8em;
  padding-left: 1.8em;
}

@media screen and (min-width: 768px) {
  .notelistNum>li {
    font-size: calc(14 / var(--base-font-size) * 1rem);
  }
}

/* mv */
/* .mv {
  display: block grid;
  grid-template-columns: 66.66% 33.33%;
  gap: 0;
} */

.mv_item a {
  position: relative;
  display: block;
  height: 100%;
}

.mv_main,
.mv_image {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.mv_image::after {
  content: '';
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 26, 39, 0.60) 16.09%, rgba(5, 24, 33, 0.38) 25.92%, rgba(0, 26, 39, 0.00) 44.69%);
  position: absolute;
}

.mv_main img,
.mv_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv_text {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 16px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mv_text::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(/assets/images/common/icon_arrow_circle.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mv_text span {
  color: #fff;
  line-height: 32px;
  font-size: clamp(calc(20 / var(--base-font-size) * 1rem), 4vw, (28 / var(--base-font-size) * 1rem));
  padding-bottom: 1px;
}

.mv_icon {
  width: 32px;
}

@media screen and (min-width: 1000px) {
  .mv {
    display: block grid;
    grid-template-columns: 66.66% 33.33%;
    gap: 0;
  }

  .mv_image::after {
    background: linear-gradient(0deg, rgba(0, 26, 39, 0.60) 11.03%, rgba(5, 24, 33, 0.38) 20.84%, rgba(0, 26, 39, 0.00) 30.64%);
  }

  .mv_text {
    padding: 0 20px 24px;
    gap: 12px;
  }

  .mv_text::after {
    width: 26px;
    height: 26px;
  }

  .mv_text span {
    line-height: 40px;
    font-size: clamp(calc(20 / var(--base-font-size) * 1rem), 2vw, (32 / var(--base-font-size) * 1rem));
    padding-bottom: 3px;
  }

  .mv_icon {
    width: 40px;
  }
}

/* メッセージ */
.messageBox .messageBox_ceo {
  margin-top: 20px;
}

.messageBox .messageBox_ceo-cap {
  text-align: center;
  margin-top: 10px;
  font-weight: 300;
  font-size: calc(14 / var(--base-font-size) * 1rem);
}

.messageBox .messageBox_ceo-capL {
  font-weight: 500;
  font-size: calc(22 / var(--base-font-size) * 1rem);
}

@media screen and (min-width: 768px) {
  .messageBox {
    display: flex;
    gap: 24px;
  }

  .messageBox .messageBox_text {
    flex: 1;
  }

  .messageBox .messageBox_ceo {
    width: min(360px, 36%);
    margin-top: 0;
  }

  .messageBox .messageBox_ceo-cap {
    font-size: calc(15 / var(--base-font-size) * 1rem);
  }

  .messageBox .messageBox_ceo-capL {
    font-size: calc(28 / var(--base-font-size) * 1rem);
  }
}

/* ハイライト */
.highlight {
  --_column-gap: 20px;
  --_column-max-count: 2;
  --_column-min-width: 360px;
  --_column-width-calculated: calc((100% - var(--_column-gap) * (var(--_column-max-count) - 1)) / var(--_column-max-count));
  --_column-width: min(100%, max(var(--_column-min-width), var(--_column-width-calculated)));
  display: block grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--_column-width), 1fr));
  gap: 24px var(--_column-gap);
}

@media screen and (min-width: 768px) {
  .highlight {
    gap: 48px var(--_column-gap);
  }
}

/* トピックス */
.topics {
  border-radius: 8px;
  border: 1px solid var(--cl-border);
  padding: 24px;
  --_column-gap: 20px;
  --_column-max-count: 2;
  --_column-min-width: 360px;
  --_column-width-calculated: calc((100% - var(--_column-gap) * (var(--_column-max-count) - 1)) / var(--_column-max-count));
  --_column-width: min(100%, max(var(--_column-min-width), var(--_column-width-calculated)));
  display: block grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--_column-width), 1fr));
  gap: var(--_column-gap);
}

.topics+.topics {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .topics {
    padding: 40px;
  }
}

@media screen and (max-width: 891px) {
  .topics {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* 株主還元・優待について */
.benefits {
  --_column-gap: 20px;
  --_column-max-count: 2;
  --_column-min-width: 300px;
  --_column-width-calculated: calc((100% - var(--_column-gap) * (var(--_column-max-count) - 1)) / var(--_column-max-count));
  --_column-width: min(100%, max(var(--_column-min-width), var(--_column-width-calculated)));
  display: block grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--_column-width), 1fr));
  gap: 32px var(--_column-gap);
}

.benefits_image figcaption {
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  padding: 16px 12px 0;
  font-size: calc(15 / var(--base-font-size) * 1rem);
}

@media screen and (min-width: 768px) {
  .benefits_image figcaption {
    font-size: calc(17 / var(--base-font-size) * 1rem);
  }
}

.table_new>thead th,
.table_original>thead th {
  width: auto !important;
}

.table_original>thead tr:nth-child(1) th.-last {
  width: 23% !important;
}

.table {
  margin-bottom: 0;
}

.groupbox {
  background-color: #fff;
  padding: 24px;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .groupbox {
    padding: 32px 40px;
  }
}

.groupTable {
  width: 1120px;
}

.groupTable_icon {
  border-radius: 9999px;
  background: var(--cl-bg-gray, #F6F6F6);
  display: inline-flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  font-size: calc(18 / var(--base-font-size) * 1rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--cl-text-dark, #333);
}

.groupTable_icon2 {
  border-radius: 4px;
  background: var(--gradation-01, linear-gradient(90deg, #182344 0%, #384980 50%, #4960A3 100%));
  display: inline-flex;
  padding: 11.5px 18px;
  justify-content: center;
  align-items: center;
  font-size: calc(18 / var(--base-font-size) * 1rem);
  font-weight: 500;
  line-height: 1.05;
  color: #fff;
}

.groupTable_caption {
  font-size: calc(16 / var(--base-font-size) * 1rem);
  font-weight: 500;
  line-height: 1.37;
  margin-top: 12px;
  text-indent: -1em;
  padding-left: 1em;
}

.groupTable_group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.groupTable_list >li {
  font-size: calc(20 / var(--base-font-size) * 1rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding-left: 14px;
  position: relative;
}

.groupTable_list >li::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--cl-main);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 12px;
}

.groupTable_list >li + li {
  margin-top: 5px;
}

.groupTable_list--s {
  font-size: calc(16 / var(--base-font-size) * 1rem);
}

.groupTable thead th {
  text-align: center;
  vertical-align: middle;
}

.groupTable tbody tr + tr {
  border-top: var(--cl-border, #DDE1E5) solid 1px;
}

.groupTable tbody th {
  padding: 12px 24px 12px 0;
  vertical-align: middle;
  height: 144px;
}

.groupTable tbody td {
  padding: 12px 24px;
  vertical-align: middle;
  position: relative;
}

.groupTable tbody td::before {
  content: "";
  width: 1px;
  height: calc(100% - 24px);
  background-color: var(--cl-border, #DDE1E5);
  position: absolute;
  left: 0;
  top: 12px;
}

.groupTable_arrow {
  position: relative;
}

.groupTable_arrow::after {
  content: url(../images/icon_arrow.svg);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 25px;
  margin: auto;
  transform: translateX(50%);
  z-index: 2;
}


.newbox {
  background-color: #fff;
  padding: 24px;
  width: 100%;
}

.newgroup {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 1120px;
}

.newgroup  >*:first-child,
.newgroup  >*:last-child {
  align-self: flex-start;
}

@media screen and (min-width: 768px) {
  .newbox {
    padding: 40px;
  }
}

.table_new thead th {
  height: 68px;
  line-height: 1.3;
}

.table_new thead th span {
  font-size: calc(14 / var(--base-font-size) * 1rem);
}

.table_new tbody td {
  background: var(--cl-bg-gray, #F6F6F6);
  border-bottom: none;
}