/* ----------
page-origin
---------- */

a {
  color: #1B2D60;
}

.content {
  margin-top: 106px;
  color: #1B2D60;
}

.content-article-container {
  min-width: auto;
  padding-top: 23px;
}

.thumb {
  background: no-repeat center center / cover;
  height: 0;
  padding-top: 59%;
}

.section-main-visual {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background-position: right 28% bottom 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  background-position: center center;
}

.column01 .section-main-visual {
    background-position: center right 80%;
}

.section-main-visual-text {
  position: absolute;
  bottom: 10px;
  left: 20px;
  display: block;
  z-index: 20;
}

.section-main-visual-text-category {
  margin-bottom: 5px;
}

.section-main-visual-text-category span {
  display: inline-block;
  padding: 5px 15px;
  background-color: #8e278a;
  line-height: 1;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.section-main-visual-text-heading {
  font-size: 25px;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
}

.section-menu {
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  width: auto;
  z-index: 20;
}

.section-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-menu-list.primary {
  margin-bottom: 20px;
}

.section-menu-list .section-menu-list-item {
  line-height: 1;
}

.section-menu-list.primary .section-menu-list-item {
  margin-bottom: 5px;
  font-size: 20px;
}

.section-menu-list.secondary .section-menu-list-item {
  margin-bottom: 5px;
  font-size: 16px;
}

.section-menu-list .section-menu-list-item:last-child {
  margin-bottom: 0;
}

.section-menu-list .section-menu-list-link {
  color: #fff;
}

.section-menu-list .section-menu-list-item.active .section-menu-list-link {
  opacity: .375;
}

.section-content {
  color: #1b2d60;
  background: #fff;
  padding-bottom: 39px;
}

.section-content p {
  text-align: justify;
}

.content-box {
  padding: 0 15px 30px;
  background-color: #222121;
}

/*content-navigation*/
.content-navigation {
  padding-top: 5px;
  padding-bottom: 5px;
}

.content-navigation .content-navigation-link {
  position: relative;
  font-size: 16px;
  color: #1b2d60;
  letter-spacing: .075rem;
}

.content-navigation .content-navigation-link.secondary {
  opacity: .5;
}

.content-navigation .content-navigation-link.secondary::after {
  position: absolute;
  content: '';
  width: 25px;
  height: 5px;
  top: calc(50% - 2.5px);
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
}

/*.content-navigation .content-navigation-link.secondary.prev {*/
/*  padding-right: 30px;*/
/*}*/

.content-navigation .content-navigation-link.secondary.prev::after {
  right: -50px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2246.14px%22%20height%3D%229.86px%22%20viewBox%3D%220%200%2046.14%209.86%22%20style%3D%22overflow%3Avisible%3Benable-background%3Anew%200%200%2046.14%209.86%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%231B2D60%3Bstroke-miterlimit%3A10%3B%7D%20.st1%7Bfill%3A%231B2D60%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cline%20class%3D%22st0%22%20x1%3D%2246.14%22%20y1%3D%225.14%22%20x2%3D%221.14%22%20y2%3D%225.14%22%2F%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M7.87%2C0.23C8.02%2C0.45%2C7.95%2C0.76%2C7.72%2C0.9L1.4%2C4.93l6.32%2C4.03C7.95%2C9.1%2C8.02%2C9.4%2C7.87%2C9.63%20C7.73%2C9.86%2C7.42%2C9.93%2C7.2%2C9.78L0.23%2C5.34C0.09%2C5.25%2C0%2C5.1%2C0%2C4.93s0.09-0.32%2C0.23-0.41L7.2%2C0.08C7.28%2C0.02%2C7.37%2C0%2C7.46%2C0%20C7.62%2C0%2C7.78%2C0.08%2C7.87%2C0.23z%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

/*.content-navigation .content-navigation-link.secondary.next {*/
/*  padding-left: 30px;*/
/*}*/

.content-navigation .content-navigation-link.secondary.next::after {
  /*left: 0;*/
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2246.14px%22%20height%3D%229.86px%22%20viewBox%3D%220%200%2046.14%209.86%22%20style%3D%22overflow%3Avisible%3Benable-background%3Anew%200%200%2046.14%209.86%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%231B2D60%3Bstroke-miterlimit%3A10%3B%7D%20.st1%7Bfill%3A%231B2D60%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cline%20class%3D%22st0%22%20x1%3D%220%22%20y1%3D%224.72%22%20x2%3D%2245%22%20y2%3D%224.72%22%2F%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M38.26%2C9.63c-0.15-0.23-0.08-0.53%2C0.15-0.68l6.32-4.03L38.41%2C0.9c-0.23-0.15-0.3-0.45-0.15-0.68%20c0.15-0.23%2C0.45-0.29%2C0.68-0.15l6.97%2C4.44c0.14%2C0.09%2C0.23%2C0.25%2C0.23%2C0.41s-0.09%2C0.32-0.23%2C0.41l-6.97%2C4.44%20c-0.08%2C0.05-0.17%2C0.08-0.26%2C0.08C38.51%2C9.86%2C38.36%2C9.78%2C38.26%2C9.63z%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  right: 96px;
}

.content-navigation .content-navigation-link:hover {
  opacity: 1 !important;
}

/*content-article*/
.content-article {
  margin-bottom: 20px;
  font-weight: 700;
}

.content-article-label {
  display: none;
  background: #8e278a;
  color: #fff;
  line-height: 1;
}

.content-article-title {
  display: none;
}

.content-article-main-image {
  margin: 45px 0 25px;
}

.content-article-sub + .content-article-sub {
  margin-top: 40px;
}

.content-article-sub-title {
  font-weight: 900;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.content-article-sub-text {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  font-weight: 500;
  margin-top: 15px;
}

.content-article-sub-image {
  margin-top: 45px;
}

.content-article-sub-note {
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 10px;
}

.container-fluid {
  position: relative;
}

.content-navigation__next {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding-right: 15px;
}

.content-navigation__prev {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding-left: 15px;
}

/*content-cta*/
.content-cta {
  padding: 30px 0;
  background-color: #000;
}

.content-cta .content-box {
  padding: 0;
  background-color: transparent;
}

.content-cta .button {
  height: 60px;
  margin-bottom: 30px;
  background-color: #000;
  border: 2px solid #fff;
  color: #fff;
  font-size: 24px;
}

.content-cta .button:hover {
  color: #000;
}

.content-cta .button::after {
  position: absolute;
  content: '';
  width: 30px;
  height: 9px;
  top: 25px;
  right: 0;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2241.61px%22%20height%3D%229.86px%22%20viewBox%3D%220%200%2041.61%209.86%22%20style%3D%22overflow%3Avisible%3Benable-background%3Anew%200%200%2041.61%209.86%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-miterlimit%3A10%3B%7D%20.st1%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cg%3E%20%3Cline%20class%3D%22st0%22%20x1%3D%220%22%20y1%3D%224.98%22%20x2%3D%2240%22%20y2%3D%224.98%22%2F%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M33.74%2C9.63c-0.15-0.23-0.08-0.53%2C0.15-0.68l6.32-4.03L33.89%2C0.9c-0.23-0.15-0.3-0.45-0.15-0.68%20s0.45-0.29%2C0.68-0.15l6.97%2C4.44c0.14%2C0.09%2C0.23%2C0.25%2C0.23%2C0.41s-0.09%2C0.32-0.23%2C0.41l-6.97%2C4.44c-0.08%2C0.05-0.17%2C0.08-0.26%2C0.08%20C33.99%2C9.86%2C33.83%2C9.78%2C33.74%2C9.63z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
}

.content-cta .button::before {
  background-color: #fff;
}

.content-cta .button:hover::after {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2241.86px%22%20height%3D%229.86px%22%20viewBox%3D%220%200%2041.86%209.86%22%20style%3D%22overflow%3Avisible%3Benable-background%3Anew%200%200%2041.86%209.86%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Anone%3Bstroke%3A%23000000%3Bstroke-width%3A0.8165%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%3E%20%3Cg%3E%20%3Cline%20class%3D%22st0%22%20x1%3D%220%22%20y1%3D%224.93%22%20x2%3D%2240.68%22%20y2%3D%224.93%22%2F%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M33.98%2C9.63C33.84%2C9.4%2C33.9%2C9.1%2C34.13%2C8.96l6.32-4.03L34.13%2C0.9c-0.23-0.15-0.3-0.45-0.15-0.68s0.45-0.29%2C0.68-0.15%20l6.97%2C4.44c0.14%2C0.09%2C0.23%2C0.25%2C0.23%2C0.41s-0.09%2C0.32-0.23%2C0.41l-6.97%2C4.44c-0.08%2C0.05-0.17%2C0.08-0.26%2C0.08%20C34.23%2C9.86%2C34.08%2C9.78%2C33.98%2C9.63z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.content-cta .copyright {
  margin-bottom: 10px;
  font-size: 16px;
  text-align: center;
}

.content-cta .external-link {
  text-align: center;
}

.content-cta .external-link a {
  color: #fff;
}

/*button*/
.button {
  position: relative;
  display: flex;
  width: 100%;
  height: 80px;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.button:hover {
  color: #368cff;
}

.button {
  overflow: hidden;
}

.button::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 120%;
  height: 100%;
  background-color: #000;
  transform-origin: right top;
  transform: skewX(-30deg) scale(0, 1);
  transition: transform .3s;
}

.button:hover::before {
  transform-origin: left top;
  transform: skewX(-30deg) scale(1, 1);
}

.button::after {
}


.section-main-visual.sub-visual {
  height: 205px;
  margin-bottom: 15px;
}

.iphone .section-main-visual-text-category span,
.android .section-main-visual-text-category span {
  padding: 5px 15px 8px;
}

/*column03*/
.column03 .section-main-visual.sub-visual {
  background-position-y: top;
}

@media (min-width: 768px) {

  .section-main-visual-text-heading {
    font-size: 3vw;
  }

  .section-main-visual-text-category span {
    font-size: 1vw;
    padding: 12px 24px;
  }

  .section-main-visual-text {
    position: static;
  }

  .main-text-wrap {
    width: 810px;
    margin: auto;
    position: relative;
    bottom: calc(100% / -2);
  }

  .section-main-visual.sub-visual .main-text-wrap {
    bottom: calc(100% / -1.5);
  }


  .content {
    margin-top: 116px;
  }

  .content-article-container {
    padding: 78px 89px 90px;
  }

  .thumb {
    height: 400px;
  }

  .section-main-visual {
    height: calc(100vh - 116px);
  }

  .section-main-visual.sub-visual {
    height: 875px;
    margin-top: -155px;
    margin-bottom: 0;
  }

  .section-menu {
    top: 50px;
    left: 30px;
  }

  .section-menu-list.primary .section-menu-list-item {
    margin-bottom: 15px;
    font-size: 30px;
    padding-right: 30px;
  }

  .section-menu-list.secondary .section-menu-list-item {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .section-content {
    background-color: #faf8f5;
    padding-bottom: 70px;
  }

  .content-navigation .content-navigation-link {
    font-size: 25px;
  }

  .content-navigation .content-navigation-link.secondary::after {
    width: 30px;
    height: 7px;
  }

  .content-navigation .content-navigation-link.secondary.prev {
    padding-right: 40px;
  }

  .content-navigation .content-navigation-link.secondary.next {
    padding-left: 40px;
  }

  .content-navigation .content-navigation-link.secondary.prev::after {
    right: 0;
  }

  .content-navigation .content-navigation-link.secondary.next::after {
    left: 0;
  }

  /*content-article*/
  .content-article {
    position: relative;
    width: 800px;
    margin: auto auto 70px;
    z-index: 15;
    background: #fff;
  }

  .content-article.second-article {
    margin-top: -100px;
  }

  .content-article.second-article  .content-article-sub-text {
    letter-spacing: 0.12em;
  }

  .content-article.second-article  .content-article-sub-text.u-text {
    letter-spacing: 0.11em;
  }

  .ie11 .content-article.second-article  .content-article-sub-text {
    letter-spacing: 0.14em;
  }

  .content-article-label {
    line-height: 1.5;
    font-size: 18px;
    font-size: 1vw;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    margin-bottom: 20px;
  }

  .content-article-title {
    margin-bottom: 90px;
    font-size: 45px;
    font-size: 3vw;
    font-weight: 700;
    line-height: 1.5;
  }

  .content-article-main-image.column01 {
    margin-bottom: 70px;
  }

  .content-article-sub.sec01 {
    margin-bottom: 100px;
  }

  .content-article-sub.sec02 {
    margin-bottom: 70px;
  }

  .content-article-sub-title {
    font-size: 24px;
    line-height: 2;
    letter-spacing: 0.2em;
  }

  .content-article-sub-text {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: 2.1;
    letter-spacing: 0.14em;
  }

  .second-article .content-article-sub-text {
    letter-spacing: 0.1em;
  }

  .content-article-sub-image {
    margin-top: 90px;
  }

  .content-article-sub-note {
    margin-top: 10px;
  }

  /*content-cta*/
  .content-cta {
    padding: 50px 0;
  }

  .content-cta .copyright {
    margin-bottom: 10px;
    text-align: left;
  }

  .content-cta .external-link {
    text-align: left;
  }

  /*column03*/
  .column03 .section-main-visual.sub-visual {
    height: 1010px;
    margin-top: -355px;
  }

}

/*

ADD STYLE

*/


@media (min-width: 1100px) {

  .content-navigation.fade-navi {
    /*opacity: 0;*/
    /*animation-name: fadein;*/
    /*animation-duration: 2s;*/
    display: none;
    margin-top: -50px;
    z-index: 12;
    background: #faf8f5;
    position: relative;
    /*animation-delay: 1s;*/
    /*animation-fill-mode: forwards;*/
  }

}

@media (max-width:370px) {
  .section-main-visual-text{
    left: 12px;
  }

  .section-main-visual-text-heading {
    font-size: 22px;
  }
}


@media (max-width:354px) {
  .content-navigation .content-navigation-link.secondary.prev::after {
    right: -35px;
  }

  .content-navigation .content-navigation-link.secondary.next::after {
    right: 80px;
  }
}