@charset "utf-8";

/** ***************************************************************************
 * リセット
 * ************************************************************************* */

* { text-shadow:none; outline:none; box-sizing:border-box; }

body { max-width:100%; margin:0; padding:0; -webkit-text-size-adjust:none; }

body * { max-width:100%; }

article, aside, footer, header, main, menu, nav, section { margin:0; padding:0; display:block; }

h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font:inherit; }

a { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }

strong, em, small, address { margin:0; padding:0; font:inherit; }

pre { word-break:break-all; white-space:pre-wrap; }

:where(ul[class]), :where(ul[class]) li { margin:0; padding:0; list-style:none;}

:where(ol[class]), :where(ol[class]) li { margin:0; padding:0; list-style:none; }

:where(dl[class]), :where(dl[class]) dt, :where(dl[class]) dd { margin:0; padding:0; }

img { height:auto; border:none; vertical-align:bottom; }

:where(a[href]) img { transition:filter 0.3s ease-in-out 0.0s; }

:where(a[href]):hover img { filter:brightness(105%) contrast(110%); }

p { margin:0; padding:0; }

p + * { margin-top:1.125rem; }

* + p { margin-top:1.125rem; }

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

  p + * { margin-top:1.5rem; }

  * + p { margin-top:1.5rem; }

}

/** ***************************************************************************
 * 定数
 * ************************************************************************* */

:root {

  /**
   * アクセントカラー
   */

  /* コーポレートカラー */
  --accentcolor-marutsu-1: 0, 67, 144;
  --accentcolor-marutsu-2: 1, 119, 254;

  /* リンク色 */
  --accentcolor-link-1: 1, 117, 250;

}

/** ***************************************************************************
 * タイトル
 * ************************************************************************* */

[class*="title-style"] + * {
  margin-top: 0;
}

/**
 * 1
 */

[class*="title-style-1"] {
  margin-bottom: 30px;
  letter-spacing: 2px;
  line-height: 1.4;
  font-size: 1.429em;
  font-weight: 600;
  text-align: center;
}

[class*="title-style-1"][data-en]::after {
  content: attr(data-en);
  margin-top: 0.25em;
  color: rgb(var(--accentcolor-marutsu-2));
  line-height: 1;
  font-family: 'DIN 1451', sans-serif;
  font-size: 0.6em;
  font-weight: normal;
  display: block;
}

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

  [class*="title-style-1"] {
    margin-bottom: 60px;
    font-size: 1.875em;
  }

}

/**
 * 2
 */

[class*="title-style-2"] {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  letter-spacing: 2px;
  line-height: 1.4;
  font-size: 1.286em;
  font-weight: 600;
}

[class*="title-style-2"]::after {
  content: '';
  height: 4px;
  margin-top: 0.125em;
  background: linear-gradient(to right, rgb(var(--accentcolor-marutsu-1)), rgb(var(--accentcolor-marutsu-2)));
  display: block;
}

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

  [class*="title-style-2"] {
    margin-bottom: 40px;
    font-size: 1.5em;
  }

  [class*="title-style-2"]::after {
    height: 6px;
  }

}

/**
 * 3（英字限定）
 */

[class*="title-style-3"] {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  color: transparent;
  line-height: 1.4;
  font-family: 'DIN 1451', sans-serif;
  font-size: 3em;
  font-weight: 600;
  background: linear-gradient(to bottom, rgb(var(--accentcolor-marutsu-1)), rgb(var(--accentcolor-marutsu-2)));
  background-clip: text;
}

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

  [class*="title-style-3"] {
    width: auto;
    margin-bottom: 30px;
    font-size: 4.5em;
  }

}

/** ***************************************************************************
 * ボタン
 * ************************************************************************* */

/**
 * 1
 */

.button-style-1 {
  padding: 0.75em 2em 0.875em;
  color: #fff;
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  overflow: hidden;
  display: inline-block;
  background: linear-gradient(to right, rgb(var(--accentcolor-marutsu-1)), rgb(var(--accentcolor-marutsu-2)));
  position: relative;
  z-index: 0;
}

.button-style-1:hover {
  color: #fff;
}

.button-style-1::after {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgb(var(--accentcolor-marutsu-1)), rgb(var(--accentcolor-marutsu-2)));
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease-in-out 0.0s;
  opacity: 0;
}

.button-style-1:hover::after {
  opacity: 1;
}

/**
 * 2
 */

.button-style-2 {
  padding: 0.75em 3em 0.875em 2em;
  color: #fff;
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  overflow: hidden;
  display: inline-block;
  background: linear-gradient(to right, rgb(var(--accentcolor-marutsu-1)), rgb(var(--accentcolor-marutsu-2)));
  position: relative;
  z-index: 0;
}

.button-style-2:hover {
  color: #fff;
}

.button-style-2::before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgb(var(--accentcolor-marutsu-1)), rgb(var(--accentcolor-marutsu-2)));
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease-in-out 0.0s;
  opacity: 0;
}

.button-style-2:hover::before {
  opacity: 1;
}

.button-style-2::after {
  content: '';
  width: 1em;
  height: 1.125em;
  background: url("../_image/_common/icon-arrow-1.png") 0 0 / 100% 100% no-repeat;
  position: absolute;
  z-index: 1;
  top: calc(50% - 0.5625em);
  right: 1.25em;
}

/**
 * 3
 */

.button-style-3 {
  padding: 0.75em 2em 0.875em;
  color: #fff;
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  overflow: hidden;
  display: inline-block;
  background-color: rgba(0, 0, 0, 1.0);
  position: relative;
  z-index: 0;
}

