/*
** .c-header
*/

.c-header {
  border-bottom: 2px solid #BECDD7;
}

.c-header__inner {
  padding-top: calc(53.5 * 100vw / var(--standard-width));
  padding-bottom: calc(53.5 * 100vw / var(--standard-width));
}

.c-header__headline {
  font-weight: 700;
}

.c-header__headline-title {
  font-size: calc(30 / var(--standard-font-size) * 1em);
  color: var(--dark);
  line-height: 1;
  margin-bottom: calc(10 * 100vw / var(--standard-width));
}

.c-header__headline-slug {
  font-size: calc(18 / var(--standard-font-size) * 1em);
  font-style: italic;
  color: #4B4B4B;
  line-height: 1;
}

.c-header-bg__inner {
  position: relative;
}

.c-header-bg__headline {
  position: absolute;
  bottom: calc(45 * 100vw / var(--standard-width));
  left: 0;
  z-index: var(--z-index--low);
  font-weight: 700;
}

.c-header-bg__headline-title {
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  font-size: calc(35 / var(--standard-font-size) * 1em);
  color: var(--dark);
  line-height: 1;
}

.c-header-bg__headline-title span {
  display: block;
  clip-path: polygon(0 0, 100% 0%, calc(100% - (21.67 * 100vw / var(--standard-width))) 100%, 0% 100%);
  padding: calc(15 * 100vw / var(--standard-width)) calc(31.67 * 100vw / var(--standard-width)) calc(15 * 100vw / var(--standard-width)) calc(30 * 100vw / var(--standard-width));
}

.c-header-bg__headline-title span::before {
  background-color: #fff;
}

.c-header-bg__headline-slug {
  position: absolute;
  bottom: calc(-28 * 100vw / var(--standard-width));
  left: calc(100% - calc(21.67 * 100vw / var(--standard-width)) - 3.425em);
  z-index: var(--z-index--low);
  font-size: calc(35 / var(--standard-font-size) * 1em);
  font-style: italic;
  color: #4B4B4B;
  line-height: 1;
  white-space: nowrap;
}

.c-header-bg__headline-slug span {
  display: inline-block;
  padding-right: 0.2em; /* Safari：italicの最後の文字が欠ける現象の対策 */
}


/*
** .c-main
*/

.c-header + .c-main {
  margin-top: calc(45 * 100vw / var(--standard-width));
  margin-bottom: calc(60 * 100vw / var(--standard-width));
}


/*
** .c-section
*/

.c-section-intro {
  position: relative;
  padding-top: calc(60 * 100vw / var(--standard-width));
  margin-bottom: calc(90 * 100vw / var(--standard-width));
}

.c-section-intro::before,
.c-section-intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  display: block;
}

