@charset "UTF-8";
/* autoprefixer grid: autoplace */
/*----------------------------------------
Reset
-----------------------------------------*/
@import url("https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined");

* {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

img {
  border: 0;
}

ul,
ol {
  list-style-type: none;
  text-indent: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th {
  font-style: normal;
  font-weight: normal;
  text-align: left;
}

em,
strong {
  font-style: normal;
  font-weight: normal;
}

cite {
  font-style: normal;
}

input[type="text"] {
  -webkit-appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
}

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  resize: none;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
}

button {
  outline: none;
}

/*----------------------------------------
Typography
-----------------------------------------*/
/* Webfont */
@font-face {
  font-family: "JMCGOTHIC";
  src: url("/font/JMCGOTHIC.woff2") format("woff2"), url("/font/JMCGOTHIC.woff") format("woff"), url("/font/JMCGOTHIC.ttf") format("truetype");
}

/* Set Yu Gothic Weight */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: normal;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

/* Fonts */
body {
  font-family: "ゴシックMB101 R", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.jmc-gothic {
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.material-icons {
  font-family: 'Material Icons';
}

.material-icons-outlined {
  font-family: 'Material Icons';
}

/* Font Size */
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

img {
  width: 100%;
  vertical-align: middle;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #000;
  text-decoration: none;
}

/* ALL */
@media screen and (max-width: 767px) {
  html {
    font-size: 2.60756vw;
  }
}

body {
  background-color: #ffffff;
  color: #464646;
}

@media screen and (min-width: 768px) {
  body {
    min-width: 1240px;
  }
}

sup,
sub {
  font-size: 80%;
}

.inner,
header .header__inner {
  width: 89.96089%;
  margin: 0 auto;
}

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

  .inner,
  header .header__inner {
    min-width: 1200px;
    max-width: 1320px;
    padding: 0 20px;
  }

  .inner--small {
    min-width: 900px;
    max-width: 900px;
  }

  .inner--wide {
    max-width: 1700px;
  }
}

.column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.column--center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.column--02 .column__item {
  width: 46.875%;
  margin-right: 6.25%;
}

.column--02 .column__item:nth-child(even) {
  margin-right: 0;
}

.column--02 .column__item:nth-child(n + 3) {
  margin-top: 6.25%;
}

.column--02.column--reverse .column__item:nth-child(even) {
  margin-right: 6.25%;
}

.column--02.column--reverse .column__item:nth-child(odd) {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .column--02.column--reverse-sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.column--02-team .column__item:nth-child(1) {
  width: 53.51562%;
  margin-right: 6.25%;
}

.column--02-team .column__item:nth-child(2) {
  width: 40.23438%;
  margin-right: 0;
}

.column--02-small .column__item {
  width: 49.16667%;
  margin-right: 1.66667%;
}

.column--02-small .column__item:nth-child(even) {
  margin-right: 0;
}

.column--02-small .column__item:nth-child(n + 3) {
  margin-top: 1.66667%;
}

.column--02-small.column--reverse .column__item:nth-child(even) {
  margin-right: 1.66667%;
}

.column--02-small.column--reverse .column__item:nth-child(odd) {
  margin-right: 0;
}

.column--03 .column__item {
  width: 31.25%;
  margin-right: 3.125%;
}

.column--03 .column__item:nth-child(3n) {
  margin-right: 0;
}

.column--03 .column__item:nth-child(n + 4) {
  margin-top: 3.125%;
}

.column--03.column--reverse .column__item:nth-child(even) {
  margin-right: 6.25%;
}

.column--03.column--reverse .column__item:nth-child(odd) {
  margin-right: 0;
}

.column--reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
  .column {
    display: block;
  }

  .column .column__item {
    width: 100% !important;
    margin-right: 0;
  }

  .column .column__item:not(:first-child) {
    margin-top: 30px;
  }

  .column--02-small {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .column--02-small .column__item {
    width: 48.33333% !important;
  }
}

.column--02-small {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.column--02-small .column__item {
  width: calc(50% - 5px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 10px;
}

.column--02-small .column__item:nth-child(even) {
  margin-right: 0;
}

.column--02-small .column__item:nth-child(n + 3) {
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  .column--02-small .column__item:not(:first-child) {
    margin-top: 0;
  }
}

.column--02-break {
  margin: 0 calc(50% - 50vw);
}

@media screen and (max-width: 1240px) {
  .column--02-break {
    margin: 0;
  }
}

.column--02-break .column__item {
  width: 50%;
}

.column--02-break .column__item .column__item__inner {
  min-width: 600px;
  max-width: 660px;
  width: 100%;
}

.column--02-break .column__item:nth-child(odd) .column__item__inner {
  padding-left: 20px;
  margin: 0 0 0 auto;
}

.column--02-break .column__item:nth-child(even) .column__item__inner {
  padding-left: 15.15152%;
  padding-right: 20px;
  margin: 0 auto 0 0;
}

.column--02-break.column--reverse .column__item:nth-child(odd) .column__item__inner {
  padding-left: 15.15152%;
  padding-right: 20px;
  margin: 0 auto 0 0;
}

.column--02-break.column--reverse .column__item:nth-child(even) .column__item__inner {
  padding-right: 15.15152%;
  padding-left: 20px;
  margin: 0 0 0 auto;
}

@media screen and (max-width: 767px) {
  .column--02-break {
    margin: 0;
  }

  .column--02-break:not(:last-child) {
    margin-bottom: 60px;
  }

  .column--02-break .column__item {
    width: 89.96089%;
    margin: 0 auto;
  }

  .column--02-break .column__item .column__item__inner {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
  }

  .column--02-break .column__item:nth-child(odd) .column__item__inner {
    padding-left: 0;
    margin: 0;
  }

  .column--02-break .column__item:nth-child(even) .column__item__inner {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }

  .column--02-break.column--reverse .column__item:nth-child(odd) .column__item__inner {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }

  .column--02-break.column--reverse .column__item:nth-child(even) .column__item__inner {
    padding-right: 0;
    padding-left: 0;
    margin: 0;
  }
}

@media screen and (max-width: 767px) {
  .fullwidth-sp {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.head.head--index span {
  display: block;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 70px;
}

.head.head--index span.head__en {
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 40px;
  margin-bottom: 20px;
}

.head.head--index span.head__ja {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .head.head--index span {
    margin-bottom: 40px;
  }

  .head.head--index span.head__en {
    font-size: 21.6px;
    margin-bottom: 12px;
  }

  .head.head--index span.head__ja {
    font-size: 14px;
  }
}

.head--xlarge {
  font-size: 80px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  margin-bottom: 60px;
}

@media screen and (max-width: 767px) {
  .head--xlarge {
    font-size: 30px;
    margin-bottom: 45px;
    text-align: center;
  }
}

.head--large {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #8EA3AD;
  font-size: 55px;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin-bottom: 50px;
}

.head--large:before,
.head--large:after {
  content: '';
  display: block;
  width: 110px;
  height: 1px;
  background-color: #8EA3AD;
}

.head--large:before {
  margin-right: 90px;
}

.head--large:after {
  margin-left: 90px;
}

@media screen and (max-width: 767px) {
  .head--large {
    font-size: 22px;
    margin-bottom: 45px;
    text-align: center;
  }

  .head--large:before,
  .head--large:after {
    width: 40px;
  }

  .head--large:before {
    margin-right: 30px;
  }

  .head--large:after {
    margin-left: 30px;
  }
}

.head--medium {
  font-size: 40px;
  line-height: 1.53333;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .head--medium {
    font-size: 21.6px;
    margin-bottom: 20px;
    text-align: center;
  }
}

.head--small {
  font-size: 30px;
  line-height: 1.53333;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .head--small {
    font-size: 19.2px;
    margin-bottom: 20px;
    text-align: center;
  }
}

.head--small02 {
  font-size: 20px;
  line-height: 1.53333;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .head--small02 {
    font-size: 19.2px;
    margin-bottom: 20px;
  }
}

.head--xsmall {
  font-size: 18px;
  margin-bottom: 1em;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

.head--gray {
  color: #8EA3AD;
}

.head--navy {
  color: #004F8A;
}

.head--underline {
  color: #8EA3AD;
  font-size: 40px;
  text-align: center;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin-bottom: 100px;
}

.head--underline .head__inner {
  display: inline-block;
  border-bottom: 1px solid #8EA3AD;
  padding-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .head--underline {
    font-size: 20px;
    margin-bottom: 50px;
  }
}

.head--underline-black {
  color: #464646;
  font-size: 40px;
  text-align: center;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  margin-bottom: 100px;
}

.head--underline-black .head__inner {
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}

.head--underline-black .head__inner:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: block;
  content: '';
  width: 0px;
  height: 5px;
  background-color: #464646;
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

.head--underline-black.active .head__inner:after {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .head--underline-black {
    font-size: 20px;
    margin-bottom: 50px;
  }
}

.textCenter {
  text-align: center;
}

.fontSmall {
  font-size: 0.83333em;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mbXsmall {
  margin-bottom: 0.5em !important;
}

.mbSmall {
  margin-bottom: 1.5em !important;
}

.mbMedium {
  margin-bottom: 40px !important;
}

.mbLarge {
  margin-bottom: 80px !important;
}

@media screen and (max-width: 767px) {
  .mbLarge {
    margin-bottom: 40px !important;
  }
}

.mbXLarge {
  margin-bottom: 150px !important;
}

@media screen and (max-width: 767px) {
  .mbXLarge {
    margin-bottom: 40px !important;
  }
}

.mt0 {
  margin-top: 0 !important;
}

.mtXsmall {
  margin-top: 0.5em !important;
}

.mtSmall {
  margin-top: 1.5em !important;
}

.mtMedium {
  margin-top: 40px !important;
}

.mtLarge {
  margin-top: 80px !important;
}

@media screen and (max-width: 767px) {
  .mtLarge {
    margin-top: 40px !important;
  }
}

.width30per {
  width: 30%;
  margin: 0 auto;
}

.width40per {
  width: 40%;
  margin: 0 auto;
}

.width50per {
  width: 50%;
  margin: 0 auto;
}

.width60per {
  width: 60%;
  margin: 0 auto;
}

.width80per {
  width: 80%;
  margin: 0 auto;
}

.width90per {
  width: 90%;
  margin: 0 auto;
}

.blockRight {
  margin: 0 0 0 auto;
}

@media screen and (min-width: 768px) {
  .width40per-pc {
    width: 40%;
    margin: 0 auto;
  }

  .width50per-pc {
    width: 50%;
    margin: 0 auto;
  }

  .width60per-pc {
    width: 60%;
    margin: 0 auto;
  }

  .width80per-pc {
    width: 80%;
    margin: 0 auto;
  }

  .width90per-pc {
    width: 90%;
    margin: 0 auto;
  }
}

.lineHeight1 {
  line-height: 1;
}

.group:not(:last-child) {
  margin-bottom: 150px;
}

@media screen and (max-width: 767px) {
  .group:not(:last-child) {
    margin-bottom: 45px;
  }
}

.contentBlock {
  margin: 40px 0;
}

@media screen and (max-width: 767px) {
  .contentBlock {
    margin: 20px 0;
    font-size: 14px;
  }
}

.contentBlock:last-child {
  margin-bottom: 0;
}

.image .image__item {
  margin: 30px 0px;
}

.captionedImage {
  position: relative;
}

.captionedImage .captionedImage__caption {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(35, 24, 21, 0.8);
  font-size: 18px;
  padding: 6px;
  line-height: 1;
  color: #fff;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .captionedImage .captionedImage__caption {
    bottom: 4px;
    right: 4px;
    font-size: 10px;
  }
}

.captionedImage02 picture {
  margin-bottom: 10px;
}

.captionedImage02 .captionedImage02__caption {
  font-size: 13px;
}

.media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.media--reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.media .media__image {
  width: 44.44444%;
}

.media .media__text {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .media {
    display: block;
  }

  .media .media__image,
  .media .media__text {
    width: 100%;
    margin: 20px 0;
  }
}

.info .info__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.info .info__item:not(:last-child) {
  margin-bottom: 10px;
}

.info dt {
  margin-right: 2em;
}

.info dd {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.infoBox {
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 0px 10px #E7EBED inset;
  box-shadow: 0px 0px 0px 10px #E7EBED inset;
  padding: 20px 20px 20px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.infoBox .infoBox__title {
  background-color: #fff;
  border-right: 4px solid #E7EBED;
  padding: 0 1em;
  margin-right: 1em;
  text-align: center;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.infoBox .infoBox__text {
  background-color: #fff;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 13px;
}

@media screen and (max-width: 767px) {
  .infoBox {
    -webkit-box-shadow: 0px 0px 0px 5px #E7EBED inset;
    box-shadow: 0px 0px 0px 5px #E7EBED inset;
    padding: 10px 10px 10px 5px;
  }

  .infoBox .infoBox__title {
    border-right: 2px solid #E7EBED;
    font-size: 12px;
  }

  .infoBox .infoBox__text {
    font-size: 12px;
  }
}

.youtube {
  position: relative;
  height: 0;
  padding-top: 56.25%;
}

.youtube a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.map {
  position: relative;
  height: 0;
  padding-top: 65%;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.productList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 1.04167vw;
}

@media screen and (max-width: 1200px) {
  .productList {
    font-size: 12.5px;
  }
}

.productList.productList--small .productList__item {
  height: 400px;
}

@media screen and (max-width: 767px) {
  .productList.productList--small .productList__item {
    height: 250px;
  }
}

.productList .productList__item {
  width: calc(100% / 3);
  height: 27.5em;
  position: relative;
  overflow: hidden;
  display: block;
  z-index: 1;
}

.productList .productList__item--full {
  width: 100%;
}

.productList .productList__item--half {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .productList .productList__item {
    width: 100%;
    height: 20rem;
  }
}

.productList .productList__item:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #004F8A;
  opacity: 0.3;
  z-index: 2;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

.productList .productList__item:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 79, 138, 0.7);
  mix-blend-mode: multiply;
  z-index: 2;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

.productList .productList__item:hover picture img {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}

.productList .productList__item:hover .productList__text {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.productList .productList__item:hover .productList__detail {
  max-height: 10em;
}

.productList .productList__item:hover .productList__btn {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.productList .productList__item:hover:before {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.productList .productList__item:hover:after {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.productList picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

.productList .productList__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 3;
  color: #fff;
  text-align: center;
}

.productList .productList__head__en {
  font-size: 40px;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.05em;
  margin-bottom: 0.4em;
  -webkit-transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

@media screen and (max-width: 767px) {
  .productList .productList__head__en {
    font-size: 21.6px;
    margin-bottom: 0.5em;
    line-height: 1;
  }
}

.productList .productList__head__ja {
  font-size: 22px;
  letter-spacing: 0.1em;
  -webkit-transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .productList .productList__head__ja {
    font-size: 14.4px;
    line-height: 1;
  }
}

.productList .productList__text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: translateY(5.20833vw);
  -ms-transform: translateY(5.20833vw);
  transform: translateY(5.20833vw);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

@media screen and (max-width: 767px) {
  .productList .productList__text {
    font-size: 14px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.productList .productList__detail {
  max-height: 0;
  overflow: hidden;
  width: 22em;
  margin: 0 auto;
  line-height: 1.8em;
  text-align: left;
  padding-top: 3em;
  -webkit-transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

@media screen and (max-width: 767px) {
  .productList .productList__detail {
    display: none;
  }

  .productList .productList__detail--showOnSP {
    display: block;
    max-height: initial;
  }
}

.productList .productList__btn {
  position: relative;
  width: 100%;
  margin-top: auto;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  padding: 0.75em;
}

.productList .productList__btn:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 79, 138, 0.6);
  mix-blend-mode: multiply;
  z-index: 1;
}

.productList .productList__btn .productList__btn__inner {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .productList .productList__btn {
    display: none;
  }
}

.productList .productList__icon {
  width: 3em;
  margin: 0 5px;
}

.productList .productList__btnLabel {
  font-size: 22px;
  margin: 0 18px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

.productList .productList__arrow {
  width: 2em;
  line-height: 1;
}

.productList .productList__arrow .arrowRight {
  width: 2em;
  height: 2em;
}

.symbol {
  display: none;
}

.arrowRight {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  border: 1px solid #ffffff;
  border-radius: 999px;
}

.arrowRight svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.arrowRight use {
  fill: #fff;
}

.arrowRight--vision {
  width: 56px;
  height: 56px;
  border: 1px solid #004f8a;
}

.arrowRight--vision use {
  fill: #004f8a;
}

.arrowRight--navy {
  width: 25px;
  height: 25px;
  border: 1px solid #004f8a;
}

.arrowRight--navy use {
  fill: #004f8a;
}

@media screen and (max-width: 767px) {
  .arrowRight--navy {
    width: 15px;
    height: 15px;
  }
}

.arrowRight--gray {
  width: 25px;
  height: 25px;
  border: 1px solid #8EA3AD;
  background-color: transparent;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}

.arrowRight--gray use {
  fill: #8EA3AD;
  -webkit-transition: fill 0.2s linear;
  transition: fill 0.2s linear;
}

@media screen and (max-width: 767px) {
  .arrowRight--gray {
    width: 15px;
    height: 15px;
  }
}

a:hover .arrowRight--gray {
  background-color: #8EA3AD;
}

a:hover .arrowRight--gray use {
  fill: #fff;
}

.arrowRight--white {
  width: 25px;
  height: 25px;
  border: 1px solid #fff;
}

.arrowRight--white use {
  fill: #fff;
}

.arrowRight--whiteLine {
  border: 1px solid #fff;
}

.arrowRight--whiteLine use {
  fill: #fff;
}

.arrowRight--lightgray {
  width: 20px;
  height: 20px;
  border: 1px solid #464646;
}

.arrowRight--lightgray use {
  fill: #464646;
}

.arrowRight--blue {
  width: 40px;
  height: 40px;
  border: 1px solid #50A7CE;
  background-color: #50A7CE;
}

.arrowRight--blue use {
  fill: #ffffff;
}

@media screen and (max-width: 767px) {
  .arrowRight--blue {
    width: 20px;
    height: 20px;
  }
}

.arrowRight--blueLine {
  border: 1px solid #50A7CE;
  background-color: transparent;
}

.arrowRight--blueLine use {
  fill: #50A7CE;
}

.arrowRight--small {
  width: 25px;
  height: 25px;
}

@media screen and (max-width: 767px) {
  .arrowRight--small {
    width: 14px;
    height: 14px;
  }
}

.arrowRight--down {
  margin-top: 15px;
  -webkit-transition: -webkit-transform 0.2s linear;
  transition: -webkit-transform 0.2s linear;
  transition: transform 0.2s linear;
  transition: transform 0.2s linear, -webkit-transform 0.2s linear;
}

.arrowRight--down svg {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

a:hover .arrowRight--down {
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
}

.button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 690px;
  max-width: 100%;
  height: 120px;
  border: 4px solid #50A7CE;
  font-size: 30px;
  text-decoration: none;
  color: #50A7CE;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  margin: 80px auto 0;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .button {
    width: 100%;
    height: 60px;
    border: 2px solid #50A7CE;
    font-size: 16px;
    margin: 40px auto 0;
  }
}

.button:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #50A7CE;
  -webkit-transition: width 0.2s linear;
  transition: width 0.2s linear;
  z-index: -1;
}

.button .arrowRight {
  margin-left: 30px;
}

.button:hover {
  color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.button:hover:before {
  width: 100%;
}

.button:hover .arrowRight {
  background-color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.button:hover .arrowRight use {
  fill: #50A7CE;
}

.button--small {
  width: 100%;
  height: 80px;
  color: #fff;
  background-color: #50A7CE;
  font-size: 20px;
  margin-top: 0;
  text-align: center;
}

.button--small .arrowRight {
  margin-left: 20px;
}

.button--small .sm {
  font-size: 20px;
  line-height: 1.1em;
}

.button--small .sm .s1 {
  font-size: 15px;
}

@media screen and (max-width: 767px) {
  .button--small {
    font-size: 12px;
    height: 40px;
    text-align: center;
  }

  .button--small .sm {
    font-size: 12px;
  }

  .button--small .sm .s1 {
    font-size: 9px;
  }

  .button--small .arrowRight {
    margin-left: 12px;
  }
}

.button--topics {
  width: 400px;
  height: 70px;
  color: #fff;
  background-color: #A7D3E6;
  border: none;
  font-size: 20px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.button--topics .arrowRight {
  width: 25px;
  height: 25px;
}

.button--topics:hover {
  background-color: #50a7ce;
}

.button--topics:hover:before {
  display: none;
}

.button--topics:hover .arrowRight {
  background-color: transparent;
}

.button--topics:hover .arrowRight use {
  fill: #fff;
}

@media screen and (max-width: 767px) {
  .button--topics {
    width: 200px;
    height: 50px;
    font-size: 14px;
  }

  .button--topics .arrowRight {
    width: 14px;
    height: 14px;
    margin-left: 12px;
  }
}

.link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 20px;
  text-decoration: none;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .link {
    font-size: 14.4px;
  }
}

.link .link__text {
  margin-right: 1em;
  line-height: 1;
}

.link .arrowRight {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transform: translateY(-6%);
  -ms-transform: translateY(-6%);
  transform: translateY(-6%);
}

.link .arrowRight use {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.link:hover .arrowRight {
  background-color: #004f8a;
}

.link:hover .arrowRight use {
  fill: #fff;
}

.link:hover .arrowRight--white {
  background-color: transparent;
}

.link:hover .arrowRight--white use {
  fill: #fff;
}

.link--right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-size: 20px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #8EA3AD;
}

.link--right:hover .arrowRight {
  background-color: #8EA3AD;
}

.link--right:hover .arrowRight use {
  fill: #fff;
}

@media screen and (max-width: 767px) {
  .link--right {
    font-size: 14.4px;
  }
}

.link--center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.link--lightgray {
  color: #464646;
  font-size: 14px;
}

.link--lightgray:hover {
  color: #c8c8c8;
}

.link--lightgray:hover .arrowRight {
  background-color: #c8c8c8;
  border: 1px solid #c8c8c8;
}

.link--lightgray:hover .arrowRight use {
  fill: #fff;
}

.link--blue {
  color: #50A7CE;
}

.simpleTable th,
.simpleTable td {
  padding: 10px 0;
}

.simpleTable th {
  padding-right: 1em;
  white-space: nowrap;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  .simpleTable {
    font-size: 14px;
  }

  .simpleTable th {
    padding-right: 1em;
    vertical-align: top;
    width: 8em;
  }
}

footer {
  background-color: #8ea3ad;
  padding: 50px 0;
  color: #fff;
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  footer {
    padding: 15px 0 20px;
  }
}

.footerLogo {
  width: 150px;
  margin-bottom: 40px;
}

.footerContent nav ul li:not(:last-of-type) {
  margin-bottom: 20px;
}

.footerContent nav a {
  color: #fff;
  font-size: 15px;
  transition: all .6s;
}

.footerContent nav a:hover {
  color: #004f8a;
}

.footerContent nav .subMenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 10px;
}

.footerContent nav .subMenu p:first-of-type {
  padding-right: 10px;
  border-right: 1px solid #fff;
}

@media screen and (min-width: 768px) {
  .footerContent {
    padding-bottom: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .footerContent nav ul li {
    text-align: center;
  }

  .footerContent nav .subMenu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 15px;
  }

  .footerContent nav .subMenu p:first-of-type {
    padding-right: 0;
    border-right: none;
    width: 100%;
    font-size: 15px;
    margin-bottom: 5px;
  }

}

.footerNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.footerNav a {
  color: #fff;
  text-decoration: none;
}

.footerNav a:hover {
  color: #6290a4;
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

.footerNav__list {
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 25px;
  margin-right: 50px;
}

.footerNav__list li {
  margin: 14px 0;
}

@media screen and (min-width: 768px) {
  .footerNav__list {
    width: 230px;
  }
}

@media screen and (max-width: 767px) {
  .footerNav__list {
    text-align: center;
    width: 100%;
    margin-right: 0;
    font-size: 20px;
  }

  .footerNav__list li {
    border-bottom: 1px solid #c8c8c8;
    margin: 0;
  }

  .footerNav__list a {
    display: block;
    padding: 15px 0;
  }
}

.footerNav__head {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #fff;
}

.footerNav__sublist {
  font-size: 20px;
}

.footerPhone {
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 20px;
  margin-top: -20px;
  display: flex;
  align-items: center;
}

.footerPhone .icon {
  width: 40px;
}

@media screen and (max-width: 767px) {
  .footerPhone {
    font-size: 14.4px;
  }
}

.footerPhone .footerPhone__no {
  font-size: 25px;
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .footerPhone .footerPhone__no {
    font-size: 24px;
  }
}

.footerInfo {
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  gap: 0 60px;
}

@media screen and (max-width: 767px) {
  .footerInfo {
    text-align: center;
    margin-top: 40px;
    flex-direction: column;
    gap: 40px 0;
  }
}

@media screen and (max-width: 767px) {
  .footerJMCLogo {
    margin-top: 20px;
  }
}


.footerContact a {
  font-size: 20px;
  display: flex;
  align-items: center;
  padding: 0.6em 1.2em;
  color: #fff;
  border: 1px solid #fff;
  gap: 0 15px;
  transition: all .6s ease;
}

.footerContact a .icon {
  width: 32px;
}

.footerContact a .icon svg {
  width: 100%;
  aspect-ratio: 4/3;
  transition: all .6s ease;
}


.footerContact a:hover {
  color: #8ea3ad;
  background-color: #fff;
}

.footerContact a:hover .icon svg {
  filter: brightness(0) saturate(100%) invert(74%) sepia(11%) saturate(476%) hue-rotate(154deg) brightness(85%) contrast(87%);
}



.footerJMCLogo__image {
  width: 142px;
}

@media screen and (max-width: 767px) {
  .footerJMCLogo__image {
    width: 100px;
    margin: 0 auto 20px;
  }
}

.footerCopyright {
  text-align: center;
  font-size: 12px;
}

@media screen and (max-width: 767px) {
  .footerCopyright {
    font-size: 10px;
  }
}

.toTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #8ea3ad;
  width: 60px;
  height: 60px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  color: #fff;
  border-radius: 30px;
  font-size: 16px;
  z-index: 999999;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.toTop img {
  width: 20px;
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
  margin-bottom: 6px;
}

@media screen and (max-width: 767px) {
  .toTop {
    width: 50px;
    height: 50px;
    right: 20px;
    bottom: 20px;
    font-size: 12px;
  }

  .toTop img {
    width: 18px;
  }
}

.lity {
  z-index: 999999 !important;
}

header {
  z-index: 999999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

header .logo--open {
  display: none;
}

header .header__nav {
  background-color: #fff;
}

header .header__inner {
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: center;
}

@media screen and (max-width: 767px) {
  header .header__inner {
    width: 100%;
    padding: 1.4rem 1rem;
  }
}

body.index .headerLogo {
  opacity: 0;
}

body.index .breadcrumb {
  display: none;
}

body.index header.active .header__nav {
  background-color: transparent;
}

body.index header.active:not(.open) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.6);
}

body.index header.active:not(.initial) .gnav ul.gnav__main>li a {
  color: #000;
}

body.index header.active:not(.initial) .gnav ul.gnav__main>li a:hover {
  color: #80a7c5;
}

body.index header.active:not(.initial) .headerLogo {
  opacity: 1;
}

body.index header .headerLogo--active {
  display: inline-block;
}

body.index header .headerLogo--initial {
  display: none;
}

body.index header.fixed .headerLogo {
  opacity: 1;
}

body.index header.fixed .headerLogo--active {
  display: none;
}

body.index header.fixed .headerLogo--initial {
  display: inline-block;
}

.logo {
  width: 280px;
}

@media screen and (max-width: 767px) {
  .logo {
    width: 10rem;
    padding-bottom: 0;
  }

  body.index header.active:not(.initial) .gnav ul.gnav__main>li a {
    color: #fff;
  }
}

.logo img.headerLogo {
  width: 280px;
  height: 50px;
}

@media screen and (max-width: 767px) {
  .logo img.headerLogo {
    width: 18rem;
    height: 4rem;
  }
}

.logo img.headerLogo--active {
  display: none;
}

.logo img.headerLogo--initial {
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .gnav {
    font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }

  .gnav ul.gnav__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 17px;
  }

  .gnav ul.gnav__main>li {
    margin-left: 60px;
  }

  .gnav ul.gnav__main>li a {
    text-decoration: none;
    color: #000000;
    -webkit-transition: color 0.2s linear;
    transition: color 0.2s linear;
    display: flex;
    align-items: center;
    height: 90px;
  }

  .gnav ul.gnav__main>li a:hover {
    color: #80a7c5;
  }

  .gnav ul.gnav__main>li.gnav__openSub:hover a {
    color: #80a7c5;
  }

  .gnav ul.gnav__main>li.gnav__openSub:hover .gnav__sub {
    opacity: 1;
    display: block;
    -webkit-animation: opacity 0.2s linear forwards;
    animation: opacity 0.2s linear forwards;
  }

  .gnav .gnav__sub {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    margin: 0 calc(50% - 50vw);
    padding: 20px calc(50vw - 50%);
    z-index: 2;
    background-color: rgba(0, 79, 138, 0.5);
    opacity: 0;
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1240px) {
  .gnav .gnav__sub {
    margin: 0;
    padding: 20px 0;
  }
}

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

  .gnav .gnav__sub .inner,
  .gnav .gnav__sub header .header__inner,
  header .gnav .gnav__sub .header__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .gnav .gnav__sub .gnav__sub__title {
    margin-top: 20px;
    color: #ffffff;
    font-size: 35px;
  }

  .gnav .gnav__sub.gnav__sub--left ul {
    margin-left: 50px;
    margin-right: auto;
  }

  .gnav .gnav__sub ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
  }

  .gnav .gnav__sub ul li {
    margin-left: 10px;
  }

  .gnav .gnav__sub ul li a {
    display: block;
    width: 160px;
    position: relative;
    height: initial;
  }

  .gnav .gnav__sub ul li a p {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 18px;
    color: #004F8A;
    z-index: 3;
    width: 100%;
    text-align: center;
  }

  .gnav .gnav__sub ul li a:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: rgba(0, 79, 138, 0);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  .gnav .gnav__sub ul li a:hover:before {
    background-color: rgba(0, 79, 138, 0.6);
  }

  .gnav .gnav__sub ul li a:hover p {
    color: #ffffff;
  }
}

@media screen and (max-width: 767px) {
  body.index header .header__menu {
    background-image: url("/img/common/menubtn_white.svg");
  }

  body.index header.fixed .header__menu {
    background-image: url("/img/common/menubtn.svg");
  }

  body.index header.open .header__menu {
    background-image: none;
  }

  header .gnav {
    display: none;
  }

  header .header__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  header .header__menu {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("/img/common/menubtn.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  header.open .header__nav {
    position: fixed;
    background-color: rgba(0, 79, 138, 0.5) !important;
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    overflow-y: scroll;
  }

  header.open .header__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #004F8A;
    padding: 1.4rem 1rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
  }

  header.open .logo--close {
    display: none;
  }

  header.open .logo--open {
    display: block;
  }

  header.open .header__menu {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    background-image: none;
  }

  header.open .header__menu:before,
  header.open .header__menu:after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
  }

  header.open .header__menu:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  header.open .header__inner {
    display: block;
    height: auto;
    padding: 0;
    position: relative;
  }

  header.open .gnav {
    display: block;
    font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    padding-bottom: 25px;
  }

  header.open .gnav a {
    color: #fff;
    text-decoration: none;
    padding: 16px 6px 12px;
  }

  header.open .gnav .gnav__sub ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -0.35rem;
  }

  header.open .gnav .gnav__sub ul li {
    width: calc(33.3333% - 0.7rem);
    margin: 0.35rem;
  }

  header.open .gnav .gnav__sub ul a {
    display: block;
    background-color: #004F8A;
    text-align: center;
    font-size: 1.5rem;
    height: 100%;
  }

  header.open .gnav .gnav__sub ul .gnav__image {
    margin-bottom: 0.9rem;
  }

  header.open .gnav .gnav__sub ul .gnav__image img {
    width: 3.5rem;
  }

  header.open .gnav .gnav__sub ul small {
    display: block;
    font-size: 0.9rem;
  }

  header.open .gnav .gnav__main>li:not(.gnav__openSub) {
    width: 89.96089%;
    margin: 0.7rem auto;
  }

  header.open .gnav .gnav__main>li:not(.gnav__openSub) a {
    display: block;
    background-color: #004F8A;
    font-size: 1.25rem;
    padding: 2.4rem 1.2rem;
    background-image: url("/img/common/arrow_right_04.svg");
    background-repeat: no-repeat;
    background-position: center right 1.2rem;
    background-size: 1rem;
  }

  header.open .gnav .gnav__main>li:not(.gnav__openSub) a.gnav__contact {
    background-image: url("/img/common/arrow_right_04_down.svg");
    background-position: center right 0.9rem;
    background-size: 2rem;
  }

  header.open .gnav .gnav__main>li.gnav__openSub {
    margin-top: -0.35rem;
  }

  header.open .gnav .gnav__main li.gnav__openSub+li {
    margin-top: 0.35rem;
  }

  header.open .gnav .gnav__main .gnav__contact__sub li {
    margin-top: 0.35rem;
  }

  header.open .gnav .gnav__main .gnav__contact__sub li a {
    background-color: #50A7CE;
  }
}

.breadcrumb {
  width: 100%;
  position: absolute;
  z-index: 1;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .breadcrumb {
    display: none;
  }
}

.breadcrumb--relative {
  position: relative;
}

.breadcrumb:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  content: '';
  background-color: #004F8A;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.breadcrumb ol {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 15px;
}

.breadcrumb ol li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.breadcrumb ol li a {
  color: #fff;
  text-decoration: none;
}

.breadcrumb ol li:not(:last-child):after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 24px;
  background-image: url("/img/common/arrow_right_04.svg");
  background-size: contain;
  margin-left: 30px;
  margin-right: 30px;
}

body.productDetail .breadcrumb:before,
body.topicsDetail .breadcrumb:before,
body.caseDetail .breadcrumb:before,
body.subDetail .breadcrumb:before {
  background-color: #fff;
  opacity: 1;
}

body.productDetail .breadcrumb ol li a,
body.topicsDetail .breadcrumb ol li a,
body.caseDetail .breadcrumb ol li a,
body.subDetail .breadcrumb ol li a {
  color: #343434;
}

body.productDetail .breadcrumb ol li:not(:last-child):after,
body.topicsDetail .breadcrumb ol li:not(:last-child):after,
body.caseDetail .breadcrumb ol li:not(:last-child):after,
body.subDetail .breadcrumb ol li:not(:last-child):after {
  background-image: url("/img/common/arrow_right_04_black.svg");
}

.anim.fadeIn {
  opacity: 0;
  -webkit-transition: opacity 0.6s linear;
  transition: opacity 0.6s linear;
}

.anim.fadeIn.active {
  opacity: 1;
}

.anim.slideUp {
  opacity: 0;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
}

.anim.slideUp.active {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.anim.slideUpGroup *[class^="slideUp__"],
.anim.slideUpGroup *[class*="slideUp__"] {
  opacity: 0;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
}

.anim.slideUpGroup .slideUp__1 {
  -webkit-transition: all 0.6s ease-out 0.1s;
  transition: all 0.6s ease-out 0.1s;
}

.anim.slideUpGroup .slideUp__2 {
  -webkit-transition: all 0.6s ease-out 0.2s;
  transition: all 0.6s ease-out 0.2s;
}

.anim.slideUpGroup .slideUp__3 {
  -webkit-transition: all 0.6s ease-out 0.3s;
  transition: all 0.6s ease-out 0.3s;
}

.anim.slideUpGroup .slideUp__4 {
  -webkit-transition: all 0.6s ease-out 0.4s;
  transition: all 0.6s ease-out 0.4s;
}

.anim.slideUpGroup .slideUp__5 {
  -webkit-transition: all 0.6s ease-out 0.5s;
  transition: all 0.6s ease-out 0.5s;
}

.anim.slideUpGroup .slideUp__6 {
  -webkit-transition: all 0.6s ease-out 0.6s;
  transition: all 0.6s ease-out 0.6s;
}

.anim.slideUpGroup .slideUp__7 {
  -webkit-transition: all 0.6s ease-out 0.7s;
  transition: all 0.6s ease-out 0.7s;
}

.anim.slideUpGroup .slideUp__8 {
  -webkit-transition: all 0.6s ease-out 0.8s;
  transition: all 0.6s ease-out 0.8s;
}

.anim.slideUpGroup .slideUp__9 {
  -webkit-transition: all 0.6s ease-out 0.9s;
  transition: all 0.6s ease-out 0.9s;
}

.anim.slideUpGroup .slideUp__10 {
  -webkit-transition: all 0.6s ease-out 1s;
  transition: all 0.6s ease-out 1s;
}

.anim.slideUpGroup .slideUp__11 {
  -webkit-transition: all 0.6s ease-out 1.1s;
  transition: all 0.6s ease-out 1.1s;
}

.anim.slideUpGroup .slideUp__12 {
  -webkit-transition: all 0.6s ease-out 1.2s;
  transition: all 0.6s ease-out 1.2s;
}

.anim.slideUpGroup .slideUp__13 {
  -webkit-transition: all 0.6s ease-out 1.3s;
  transition: all 0.6s ease-out 1.3s;
}

.anim.slideUpGroup .slideUp__14 {
  -webkit-transition: all 0.6s ease-out 1.4s;
  transition: all 0.6s ease-out 1.4s;
}

.anim.slideUpGroup .slideUp__15 {
  -webkit-transition: all 0.6s ease-out 1.5s;
  transition: all 0.6s ease-out 1.5s;
}

.anim.slideUpGroup .slideUp__16 {
  -webkit-transition: all 0.6s ease-out 1.6s;
  transition: all 0.6s ease-out 1.6s;
}

.anim.slideUpGroup .slideUp__17 {
  -webkit-transition: all 0.6s ease-out 1.7s;
  transition: all 0.6s ease-out 1.7s;
}

.anim.slideUpGroup .slideUp__18 {
  -webkit-transition: all 0.6s ease-out 1.8s;
  transition: all 0.6s ease-out 1.8s;
}

.anim.slideUpGroup .slideUp__19 {
  -webkit-transition: all 0.6s ease-out 1.9s;
  transition: all 0.6s ease-out 1.9s;
}

.anim.slideUpGroup .slideUp__20 {
  -webkit-transition: all 0.6s ease-out 2s;
  transition: all 0.6s ease-out 2s;
}


.anim.slideUpGroup .slideUp__21 {
  -webkit-transition: all 0.6s ease-out 2.1s;
  transition: all 0.6s ease-out 2.1s;
}

.anim.slideUpGroup.active *[class^="slideUp__"],
.anim.slideUpGroup.active *[class*="slideUp__"] {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn-Out {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeIn-Out {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.flowList .flowList__item {
  opacity: 0;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
}

.flowList .flowList__item p {
  opacity: 0;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
}

.flowList .flowList__item:nth-child(1) {
  -webkit-transition: all 0.6s ease-out 0.1s;
  transition: all 0.6s ease-out 0.1s;
}

.flowList .flowList__item:nth-child(1) p {
  -webkit-transition: all 0.6s ease-out 0.2s;
  transition: all 0.6s ease-out 0.2s;
}

.flowList .flowList__item:nth-child(2) {
  -webkit-transition: all 0.6s ease-out 0.2s;
  transition: all 0.6s ease-out 0.2s;
}

.flowList .flowList__item:nth-child(2) p {
  -webkit-transition: all 0.6s ease-out 0.3s;
  transition: all 0.6s ease-out 0.3s;
}

.flowList .flowList__item:nth-child(3) {
  -webkit-transition: all 0.6s ease-out 0.3s;
  transition: all 0.6s ease-out 0.3s;
}

.flowList .flowList__item:nth-child(3) p {
  -webkit-transition: all 0.6s ease-out 0.4s;
  transition: all 0.6s ease-out 0.4s;
}

.flowList .flowList__item:nth-child(4) {
  -webkit-transition: all 0.6s ease-out 0.4s;
  transition: all 0.6s ease-out 0.4s;
}

.flowList .flowList__item:nth-child(4) p {
  -webkit-transition: all 0.6s ease-out 0.5s;
  transition: all 0.6s ease-out 0.5s;
}

.flowList .flowList__item:nth-child(5) {
  -webkit-transition: all 0.6s ease-out 0.5s;
  transition: all 0.6s ease-out 0.5s;
}

.flowList .flowList__item:nth-child(5) p {
  -webkit-transition: all 0.6s ease-out 0.6s;
  transition: all 0.6s ease-out 0.6s;
}

.flowList .flowList__item:nth-child(6) {
  -webkit-transition: all 0.6s ease-out 0.6s;
  transition: all 0.6s ease-out 0.6s;
}

.flowList .flowList__item:nth-child(6) p {
  -webkit-transition: all 0.6s ease-out 0.7s;
  transition: all 0.6s ease-out 0.7s;
}

.flowList .flowList__item:nth-child(7) {
  -webkit-transition: all 0.6s ease-out 0.7s;
  transition: all 0.6s ease-out 0.7s;
}

.flowList .flowList__item:nth-child(7) p {
  -webkit-transition: all 0.6s ease-out 0.8s;
  transition: all 0.6s ease-out 0.8s;
}

.flowList .flowList__item:nth-child(8) {
  -webkit-transition: all 0.6s ease-out 0.8s;
  transition: all 0.6s ease-out 0.8s;
}

.flowList .flowList__item:nth-child(8) p {
  -webkit-transition: all 0.6s ease-out 0.9s;
  transition: all 0.6s ease-out 0.9s;
}

.flowList .flowList__item:nth-child(9) {
  -webkit-transition: all 0.6s ease-out 0.9s;
  transition: all 0.6s ease-out 0.9s;
}

.flowList .flowList__item:nth-child(9) p {
  -webkit-transition: all 0.6s ease-out 1s;
  transition: all 0.6s ease-out 1s;
}

.flowList .flowList__item:nth-child(10) {
  -webkit-transition: all 0.6s ease-out 1s;
  transition: all 0.6s ease-out 1s;
}

.flowList .flowList__item:nth-child(10) p {
  -webkit-transition: all 0.6s ease-out 1.1s;
  transition: all 0.6s ease-out 1.1s;
}

.flowList .flowList__item:nth-child(11) {
  -webkit-transition: all 0.6s ease-out 1.1s;
  transition: all 0.6s ease-out 1.1s;
}

.flowList .flowList__item:nth-child(11) p {
  -webkit-transition: all 0.6s ease-out 1.2s;
  transition: all 0.6s ease-out 1.2s;
}

.flowList .flowList__item:nth-child(12) {
  -webkit-transition: all 0.6s ease-out 1.2s;
  transition: all 0.6s ease-out 1.2s;
}

.flowList .flowList__item:nth-child(12) p {
  -webkit-transition: all 0.6s ease-out 1.3s;
  transition: all 0.6s ease-out 1.3s;
}

.flowList .flowList__item:nth-child(13) {
  -webkit-transition: all 0.6s ease-out 1.3s;
  transition: all 0.6s ease-out 1.3s;
}

.flowList .flowList__item:nth-child(13) p {
  -webkit-transition: all 0.6s ease-out 1.4s;
  transition: all 0.6s ease-out 1.4s;
}

.flowList .flowList__item:nth-child(14) {
  -webkit-transition: all 0.6s ease-out 1.4s;
  transition: all 0.6s ease-out 1.4s;
}

.flowList .flowList__item:nth-child(14) p {
  -webkit-transition: all 0.6s ease-out 1.5s;
  transition: all 0.6s ease-out 1.5s;
}

.flowList .flowList__item:nth-child(15) {
  -webkit-transition: all 0.6s ease-out 1.5s;
  transition: all 0.6s ease-out 1.5s;
}

.flowList .flowList__item:nth-child(15) p {
  -webkit-transition: all 0.6s ease-out 1.6s;
  transition: all 0.6s ease-out 1.6s;
}

.flowList .flowList__item:nth-child(16) {
  -webkit-transition: all 0.6s ease-out 1.6s;
  transition: all 0.6s ease-out 1.6s;
}

.flowList .flowList__item:nth-child(16) p {
  -webkit-transition: all 0.6s ease-out 1.7s;
  transition: all 0.6s ease-out 1.7s;
}

.flowList .flowList__item:nth-child(17) {
  -webkit-transition: all 0.6s ease-out 1.7s;
  transition: all 0.6s ease-out 1.7s;
}

.flowList .flowList__item:nth-child(17) p {
  -webkit-transition: all 0.6s ease-out 1.8s;
  transition: all 0.6s ease-out 1.8s;
}

.flowList .flowList__item:nth-child(18) {
  -webkit-transition: all 0.6s ease-out 1.8s;
  transition: all 0.6s ease-out 1.8s;
}

.flowList .flowList__item:nth-child(18) p {
  -webkit-transition: all 0.6s ease-out 1.9s;
  transition: all 0.6s ease-out 1.9s;
}

.flowList .flowList__item:nth-child(19) {
  -webkit-transition: all 0.6s ease-out 1.9s;
  transition: all 0.6s ease-out 1.9s;
}

.flowList .flowList__item:nth-child(19) p {
  -webkit-transition: all 0.6s ease-out 2s;
  transition: all 0.6s ease-out 2s;
}

.flowList .flowList__item:nth-child(20) {
  -webkit-transition: all 0.6s ease-out 2s;
  transition: all 0.6s ease-out 2s;
}

.flowList .flowList__item:nth-child(20) p {
  -webkit-transition: all 0.6s ease-out 2.1s;
  transition: all 0.6s ease-out 2.1s;
}

.flowList.active .flowList__item {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.flowList.active .flowList__item p {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.caseList .caseList__item {
  opacity: 0;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
}

.caseList .caseList__item:nth-child(4n-2) {
  -webkit-transition: all 0.6s linear 0.1s;
  transition: all 0.6s linear 0.1s;
}

.caseList .caseList__item:nth-child(4n-1) {
  -webkit-transition: all 0.6s linear 0.2s;
  transition: all 0.6s linear 0.2s;
}

.caseList .caseList__item:nth-child(4n) {
  -webkit-transition: all 0.6s linear 0.3s;
  transition: all 0.6s linear 0.3s;
}

.caseList .caseList__item.active {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.slideRight {
  opacity: 0;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
}

.slideRight.active {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.slideLeft {
  opacity: 0;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  -webkit-transform: translateX(100px);
  -ms-transform: translateX(100px);
  transform: translateX(100px);
}

.slideLeft.active {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.swipeLeft {
  position: relative;
}

.swipeLeft .column__item__inner {
  position: relative;
  z-index: 1;
  opacity: 0;
}

.swipeLeft:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  -webkit-transition: all 0.6s linear 0.6s;
  transition: all 0.6s linear 0.6s;
  position: absolute;
  top: 0;
  right: 0;
}

.swipeLeft.active .column__item__inner {
  opacity: 1;
}

.swipeLeft.active:after {
  width: 0px;
}


body.index .mv .mv__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

body.index .mv .mv__video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

body.index .mv .mv__video:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  content: '';
  display: block;
  background-image: url("/img/index/pattern-06.png");
  opacity: 0.4;
}

body.index .mv .mv__logo {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 9;
  background-color: #fff;
}

body.index .mv .mv__logo img {
  width: 50%;
  opacity: 0;
}

body.index .mv .mv__logo.active img {
  -webkit-animation: fadeIn-Out 2.0s linear forwards;
  animation: fadeIn-Out 2.0s linear forwards;
}



body.index .mv .mv__arrow {
  position: absolute;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 55px;
  display: block;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  body.index .mv .mv__arrow {
    width: 3rem;
    bottom: 1rem;
  }
}

body.index .pickup {
  position: absolute;
  z-index: 3;
  background-color: #fff;
  opacity: 0;
  -webkit-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: all 0.6s ease-out 0.3s;
  transition: all 0.6s ease-out 0.3s;
}

body.index .pickup.active {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

@media screen and (max-width: 767px) {
  body.index .pickup.active {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
}

@media screen and (min-width: 768px) {
  body.index .pickup {
    width: 240px;
    bottom: 50px;
    right: 90px;
  }
}

@media screen and (max-width: 767px) {
  body.index .pickup {
    width: 30rem;
    bottom: 8.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 767px) {
  body.index .pickup .pickup__list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

body.index .pickup .pickup__head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  font-size: 20px;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 6px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  body.index .pickup .pickup__head {
    margin: 4px 6px;
    font-size: 1.5rem;
  }
}

body.index .pickup .pickup__image {
  position: relative;
  padding: 20px 10px 0;
  background-color: #c2e0ee;
}

@media screen and (max-width: 767px) {
  body.index .pickup .pickup__image {
    width: 14rem;
    padding: 10px 4px;
  }

  body.index .pickup .pickup__image picture,
  body.index .pickup .pickup__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

body.index .pickup .pickup__title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  padding: 5px;
  line-height: 1.2;
  color: #fff;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.index .pickup .pickup__title:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(80, 167, 206, 0.8);
  mix-blend-mode: multiply;
  z-index: 1;
}

body.index .pickup .pickup__title span {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  body.index .pickup .pickup__title {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
}

body.index .pickup .pickup__text {
  padding: 1em;
  font-size: 10px;
}

@media screen and (max-width: 767px) {
  body.index .pickup .pickup__text {
    width: 15.5rem;
    font-size: 0.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

body.index .pickup .pickup__dots {
  line-height: 1;
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
}

@media screen and (max-width: 767px) {
  body.index .pickup .pickup__dots {
    bottom: -2.5rem;
  }
}

body.index .pickup .pickup__dots ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

body.index .pickup .pickup__dots ul li {
  margin: 0 10px;
  height: 15px;
}

@media screen and (max-width: 767px) {
  body.index .pickup .pickup__dots ul li {
    height: 0.75rem;
    margin: 0 0.4rem;
  }
}

body.index .pickup .pickup__dots ul li button {
  border: 1px solid #fff;
  text-indent: -9999px;
  width: 15px;
  height: 15px;
  background-color: transparent;
  border-radius: 99px;
  outline: none;
}

@media screen and (max-width: 767px) {
  body.index .pickup .pickup__dots ul li button {
    width: 0.75rem;
    height: 0.75rem;
  }
}

body.index .pickup .pickup__dots ul li.slick-active button {
  background-color: #fff;
}

body.index .product {
  padding: 145px 0 0;
}

@media screen and (max-width: 767px) {
  body.index .product {
    padding: 40px 0 0;
  }
}

body.index .productList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 1.04167vw;
}

@media screen and (max-width: 1200px) {
  body.index .productList {
    font-size: 12.5px;
  }
}

body.index .productList .productList__item {
  width: calc(100% / 3);
  height: 27.5em;
  position: relative;
  overflow: hidden;
  display: block;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  body.index .productList .productList__item {
    width: 100%;
    height: 20rem;
  }
}

body.index .productList .productList__item:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #004F8A;
  opacity: 0.3;
  z-index: 2;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

body.index .productList .productList__item:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 79, 138, 0.7);
  mix-blend-mode: multiply;
  z-index: 2;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

body.index .productList .productList__item:hover picture img {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}

body.index .productList .productList__item:hover .productList__text {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body.index .productList .productList__item:hover .productList__detail {
  max-height: 10em;
}

body.index .productList .productList__item:hover .productList__btn {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body.index .productList .productList__item:hover:before {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

body.index .productList .productList__item:hover:after {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body.index .productList picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

body.index .productList .productList__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 3;
  color: #fff;
  text-align: center;
}

body.index .productList .productList__head__en {
  font-size: 40px;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.05em;
  margin-bottom: 0.4em;
  -webkit-transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

@media screen and (max-width: 767px) {
  body.index .productList .productList__head__en {
    font-size: 21.6px;
    margin-bottom: 0.5em;
    line-height: 1;
  }
}

body.index .productList .productList__head__ja {
  font-size: 22px;
  letter-spacing: 0.1em;
  -webkit-transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.index .productList .productList__head__ja {
    font-size: 14.4px;
    line-height: 1;
  }
}

body.index .productList .productList__text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: translateY(5.20833vw);
  -ms-transform: translateY(5.20833vw);
  transform: translateY(5.20833vw);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

@media screen and (max-width: 767px) {
  body.index .productList .productList__text {
    font-size: 14px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

body.index .productList .productList__detail {
  max-height: 0;
  overflow: hidden;
  width: 22em;
  margin: 0 auto;
  line-height: 1.8em;
  text-align: left;
  padding-top: 3em;
  -webkit-transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

@media screen and (max-width: 767px) {
  body.index .productList .productList__detail {
    display: none;
  }
}

body.index .productList .productList__btn {
  position: relative;
  width: 100%;
  margin-top: auto;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.4s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  padding: 0.75em;
}

body.index .productList .productList__btn:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 79, 138, 0.6);
  mix-blend-mode: multiply;
  z-index: 1;
}

body.index .productList .productList__btn .productList__btn__inner {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  body.index .productList .productList__btn {
    display: none;
  }
}

body.index .productList .productList__icon {
  width: 3em;
  margin: 0 5px;
}

body.index .productList .productList__btnLabel {
  font-size: 22px;
  margin: 0 18px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.index .productList .productList__arrow {
  width: 2em;
  line-height: 1;
}

body.index .productList .productList__arrow .arrowRight {
  width: 2em;
  height: 2em;
}

body.index .introduction {
  background-image: url(../img/index/bg_vision.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
  body.index .introduction {
    background-image: url(../img/index/bg_vision_sp.jpg);
    padding-top: 90px;
  }
}

body.index .vision {
  text-align: center;
  font-size: 45px;
  line-height: 2em;
  letter-spacing: 0.09em;
  padding-top: 200px;
  padding-bottom: 180px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.index .vision {
    font-size: 20px;
    padding-bottom: 80px;
    padding-top: 0;
  }
}

body.index .vision span[class^="slideUp-"],
body.index .vision span[class*="slideUp-"] {
  opacity: 0;
  -webkit-transform: translateY(1em);
  -ms-transform: translateY(1em);
  transform: translateY(1em);
  display: inline-block;
}

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

  body.index .vision span[class^="slideUp-"].slideUp-pc1,
  body.index .vision span[class*="slideUp-"].slideUp-pc1 {
    -webkit-transition: all 0.6s ease-out 0.6s;
    transition: all 0.6s ease-out 0.6s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc2,
  body.index .vision span[class*="slideUp-"].slideUp-pc2 {
    -webkit-transition: all 0.6s ease-out 1.2s;
    transition: all 0.6s ease-out 1.2s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc3,
  body.index .vision span[class*="slideUp-"].slideUp-pc3 {
    -webkit-transition: all 0.6s ease-out 1.8s;
    transition: all 0.6s ease-out 1.8s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc4,
  body.index .vision span[class*="slideUp-"].slideUp-pc4 {
    -webkit-transition: all 0.6s ease-out 2.4s;
    transition: all 0.6s ease-out 2.4s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc5,
  body.index .vision span[class*="slideUp-"].slideUp-pc5 {
    -webkit-transition: all 0.6s ease-out 3s;
    transition: all 0.6s ease-out 3s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc6,
  body.index .vision span[class*="slideUp-"].slideUp-pc6 {
    -webkit-transition: all 0.6s ease-out 3.6s;
    transition: all 0.6s ease-out 3.6s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc7,
  body.index .vision span[class*="slideUp-"].slideUp-pc7 {
    -webkit-transition: all 0.6s ease-out 4.2s;
    transition: all 0.6s ease-out 4.2s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc8,
  body.index .vision span[class*="slideUp-"].slideUp-pc8 {
    -webkit-transition: all 0.6s ease-out 4.8s;
    transition: all 0.6s ease-out 4.8s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc9,
  body.index .vision span[class*="slideUp-"].slideUp-pc9 {
    -webkit-transition: all 0.6s ease-out 5.4s;
    transition: all 0.6s ease-out 5.4s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-pc10,
  body.index .vision span[class*="slideUp-"].slideUp-pc10 {
    -webkit-transition: all 0.6s ease-out 6s;
    transition: all 0.6s ease-out 6s;
  }
}

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

  body.index .vision span[class^="slideUp-"].slideUp-sp1,
  body.index .vision span[class*="slideUp-"].slideUp-sp1 {
    -webkit-transition: all 0.6s ease-out 0.6s;
    transition: all 0.6s ease-out 0.6s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp2,
  body.index .vision span[class*="slideUp-"].slideUp-sp2 {
    -webkit-transition: all 0.6s ease-out 1.2s;
    transition: all 0.6s ease-out 1.2s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp3,
  body.index .vision span[class*="slideUp-"].slideUp-sp3 {
    -webkit-transition: all 0.6s ease-out 1.8s;
    transition: all 0.6s ease-out 1.8s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp4,
  body.index .vision span[class*="slideUp-"].slideUp-sp4 {
    -webkit-transition: all 0.6s ease-out 2.4s;
    transition: all 0.6s ease-out 2.4s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp5,
  body.index .vision span[class*="slideUp-"].slideUp-sp5 {
    -webkit-transition: all 0.6s ease-out 3s;
    transition: all 0.6s ease-out 3s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp6,
  body.index .vision span[class*="slideUp-"].slideUp-sp6 {
    -webkit-transition: all 0.6s ease-out 3.6s;
    transition: all 0.6s ease-out 3.6s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp7,
  body.index .vision span[class*="slideUp-"].slideUp-sp7 {
    -webkit-transition: all 0.6s ease-out 4.2s;
    transition: all 0.6s ease-out 4.2s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp8,
  body.index .vision span[class*="slideUp-"].slideUp-sp8 {
    -webkit-transition: all 0.6s ease-out 4.8s;
    transition: all 0.6s ease-out 4.8s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp9,
  body.index .vision span[class*="slideUp-"].slideUp-sp9 {
    -webkit-transition: all 0.6s ease-out 5.4s;
    transition: all 0.6s ease-out 5.4s;
  }

  body.index .vision span[class^="slideUp-"].slideUp-sp10,
  body.index .vision span[class*="slideUp-"].slideUp-sp10 {
    -webkit-transition: all 0.6s ease-out 6s;
    transition: all 0.6s ease-out 6s;
  }
}

body.index .vision.active span[class^="slideUp-"],
body.index .vision.active span[class*="slideUp-"] {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body.index .visionBtn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-top: 120px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  padding-left: 58px;
}

@media screen and (max-width: 767px) {
  body.index .visionBtn {
    margin-top: 50px;
    padding-left: 28px;
  }
}

body.index .visionBtn .visionBtn__label {
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1;
  margin-left: 14px;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

@media screen and (max-width: 767px) {
  body.index .visionBtn .visionBtn__label {
    opacity: 1;
    line-height: 28px;
    font-size: 18px;
  }
}

body.index .visionBtn .arrowRight {
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

body.index .visionBtn .arrowRight use {
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

@media screen and (max-width: 767px) {
  body.index .visionBtn .arrowRight {
    width: 28px;
    height: 28px;
    left: 0;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

body.index .visionBtn:hover .arrowRight {
  background-color: #004f8a;
  -webkit-box-shadow: 3px 3px 6px 0 rgba(0, 79, 138, 0.3);
  box-shadow: 3px 3px 6px 0 rgba(0, 79, 138, 0.3);
  left: 0;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

body.index .visionBtn:hover .arrowRight use {
  fill: #fff;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

body.index .visionBtn:hover .visionBtn__label {
  opacity: 1;
  -webkit-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in;
}

body.index .who {
  padding-bottom: 145px;
}

@media screen and (max-width: 767px) {
  body.index .who {
    padding-bottom: 90px;
  }
}

@media screen and (min-width: 768px) {
  body.index .whoContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}

body.index .whoContent__text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

body.index .whoContent__inner {
  height: 100%;
  position: relative;
}

@media screen and (max-width: 767px) {
  body.index .whoContent__item {
    margin-top: 70px;
  }
}

@media screen and (min-width: 768px) {
  body.index .whoContent__item {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

body.index .whoContent__item--01 .whoContent__title {
  color: #004F8A;
}

@media screen and (min-width: 768px) {
  body.index .whoContent__item--02 {
    display: none;
  }
}

body.index .whoContent__item--02 .whoContent__title {
  color: #8EA3AD;
}

@media screen and (min-width: 768px) {
  body.index .whoContent__item--03 {
    display: none;
  }
}

body.index .whoContent__item--03 .whoContent__title {
  color: #50A7CE;
}

body.index .whoContent__title {
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-size: 40px;
  line-height: 1.6;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  body.index .whoContent__title {
    margin-bottom: 0.5em;
    font-size: 21.6px;
  }
}

body.index .whoContent__detail {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  body.index .whoContent__detail {
    font-size: 14px;
  }
}

body.index .whoContent__image {
  font-size: 1.17647vw;
  position: relative;
  width: 42.3em;
  height: 42.5em;
  margin-left: 2.5em;
}

@media screen and (max-width: 1200px) {
  body.index .whoContent__image {
    font-size: 14.11765px;
  }
}

@media screen and (min-width: 1700px) {
  body.index .whoContent__image {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  body.index .whoContent__image {
    margin-left: auto;
    font-size: 0.72rem;
    margin-right: auto;
  }
}

body.index .whoContent__image.active .circle {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

body.index .whoContent__image.active .circle__inner {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body.index .whoContent__image.active .baseCircle:after {
  -webkit-animation: rotate-circle-right 1.0s linear 0.2s forwards;
  animation: rotate-circle-right 1.0s linear 0.2s forwards;
}

body.index .whoContent__image.active .baseCircle:before {
  -webkit-animation: rotate-circle-left 1.0s linear 0.2s forwards;
  animation: rotate-circle-left 1.0s linear 0.2s forwards;
}

body.index .baseCircle {
  width: 26.5em;
  height: 26.5em;
  border-radius: 49.95em;
  background-color: #c2e0ee;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  top: 7.3em;
  left: 5.6em;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

body.index .baseCircle:before,
body.index .baseCircle:after {
  content: '';
  display: block;
  position: absolute;
  width: 26.5em;
  height: 26.5em;
  top: 0;
  background-color: #fff;
}

body.index .baseCircle:after {
  left: 50%;
  z-index: 3;
  -webkit-transform-origin: left 13.25em;
  -ms-transform-origin: left 13.25em;
  transform-origin: left 13.25em;
}

body.index .baseCircle:before {
  right: 50%;
  z-index: 2;
  -webkit-transform-origin: right 13.25em;
  -ms-transform-origin: right 13.25em;
  transform-origin: right 13.25em;
}

body.index .baseCircle span {
  position: absolute;
  width: 25.5em;
  height: 25.5em;
  border-radius: 999px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 4;
}

@-webkit-keyframes rotate-circle-right {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    background: #fff;
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background: #fff;
  }

  50.01% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    background: #c2e0ee;
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    background: #c2e0ee;
  }
}

@keyframes rotate-circle-right {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    background: #fff;
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background: #fff;
  }

  50.01% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    background: #c2e0ee;
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    background: #c2e0ee;
  }
}

@-webkit-keyframes rotate-circle-left {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@keyframes rotate-circle-left {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

body.index .circle {
  width: 20em;
  height: 20em;
  position: absolute;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

body.index .circle .circle__link {
  text-decoration: none;
  border-radius: 999px;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91);
  transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

body.index .circle .circle__link:hover {
  -webkit-transform: scale(1.15) !important;
  -ms-transform: scale(1.15) !important;
  transform: scale(1.15) !important;
  -webkit-box-shadow: 10px 10px 10px 0 rgba(0, 79, 138, 0.3);
  box-shadow: 10px 10px 10px 0 rgba(0, 79, 138, 0.3);
}

body.index .circle--01 {
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91);
  transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91);
}

body.index .circle--01 .circle__link {
  background-image: url(../img/index/circle_01.webp);
  background-size: contain;
  background-repeat: no-repeat;
  color: #004F8A;
}

body.index .circle--01 .circle__inner {
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.2s;
  transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.2s;
}

body.index .circle--01 .circle__illust {
  width: 4em;
  margin: 1em auto 0;
}

body.index .circle--02 {
  top: 8.75em;
  right: 0;
  z-index: 2;
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.2s;
  transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.2s;
}

body.index .circle--02 .circle__link {
  background-image: url(../img/index/circle_02.webp);
  background-size: contain;
  background-repeat: no-repeat;
  color: #8EA3AD;
}

body.index .circle--02 .circle__inner {
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.4s;
  transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.4s;
}

body.index .circle--02 .circle__illust {
  width: 4.3em;
  margin: 1em auto 0;
}

body.index .circle--03 {
  bottom: 0;
  left: 0;
  z-index: 2;
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.4s;
  transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.4s;
}

body.index .circle--03 .circle__link {
  background-image: url(../img/index/circle_03.webp);
  background-size: contain;
  background-repeat: no-repeat;
  color: #50A7CE;
}

body.index .circle--03 .circle__inner {
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.6s;
  transition: all 0.3s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.6s;
}

body.index .circle--03 .circle__illust {
  width: 7.3em;
  margin: 1em auto 0;
}

body.index .circle .circle__inner {
  opacity: 0;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  text-align: center;
  line-height: 1.2;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.index .circle .circle__text {
  font-size: 1.75em;
}


body.index .tecnologyList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

body.index .tecnologyList .tecnologyList__item {
  width: 49.21875%;
  margin-right: 1.5625%;
}

@media screen and (max-width: 767px) {
  body.index .tecnologyList .tecnologyList__item {
    width: 100%;
    margin-right: 0;
    margin-top: 25px;
  }
}

body.index .tecnologyList .tecnologyList__item:nth-child(even) {
  margin-right: 0;
}

@media screen and (min-width: 768px) {
  body.index .tecnologyList .tecnologyList__item:nth-child(n+3) {
    margin-top: 20px;
  }
}

body.index .panelLink {
  text-decoration: none;
  color: #464646;
  position: relative;
}

@media screen and (min-width: 768px) {
  body.index .panelLink {
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

body.index .panelLink .panelLink__image {
  width: 47.61905%;
}

@media screen and (max-width: 767px) {
  body.index .panelLink .panelLink__image {
    width: 100%;
  }
}

body.index .panelLink .panelLink__text {
  width: 52.38095%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 50px 20px 20px;
}

@media screen and (max-width: 767px) {
  body.index .panelLink .panelLink__text {
    width: 100%;
    background-color: #fff;
    padding: 35px 15px 15px;
  }
}

body.index .panelLink .panelLink__title {
  margin-left: -47.61905%;
  font-size: 38px;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-align: right;
  margin-bottom: auto;
}

@media screen and (max-width: 767px) {
  body.index .panelLink .panelLink__title {
    font-size: 24px;
    margin-top: -50.4px;
    margin-bottom: 20px;
    margin-left: 0;
    text-align: left;
    text-shadow: #fff 0px 0 6px, #fff 0px 0 6px, #fff 0px 0 6px, #fff 0px 0 6px;
  }

  body.index .panelLink .panelLink__title br {
    display: none;
  }
}

body.index .panelLink .panelLink__detail {
  font-size: 16px;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  body.index .panelLink .panelLink__detail {
    font-size: 10.8px;
    margin-bottom: 20px;
  }
}

body.index .panelLink .panelLink__overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(64, 123, 167, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #fff;
  font-size: 40px;
  line-height: 1.6em;
  text-align: center;
  width: 0px;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.2s;
  transition: all 0.5s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.2s;
}

body.index .panelLink .panelLink__overlay .panelLink__overlay__inner {
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.72, 0.5, 0.91);
  transition: all 0.5s cubic-bezier(0.12, 0.72, 0.5, 0.91);
}

body.index .panelLink .panelLink__overlay .panelLink__overlay__text {
  margin-bottom: 60px;
}

body.index .panelLink:hover .panelLink__overlay {
  width: 100%;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.72, 0.5, 0.91);
  transition: all 0.5s cubic-bezier(0.12, 0.72, 0.5, 0.91);
}

body.index .panelLink:hover .panelLink__overlay .panelLink__overlay__inner {
  opacity: 1;
  -webkit-transition: all 1.2s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.2s;
  transition: all 1.2s cubic-bezier(0.12, 0.72, 0.5, 0.91) 0.2s;
}

body.index .topics {
  padding: 145px 0;
}

@media screen and (max-width: 767px) {
  body.index .topics {
    padding: 90px 0 45px;
  }
}

body.index .topicsList {
  background-color: #EDF6FA;
  padding: 60px;
  margin-top: 14px;
}

@media screen and (max-width: 767px) {
  body.index .topicsList {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 25px calc(50vw - 50%);
  }
}

body.index .topicsList ul li a {
  text-decoration: none;
  color: #464646;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  padding: 1em 0;
  font-size: 16px;
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

body.index .topicsList ul li a:hover {
  color: #C8C8C8;
}

body.index .topicsList ul li:not(:last-child) {
  border-bottom: 1px solid #C8C8C8;
}

body.index .topicsList ul li .topicsList__date {
  width: 150px;
  font-size: 15px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.index .topicsList ul li .topicsList__date {
    font-size: 10px;
    width: 90px;
  }
}

body.index .topicsList ul li .topicsList__title {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

@media screen and (max-width: 767px) {
  body.index .topicsList ul li .topicsList__title {
    font-size: 14px;
  }
}

body.sub .pageTitle {
  position: relative;
}

body.sub .pageTitle .pageTitle__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body.sub .pageTitle .inner,
body.sub .pageTitle header .header__inner,
header body.sub .pageTitle .header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

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

  body.sub .pageTitle .inner,
  body.sub .pageTitle header .header__inner,
  header body.sub .pageTitle .header__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

body.sub .pageTitle .pageTitle__text {
  color: #fff;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-size: 80px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

@media screen and (max-width: 767px) {
  body.sub .pageTitle .pageTitle__text {
    font-size: 3.9rem;
    line-height: 1.38462;
    text-align: center;
  }
}

body.sub .pageTitle .pageTitle__text img {
  width: auto;
  height: 1em;
  margin-right: 0.1em;
  vertical-align: -0.1em;
}

body.sub .pageTitle .pageTitle__detail {
  width: 470px;
  color: #fff;
  font-size: 24px;
  line-height: 1.66667em;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .pageTitle .pageTitle__detail {
    width: 99.9%;
    min-width: 250px;
    font-size: 14px;
    margin-top: 1.5em;
  }
}

body.sub .pageTitle .pageTitle__bg {
  height: 500px;
}

@media screen and (max-width: 767px) {
  body.sub .pageTitle .pageTitle__bg {
    height: auto;
  }
}

body.sub .pageTitle .pageTitle__bg picture,
body.sub .pageTitle .pageTitle__bg img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit:cover;";
}

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

  body.sub .pageTitle .pageTitle__bg picture,
  body.sub .pageTitle .pageTitle__bg img {
    height: auto;
  }
}

body.sub .products,
body.sub .service,
body.sub .flyer {
  padding: 100px 0;
  position: relative;
  z-index: 1;
}

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

  body.sub .products,
  body.sub .service,
  body.sub .flyer {
    padding: 70px 0;
  }
}

body.sub .service {
  position: relative;
  z-index: 2;
}

body.sub .three-d__content,
body.sub .mockup__content {
  padding: 80px 0;
}

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

  body.sub .three-d__content,
  body.sub .mockup__content {
    padding: 50px 0;
  }
}

body.sub .flyer {
  padding-top: 0;
}

body.sub .graphic {
  padding: 50px 0;
  background-color: #F2F6F9;
}

@media screen and (max-width: 767px) {
  body.sub .graphic {
    padding: 40px 0;
  }
}

body.sub .subSection {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
  overflow-x: hidden;
}

body.sub .subSection .subSection__inner {
  background-color: #F2F6F9;
  margin: 0 auto;
  min-width: 1200px;
  max-width: 1570px;
  padding: 90px 0;
}

@media screen and (max-width: 767px) {
  body.sub .subSection {
    padding: 0;
  }

  body.sub .subSection .subSection__inner {
    background-color: #F2F6F9;
    margin: 0 auto;
    min-width: 100%;
    max-width: 100%;
    padding: 70px 0;
  }
}

body.sub .breakColumn {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 48.125% 220px 1fr;
  grid-template-columns: 48.125% 220px 1fr;
}

body.sub .breakColumn>*:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

body.sub .breakColumn>*:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

body.sub .breakColumn>*:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

body.sub .breakColumn:not(:last-child) {
  margin-bottom: 100px;
}

@media screen and (min-width: 768px) {
  body.sub .breakColumn--left {
    margin-left: calc(50% - 50vw);
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 48.125% 220px 1fr;
    grid-template-columns: 48.125% 220px 1fr;
  }

  body.sub .breakColumn--left>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  body.sub .breakColumn--left>*:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  body.sub .breakColumn--left>*:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}

@media screen and (min-width: 768px) and (min-width: 1920px) {
  body.sub .breakColumn--left {
    margin-left: calc(50% - 960px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1240px) {
  body.sub .breakColumn--left {
    margin-left: -40px;
  }
}

@media screen and (min-width: 768px) {
  body.sub .breakColumn--left .breakColumn__image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    padding-right: 50px;
    overflow-x: hidden;
  }

  body.sub .breakColumn--left .breakColumn__head {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
  }

  body.sub .breakColumn--left .breakColumn__content {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
  }

  body.sub .breakColumn--right {
    margin-right: calc(50% - 50vw);
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 220px 1fr 48.125%;
    grid-template-columns: 220px 1fr 48.125%;
  }

  body.sub .breakColumn--right>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  body.sub .breakColumn--right>*:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  body.sub .breakColumn--right>*:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}

@media screen and (min-width: 768px) and (min-width: 1920px) {
  body.sub .breakColumn--right {
    margin-right: calc(50% - 960px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1240px) {
  body.sub .breakColumn--right {
    margin-right: -40px;
  }
}

@media screen and (min-width: 768px) {
  body.sub .breakColumn--right .breakColumn__image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
    padding-left: 50px;
  }

  body.sub .breakColumn--right .breakColumn__head {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
  }

  body.sub .breakColumn--right .breakColumn__content {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
  }

  body.sub .breakColumn .breakColumn__head {
    width: 150px;
    height: 150px;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    line-height: 1.66667em;
    font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
    background-color: #8EA3AD;
  }

  body.sub .breakColumn .breakColumn__head--lineHeight1 {
    line-height: 1em;
  }
}

@media screen and (max-width: 767px) {
  body.sub .breakColumn {
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
  }

  body.sub .breakColumn>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  body.sub .breakColumn>*:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  body.sub .breakColumn:not(:last-child) {
    margin-bottom: 50px;
  }

  body.sub .breakColumn .breakColumn__image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
  }

  body.sub .breakColumn .breakColumn__head {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    width: 250px;
    height: auto;
    padding: 20px 0;
    color: #fff;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: center;
    justify-self: center;
    text-align: center;
    font-size: 20px;
    line-height: 1.66667em;
    font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    position: relative;
  }

  body.sub .breakColumn .breakColumn__head:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(142, 163, 173, 0.7);
    mix-blend-mode: multiply;
    z-index: 1;
  }

  body.sub .breakColumn .breakColumn__head .breakColumn__head__inner {
    position: relative;
    z-index: 2;
  }

  body.sub .breakColumn .breakColumn__content {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    font-size: 14px;
    margin-top: 25px;
  }
}

body.sub .sectionTitle {
  text-align: center;
  font-size: 40px;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin-bottom: 70px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.sub .sectionTitle--left {
  text-align: left;
}

@media screen and (max-width: 767px) {
  body.sub .sectionTitle {
    font-size: 21.6px;
    margin-bottom: 24px;
    text-align: center;
  }
}

body.sub .filter {
  position: relative;
  z-index: 999;
}

body.sub .filter li a {
  background-color: #004F8A;
  color: #fff;
  text-decoration: none;
  width: 100%;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 10px;
  font-size: 22px;
  line-height: 1;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  position: relative;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.sub .filter li a .filter__text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

body.sub .filter li a .filter__image {
  width: 52px;
  height: 52px;
  position: relative;
  margin-left: auto;
}

body.sub .filter li a .filter__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

body.sub .filter li a .filter__icon--off {
  z-index: 2;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

body.sub .filter li a .filter__icon--on {
  z-index: 1;
}

body.sub .filter li a:hover,
body.sub .filter li a.active {
  background-color: #50A7CE;
}

body.sub .filter li a:hover .filter__icon--off,
body.sub .filter li a.active .filter__icon--off {
  opacity: 0;
}

@media screen and (max-width: 767px) {
  body.sub .filter li a {
    font-size: 16.8px;
    height: 50.4px;
  }

  body.sub .filter li a .filter__image {
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 31.2px;
    height: 31.2px;
  }
}

body.sub .filter li.filter__all {
  width: 100%;
}

body.sub .filter li.filter__category {
  width: calc(25% - 25px / 4);
  margin-top: 8px;
}

body.sub .filter li.filter__category:not(:last-child) {
  margin-right: 8px;
}

body.sub .filter li.filter__category:nth-child(4n) {
  margin-right: 0;
}

body.sub .filter li.filter__category--3col {
  width: calc(33.3333% - 16px / 3);
}

@media screen and (max-width: 767px) {
  body.sub .filter li.filter__category {
    width: 100%;
    margin-top: 0;
  }

  body.sub .filter li.filter__category:not(:last-child) {
    margin-right: 0;
  }
}

body.sub .filter .filter__item {
  position: relative;
}

body.sub .filter .filter__categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  body.sub .filter .filter__categories {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 999;
  }

  body.sub .filter .filter__categories li:nth-child(odd) a {
    background-color: #50A7CE;
  }

  body.sub .filter .filter__categories li:nth-child(even) a {
    background-color: #A7D3E6;
  }
}

body.sub .filter .filter__open {
  display: none;
}

@media screen and (max-width: 767px) {
  body.sub .filter .filter__open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 3px;
    position: relative;
  }

  body.sub .filter .filter__open:after,
  body.sub .filter .filter__open:before {
    content: '';
    display: block;
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #fff;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  body.sub .filter .filter__open:before {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
  }

  body.sub .filter .filter__open.active:before {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
  }

  body.sub .filter .filter__open.active:after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
  }
}

body.sub .productsList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 50px -10px 0;
}

@media screen and (max-width: 767px) {
  body.sub .productsList {
    display: block;
    margin: 30px 0 0;
  }
}

@media screen and (max-width: 767px) {
  body.sub .productsList li {
    display: block;
    margin-bottom: 10px;
  }
}

@media screen and (min-width: 768px) {
  body.sub .productsList li {
    width: calc(33.333333% - 20px);
    margin: 10px;
  }
}

body.sub .productsList a.productsList__btn {
  text-decoration: none;
}

body.sub .productsList a.productsList__btn:hover .panel .panel__image {
  position: relative;
}

body.sub .productsList a.productsList__btn:hover .panel .panel__image:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 79, 138, 0.7);
  mix-blend-mode: multiply;
  z-index: 1;
}

body.sub .productsList a.productsList__btn:hover .detailBtn {
  background-color: #50A7CE;
}

body.sub .productsList a.productsList__btn:hover .detailBtn .detailBtn__text--off {
  display: none;
}

body.sub .productsList a.productsList__btn:hover .detailBtn .detailBtn__text--on {
  display: block;
}

body.sub .productsList a.productsList__btn:hover .detailBtn .detailBtn__image .hoverImage--on {
  z-index: 1;
  opacity: 1;
}

body.sub .productsList a.productsList__btn:hover .detailBtn .detailBtn__image .hoverImage--off {
  z-index: 2;
  opacity: 0;
}

body.sub .panel {
  position: relative;
}

body.sub .panel .panel__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

body.sub .panel .panel__inner .panel__text {
  color: #fff;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

body.sub .panel .panel__inner .panel__text--large {
  font-size: 30px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  body.sub .panel .panel__inner .panel__text {
    font-size: 10px;
    text-align: left;
    margin-left: 32px;
  }

  body.sub .panel .panel__inner .panel__text--large {
    font-size: 21.6px;
    line-height: 1.2;
    margin-top: 5px;
  }
}

body.sub .panel .panel__image {
  position: relative;
  z-index: 1;
}

body.sub .panel .panel__image:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 79, 138, 0);
  mix-blend-mode: multiply;
  z-index: 1;
}

body.sub .panel .panel__image:before {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

@media screen and (max-width: 767px) {
  body.sub .panel .panel__image {
    height: 26.07562vw;
  }

  body.sub .panel .panel__image picture,
  body.sub .panel .panel__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit:cover;';
  }
}

@media screen and (min-width: 768px) {
  body.sub .panel02 {
    position: relative;
    background-color: #8EA3AD;
    display: block;
    color: #333;
  }

  body.sub .panel02:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #8EA3AD;
    mix-blend-mode: multiply;
    z-index: 3;
    width: 150px;
    height: 150px;
  }

  body.sub .panel02 .panel02__title {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    z-index: 4;
    font-size: 24px;
    line-height: 1.66667em;
    font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
  }

  body.sub .panel02 .panel02__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 16px 34px;
    font-size: 16px;
    line-height: 2.5em;
    z-index: 2;
  }

  body.sub .panel02 .panel02__text {
    min-height: 80px;
  }

  body.sub .panel02 .panel02__delivery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
    transition: all 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  }

  body.sub .panel02 .panel02__delivery dt {
    background-color: #8EA3AD;
    color: #ffffff;
    padding: 0.4em 1em;
    margin-right: 1em;
    line-height: 1;
  }

  body.sub .panel02--noLink .panel02__content {
    min-height: 150px;
  }

  body.sub .panel02--noLink .panel02__delivery {
    max-height: initial;
  }

  body.sub .panel02 .panel02__image {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  body.sub .panel02 .panel02__image picture img {
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
    transition: -webkit-transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
    transition: transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
    transition: transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  }

  body.sub .panel02:not(.panel02--noLink):hover .panel02__image picture img {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
  }

  body.sub .panel02:not(.panel02--noLink):hover .panel02__delivery {
    max-height: 60px;
  }
}

@media screen and (max-width: 767px) {
  body.sub .panel02 {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    color: #333;
    text-decoration: none;
  }

  body.sub .panel02>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  body.sub .panel02>*:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  body.sub .panel02 .panel02__title {
    width: 250px;
    height: auto;
    padding: 20px 0;
    color: #fff;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: center;
    justify-self: center;
    text-align: center;
    font-size: 20px;
    line-height: 1.66667em;
    font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    position: relative;
  }

  body.sub .panel02 .panel02__title:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(142, 163, 173, 0.7);
    mix-blend-mode: multiply;
    z-index: 1;
  }

  body.sub .panel02 .panel02__title .panel02__title__inner {
    position: relative;
    z-index: 2;
  }

  body.sub .panel02 .panel02__content {
    background-color: #F2F6F9;
    position: relative;
    padding: 14px;
    font-size: 14px;
    line-height: 1.6;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
  }

  body.sub .panel02 .panel02__text {
    min-height: initial;
  }

  body.sub .panel02 .panel02__delivery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    max-height: auto;
    overflow: hidden;
    -webkit-transition: all 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
    transition: all 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
    margin-top: 0.5em;
  }

  body.sub .panel02 .panel02__delivery dt {
    background-color: #8EA3AD;
    color: #ffffff;
    padding: 0.4em 1em;
    margin-right: 1em;
    line-height: 1;
  }

  body.sub .panel02 .panel02__image {
    overflow: hidden;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
  }

  body.sub .panel02--noLink .panel02__content {
    background-color: #fff;
  }
}

body.sub .panel03 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

body.sub .panel03 .panel03__item {
  width: calc(33.33333% - 15px);
  margin-right: 20px;
}

body.sub .panel03 .panel03__item:nth-child(3n) {
  margin-right: 0;
}

body.sub .panel03 .panel03__item:nth-child(n + 4) {
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  body.sub .panel03 .panel03__item {
    width: 100%;
    margin-right: 0;
  }

  body.sub .panel03 .panel03__item:not(:first-child) {
    margin-top: 50px;
  }
}

body.sub .panel03 .panel03__image {
  position: relative;
  margin-bottom: 1em;
}

body.sub .panel03 .panel03__head {
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px 0;
  text-align: center;
  font-size: 22px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .panel03 .panel03__head {
    padding: 10px 0;
    font-size: 16.8px;
  }
}

body.sub .panel03 .panel03__text {
  padding: 0 15px;
  font-size: 16px;
  line-height: 2.25;
}

@media screen and (max-width: 767px) {
  body.sub .panel03 .panel03__text {
    font-size: 14px;
    padding: 0;
  }
}

body.sub .detailBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #E5EDF3;
  padding: 10px;
  font-size: 15px;
  color: #464646;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

@media screen and (max-width: 767px) {
  body.sub .detailBtn {
    font-size: 10px;
  }
}

body.sub .detailBtn .detailBtn__image {
  position: relative;
  margin-left: 30px;
  width: 52px;
  height: 52px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  body.sub .detailBtn .detailBtn__image {
    width: 26px;
    height: 26px;
    margin-left: 15px;
  }
}

body.sub .detailBtn .detailBtn__image .hoverImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

body.sub .detailBtn .detailBtn__image .hoverImage--on {
  z-index: 1;
  opacity: 0;
}

body.sub .detailBtn .detailBtn__image .hoverImage--off {
  z-index: 2;
  opacity: 1;
}

body.sub .detailBtn .detailBtn__text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media screen and (max-width: 767px) {
  body.sub .detailBtn .detailBtn__text {
    font-size: 12px;
  }
}

body.sub .detailBtn .detailBtn__text.detailBtn__text--off {
  display: block;
}

body.sub .detailBtn .detailBtn__text.detailBtn__text--on {
  display: none;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.sub .detailBtn .detailBtn__text img {
  width: 24px;
  margin-left: 10px;
  -webkit-transform: translateY(-0.1em);
  -ms-transform: translateY(-0.1em);
  transform: translateY(-0.1em);
}

body.sub .copy {
  padding: 140px 0;
  background-size: cover;
  background-position: center;
  font-size: 45px;
  color: #fff;
  text-align: center;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.sub .copy p {
  margin: 0.5em;
}

body.sub .copy--bone {
  background-image: url("/img/bone/bg_copy_bone.jpg");
}

@media screen and (max-width: 767px) {
  body.sub .copy {
    padding: 50px 0;
    font-size: 24px;
  }

  body.sub .copy p {
    margin: 0;
  }

  body.sub .copy span {
    margin: 0.5em;
  }
}

body.sub .copy span[class^="slideUp-"],
body.sub .copy span[class*="slideUp-"] {
  opacity: 0;
  -webkit-transform: translateY(1em);
  -ms-transform: translateY(1em);
  transform: translateY(1em);
  display: inline-block;
}

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

  body.sub .copy span[class^="slideUp-"].slideUp-pc1,
  body.sub .copy span[class*="slideUp-"].slideUp-pc1 {
    -webkit-transition: all 0.6s ease-out 0.6s;
    transition: all 0.6s ease-out 0.6s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc2,
  body.sub .copy span[class*="slideUp-"].slideUp-pc2 {
    -webkit-transition: all 0.6s ease-out 1.2s;
    transition: all 0.6s ease-out 1.2s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc3,
  body.sub .copy span[class*="slideUp-"].slideUp-pc3 {
    -webkit-transition: all 0.6s ease-out 1.8s;
    transition: all 0.6s ease-out 1.8s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc4,
  body.sub .copy span[class*="slideUp-"].slideUp-pc4 {
    -webkit-transition: all 0.6s ease-out 2.4s;
    transition: all 0.6s ease-out 2.4s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc5,
  body.sub .copy span[class*="slideUp-"].slideUp-pc5 {
    -webkit-transition: all 0.6s ease-out 3s;
    transition: all 0.6s ease-out 3s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc6,
  body.sub .copy span[class*="slideUp-"].slideUp-pc6 {
    -webkit-transition: all 0.6s ease-out 3.6s;
    transition: all 0.6s ease-out 3.6s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc7,
  body.sub .copy span[class*="slideUp-"].slideUp-pc7 {
    -webkit-transition: all 0.6s ease-out 4.2s;
    transition: all 0.6s ease-out 4.2s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc8,
  body.sub .copy span[class*="slideUp-"].slideUp-pc8 {
    -webkit-transition: all 0.6s ease-out 4.8s;
    transition: all 0.6s ease-out 4.8s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc9,
  body.sub .copy span[class*="slideUp-"].slideUp-pc9 {
    -webkit-transition: all 0.6s ease-out 5.4s;
    transition: all 0.6s ease-out 5.4s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-pc10,
  body.sub .copy span[class*="slideUp-"].slideUp-pc10 {
    -webkit-transition: all 0.6s ease-out 6s;
    transition: all 0.6s ease-out 6s;
  }
}

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

  body.sub .copy span[class^="slideUp-"].slideUp-sp1,
  body.sub .copy span[class*="slideUp-"].slideUp-sp1 {
    -webkit-transition: all 0.6s ease-out 0.6s;
    transition: all 0.6s ease-out 0.6s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp2,
  body.sub .copy span[class*="slideUp-"].slideUp-sp2 {
    -webkit-transition: all 0.6s ease-out 1.2s;
    transition: all 0.6s ease-out 1.2s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp3,
  body.sub .copy span[class*="slideUp-"].slideUp-sp3 {
    -webkit-transition: all 0.6s ease-out 1.8s;
    transition: all 0.6s ease-out 1.8s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp4,
  body.sub .copy span[class*="slideUp-"].slideUp-sp4 {
    -webkit-transition: all 0.6s ease-out 2.4s;
    transition: all 0.6s ease-out 2.4s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp5,
  body.sub .copy span[class*="slideUp-"].slideUp-sp5 {
    -webkit-transition: all 0.6s ease-out 3s;
    transition: all 0.6s ease-out 3s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp6,
  body.sub .copy span[class*="slideUp-"].slideUp-sp6 {
    -webkit-transition: all 0.6s ease-out 3.6s;
    transition: all 0.6s ease-out 3.6s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp7,
  body.sub .copy span[class*="slideUp-"].slideUp-sp7 {
    -webkit-transition: all 0.6s ease-out 4.2s;
    transition: all 0.6s ease-out 4.2s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp8,
  body.sub .copy span[class*="slideUp-"].slideUp-sp8 {
    -webkit-transition: all 0.6s ease-out 4.8s;
    transition: all 0.6s ease-out 4.8s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp9,
  body.sub .copy span[class*="slideUp-"].slideUp-sp9 {
    -webkit-transition: all 0.6s ease-out 5.4s;
    transition: all 0.6s ease-out 5.4s;
  }

  body.sub .copy span[class^="slideUp-"].slideUp-sp10,
  body.sub .copy span[class*="slideUp-"].slideUp-sp10 {
    -webkit-transition: all 0.6s ease-out 6s;
    transition: all 0.6s ease-out 6s;
  }
}

body.sub .copy.active span[class^="slideUp-"],
body.sub .copy.active span[class*="slideUp-"] {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body.sub .flow {
  background-color: #E5EDF3;
  padding: 100px 0;
}

@media screen and (max-width: 767px) {
  body.sub .flow {
    padding: 70px 0;
  }
}

body.sub .lead {
  width: 980px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 2.25;
}

@media screen and (max-width: 767px) {
  body.sub .lead {
    width: 100%;
    font-size: 14px;
  }
}

body.sub .flowList__wrapper {
  width: 46.875%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  body.sub .flowList__wrapper {
    width: 100%;
  }
}

body.sub .flowList li.flowList__item {
  background-color: #80A7C4;
  padding: 50px;
  position: relative;
  text-align: center;
  color: #fff;
  font-size: 18px;
}

body.sub .flowList li.flowList__item:not(:last-child) {
  margin-bottom: 22px;
}

body.sub .flowList li.flowList__item:not(:last-child):after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 11px 0 11px;
  border-color: #80A7C4 transparent transparent transparent;
}

body.sub .flowList li.flowList__item--last {
  background-color: #50A7CE;
}

@media screen and (max-width: 767px) {
  body.sub .flowList li.flowList__item {
    font-size: 12px;
    padding: 25px;
  }

  body.sub .flowList li.flowList__item:not(:last-child) {
    margin-bottom: 12px;
  }

  body.sub .flowList li.flowList__item:not(:last-child):after {
    bottom: -12px;
    border-width: 12px 6px 0 6px;
  }
}

body.sub .flowList02 {
  width: 81.875%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  body.sub .flowList02 {
    width: 100%;
  }
}

body.sub .flowList02.active .flowList02__item .flowlist02__no,
body.sub .flowList02.active .flowList02__item .flowlist02__head,
body.sub .flowList02.active .flowList02__item .flowlist02__text {
  opacity: 1;
}

body.sub .flowList02.active .flowList02__item:not(:last-child):after {
  opacity: 1;
  height: 106px;
}

@media screen and (max-width: 767px) {
  body.sub .flowList02.active .flowList02__item:not(:last-child):after {
    height: calc(100% - 60px);
    bottom: 0;
  }
}

body.sub .flowList02 .flowList02__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 767px) {
  body.sub .flowList02 .flowList02__item {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

body.sub .flowList02 .flowList02__item .flowlist02__no,
body.sub .flowList02 .flowList02__item .flowlist02__head,
body.sub .flowList02 .flowList02__item .flowlist02__text {
  opacity: 0;
}

body.sub .flowList02 .flowList02__item:nth-child(1) .flowlist02__no {
  -webkit-transition: opacity 0.4s linear 0.1s;
  transition: opacity 0.4s linear 0.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(1) .flowlist02__head {
  -webkit-transition: opacity 0.4s linear 0.1s;
  transition: opacity 0.4s linear 0.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(1) .flowlist02__text {
  -webkit-transition: opacity 0.4s linear 0.3s;
  transition: opacity 0.4s linear 0.3s;
}

body.sub .flowList02 .flowList02__item:nth-child(1):not(:last-child):after {
  -webkit-transition: all 0.4s linear 0.5s;
  transition: all 0.4s linear 0.5s;
}

body.sub .flowList02 .flowList02__item:nth-child(2) .flowlist02__no {
  -webkit-transition: opacity 0.4s linear 1.1s;
  transition: opacity 0.4s linear 1.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(2) .flowlist02__head {
  -webkit-transition: opacity 0.4s linear 1.1s;
  transition: opacity 0.4s linear 1.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(2) .flowlist02__text {
  -webkit-transition: opacity 0.4s linear 1.3s;
  transition: opacity 0.4s linear 1.3s;
}

body.sub .flowList02 .flowList02__item:nth-child(2):not(:last-child):after {
  -webkit-transition: all 0.4s linear 1.5s;
  transition: all 0.4s linear 1.5s;
}

body.sub .flowList02 .flowList02__item:nth-child(3) .flowlist02__no {
  -webkit-transition: opacity 0.4s linear 2.1s;
  transition: opacity 0.4s linear 2.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(3) .flowlist02__head {
  -webkit-transition: opacity 0.4s linear 2.1s;
  transition: opacity 0.4s linear 2.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(3) .flowlist02__text {
  -webkit-transition: opacity 0.4s linear 2.3s;
  transition: opacity 0.4s linear 2.3s;
}

body.sub .flowList02 .flowList02__item:nth-child(3):not(:last-child):after {
  -webkit-transition: all 0.4s linear 2.5s;
  transition: all 0.4s linear 2.5s;
}

body.sub .flowList02 .flowList02__item:nth-child(4) .flowlist02__no {
  -webkit-transition: opacity 0.4s linear 3.1s;
  transition: opacity 0.4s linear 3.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(4) .flowlist02__head {
  -webkit-transition: opacity 0.4s linear 3.1s;
  transition: opacity 0.4s linear 3.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(4) .flowlist02__text {
  -webkit-transition: opacity 0.4s linear 3.3s;
  transition: opacity 0.4s linear 3.3s;
}

body.sub .flowList02 .flowList02__item:nth-child(4):not(:last-child):after {
  -webkit-transition: all 0.4s linear 3.5s;
  transition: all 0.4s linear 3.5s;
}

body.sub .flowList02 .flowList02__item:nth-child(5) .flowlist02__no {
  -webkit-transition: opacity 0.4s linear 4.1s;
  transition: opacity 0.4s linear 4.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(5) .flowlist02__head {
  -webkit-transition: opacity 0.4s linear 4.1s;
  transition: opacity 0.4s linear 4.1s;
}

body.sub .flowList02 .flowList02__item:nth-child(5) .flowlist02__text {
  -webkit-transition: opacity 0.4s linear 4.3s;
  transition: opacity 0.4s linear 4.3s;
}

body.sub .flowList02 .flowList02__item:nth-child(5):not(:last-child):after {
  -webkit-transition: all 0.4s linear 4.5s;
  transition: all 0.4s linear 4.5s;
}

@media screen and (min-width: 768px) {
  body.sub .flowList02 .flowList02__item:not(:last-child) {
    margin-bottom: 100px;
    position: relative;
  }

  body.sub .flowList02 .flowList02__item:not(:last-child):after {
    content: '';
    display: block;
    width: 6px;
    height: 0px;
    background-color: #004F8A;
    position: absolute;
    bottom: 0;
    left: 60px;
    -webkit-transform: translate(-50%, 100%);
    -ms-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    opacity: 0;
  }
}

@media screen and (max-width: 767px) {
  body.sub .flowList02 .flowList02__item:not(:last-child) {
    position: relative;
    padding-bottom: 40px;
  }

  body.sub .flowList02 .flowList02__item:not(:last-child):after {
    content: '';
    display: block;
    width: 3px;
    height: 0px;
    background-color: #004F8A;
    position: absolute;
    top: 60px;
    left: 29px;
  }
}

body.sub .flowList02 .flowlist02__no {
  width: 120px;
  height: 120px;
  border: 6px solid #004F8A;
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 50px;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #004F8A;
}

@media screen and (max-width: 767px) {
  body.sub .flowList02 .flowlist02__no {
    width: 60px;
    height: 60px;
    border: 3px solid #004F8A;
    font-size: 25px;
  }
}

body.sub .flowList02 .flowList02__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 1em;
}

@media screen and (max-width: 767px) {
  body.sub .flowList02 .flowList02__content {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

body.sub .flowList02 .flowlist02__head {
  width: 360px;
  color: #004F8A;
  font-size: 22px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .flowList02 .flowlist02__head {
    width: 100%;
    min-height: 3.5em;
    font-size: 16.8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

body.sub .usage {
  padding: 100px 0;
}

@media screen and (max-width: 767px) {
  body.sub .usage {
    padding: 70px 0;
  }
}

body.sub .usage p {
  font-size: 16px;
  line-height: 2.25;
}

@media screen and (max-width: 767px) {
  body.sub .usage p {
    font-size: 12px;
  }
}

body.sub .anchor {
  position: relative;
  z-index: 999;
}

body.sub .anchor:not(:last-child) {
  margin-bottom: 100px;
}

body.sub .anchor .anchor__open {
  display: none;
}

@media screen and (max-width: 767px) {
  body.sub .anchor .anchor__open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 3px;
    position: relative;
    height: 42px;
    width: 100%;
    text-decoration: none;
    border: 2px solid #8EA3AD;
    font-size: 14px;
    color: #8EA3AD;
    font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
  }

  body.sub .anchor .anchor__open:after,
  body.sub .anchor .anchor__open:before {
    content: '';
    display: block;
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #8EA3AD;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  body.sub .anchor .anchor__open:before {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
  }

  body.sub .anchor .anchor__open.active:before {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
  }

  body.sub .anchor .anchor__open.active:after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
  }
}

body.sub .anchor ul.anchor__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

body.sub .anchor ul.anchor__list li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 16px;
  text-align: center;
}

body.sub .anchor ul.anchor__list li:first-child {
  border-left: 1px solid #8EA3AD;
}

body.sub .anchor ul.anchor__list li a {
  color: #8EA3AD;
  text-decoration: none;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-right: 1px solid #8EA3AD;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .anchor ul.anchor__list {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    padding: 0 20px;
    border: 2px solid #8EA3AD;
    border-top: none;
  }

  body.sub .anchor ul.anchor__list li {
    width: 100%;
    font-size: 14px;
  }

  body.sub .anchor ul.anchor__list li:first-child {
    border-left: none;
  }

  body.sub .anchor ul.anchor__list li .arrowRight {
    display: none;
  }

  body.sub .anchor ul.anchor__list li a {
    padding: 10px 0;
    border-right: none;
    height: auto;
  }

  body.sub .anchor ul.anchor__list li:not(:last-child) {
    border-bottom: 1px solid #8EA3AD;
  }
}

body.sub .contentText p {
  font-size: 16px;
  line-height: 2.25;
}

@media screen and (max-width: 767px) {
  body.sub .contentText p {
    font-size: 14px;
  }
}

body.sub .imageHorizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 -20px;
}

body.sub .imageHorizontal picture {
  margin: 0 20px;
}

body.sub .imageHorizontal--margin0 {
  margin: 0;
}

body.sub .imageHorizontal--margin0 picture {
  margin: 0;
}

body.sub .imageHorizontal--bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

body.sub .imageHorizontal--ngMargin {
  margin-top: -28.98551%;
  position: relative;
  z-index: 9;
}

@media screen and (min-width: 768px) {
  body.sub .titleArea {
    position: relative;
    z-index: 1;
  }

  body.sub .titleArea .titleArea__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  body.sub .titleArea .titleArea__bg picture,
  body.sub .titleArea .titleArea__bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    font-family: "object-fit:cover;";
  }

  body.sub .titleArea .titleArea__content {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 550px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
  }

  body.sub .titleArea .titleArea__text {
    width: 600px;
    margin: 0 0 0 auto;
    font-size: 18px;
    line-height: 2.22222;
  }

  body.sub .titleArea--reverse .titleArea__text {
    margin: 0 0 auto 0;
  }
}

@media screen and (max-width: 767px) {
  body.sub .titleArea {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  body.sub .titleArea>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  body.sub .titleArea .titleArea__bg {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
  }

  body.sub .titleArea .titleArea__content {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: center;
    justify-self: center;
    position: relative;
    color: #fff;
    width: 80.83442%;
    padding: 5.86701% 4.56323%;
  }

  body.sub .titleArea .titleArea__content:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 79, 138, 0.7);
    mix-blend-mode: multiply;
    z-index: 1;
  }

  body.sub .titleArea .titleArea__content .titleArea__text {
    position: relative;
    z-index: 2;
    font-size: 14px;
    line-height: 2;
  }
}

body.sub .serviceImage {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 53.33333%;
  margin-bottom: 50px;
}

body.sub .serviceImage img {
  position: absolute;
}

body.sub .serviceImage img:nth-child(1) {
  width: 12.33333%;
  top: 18.75%;
  left: 0;
}

body.sub .serviceImage img:nth-child(2) {
  width: 8.5%;
  top: 3.75%;
  left: 15.33333%;
}

body.sub .serviceImage img:nth-child(3) {
  width: 16.66667%;
  top: 4.375%;
  left: 25%;
}

body.sub .serviceImage img:nth-child(4) {
  width: 5.66667%;
  top: 4.375%;
  left: 43.33333%;
}

body.sub .serviceImage img:nth-child(5) {
  width: 16.66667%;
  top: 0;
  left: 47.66667%;
}

body.sub .serviceImage img:nth-child(6) {
  width: 5.66667%;
  top: 7.5%;
  left: 67.16667%;
}

body.sub .serviceImage img:nth-child(7) {
  width: 23.83333%;
  top: 5.9375%;
  left: 76.16667%;
}

body.sub .optionImage {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 66.6%;
}

body.sub .optionImage img {
  position: absolute;
}

body.sub .optionImage img:nth-child(1) {
  width: 30.8%;
  top: 5.40541%;
  left: 0;
}

body.sub .optionImage img:nth-child(2) {
  width: 8%;
  top: 10.51051%;
  left: 41%;
}

body.sub .optionImage img:nth-child(3) {
  width: 38%;
  top: 0;
  right: 0;
}

body.sub .optionImage img:nth-child(4) {
  width: 50.8%;
  top: 46.54655%;
  left: 18%;
}

body.sub .optionImage img:nth-child(5) {
  width: 38%;
  bottom: 0;
  left: 26.6%;
}

body.sub .boneImage {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 53.33333%;
}

body.sub .boneImage picture {
  position: absolute;
}

body.sub .boneImage picture:nth-child(1) {
  width: 58%;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
}

body.sub .boneImage picture:nth-child(2) {
  width: 40.5%;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.6s linear 2.6s;
  transition: all 0.6s linear 2.6s;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
}

body.sub .boneImage .boneImage__box {
  position: absolute;
}

body.sub .boneImage .boneImage__box--01 {
  top: 0;
  left: 0;
  width: 58%;
  height: 58.125%;
}

body.sub .boneImage .boneImage__box--01 .boneImage__line:nth-child(1) {
  bottom: 0;
  left: 0;
  width: 3px;
  height: 0px;
  -webkit-transition: all 0.2s linear 0.8s;
  transition: all 0.2s linear 0.8s;
}

body.sub .boneImage .boneImage__box--01 .boneImage__line:nth-child(2) {
  top: 0;
  left: 0;
  width: 0px;
  height: 3px;
  -webkit-transition: all 0.2s linear 1s;
  transition: all 0.2s linear 1s;
}

body.sub .boneImage .boneImage__box--01 .boneImage__line:nth-child(3) {
  top: 0;
  right: 0;
  width: 3px;
  height: 0;
  -webkit-transition: all 0.2s linear 1.2s;
  transition: all 0.2s linear 1.2s;
}

body.sub .boneImage .boneImage__box--01 .boneImage__line:nth-child(4) {
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  -webkit-transition: all 0.2s linear 1.4s;
  transition: all 0.2s linear 1.4s;
}

body.sub .boneImage .boneImage__box--02 {
  top: 29.0625%;
  left: 46.33333%;
  width: 11.66667%;
  height: 29.0625%;
}

body.sub .boneImage .boneImage__box--02 .boneImage__line:nth-child(1) {
  bottom: 0;
  left: 0;
  width: 3px;
  height: 0px;
  -webkit-transition: all 0.2s linear 1.6s;
  transition: all 0.2s linear 1.6s;
}

body.sub .boneImage .boneImage__box--02 .boneImage__line:nth-child(2) {
  top: 0;
  left: 0;
  width: 0px;
  height: 3px;
  -webkit-transition: all 0.2s linear 1.8s;
  transition: all 0.2s linear 1.8s;
}

body.sub .boneImage .boneImage__arrow {
  position: absolute;
  top: 58.125%;
  left: 48.33333%;
  width: 9.66667%;
  height: 20.9375%;
}

body.sub .boneImage .boneImage__arrow .boneImage__line:nth-child(1) {
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  -webkit-transition: all 0.2s linear 2s;
  transition: all 0.2s linear 2s;
}

body.sub .boneImage .boneImage__arrow .boneImage__line:nth-child(2) {
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  -webkit-transition: all 0.2s linear 2.2s;
  transition: all 0.2s linear 2.2s;
}

body.sub .boneImage .boneImage__arrow .boneImage__point {
  bottom: -9px;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 20px;
  border-color: transparent transparent transparent #D20000;
  background-color: transparent;
  opacity: 0;
  -webkit-transition: all 0.2s linear 2.4s;
  transition: all 0.2s linear 2.4s;
}

@media screen and (max-width: 767px) {
  body.sub .boneImage .boneImage__arrow .boneImage__point {
    bottom: -4px;
    border-width: 6px 0 6px 10px;
  }
}

body.sub .boneImage .boneImage__line,
body.sub .boneImage .boneImage__point {
  display: block;
  position: absolute;
  background-color: #D20000;
}

body.sub .boneImage.active picture {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body.sub .boneImage.active .boneImage__box--01 .boneImage__line:nth-child(1) {
  height: 100%;
}

body.sub .boneImage.active .boneImage__box--01 .boneImage__line:nth-child(2) {
  width: 100%;
}

body.sub .boneImage.active .boneImage__box--01 .boneImage__line:nth-child(3) {
  height: 100%;
}

body.sub .boneImage.active .boneImage__box--01 .boneImage__line:nth-child(4) {
  width: 100%;
}

body.sub .boneImage.active .boneImage__box--02 .boneImage__line:nth-child(1) {
  bottom: 0;
  left: 0;
  width: 3px;
  height: 100%;
}

body.sub .boneImage.active .boneImage__box--02 .boneImage__line:nth-child(2) {
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
}

body.sub .boneImage.active .boneImage__arrow .boneImage__line:nth-child(1) {
  height: 100%;
}

body.sub .boneImage.active .boneImage__arrow .boneImage__line:nth-child(2) {
  width: calc(100% - 20px);
}

@media screen and (max-width: 767px) {
  body.sub .boneImage.active .boneImage__arrow .boneImage__line:nth-child(2) {
    width: calc(100% - 10px);
  }
}

body.sub .boneImage.active .boneImage__arrow .boneImage__point {
  opacity: 1;
}

body.sub .caption {
  display: inline-block;
  background-color: rgba(35, 24, 21, 0.8);
  font-size: 14px;
  padding: 6px;
  line-height: 1;
  color: #fff;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .caption {
    font-size: 10px;
  }
}

body.sub .topicsIndex {
  padding: 100px 0;
}

@media screen and (max-width: 767px) {
  body.sub .topicsIndex {
    padding: 70px 0;
  }
}

body.sub .topicsYear {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #464646;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  body.sub .topicsYear {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: none;
  }
}

body.sub .topicsYear ul {
  width: 100%;
}

@media screen and (min-width: 768px) {
  body.sub .topicsYear ul li.topicsYear__all {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }

  body.sub .topicsYear ul li.topicsYear__all a.year__open {
    width: 12.5%;
  }

  body.sub .topicsYear ul .topicsYear__categories {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }

  body.sub .topicsYear ul .topicsYear__categories li.topicsYear__category {
    width: calc(100% / 7);
  }
}

body.sub .topicsYear ul li {
  text-align: center;
}

body.sub .topicsYear ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
  text-decoration: none;
  color: #464646;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

body.sub .topicsYear ul li a.active,
body.sub .topicsYear ul li a:hover {
  background-color: #004F8A;
  color: #fff;
}

@media screen and (max-width: 767px) {
  body.sub .topicsYear ul {
    display: block;
    position: relative;
  }

  body.sub .topicsYear ul li a {
    background-color: #004F8A;
    font-size: 14px;
    color: #fff;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  body.sub .topicsYear ul li .topicsYear__categories {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 999;
  }
}

@media screen and (max-width: 767px) {
  body.sub .topicsYear ul .year__open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 3px;
    position: relative;
  }

  body.sub .topicsYear ul .year__open:after,
  body.sub .topicsYear ul .year__open:before {
    content: '';
    display: block;
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #fff;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  body.sub .topicsYear ul .year__open:before {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
  }

  body.sub .topicsYear ul .year__open.open:before {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
  }

  body.sub .topicsYear ul .year__open.open:after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
  }
}

body.sub .topicsList {
  font-size: 16px;
}

body.sub .topicsList li:not(:last-child) {
  margin-bottom: 30px;
}

body.sub .topicsList a {
  color: #464646;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  text-decoration: none;
}

body.sub .topicsList .topicsList__date {
  margin-right: 40px;
}

body.sub .topicsList .topicsList__category {
  display: inline-block;
  background-color: #A7D3E6;
  width: 200px;
  color: #fff;
  padding: 8px 30px;
  line-height: 1;
  margin-right: 40px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  body.sub .topicsList .topicsList__title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

@media screen and (max-width: 767px) {
  body.sub .topicsList {
    font-size: 14px;
  }

  body.sub .topicsList li:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #A7D3E6;
  }

  body.sub .topicsList a {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  body.sub .topicsList .topicsList__date {
    margin-right: 20px;
    font-size: 12px;
  }

  body.sub .topicsList .topicsList__category {
    width: 120px;
    padding: 4px 0;
    font-size: 12px;
  }

  body.sub .topicsList .topicsList__title {
    margin-top: 10px;
    width: 100%;
  }
}

body.sub .topicsTitle {
  margin-top: 110px;
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #C8C8C8;
}

body.sub .topicsTitle .topicsTitle__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 20px;
  margin-bottom: 40px;
}

body.sub .topicsTitle .topicsTitle__date {
  margin-right: 40px;
}

body.sub .topicsTitle .topicsTitle__category {
  display: inline-block;
  background-color: #A7D3E6;
  color: #fff;
  padding: 8px 30px;
  line-height: 1;
}

body.sub .topicsTitle .topicsTitle__text {
  font-size: 30px;
  line-height: 1.66667;
}

@media screen and (max-width: 767px) {
  body.sub .topicsTitle {
    margin-top: 25px;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  body.sub .topicsTitle .topicsTitle__info {
    font-size: 14px;
    margin-bottom: 20px;
  }

  body.sub .topicsTitle .topicsTitle__date {
    margin-right: 20px;
  }

  body.sub .topicsTitle .topicsTitle__text {
    font-size: 16.8px;
  }
}

body.sub .topicsContent {
  font-size: 16px;
  line-height: 2.25em;
}

@media screen and (max-width: 767px) {
  body.sub .topicsContent {
    font-size: 14px;
  }
}

body.sub .caseIndex {
  padding: 100px 0;
}

@media screen and (max-width: 767px) {
  body.sub .caseIndex {
    padding: 20px 0;
  }
}

body.sub .case {
  background-color: #DCEDF5;
  padding: 30px;
  font-size: 16px;
  line-height: 2.25em;
}

body.sub .case .case__inner {
  background-color: #fff;
  padding: 50px;
}

body.sub .case .case__inner--title {
  padding: 20px 50px;
  margin-bottom: 40px;
}

body.sub .case .case__inner:not(:last-child) {
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  body.sub .case {
    padding: 10px;
  }

  body.sub .case.inner,
  body.sub header .case.header__inner,
  header body.sub .case.header__inner {
    margin: 0 calc(50% - 50vw);
    width: 100%;
  }

  body.sub .case .case__inner {
    padding: 12px;
  }

  body.sub .case .case__inner--title {
    padding: 10px;
    margin-bottom: 10px;
  }

  body.sub .case .case__inner:not(:last-child) {
    margin-bottom: 10px;
  }
}

body.sub .casePageTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body.sub .casePageTitle .casePageTitle__text {
  font-size: 40px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  background-image: url("../img/common/icon_voice.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.5em;
  padding-left: 2em;
  color: #004F8A;
  line-height: 1.2em;
}

body.sub .casePageTitle .casePageTitle__client {
  font-size: 22px;
}

@media screen and (max-width: 767px) {
  body.sub .casePageTitle {
    display: block;
  }

  body.sub .casePageTitle .casePageTitle__text {
    font-size: 12px;
  }

  body.sub .casePageTitle .casePageTitle__client {
    font-size: 21.6px;
  }
}

body.sub .caseTitle {
  margin-top: 80px;
}

body.sub .caseTitle .caseTitle__title {
  font-size: 50px;
  line-height: 1.2;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #004F8A;
  margin-bottom: 30px;
}

body.sub .caseTitle .caseTitle__title:after {
  display: block;
  content: '';
  width: 0px;
  height: 1px;
  background-color: #000000;
  margin-top: 30px;
  -webkit-transition: all 0.6s ease-out 0.6s;
  transition: all 0.6s ease-out 0.6s;
}

body.sub .caseTitle .caseTitle__client {
  line-height: 1.2;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-size: 22px;
}

body.sub .caseTitle.active .caseTitle__title:after {
  width: 100%;
}

@media screen and (max-width: 767px) {
  body.sub .caseTitle {
    margin-top: 0;
    margin-bottom: 40px;
  }

  body.sub .caseTitle .caseTitle__title {
    font-size: 24px;
    margin-bottom: 15px;
  }

  body.sub .caseTitle .caseTitle__title:after {
    margin-top: 15px;
  }

  body.sub .caseTitle .caseTitle__client {
    font-size: 14px;
  }
}

body.sub .caseVoice {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  -ms-grid-columns: auto 250px;
  grid-template-columns: auto 250px;
}

body.sub .caseVoice>*:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

body.sub .caseVoice>*:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

body.sub .caseVoice>*:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

body.sub .caseVoice>*:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

body.sub .caseVoice .caseVoice__head {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

body.sub .caseVoice .caseVoice__icon {
  font-size: 20px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  background-image: url("../img/common/icon_voice.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.5em;
  padding-left: 2em;
  line-height: 1.2em;
  margin-bottom: 60px;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

body.sub .caseVoice .caseVoice__profile {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
}

body.sub .caseVoice .caseVoice__image,
body.sub .caseVoice .caseVoice__logo {
  margin-bottom: 20px;
}

body.sub .caseVoice .caseVoice__logo {
  width: 100%;
  height: 40px;
}

body.sub .caseVoice .caseVoice__logo picture,
body.sub .caseVoice .caseVoice__logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  font-family: 'object-fit:contain;';
}

body.sub .caseVoice .caseVoice__name {
  text-align: center;
}

body.sub .caseVoice .caseVoice__name small {
  display: block;
  font-size: 14px;
}

body.sub .caseVoice .caseVoice__name p {
  font-size: 28px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .caseVoice {
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
  }

  body.sub .caseVoice>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  body.sub .caseVoice>*:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  body.sub .caseVoice>*:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }

  body.sub .caseVoice .caseVoice__icon {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    margin-bottom: 20px;
  }

  body.sub .caseVoice .caseVoice__profile {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 30px;
  }

  body.sub .caseVoice .caseVoice__image {
    width: 51.85185%;
  }

  body.sub .caseVoice .caseVoice__info {
    width: 45.92593%;
  }

  body.sub .caseVoice .caseVoice__logo {
    height: 25px;
  }

  body.sub .caseVoice .caseVoice__logo picture,
  body.sub .caseVoice .caseVoice__logo img {
    -o-object-position: left center;
    object-position: left center;
  }

  body.sub .caseVoice .caseVoice__name {
    text-align: left;
    line-height: 1.2;
  }

  body.sub .caseVoice .caseVoice__name small {
    font-size: 10px;
    margin-bottom: 10px;
  }

  body.sub .caseVoice .caseVoice__name p {
    font-size: 14px;
  }

  body.sub .caseVoice .caseVoice__head {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
  }
}

body.sub .caseButton {
  margin-top: 50px;
  text-align: center;
}

body.sub .caseButton .caseButton__button {
  display: block;
  width: 500px;
  height: 80px;
  background-color: #fff;
  padding: 10px;
  margin: 0 auto 10px;
  position: relative;
}

body.sub .caseButton .caseButton__button picture,
body.sub .caseButton .caseButton__button img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  font-family: 'object-fit:contain;';
}

body.sub .caseButton .caseButton__button .caseButton__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #004F8A;
  color: #fff;
  font-size: 20px;
  -webkit-transition: all 0.2s linear 0.2s;
  transition: all 0.2s linear 0.2s;
}

body.sub .caseButton .caseButton__button .caseButton__overlay .caseButton__overlay__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 30px;
  height: 100%;
}

body.sub .caseButton .caseButton__button .caseButton__overlay p,
body.sub .caseButton .caseButton__button .caseButton__overlay img {
  opacity: 0;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  transform: translateX(-20px);
}

body.sub .caseButton .caseButton__button .caseButton__overlay img {
  width: 18px;
}

body.sub .caseButton .caseButton__button:hover .caseButton__overlay {
  width: 100%;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

body.sub .caseButton .caseButton__button:hover .caseButton__overlay p,
body.sub .caseButton .caseButton__button:hover .caseButton__overlay img {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 0.2s linear 0.2s;
  transition: all 0.2s linear 0.2s;
}

@media screen and (max-width: 767px) {
  body.sub .caseButton {
    margin-top: 20px;
  }

  body.sub .caseButton .caseButton__button {
    width: 100%;
    height: 60px;
  }
}

body.sub .caseFilter {
  margin-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 999;
}

@media screen and (max-width: 767px) {
  body.sub .caseFilter {
    margin-bottom: 20px;
  }
}

body.sub .caseFilter ul {
  width: 100%;
}

@media screen and (min-width: 768px) {
  body.sub .caseFilter ul li.caseFilter__all {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }

  body.sub .caseFilter ul li.caseFilter__all a.caseFilter__open {
    width: 25%;
    border-left: 1px solid #8EA3AD;
  }

  body.sub .caseFilter ul .caseFilter__categories {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  body.sub .caseFilter ul .caseFilter__categories li.caseFilter__category {
    width: 33.333333%;
  }

  body.sub .caseFilter ul li a:before {
    content: '';
    display: block;
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 0;
    background-color: transparent;
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  body.sub .caseFilter ul li a.active,
  body.sub .caseFilter ul li a:hover {
    color: #fff;
  }

  body.sub .caseFilter ul li a.active:before,
  body.sub .caseFilter ul li a:hover:before {
    background-color: #50A7CE;
  }
}

body.sub .caseFilter ul li {
  text-align: center;
}

body.sub .caseFilter ul li a {
  color: #8EA3AD;
  text-decoration: none;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-right: 1px solid #8EA3AD;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  position: relative;
}

@media screen and (max-width: 767px) {
  body.sub .caseFilter ul {
    display: block;
    position: relative;
  }

  body.sub .caseFilter ul li a {
    background-color: #fff;
    font-size: 14px;
    color: #8EA3AD;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  body.sub .caseFilter ul li .caseFilter__categories {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    padding: 0 20px;
    border: 2px solid #8EA3AD;
    border-top: none;
  }

  body.sub .caseFilter ul li .caseFilter__categories li {
    width: 100%;
    font-size: 14px;
  }

  body.sub .caseFilter ul li .caseFilter__categories li:first-child {
    border-left: none;
  }

  body.sub .caseFilter ul li .caseFilter__categories li .arrowRight {
    display: none;
  }

  body.sub .caseFilter ul li .caseFilter__categories li a {
    padding: 10px 0;
    border-right: none;
    height: auto;
  }

  body.sub .caseFilter ul li .caseFilter__categories li:not(:last-child) {
    border-bottom: 1px solid #8EA3AD;
  }
}

@media screen and (max-width: 767px) {
  body.sub .caseFilter ul .caseFilter__open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 3px;
    position: relative;
    border: 2px solid #8EA3AD;
  }

  body.sub .caseFilter ul .caseFilter__open:after,
  body.sub .caseFilter ul .caseFilter__open:before {
    content: '';
    display: block;
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #8EA3AD;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  body.sub .caseFilter ul .caseFilter__open:before {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
  }

  body.sub .caseFilter ul .caseFilter__open.open:before {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
  }

  body.sub .caseFilter ul .caseFilter__open.open:after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
  }
}

body.sub .caseList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -10px;
}

body.sub .caseList li {
  width: calc(25% - 20px);
  margin: 10px;
}

body.sub .caseList--column04 li {
  width: calc(33.333333% - 20px);
  margin: 10px;
}

body.sub .caseList .caseList__inner {
  position: relative;
  display: block;
  color: #fff;
  overflow: hidden;
}

body.sub .caseList .caseList__inner:hover picture img {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}

body.sub .caseList .caseList__inner:hover .caseList__detail {
  padding-top: 10px;
  max-height: 60px;
}

body.sub .caseList .caseList__inner:hover .caseList__category {
  max-height: 0;
}

body.sub .caseList picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: -webkit-transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01), -webkit-transform 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

body.sub .caseList .caseList__text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

body.sub .caseList .caseList__content {
  background-color: rgba(80, 167, 206, 0.7);
  padding: 14px 14px 14px 14px;
}

body.sub .caseList .caseList__title {
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.sub .caseList .caseList__detail {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
}

body.sub .caseList .caseList__category {
  background-color: #004F8A;
  text-align: center;
  max-height: 60px;
  overflow: hidden;
  -webkit-transition: all 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  transition: all 0.2s cubic-bezier(0.41, 0.42, 0.66, 1.01);
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

body.sub .caseList .caseList__category p {
  padding: 4px;
}

@media screen and (max-width: 767px) {
  body.sub .caseList {
    margin: 0;
  }

  body.sub .caseList li {
    width: 100%;
    margin: 0;
    font-size: 12px;
    margin-bottom: 20px;
  }

  body.sub .caseList .caseList__content {
    padding: 10px;
  }

  body.sub .caseList .caseList__detail {
    padding-top: 0.5em;
    max-height: initial;
  }
}

body.sub .detail__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  -ms-grid-columns: 42.96875% 6.25% 50.78125%;
  grid-template-columns: 42.96875% 6.25% 50.78125%;
}

body.sub .detail__inner>*:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

body.sub .detail__inner>*:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

body.sub .detail__inner>*:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

body.sub .detail__inner>*:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

body.sub .detail__inner>*:nth-child(5) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

body.sub .detail__inner>*:nth-child(6) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}

@media screen and (max-width: 767px) {
  body.sub .detail__inner {
    display: block;
  }
}

body.sub .detail__inner .caseVoice__icon {
  font-size: 20px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  background-image: url("../img/common/icon_voice.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.5em;
  padding-left: 2em;
  line-height: 1.2em;
  margin-bottom: 15px;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

body.sub .detail__inner .doctor {
  display: inline-grid;
  width: auto;
  margin-bottom: 40px;
}


@media screen and (max-width: 767px) {
  body.sub .detail__inner .caseVoice__icon {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    margin-bottom: 20px;
  }
}

body.sub .detail__inner .detail__image {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

@media screen and (max-width: 767px) {
  body.sub .detail__inner .detail__image {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
  }
}

body.sub .detail__inner .detail__sticky {
  /* Safari */
  position: sticky;
  top: 0;
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  body.sub .detail__inner .detail__sticky {
    position: relative;
    top: 0 !important;
    padding-bottom: 40px;
  }
}

body.sub .detail__inner .detail__head {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
}

body.sub .detail__inner .detail__text {
  font-size: 16px;
  line-height: 2.25;
  padding-bottom: 100px;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
}

@media screen and (max-width: 767px) {
  body.sub .detail__inner .detail__text {
    font-size: 13px;
    padding-bottom: 50px;
  }
}

body.sub .productImages {
  margin-bottom: 20px;
}

body.sub .productImages .productImages__thumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
}

body.sub .productImages .productImages__thumbs li {
  width: calc(25% - 7.5px);
  margin-right: 10px;
}

body.sub .productImages .productImages__thumbs li:nth-child(4n) {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  body.sub .productImages .productImages__large {
    margin: 0 calc(50% - 50vw);
  }
}

body.sub .largeTitle {
  height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

body.sub .largeTitle .largeTitle__title {
  font-size: 45px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #000000;
  margin-bottom: 20px;
}

body.sub .largeTitle .largeTitle__title span.sm {
  font-size: 20px;
  vertical-align: bottom;
}

body.sub .largeTitle .largeTitle__title:after {
  display: block;
  content: '';
  width: 0px;
  height: 1px;
  background-color: #000000;
  margin-top: 20px;
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

body.sub .largeTitle .largeTitle__text {
  font-size: 24px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #000000;
}

body.sub .largeTitle.active .largeTitle__title:after {
  width: 100%;
}

@media screen and (max-width: 767px) {
  body.sub .largeTitle {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: auto;
    padding: 30px 0;
  }

  body.sub .largeTitle .largeTitle__title {
    font-size: 26.4px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  body.sub .largeTitle .largeTitle__title span.sm {
    font-size: 12px;
    vertical-align: bottom;
  }

  body.sub .largeTitle .largeTitle__title:after {
    margin-top: 10px;
  }

  body.sub .largeTitle .largeTitle__text {
    font-size: 12px;
    font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
    color: #000000;
  }
}

body.sub .merit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 30px;
}

body.sub .merit .merit__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: calc(50% - 5px);
  height: 100px;
  margin-right: 10px;
  border: 3px solid #50A7CE;
  position: relative;
  font-size: 24px;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #004F8A;
}

body.sub .merit .merit__item:nth-child(even) {
  margin-right: 0;
}

body.sub .merit .merit__item:nth-child(n + 3) {
  margin-top: 10px;
}

body.sub .merit .merit__item .merit__text {
  z-index: 2;
  line-height: 1.2;
  text-align: center;
}

body.sub .merit .merit__item .merit__bg {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 75px;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  body.sub .merit {
    margin-top: 20px;
  }

  body.sub .merit .merit__item {
    font-size: 12px;
    height: 56px;
  }

  body.sub .merit .merit__item .merit__bg {
    width: 43px;
  }
}

body.sub .checkList {
  background-color: #DCEDF5;
  padding: 20px;
}

body.sub .checkList li {
  background-color: #fff;
  padding: 14px 20px 14px 80px;
  background-image: url("/img/common/icon_check.svg");
  background-size: 40px;
  background-position: top 10px left 20px;
  background-repeat: no-repeat;
  font-size: 20px;
  line-height: 1.2;
}

body.sub .checkList li:not(:first-child) {
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  body.sub .checkList {
    padding: 10px;
  }

  body.sub .checkList li {
    padding: 7px 10px 7px 40px;
    background-size: 20px;
    background-position: top 5px left 10px;
    font-size: 14.4px;
  }

  body.sub .checkList li:not(:first-child) {
    margin-top: 5px;
  }
}

body.sub .boxList {
  background-color: #DCEDF5;
  padding: 20px;
}

body.sub .boxList .boxList__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

body.sub .boxList .boxList__list li {
  background-color: #fff;
  padding: 0 20px;
  font-size: 20px;
  line-height: 1.2;
  width: calc(50% - 5px);
  margin-right: 10px;
  height: 65px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body.sub .boxList .boxList__list li:nth-child(even) {
  margin-right: 0;
}

body.sub .boxList .boxList__list li:nth-child(n + 3) {
  margin-top: 10px;
}

body.sub .boxList .boxList__list li.boxList__item--full {
  width: 100%;
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  body.sub .boxList {
    padding: 10px;
  }

  body.sub .boxList .boxList__list li {
    padding: 0 10px;
    font-size: 14.4px;
    height: 50px;
  }

  body.sub .boxList .boxList__list li:nth-child(n + 3) {
    margin-top: 5px;
  }
}

body.sub .section {
  padding: 100px 0;
}

@media screen and (max-width: 767px) {
  body.sub .section {
    padding: 45px 0;
  }
}

body.sub .visionMain__copy {
  font-size: 70px;
  line-height: 1.42857;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  margin-bottom: 70px;
}

@media screen and (max-width: 767px) {
  body.sub .visionMain__copy {
    font-size: 35px;
    text-align: center;
    margin-bottom: 30px;
  }
}

body.sub .visionMain__image {
  width: 140px;
  height: 150px;
  position: relative;
}

body.sub .visionMain__image span.l {
  display: block;
  position: absolute;
}

body.sub .visionMain__image span.l__01 {
  background-color: #8EA3AD;
  top: 0;
  left: 0;
  width: 25px;
  height: 0;
  -webkit-transition: all 0.9s ease-out;
  transition: all 0.9s ease-out;
}

body.sub .visionMain__image span.l__02 {
  background-color: #8EA3AD;
  bottom: 0;
  left: 0;
  width: 0;
  height: 25px;
  -webkit-transition: all 0.6s ease-out 0.75s;
  transition: all 0.6s ease-out 0.75s;
}

body.sub .visionMain__image span.l__03 {
  background-color: #251E1C;
  bottom: 0;
  right: 0;
  width: 25px;
  height: 0;
  -webkit-transition: all 0.9s ease-out;
  transition: all 0.9s ease-out;
}

body.sub .visionMain__image span.l__04 {
  background-color: #251E1C;
  top: 0;
  right: 0;
  width: 0;
  height: 25px;
  -webkit-transition: all 0.6s ease-out 0.75s;
  transition: all 0.6s ease-out 0.75s;
}

body.sub .visionMain__image.active span.l__01 {
  height: 150px;
}

body.sub .visionMain__image.active span.l__02 {
  width: 100px;
}

body.sub .visionMain__image.active span.l__03 {
  height: 150px;
}

body.sub .visionMain__image.active span.l__04 {
  width: 100px;
}

@media screen and (max-width: 767px) {
  body.sub .visionMain__image {
    width: 55px;
    margin: 0 auto;
    height: 60px;
  }

  body.sub .visionMain__image span.l__01 {
    width: 10px;
  }

  body.sub .visionMain__image span.l__02 {
    height: 10px;
  }

  body.sub .visionMain__image span.l__03 {
    width: 10px;
  }

  body.sub .visionMain__image span.l__04 {
    height: 10px;
  }

  body.sub .visionMain__image.active span.l__01 {
    height: 60px;
  }

  body.sub .visionMain__image.active span.l__02 {
    width: 40px;
  }

  body.sub .visionMain__image.active span.l__03 {
    height: 60px;
  }

  body.sub .visionMain__image.active span.l__04 {
    width: 40px;
  }
}

body.sub .visionMain__detail {
  width: 83.33333%;
  margin: 0 0 0 auto;
  font-size: 19px;
  line-height: 2.25;
}

@media screen and (max-width: 767px) {
  body.sub .visionMain__detail {
    width: 100%;
    font-size: 14px;
    text-align: center;
  }
}

body.sub .visionLead__text {
  text-align: center;
  font-size: 45px;
  line-height: 2em;
  letter-spacing: 0.09em;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .visionLead__text {
    font-size: 20px;
    padding-bottom: 0;
  }
}

body.sub .visionLead__text span[class^="slideUp-"],
body.sub .visionLead__text span[class*="slideUp-"] {
  opacity: 0;
  -webkit-transform: translateY(1em);
  -ms-transform: translateY(1em);
  transform: translateY(1em);
  display: inline-block;
}

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

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc1,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc1 {
    -webkit-transition: all 0.6s ease-out 0.6s;
    transition: all 0.6s ease-out 0.6s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc2,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc2 {
    -webkit-transition: all 0.6s ease-out 1.2s;
    transition: all 0.6s ease-out 1.2s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc3,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc3 {
    -webkit-transition: all 0.6s ease-out 1.8s;
    transition: all 0.6s ease-out 1.8s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc4,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc4 {
    -webkit-transition: all 0.6s ease-out 2.4s;
    transition: all 0.6s ease-out 2.4s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc5,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc5 {
    -webkit-transition: all 0.6s ease-out 3s;
    transition: all 0.6s ease-out 3s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc6,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc6 {
    -webkit-transition: all 0.6s ease-out 3.6s;
    transition: all 0.6s ease-out 3.6s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc7,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc7 {
    -webkit-transition: all 0.6s ease-out 4.2s;
    transition: all 0.6s ease-out 4.2s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc8,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc8 {
    -webkit-transition: all 0.6s ease-out 4.8s;
    transition: all 0.6s ease-out 4.8s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc9,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc9 {
    -webkit-transition: all 0.6s ease-out 5.4s;
    transition: all 0.6s ease-out 5.4s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-pc10,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-pc10 {
    -webkit-transition: all 0.6s ease-out 6s;
    transition: all 0.6s ease-out 6s;
  }
}

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

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp1,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp1 {
    -webkit-transition: all 0.6s ease-out 0.6s;
    transition: all 0.6s ease-out 0.6s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp2,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp2 {
    -webkit-transition: all 0.6s ease-out 1.2s;
    transition: all 0.6s ease-out 1.2s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp3,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp3 {
    -webkit-transition: all 0.6s ease-out 1.8s;
    transition: all 0.6s ease-out 1.8s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp4,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp4 {
    -webkit-transition: all 0.6s ease-out 2.4s;
    transition: all 0.6s ease-out 2.4s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp5,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp5 {
    -webkit-transition: all 0.6s ease-out 3s;
    transition: all 0.6s ease-out 3s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp6,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp6 {
    -webkit-transition: all 0.6s ease-out 3.6s;
    transition: all 0.6s ease-out 3.6s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp7,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp7 {
    -webkit-transition: all 0.6s ease-out 4.2s;
    transition: all 0.6s ease-out 4.2s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp8,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp8 {
    -webkit-transition: all 0.6s ease-out 4.8s;
    transition: all 0.6s ease-out 4.8s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp9,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp9 {
    -webkit-transition: all 0.6s ease-out 5.4s;
    transition: all 0.6s ease-out 5.4s;
  }

  body.sub .visionLead__text span[class^="slideUp-"].slideUp-sp10,
  body.sub .visionLead__text span[class*="slideUp-"].slideUp-sp10 {
    -webkit-transition: all 0.6s ease-out 6s;
    transition: all 0.6s ease-out 6s;
  }
}

body.sub .visionLead__text.active span[class^="slideUp-"],
body.sub .visionLead__text.active span[class*="slideUp-"] {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body.sub .visionMission {
  overflow: hidden;
}

body.sub .visionMission__lead {
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 40px;
  margin-bottom: 70px;
}

@media screen and (max-width: 767px) {
  body.sub .visionMission__lead {
    font-size: 20px;
  }
}

body.sub .missionTitle {
  min-height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

body.sub .missionTitle--01 {
  background-image: url("../img/vision/mission_01.jpg");
  background-size: cover;
  background-position: center;
}

body.sub .missionTitle--02 {
  background-image: url("../img/vision/mission_02.jpg");
  background-size: cover;
  background-position: center;
}

body.sub .missionTitle--03 {
  background-image: url("../img/vision/mission_03.jpg");
  background-size: cover;
  background-position: center;
}

body.sub .missionTitle .missionTitle__text {
  width: 100%;
  color: #fff;
}

body.sub .missionTitle .missionTitle__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 50px;
}

body.sub .missionTitle .missionTitle__no {
  font-size: 100px;
  line-height: 1;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin-right: 50px;
  padding-right: 50px;
  border-right: 1px solid #fff;
}

body.sub .missionTitle .missionTitle__word {
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 50px;
  line-height: 1;
}

body.sub .missionTitle .missionTitle__head {
  font-size: 50px;
  line-height: 1.6;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .missionTitle {
    min-height: auto;
    height: 175px;
  }

  body.sub .missionTitle .missionTitle__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  body.sub .missionTitle .missionTitle__no {
    font-size: 25px;
    margin-right: 12px;
    padding-right: 12px;
  }

  body.sub .missionTitle .missionTitle__word {
    font-size: 25px;
  }

  body.sub .missionTitle .missionTitle__head {
    font-size: 20px;
    text-align: center;
  }
}

body.sub .missionDetail {
  min-height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 19px;
  line-height: 2.25;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  body.sub .missionDetail {
    min-height: auto;
    font-size: 14px;
    width: 89.96089%;
    margin: 0 auto;
  }
}

body.sub .visionProductHead {
  text-align: center;
  margin-bottom: 60px;
}

body.sub .visionProductHead .visionProductHead__no {
  display: block;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 70px;
  margin-bottom: 60px;
}

body.sub .visionProductHead .visionProductHead__text {
  display: block;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-size: 50px;
}

@media screen and (max-width: 767px) {
  body.sub .visionProductHead {
    margin-bottom: 30px;
  }

  body.sub .visionProductHead .visionProductHead__no {
    font-size: 35px;
    margin-bottom: 30px;
  }

  body.sub .visionProductHead .visionProductHead__text {
    font-size: 25px;
  }
}

body.sub .visionProduct:not(:last-child) {
  margin-bottom: 160px;
}

@media screen and (max-width: 767px) {
  body.sub .visionProduct:not(:last-child) {
    margin-bottom: 100px;
  }
}

body.sub .companyMain {
  position: relative;
}

@media screen and (min-width: 768px) {
  body.sub .companyMain .companyMain__content {
    position: absolute;
    top: 50%;
    left: -110px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 780px;
    background-color: rgba(0, 79, 138, 0.43);
    padding: 60px 70px;
    color: #fff;
  }

  body.sub .companyMain .companyMain__head {
    font-size: 50px;
    line-height: 1.2;
    margin-bottom: 30px;
    font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
  }

  body.sub .companyMain .companyMain__text {
    line-height: 2;
  }

  body.sub .companyMain .companyMain__name {
    text-align: right;
    margin-top: 1em;
    font-size: 20px;
  }

  body.sub .companyMain .companyMain__name small {
    font-size: 13px;
    margin-right: 3em;
  }
}

@media screen and (max-width: 767px) {
  body.sub .companyMain .companyMain__content {
    margin-top: 30px;
  }

  body.sub .companyMain .companyMain__head {
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
    font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
  }

  body.sub .companyMain .companyMain__text {
    font-size: 14px;
    line-height: 2.25;
  }

  body.sub .companyMain .companyMain__name {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 2;
    font-size: 16.8px;
    line-height: 1.6;
    text-align: center;
  }

  body.sub .companyMain .companyMain__name small {
    display: block;
    font-size: 10px;
  }
}

body.sub .companyTeam {
  background-image: url("/img/company/company_02.png");
  background-position: center;
  background-size: 80.9375%;
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
  body.sub .companyTeam {
    background-position: center top 80px;
    background-size: 100%;
  }
}

body.sub .storyLine {
  position: relative;
  padding-bottom: 30px;
  height: 1736px;
}

@media screen and (max-width: 767px) {
  body.sub .storyLine {
    height: auto;
  }
}

body.sub .storyLine:after {
  content: '';
  display: block;
  width: 6px;
  height: 0;
  background-color: #004F8A;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 4.2s linear 0.2s;
  transition: all 4.2s linear 0.2s;
}

@media screen and (max-width: 767px) {
  body.sub .storyLine:after {
    width: 3px;
    left: 30px;
  }
}

body.sub .storyLine:before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  border-left: 6px solid #004F8A;
  border-bottom: 6px solid #004F8A;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  opacity: 0;
  -webkit-transition: all 0.2s linear 4.2s;
  transition: all 0.2s linear 4.2s;
}

@media screen and (max-width: 767px) {
  body.sub .storyLine:before {
    width: 15px;
    height: 15px;
    left: 30px;
    border-left: 3px solid #004F8A;
    border-bottom: 3px solid #004F8A;
  }
}

body.sub .storyLine .storyLine__item {
  position: absolute;
  top: 0;
  width: 50%;
  padding-top: 42px;
}

@media screen and (max-width: 767px) {
  body.sub .storyLine .storyLine__item {
    position: relative;
    width: 100%;
    padding-left: 110px;
    padding-top: 20px;
    margin-bottom: 10px;
  }

  body.sub .storyLine .storyLine__item:before {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #004F8A;
    position: absolute;
    top: 30px;
    left: 60px;
  }

  body.sub .storyLine .storyLine__item:nth-child(1):before {
    -webkit-transition: all 0.2s linear 0.2s;
    transition: all 0.2s linear 0.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(1) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
  }

  body.sub .storyLine .storyLine__item:nth-child(1) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 0.4s;
    transition: all 0.2s linear 0.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(2):before {
    -webkit-transition: all 0.2s linear 0.8s;
    transition: all 0.2s linear 0.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(2) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 0.6s;
    transition: all 0.2s linear 0.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(2) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 1s;
    transition: all 0.2s linear 1s;
  }

  body.sub .storyLine .storyLine__item:nth-child(3):before {
    -webkit-transition: all 0.2s linear 1.4s;
    transition: all 0.2s linear 1.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(3) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 1.2s;
    transition: all 0.2s linear 1.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(3) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 1.6s;
    transition: all 0.2s linear 1.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(4):before {
    -webkit-transition: all 0.2s linear 2s;
    transition: all 0.2s linear 2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(4) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 1.8s;
    transition: all 0.2s linear 1.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(4) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 2.2s;
    transition: all 0.2s linear 2.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(5):before {
    -webkit-transition: all 0.2s linear 2.6s;
    transition: all 0.2s linear 2.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(5) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 2.4s;
    transition: all 0.2s linear 2.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(5) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 2.8s;
    transition: all 0.2s linear 2.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(6):before {
    -webkit-transition: all 0.2s linear 3.2s;
    transition: all 0.2s linear 3.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(6) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 3s;
    transition: all 0.2s linear 3s;
  }

  body.sub .storyLine .storyLine__item:nth-child(6) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 3.4s;
    transition: all 0.2s linear 3.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(7):before {
    -webkit-transition: all 0.2s linear 3.8s;
    transition: all 0.2s linear 3.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(7) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 3.6s;
    transition: all 0.2s linear 3.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(7) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 4s;
    transition: all 0.2s linear 4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(8):before {
    -webkit-transition: all 0.2s linear 4.4s;
    transition: all 0.2s linear 4.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(8) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 4.2s;
    transition: all 0.2s linear 4.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(8) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 4.6s;
    transition: all 0.2s linear 4.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(9):before {
    -webkit-transition: all 0.2s linear 5s;
    transition: all 0.2s linear 5s;
  }

  body.sub .storyLine .storyLine__item:nth-child(9) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 4.8s;
    transition: all 0.2s linear 4.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(9) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 5.2s;
    transition: all 0.2s linear 5.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(10):before {
    -webkit-transition: all 0.2s linear 5.6s;
    transition: all 0.2s linear 5.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(10) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 5.4s;
    transition: all 0.2s linear 5.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(10) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 5.8s;
    transition: all 0.2s linear 5.8s;
  }
}

@media screen and (min-width: 768px) {
  body.sub .storyLine .storyLine__item:nth-child(1) {
    top: 0px;
  }

  body.sub .storyLine .storyLine__item:nth-child(1):before {
    -webkit-transition: all 0.2s linear 0.2s;
    transition: all 0.2s linear 0.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(1) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
  }

  body.sub .storyLine .storyLine__item:nth-child(1) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 0.4s;
    transition: all 0.2s linear 0.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(2) {
    top: 250px;
  }

  body.sub .storyLine .storyLine__item:nth-child(2):before {
    -webkit-transition: all 0.2s linear 0.8s;
    transition: all 0.2s linear 0.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(2) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 0.6s;
    transition: all 0.2s linear 0.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(2) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 1s;
    transition: all 0.2s linear 1s;
  }

  body.sub .storyLine .storyLine__item:nth-child(3) {
    top: 500px;
  }

  body.sub .storyLine .storyLine__item:nth-child(3):before {
    -webkit-transition: all 0.2s linear 1.4s;
    transition: all 0.2s linear 1.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(3) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 1.2s;
    transition: all 0.2s linear 1.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(3) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 1.6s;
    transition: all 0.2s linear 1.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(4) {
    top: 750px;
  }

  body.sub .storyLine .storyLine__item:nth-child(4):before {
    -webkit-transition: all 0.2s linear 2s;
    transition: all 0.2s linear 2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(4) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 1.8s;
    transition: all 0.2s linear 1.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(4) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 2.2s;
    transition: all 0.2s linear 2.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(5) {
    top: 1000px;
  }

  body.sub .storyLine .storyLine__item:nth-child(5):before {
    -webkit-transition: all 0.2s linear 2.6s;
    transition: all 0.2s linear 2.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(5) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 2.4s;
    transition: all 0.2s linear 2.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(5) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 2.8s;
    transition: all 0.2s linear 2.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(6) {
    top: 1250px;
  }

  body.sub .storyLine .storyLine__item:nth-child(6):before {
    -webkit-transition: all 0.2s linear 3.2s;
    transition: all 0.2s linear 3.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(6) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 3s;
    transition: all 0.2s linear 3s;
  }

  body.sub .storyLine .storyLine__item:nth-child(6) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 3.4s;
    transition: all 0.2s linear 3.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(7) {
    top: 1500px;
  }

  body.sub .storyLine .storyLine__item:nth-child(7):before {
    -webkit-transition: all 0.2s linear 3.8s;
    transition: all 0.2s linear 3.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(7) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 3.6s;
    transition: all 0.2s linear 3.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(7) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 4s;
    transition: all 0.2s linear 4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(8) {
    top: 1750px;
  }

  body.sub .storyLine .storyLine__item:nth-child(8):before {
    -webkit-transition: all 0.2s linear 4.4s;
    transition: all 0.2s linear 4.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(8) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 4.2s;
    transition: all 0.2s linear 4.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(8) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 4.6s;
    transition: all 0.2s linear 4.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(9) {
    top: 2000px;
  }

  body.sub .storyLine .storyLine__item:nth-child(9):before {
    -webkit-transition: all 0.2s linear 5s;
    transition: all 0.2s linear 5s;
  }

  body.sub .storyLine .storyLine__item:nth-child(9) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 4.8s;
    transition: all 0.2s linear 4.8s;
  }

  body.sub .storyLine .storyLine__item:nth-child(9) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 5.2s;
    transition: all 0.2s linear 5.2s;
  }

  body.sub .storyLine .storyLine__item:nth-child(10) {
    top: 2250px;
  }

  body.sub .storyLine .storyLine__item:nth-child(10):before {
    -webkit-transition: all 0.2s linear 5.6s;
    transition: all 0.2s linear 5.6s;
  }

  body.sub .storyLine .storyLine__item:nth-child(10) .storyLine__no {
    opacity: 0;
    -webkit-transition: all 0.2s linear 5.4s;
    transition: all 0.2s linear 5.4s;
  }

  body.sub .storyLine .storyLine__item:nth-child(10) .storyLine__text {
    opacity: 0;
    -webkit-transition: all 0.2s linear 5.8s;
    transition: all 0.2s linear 5.8s;
  }

  body.sub .storyLine .storyLine__item:before {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background-color: #004F8A;
    position: absolute;
    top: 60px;
  }

  body.sub .storyLine .storyLine__item:nth-child(odd) {
    right: 0;
    padding-left: 170px;
  }

  body.sub .storyLine .storyLine__item:nth-child(odd) .storyLine__no {
    left: -60px;
  }

  body.sub .storyLine .storyLine__item:nth-child(odd):before {
    left: 60px;
  }

  body.sub .storyLine .storyLine__item:nth-child(even) {
    left: 0;
    padding-right: 170px;
  }

  body.sub .storyLine .storyLine__item:nth-child(even) .storyLine__no {
    right: -60px;
  }

  body.sub .storyLine .storyLine__item:nth-child(even) .storyLine__head {
    text-align: right;
  }

  body.sub .storyLine .storyLine__item:nth-child(even):before {
    right: 60px;
  }
}

body.sub .storyLine .storyLine__no {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 30px;
  font-family: "JMCGOTHIC", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #004F8A;
  color: #fff;
  position: absolute;
  top: 0;
  z-index: 9;
}

@media screen and (max-width: 767px) {
  body.sub .storyLine .storyLine__no {
    width: 60px;
    height: 60px;
    font-size: 14px;
    left: 0;
  }
}

body.sub .storyLine .storyLine__head {
  position: relative;
  font-size: 22px;
  color: #004F8A;
  margin-bottom: 14px;
}

@media screen and (max-width: 767px) {
  body.sub .storyLine .storyLine__head {
    font-size: 16.8px;
  }
}

@media screen and (max-width: 767px) {
  body.sub .storyLine .storyLine__text {
    font-size: 14px;
  }
}

body.sub .storyLine .storyLine__text picture {
  display: block;
  margin-top: 14px;
}

body.sub .storyLine.active:after {
  height: 100%;
}

body.sub .storyLine.active:before {
  opacity: 1;
}

body.sub .storyLine.active .storyLine__item:before {
  width: 100px;
}

@media screen and (max-width: 767px) {
  body.sub .storyLine.active .storyLine__item:before {
    width: 40px;
  }
}

body.sub .storyLine.active .storyLine__item .storyLine__no {
  opacity: 1;
}

body.sub .storyLine.active .storyLine__item .storyLine__text {
  opacity: 1;
}

body.sub .faqLead {
  font-size: 20px;
  line-height: 2.25;
}

@media screen and (max-width: 767px) {
  body.sub .faqLead {
    font-size: 14px;
  }
}

body.sub .faqList .faqList__item {
  padding: 0 20px;
  background-color: #EDF6FA;
}

body.sub .faqList .faqList__item:not(:last-child) {
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  body.sub .faqList .faqList__item {
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.75;
  }
}

body.sub .faqList .faqList__inner--question {
  position: relative;
  color: #464646;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
}

body.sub .faqList .faqList__inner--question:after,
body.sub .faqList .faqList__inner--question:before {
  content: '';
  display: block;
  position: absolute;
  width: 15px;
  height: 2px;
  background-color: #464646;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

body.sub .faqList .faqList__inner--question:before {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}

body.sub .faqList .faqList__inner--question.active:before {
  -webkit-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

body.sub .faqList .faqList__inner--question.active:after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}

@media screen and (max-width: 767px) {
  body.sub .faqList .faqList__inner--question {
    padding: 10px;
    display: block;
  }

  body.sub .faqList .faqList__inner--question:after,
  body.sub .faqList .faqList__inner--question:before {
    width: 10px;
    top: 20px;
    right: 10px;
  }
}

body.sub .faqList .faqList__inner--answer {
  display: none;
  padding-bottom: 20px;
}

@media screen and (max-width: 767px) {
  body.sub .faqList .faqList__inner--answer {
    padding-bottom: 10px;
  }
}

body.sub .faqList .faqList__detail {
  padding: 20px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  body.sub .faqList .faqList__detail {
    padding: 10px;
    display: block;
  }
}

body.sub .faqList .faqList__head {
  margin-right: 1em;
}

body.sub .sitemapList {
  margin-top: 140px;
  border-bottom: 1px solid #464646;
}

@media screen and (max-width: 767px) {
  body.sub .sitemapList {
    margin-top: 50px;
    font-size: 14px;
  }
}

body.sub .sitemapList a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 80px;
  color: #464646;
  text-decoration: none;
  border-bottom: 1px solid #8EA3AD;
  background-image: url("/img/common/arrow_right_04_black.svg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 8px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  padding: 0 20px;
}

@media screen and (max-width: 767px) {
  body.sub .sitemapList a {
    padding: 0 10px;
    height: 50px;
    background-size: 6px;
    background-position: right 10px center;
  }
}

body.sub .sitemapList a:hover {
  background-image: url("/img/common/arrow_right_04_gray.svg");
  color: #c8c8c8;
}

body.sub .sitemapList>li>a {
  border-top: 1px solid #464646;
  border-bottom: none;
  font-size: 20px;
}

body.sub .sitemapList>li>a.sitemapList__open {
  border-bottom: 1px solid #8EA3AD;
}

@media screen and (max-width: 767px) {
  body.sub .sitemapList>li>a.sitemapList__open {
    border-bottom: none;
  }

  body.sub .sitemapList>li>a.sitemapList__open:hover {
    color: #464646;
  }
}

@media screen and (max-width: 767px) {
  body.sub .sitemapList>li>a {
    font-size: 16px;
  }

  body.sub .sitemapList>li>a.sitemapList__open {
    position: relative;
    background-image: none;
  }

  body.sub .sitemapList>li>a.sitemapList__open:after,
  body.sub .sitemapList>li>a.sitemapList__open:before {
    content: '';
    display: block;
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #464646;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  body.sub .sitemapList>li>a.sitemapList__open:before {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
  }

  body.sub .sitemapList>li>a.sitemapList__open.sitemapList__active {
    border-bottom: 1px solid #8EA3AD;
  }

  body.sub .sitemapList>li>a.sitemapList__open.sitemapList__active:before {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
  }

  body.sub .sitemapList>li>a.sitemapList__open.sitemapList__active:after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
  }
}

body.sub .sitemapList .sitemapList__sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  body.sub .sitemapList .sitemapList__sub {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  body.sub .sitemapList .sitemapList__sub .sitemapList__item {
    width: 31.25%;
    margin-right: 3.125%;
  }

  body.sub .sitemapList .sitemapList__sub .sitemapList__item:nth-child(3n) {
    margin-right: 0;
  }

  body.sub .sitemapList .sitemapList__sub .sitemapList__item:nth-last-child(1) a,
  body.sub .sitemapList .sitemapList__sub .sitemapList__item:nth-last-child(2):nth-child(3n+1) a,
  body.sub .sitemapList .sitemapList__sub .sitemapList__item:nth-last-child(2):nth-child(3n+2) a,
  body.sub .sitemapList .sitemapList__sub .sitemapList__item:nth-last-child(3):nth-child(3n+1) a {
    border-bottom: none;
  }
}

@media screen and (max-width: 767px) {
  body.sub .sitemapList .sitemapList__sub .sitemapList__item:last-child a {
    border-bottom: none;
  }

  body.sub .sitemapList .sitemapList__sub .sitemapList__item a {
    padding-left: 20px;
  }
}

body.sub .logoSlide {
  position: relative;
  padding: 0 70px;
}

body.sub .logoSlide .logoSlide__list li {
  padding: 45px;
}

body.sub .logoSlide .logoSlide__next {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 35px;
}

body.sub .logoSlide .logoSlide__prev {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%) scale(-1, 1);
  -ms-transform: translateY(-50%) scale(-1, 1);
  transform: translateY(-50%) scale(-1, 1);
  width: 35px;
}

@media screen and (max-width: 767px) {
  body.sub .logoSlide {
    padding: 0 35px;
  }

  body.sub .logoSlide .logoSlide__list li {
    padding: 20px;
  }

  body.sub .logoSlide .logoSlide__next {
    width: 16px;
  }

  body.sub .logoSlide .logoSlide__prev {
    width: 16px;
  }
}

body.sub .flowImage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body.sub .flowImage span {
  display: block;
}

body.sub .flowImage span:nth-child(odd) {
  width: 180px;
}

body.sub .flowImage span:nth-child(even) {
  width: 20px;
}

@media screen and (max-width: 767px) {
  body.sub .flowImage {
    display: block;
    height: 0;
    padding-top: 70.64516%;
    position: relative;
  }

  body.sub .flowImage span {
    display: block;
    position: absolute;
  }

  body.sub .flowImage span:nth-child(odd) {
    width: 29.03226%;
  }

  body.sub .flowImage span:nth-child(even) {
    width: 3.22581%;
  }

  body.sub .flowImage span:nth-child(1) {
    top: 0;
    left: 0;
  }

  body.sub .flowImage span:nth-child(2) {
    top: 21.23288%;
    left: 30.32258%;
  }

  body.sub .flowImage span:nth-child(3) {
    top: 0;
    left: 35.48387%;
  }

  body.sub .flowImage span:nth-child(4) {
    top: 21.23288%;
    left: 65.80645%;
  }

  body.sub .flowImage span:nth-child(5) {
    top: 0;
    left: 70.64516%;
  }

  body.sub .flowImage span:nth-child(6) {
    top: 47.48858%;
    left: 82.74194%;
  }

  body.sub .flowImage span:nth-child(6) img {
    -webkit-transform: rotate(90deg) translate(-25%, -25%);
    -ms-transform: rotate(90deg) translate(-25%, -25%);
    transform: rotate(90deg) translate(-25%, -25%);
  }

  body.sub .flowImage span:nth-child(7) {
    bottom: 0;
    left: 70.64516%;
  }

  body.sub .flowImage span:nth-child(8) {
    bottom: 16.43836%;
    left: 65.80645%;
  }

  body.sub .flowImage span:nth-child(8) img {
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }

  body.sub .flowImage span:nth-child(9) {
    bottom: 0;
    left: 35.48387%;
  }

  body.sub .flowImage span:nth-child(10) {
    bottom: 16.43836%;
    left: 30.32258%;
  }

  body.sub .flowImage span:nth-child(10) img {
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }

  body.sub .flowImage span:nth-child(11) {
    bottom: 0;
    left: 0;
  }
}

body.sub .teamImage {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 89.91228%;
  font-family: "JMCGOTHIC", "ゴシックMB101 DB", "Gothic MB101 DemiBold", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  z-index: 1;
  font-size: 20px;
}

@media screen and (max-width: 1320px) {
  body.sub .teamImage {
    font-size: 1.51515vw;
  }
}

@media screen and (max-width: 1200px) {
  body.sub .teamImage {
    font-size: 18.18182px;
  }
}

@media screen and (max-width: 767px) {
  body.sub .teamImage {
    margin-left: auto;
    font-size: 1rem;
    margin-right: auto;
  }
}

body.sub .teamImage .teamImage__circle {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 900px;
  opacity: 0;
}

body.sub .teamImage .teamImage__circle:after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
}

body.sub .teamImage .teamImage__circle--01 {
  top: 0;
  left: 0;
  width: 15em;
  height: 15em;
  color: #004F8A;
  -webkit-box-shadow: 0 0 0 1.2em #004F8A inset;
  box-shadow: 0 0 0 1.2em #004F8A inset;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

body.sub .teamImage .teamImage__circle--01:after {
  left: 14.8em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 1.2em;
  background-color: #004F8A;
  -webkit-transition: all 0.3s ease-out 0.3s;
  transition: all 0.3s ease-out 0.3s;
}

body.sub .teamImage .teamImage__circle--02 {
  top: 1.25em;
  right: 0;
  width: 12.5em;
  height: 12.5em;
  color: #8EA3AD;
  -webkit-box-shadow: 0 0 0 1.2em #8EA3AD inset;
  box-shadow: 0 0 0 1.2em #8EA3AD inset;
  -webkit-transition: all 0.3s ease-out 0.6s;
  transition: all 0.3s ease-out 0.6s;
}

body.sub .teamImage .teamImage__circle--02:after {
  left: 2.65em;
  top: 11.25em;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  width: 1.2em;
  height: 0;
  background-color: #8EA3AD;
  -webkit-transition: all 0.3s ease-out 0.9s;
  transition: all 0.3s ease-out 0.9s;
}

body.sub .teamImage .teamImage__circle--03 {
  bottom: 0;
  left: 11.6em;
  width: 12.5em;
  height: 12.5em;
  color: #50A7CE;
  -webkit-box-shadow: 0 0 0 1.2em #50A7CE inset;
  box-shadow: 0 0 0 1.2em #50A7CE inset;
  -webkit-transition: all 0.6s ease-out 1.2s;
  transition: all 0.6s ease-out 1.2s;
}

body.sub .teamImage .teamImage__circle--03:after {
  left: 2.5em;
  bottom: 11em;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
  width: 1.2em;
  height: 0;
  background-color: #50A7CE;
  -webkit-transition: all 0.3s ease-out 1.5s;
  transition: all 0.3s ease-out 1.5s;
}

body.sub .teamImage .teamImage__circle--04 {
  top: 16em;
  right: 0;
  width: 7.85em;
  height: 7.85em;
  color: #004F8A;
  -webkit-box-shadow: 0 0 0 0.7em #004F8A inset;
  box-shadow: 0 0 0 0.7em #004F8A inset;
  -webkit-transition: all 0.3s ease-out 1.8s;
  transition: all 0.3s ease-out 1.8s;
}

body.sub .teamImage .teamImage__largeText {
  font-size: 2em;
}

body.sub .teamImage .teamImage__largeText:not(:last-child) {
  margin-bottom: 0.5em;
}

body.sub .teamImage .teamImage__smallText {
  font-size: 1em;
  margin-top: 0.25em;
}

body.sub .teamImage .teamImage__mediumText {
  font-size: 1.7em;
}

body.sub .teamImage.active .teamImage__circle {
  opacity: 1;
}

body.sub .teamImage.active .teamImage__circle--01:after {
  width: 7.3em;
}

body.sub .teamImage.active .teamImage__circle--02:after {
  height: 7.8em;
}

body.sub .teamImage.active .teamImage__circle--03:after {
  height: 7.3em;
}

/* PC */
@media screen and (min-width: 768px) {
  .forsp {
    display: none !important;
  }

  .br-sp {
    display: none;
  }
}

/* SP */
@media screen and (max-width: 767px) {
  .forpc {
    display: none !important;
  }

  .br-pc {
    display: none;
  }
}

@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    max-height: 0;
  }

  100% {
    opacity: 1;
    max-height: 200px;
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    max-height: 0;
  }

  100% {
    opacity: 1;
    max-height: 200px;
  }
}