.button-style-3:hover {
  color: #fff;
}

.button-style-3::before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.3));
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease-in-out 0.0s;
  opacity: 0;
}

.button-style-3:hover::before {
  opacity: 1;
}

/**
 * 4
 */

.button-style-4 {
  padding: 0.75em 3em 0.875em 2em;
  color: #fff;
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  overflow: hidden;
  display: inline-block;
  background-color: rgba(0, 0, 0, 1.0);
  position: relative;
  z-index: 0;
}

.button-style-4:hover {
  color: #fff;
}

.button-style-4::before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.3));
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease-in-out 0.0s;
  opacity: 0;
}

.button-style-4:hover::before {
  opacity: 1;
}

.button-style-4::after {
  content: '';
  width: 1em;
  height: 1.125em;
  background: url("../_image/_common/icon-arrow-1.png") 0 0 / 100% 100% no-repeat;
  position: absolute;
  z-index: 1;
  top: calc(50% - 0.5625em);
  right: 1.25em;
}

/**
 * 戻る
 */

.button-style-back-1 {
  padding: 0.75em 2em 0.875em 3em;
  color: #fff;
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  overflow: hidden;
  display: inline-block;
  background-color: rgba(0, 0, 0, 1.0);
  position: relative;
  z-index: 0;
}

.button-style-back-1:hover {
  color: #fff;
}

.button-style-back-1::before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.3));
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease-in-out 0.0s;
  opacity: 0;
}

.button-style-back-1:hover::before {
  opacity: 1;
}

.button-style-back-1::after {
  content: '';
  width: 1em;
  height: 1.125em;
  background: url("../_image/_common/icon-arrow-1.png") 0 0 / 100% 100% no-repeat;
  position: absolute;
  z-index: 1;
  top: calc(50% - 0.5625em);
  left: 1.25em;
  transform: scale(-1);
}

/**
 * 別ウィンドウ
 */

.button-style-blank-1 {
  padding: 0.75em 3.5em 0.875em 2em;
  color: #fff;
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  overflow: hidden;
  display: inline-block;
  background-color: rgba(0, 0, 0, 1.0);
  position: relative;
  z-index: 0;
}

.button-style-blank-1:hover {
  color: #fff;
}

.button-style-blank-1::before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.3));
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease-in-out 0.0s;
  opacity: 0;
}

.button-style-blank-1:hover::before {
  opacity: 1;
}

.button-style-blank-1::after {
  content: '';
  width: 1.125em;
  height: 1.125em;
  background: url("../_image/_common/icon-blank-1.png") 0 0 / 100% 100% no-repeat;
  position: absolute;
  z-index: 1;
  top: calc(50% - 0.5625em);
  right: 1.25em;
}

/** ***************************************************************************
 * リスト
 * ************************************************************************* */

[class*="list-style"] + *,
* + [class*="list-style"] {
  margin-top: 1.125rem;
}

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

  [class*="list-style"] + *,
  * + [class*="list-style"] {
    margin-top: 1.5rem;
  }

}

/**
 * 1
 */

.list-style-1 li {
  padding-left: 1em;
  position: relative;
  z-index: 0;
}

.list-style-1 li::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 9999px;
  background-color: rgb(var(--accentcolor-marutsu-2));
  position: absolute;
  z-index: 1;
  top: 0.625em;
  left: 0;
}

.list-style-1 li ~ li {
  margin-top: 0.5em;
}

/** ***************************************************************************
 * テーブル
 * ************************************************************************* */

/**
 * 1
 */

.table-style-1 {
  border-collapse: collapse;
}

.table-style-1 > tbody > tr > th {
  margin-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  font-weight: 700;
  border-bottom: 1px solid #dcdcdc;
  position: relative;
  z-index: 0;
}

.table-style-1 > tbody > tr > th::before {
  content: '';
  width: 100%;
  border-top: 3px solid;
  border-image: linear-gradient(to right, rgb(var(--accentcolor-marutsu-1)), rgb(var(--accentcolor-marutsu-2))) 1;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.table-style-1 > tbody > tr > td {
  padding-left: 2em;
  padding-right: 1em;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}

/* SP表示 */

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

  .table-style-1 {
    display: block;
  }

  .table-style-1 > tbody {
    display: block;
  }

  .table-style-1 > tbody > tr {
    padding: 1.25em 0.5em;
    border-top: 1px solid #dcdcdc;
    display: block;
    position: relative;
    z-index: 0;
  }

  .table-style-1 > tbody > tr:last-child {
    border-bottom: 1px solid #dcdcdc;
  }

  .table-style-1 > tbody > tr::before {
    content: '';
    width: 5em;
    border-top: 3px solid;
    border-image: linear-gradient(to right, rgb(var(--accentcolor-marutsu-1)), rgb(var(--accentcolor-marutsu-2))) 1;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }

  .table-style-1 > tbody > tr > th {
    width: 100%;
    padding: 0;
    border: none;
    display: block;
  }

  .table-style-1 > tbody > tr > th::before {
    content: none;
  }

  .table-style-1 > tbody > tr > td {
    width: 100%;
    padding: 0;
    border: none;
    display: block;
  }

  .table-style-1 > tbody > tr > td ~ td {
    margin-top: 1.25em;
  }

}

/** ***************************************************************************
 * 表示／非表示
 * ************************************************************************* */

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

  [pc] {
    display: none !important;
  }

}

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

  [sp] {
    display: none !important;
  }

}