.c-section-intro::before {
  top: 0;
  left: 0;
  width: calc(40 * 100vw / var(--standard-width));
  height: calc(120 * 100vw / var(--standard-width));
  background-color: var(--black);
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.c-section-intro::after {
  bottom: calc(-60 * 100vw / var(--standard-width));
  right: 0;
  width: calc(224 * 100vw / var(--standard-width));
  height: calc(206.42 * 100vw / var(--standard-width));
  background-image: linear-gradient(0deg, transparent, #becdd7);
  clip-path: polygon(100% 0, 100% 44%, 80% 100%, 0 100%, 35% 0);
}

.c-section-intro__inner {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
}

.c-section-intro--h .c-section-intro__inner {
  grid-row-gap: calc(90 * 100vw / var(--standard-width));
}

.c-section-intro--v .c-section-intro__inner {
  grid-row-gap: calc(36 * 100vw / var(--standard-width));
}

.c-section-intro__headline {
  font-size: calc(25 / var(--standard-font-size) * 1em);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: calc(30 * 100vw / var(--standard-width));
}

.c-section-intro__headline span {
  display: inline-block;
}

.c-section-intro--h .c-section-intro__body {
  margin-bottom: calc(30 * 100vw / var(--standard-width));
}

.c-section-intro__body p + p {
  margin-top: 1em;
}

.c-section-intro__anchor-list {
  display: flex;
  column-gap: calc(30 * 100vw / var(--standard-width));
}

.c-section-intro__anchor-item {
  font-size: calc(18 / var(--standard-font-size) * 1em);
  font-weight: 700;
}

.c-section-intro__anchor-item::before {
  content: '\f0ab';
  color: var(--dark);
  margin-right: calc(3 * 100vw / var(--standard-width));
}


/*
** .c-headline
*/

.c-headline-rows {
  font-weight: 700;
  text-align: center;
  line-height: 1;
  margin-bottom: calc(30 * 100vw / var(--standard-width));
}

.c-headline-rows span {
  display: block;
}

.c-headline-rows span[data-ff="roboto"] {
  font-size: calc(40 / var(--standard-font-size) * 1em);
  font-style: italic;
  color: var(--dark);
  margin-bottom: calc(8 * 100vw / var(--standard-width));
}

.c-headline-rows span[data-ff="zenkaku"] {
  font-size: calc(15 / var(--standard-font-size) * 1em);
}

.c-headline-border {
  font-size: calc(22 / var(--standard-font-size) * 1em);
  font-weight: 700;
  color: var(--dark);
  border-bottom: 1px solid var(--black);
  padding-bottom: calc(5 * 100vw / var(--standard-width));
  margin-bottom: calc(30 * 100vw / var(--standard-width));
}

.c-headline-border span {
  display: inline-block;
}

.c-headline-square {
  position: relative;
  padding-left: calc(1em + (3 * 100vw / var(--standard-width)));
}

.c-headline-square::before {
  content: '\f0c8';
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
}


/*
** .c-button
*/

*[class*="c-button"] a::after {
  font-weight: normal;
}

*[class*="c-button"]:not([class*="--return"]) a::after {
  content: '\f061';
}

*[class*="c-button"][class*="--return"] a::after {
  content: '\f060';
}

.c-button-block {
  position: relative;
  display: block;
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  font-size: calc(18 / var(--standard-font-size) * 1em);
  font-weight: 500;
  color: #fff;
  background-color: var(--main);
  transition: var(--transition);
  margin-left: auto;
  margin-right: auto;
}

.c-button-block > * {
  padding: calc(15 * 100vw / var(--standard-width)) calc(20 * 100vw / var(--standard-width));
}

.c-button-block::before {
  content: '';
  position: absolute;
  bottom: calc(7.5 * 100vw / var(--standard-width));
  left: calc(20 * 100vw / var(--standard-width));
  display: block;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: var(--transition);
}

.c-button-block a::after {
  padding-left: calc(50 * 100vw / var(--standard-width));
}

.c-button-line > * {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: max-content;
  grid-column-gap: 1em;
  position: relative;
  z-index: 0;
  width: fit-content;
  min-width: calc(216 * 100vw / var(--standard-width));
  font-size: calc(16 / var(--standard-font-size) * 1em);
  font-weight: 700;
  line-height: 1;
  border-left: 1px solid var(--dark);
  border-bottom: 1px solid var(--dark);
  padding: calc(12 * 100vw / var(--standard-width)) calc(10 * 100vw / var(--standard-width));
}

.c-button-line--white > * {
  color: #fff;
  border-color: #fff;
}

.c-button-line a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.c-button-line--white a::before {
  background-color: #fff;
}

@media (hover: hover) and (pointer: fine) {

  .c-button-block:hover {
    background-color: var(--dark);
  }

  .c-button-block:hover::before {
    width: calc(100% - (40 * 100vw / var(--standard-width)));
  }

  .c-button-line > *:hover {
    color: #fff;
  }

  .c-button-line--white > *:hover {
    color: var(--dark);
  }

  .c-button-line a:hover::before {
    transform: scale(1, 1);
  }

}


/*
** .c-table
*/

.c-table {
  table-layout: fixed;
  font-size: calc(13 / var(--standard-font-size) * 1em);
  border-top: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
}

.c-table tbody tr {
  border-top: 1px solid var(--gray);
}

.c-table th,
.c-table td {
  padding: calc(5 * 100vw / var(--standard-width)) calc(8 * 100vw / var(--standard-width));
}

.c-table th {
  text-align: left;
  background-color: #F5F5F5;
}

.c-table thead th {
  font-weight: 700;
}

.c-table tbody th {
  font-weight: 500;
  vertical-align: middle;
}


/*
** .c-list
*/

.c-list-circle {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  grid-row-gap: calc(5 * 100vw / var(--standard-width)) ;
}

.c-list-circle li {
  position: relative;
  padding-left: calc(1em + (3 * 100vw / var(--standard-width)));
}

.c-list-circle li::before {
  content: '\f111';
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
  color: var(--dark);
}


/*
** .c-text
*/

[class$="body"],
[class$="intro"],
[class$="desc"] {
  text-align: justify;
}

.c-text-nothing {
  font-size: 1.25em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.c-text-url {
  font-size: initial;
  color: var(--gray);
  padding-top: 1em;
  padding-bottom: 1em;
}