/*-------------
contents
---------------*/
.red {
  color: #D70C18; }

#wrapper {
  font-family: 'Libre Caslon Text', serif;
  color: #314B57; }

#mainvisual {
  width: 100%;
  height: 87.5vw;
  margin: 0 auto;
  overflow: hidden; }
  @media (min-width: 751px) and (max-width: 1280px) {
    #mainvisual {
      width: 1280px;
      height: 1120px; } }
  @media (max-width: 750px) {
    #mainvisual {
      width: 100%;
      height: 133.3333333333vw; } }
  #mainvisual .mainvisual_s {
    position: relative;
    width: 100%;
    height: 100%; }
    #mainvisual .mainvisual_s .text_wrap {
      position: absolute;
      top: 0;
      left: 15%;
      width: 70%;
      z-index: 49;
      text-align: center; }
      #mainvisual .mainvisual_s .text_wrap .title {
        width: 182px;
        margin: 85px auto 0; }
        @media (max-width: 750px) {
          #mainvisual .mainvisual_s .text_wrap .title {
            width: 17.3333333333vw;
            margin-top: 6.6666666667vw; } }
      #mainvisual .mainvisual_s .text_wrap .logo {
        width: 18.125vw;
        margin: 23.59375vw auto 0; }
        @media (min-width: 751px) and (max-width: 1280px) {
          #mainvisual .mainvisual_s .text_wrap .logo {
            width: 232px;
            margin: 302px auto 0; } }
        @media (max-width: 750px) {
          #mainvisual .mainvisual_s .text_wrap .logo {
            width: 24.1333333333vw;
            margin-top: 25.8666666667vw; } }
      #mainvisual .mainvisual_s .text_wrap .subtit {
        font-size: 3.1rem;
        margin-top: 21.25vw;
        letter-spacing: 0.1em;
        color: #475963; }
        @media (min-width: 751px) and (max-width: 1280px) {
          #mainvisual .mainvisual_s .text_wrap .subtit {
            margin-top: 272px; } }
        @media (max-width: 750px) {
          #mainvisual .mainvisual_s .text_wrap .subtit {
            font-size: 4.5333333333vw;
            margin-top: 21.3333333333vw;
            letter-spacing: 0.1em;
            line-height: 1.7; } }
      #mainvisual .mainvisual_s .text_wrap .txt {
        font-size: 1.7rem;
        line-height: 1.5;
        margin-top: 36px;
        letter-spacing: 0.05em; }
        @media (max-width: 750px) {
          #mainvisual .mainvisual_s .text_wrap .txt {
            font-size: 3.2vw;
            margin-top: 5.3333333333vw;
            line-height: 1.6; } }
        #mainvisual .mainvisual_s .text_wrap .txt .italic {
          font-style: italic;
          font-weight: 700; }
    #mainvisual .mainvisual_s .img_wrap {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 0; }
      #mainvisual .mainvisual_s .img_wrap .img {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url("../img/about/mainvisual_pc.jpg") no-repeat center top/100% auto; }
        @media (max-width: 750px) {
          #mainvisual .mainvisual_s .img_wrap .img {
            background: url("../img/about/mainvisual_sp.jpg") no-repeat center top/100% auto; } }

.contents {
  position: relative;
  width: 100%;
  min-width: 1280px;
  margin: 0 auto;
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.6;
  letter-spacing: 0.2em;
  background: url("../img/about/cont_bg_pc.jpg") no-repeat center top;
  background-size: 1280px auto; }
  @media (max-width: 750px) {
    .contents {
      min-width: 100%;
      font-size: 3.4vw;
      letter-spacing: 0.08em;
      background: url("../img/about/cont_bg_sp.jpg") no-repeat center top;
      background-size: 100% auto; } }
  .contents .contents_inner {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    padding-bottom: 134px; }
    @media (max-width: 750px) {
      .contents .contents_inner {
        width: 100%;
        padding-bottom: 5.3333333333vw; } }
    .contents .contents_inner .sec {
      box-sizing: border-box;
      position: relative; }
      .contents .contents_inner .sec .tit {
        width: 66px;
        margin: 0 auto; }
        @media (max-width: 750px) {
          .contents .contents_inner .sec .tit {
            width: 10.1333333333vw; } }
      .contents .contents_inner .sec .comment {
        position: absolute;
        font-size: 1.6rem;
        letter-spacing: 0.08em;
        line-height: 1.7;
        text-align: left; }
        @media (max-width: 750px) {
          .contents .contents_inner .sec .comment {
            font-size: 2.6666666667vw;
            letter-spacing: 0.03em; } }
        .contents .contents_inner .sec .comment.left {
          left: 160px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec .comment.left {
              left: 10.1333333333vw; } }
        .contents .contents_inner .sec .comment.right {
          left: 537px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec .comment.right {
              left: 31.4666666667vw; } }
      .contents .contents_inner .sec.sec1 {
        padding-top: 276px;
        height: 948px; }
        @media (max-width: 750px) {
          .contents .contents_inner .sec.sec1 {
            padding-top: 57.8666666667vw;
            height: 176.4vw; } }
        .contents .contents_inner .sec.sec1 .tit {
          width: 540.5px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec.sec1 .tit {
              width: 43.8666666667vw; } }
        .contents .contents_inner .sec.sec1 .comment {
          bottom: 60px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec.sec1 .comment {
              bottom: 9.3333333333vw; } }
      .contents .contents_inner .sec.sec2 {
        padding-top: 312px;
        height: 948px; }
        @media (max-width: 750px) {
          .contents .contents_inner .sec.sec2 {
            padding-top: 45.8666666667vw;
            height: 177.7333333333vw; } }
        .contents .contents_inner .sec.sec2 .tit {
          width: 376px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec.sec2 .tit {
              width: 56.6666666667vw; } }
        .contents .contents_inner .sec.sec2 .comment {
          bottom: 6px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec.sec2 .comment {
              bottom: 5.3333333333vw; } }
      .contents .contents_inner .sec.sec3 {
        padding-top: 242px;
        height: 948px; }
        @media (max-width: 750px) {
          .contents .contents_inner .sec.sec3 {
            padding-top: 39.2vw;
            height: 160vw; } }
        .contents .contents_inner .sec.sec3 .tit {
          width: 367px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec.sec3 .tit {
              width: 55.3333333333vw; } }
        .contents .contents_inner .sec.sec3 .comment {
          bottom: 64px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec.sec3 .comment {
              bottom: 15.2vw; } }
      .contents .contents_inner .sec.sec4 {
        padding-top: 336px;
        height: 948px; }
        @media (max-width: 750px) {
          .contents .contents_inner .sec.sec4 {
            padding-top: 57.0666666667vw;
            height: 185.3333333333vw; } }
        .contents .contents_inner .sec.sec4 .tit {
          width: 523px;
          padding-right: 64px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec.sec4 .tit {
              width: 46.1333333333vw;
              padding-right: 0; } }
        .contents .contents_inner .sec.sec4 .comment {
          bottom: 42px; }
          @media (max-width: 750px) {
            .contents .contents_inner .sec.sec4 .comment {
              bottom: 13.3333333333vw; } }
          .contents .contents_inner .sec.sec4 .comment.right {
            left: 557px; }
            @media (max-width: 750px) {
              .contents .contents_inner .sec.sec4 .comment.right {
                left: 28.8vw; } }
  .contents .detail {
    position: relative;
    width: 800px;
    margin: 0 auto 0; }
    @media (max-width: 750px) {
      .contents .detail {
        width: 79.4666666667vw; } }
    .contents .detail .tit2 {
      background: #A6BBC6;
      color: #fff;
      height: 94px;
      font-size: 2.4rem;
      line-height: 1.3;
      padding-top: 15px;
      letter-spacing: 0.1em; }
      @media (min-width: 751px) {
        .contents .detail .tit2.tit2_1 {
          line-height: 94px;
          padding-top: 0; } }
      @media (max-width: 750px) {
        .contents .detail .tit2 {
          font-size: 3.4666666667vw;
          height: 21.3333333333vw;
          line-height: 1.6;
          padding-top: 2.4vw; }
          .contents .detail .tit2.tit2_1 {
            line-height: 16vw;
            height: 16vw;
            padding-top: 0; } }
    .contents .detail .box {
      margin-top: 90px;
      padding-bottom: 80px;
      border-bottom: 4px solid #C0D0DA; }
      @media (max-width: 750px) {
        .contents .detail .box {
          margin-top: 6.6666666667vw;
          padding-bottom: 6.6666666667vw;
          border-bottom: 2px solid #C0D0DA; } }
      .contents .detail .box .tit3 {
        font-size: 2.5rem;
        letter-spacing: 0.1em; }
        @media (max-width: 750px) {
          .contents .detail .box .tit3 {
            font-size: 3.6vw; } }
      .contents .detail .box .text {
        margin-top: 28px;
        font-size: 1.8rem;
        line-height: 1.6;
        letter-spacing: 0em; }
        @media (max-width: 750px) {
          .contents .detail .box .text {
            margin-top: 6.1333333333vw;
            font-size: 2.6666666667vw;
            text-align: left;
            line-height: 1.8; } }
      .contents .detail .box.box0 {
        border-bottom: none;
        padding-bottom: 90px; }
        @media (max-width: 750px) {
          .contents .detail .box.box0 {
            padding-bottom: 9.3333333333vw; } }
      .contents .detail .box.box5 {
        border-bottom: none; }
    .contents .detail .bosyuu {
      width: 100%;
      margin: 40px auto 0;
      border-top: 2px solid #FF0000;
      border-bottom: 2px solid #FF0000;
      color: #FF0000;
      font-size: 2.3rem;
      letter-spacing: 0.1em;
      line-height: 61px; }
      @media (max-width: 750px) {
        .contents .detail .bosyuu {
          margin: 4vw auto 0;
          border-top: 0.4vw solid #FF0000;
          border-bottom: 0.4vw solid #FF0000;
          font-size: 2.9333333333vw;
          line-height: 8.2666666667vw;
          letter-spacing: 0em; } }

/************************************
    fadein
************************************/
.fadein-- {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: opacity 0.8s linear, transform 0.8s ease-out;
  transition: opacity 0.8s linear, transform 0.8s ease-out;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s; }
  @media (max-width: 750px) {
    .fadein-- {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      -webkit-transition: opacity 0.8s linear, transform 0.6s ease-out;
      transition: opacity 0.8s linear, transform 0.6s ease-out;
      -webkit-transition-delay: 0.6s;
      transition-delay: 0.6s; } }

.fadein2-- {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: opacity 0.8s linear, transform 0.8s ease-out;
  transition: opacity 0.8s linear, transform 0.8s ease-out; }

/************************************
    btn
************************************/
.btn_wrap *,
.btn_wrap *:before,
.btn_wrap *:after {
  box-sizing: border-box; }

.btn {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none; }
  .btn:before, .btn:after,
  .btn .btn--inner:before,
  .btn .btn--inner:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: #000;
    transition: 0.3s ease-in-out; }

.btn--ccw:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto; }
.btn--ccw .btn--inner:before {
  right: 0;
  left: auto; }
.btn--ccw .btn--inner:after {
  top: auto;
  bottom: 0; }

.btn--ccw:before, .btn--ccw:after {
  width: 1px;
  height: 100%; }
.btn--ccw .btn--inner:before,
.btn--ccw .btn--inner:after {
  width: 100%;
  height: 1px; }
@media (min-width: 751px) {
  .btn--ccw:hover:before, .btn--ccw:hover:after {
    height: 100%;
    animation: heightAnime 0.4s 0.1s;
    animation-timing-function: ease-in-out; }
  .btn--ccw:hover .btn--inner:before,
  .btn--ccw:hover .btn--inner:after {
    width: 100%;
    animation: widthAnime 0.4s 0.1s;
    animation-timing-function: ease-in-out; } }

@keyframes widthAnime {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
@keyframes heightAnime {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }