@charset 'utf-8';

/* ==========================================================================

	CTC

   ========================================================================== */

.contents_ttl {

	background-image: url("../images/ttl.svg");
}
h3 {
	background-image: url("../images/bull.svg");
}
.flow > div.step1 {
	background-image: url("../images/flow_1.svg")
}
.flow > div.step2 {
	background-image: url("../images/flow_2.svg")
}
.flow > div.step3 {
	background-image: url("../images/flow_3.svg")
}
.flow > div.step4 {
	background-image: url("../images/flow_4.svg")
}
.fee a {
	border-color: #77bde7;
}
.fee a:hover {
	background-color: #77bde7;
}
.shurui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}
.op {
  flex-direction: row-reverse;
}
.shurui div {
  width: 48%;
}
.shurui p {
  padding: 0;
  margin: 0;
}
.green {
  border-left: #38D430 10px solid;
  padding-left: 10px;
}
.red {
  border-left: #E1251B 10px solid;
  padding-left: 10px;
}
.yellow {
  border-left: #FFC600 10px solid;
  padding-left: 10px;
}
.last {
	padding-top: 50px;
}
.last h2 {
  font-size: 35px;
}
.last .box_txt {
  width: 65%;
  padding-top: 70px;
}
.last .box_img {
  width: 30%;
}
.photo h4 {
	font-size: 26px;
}
/* ============================== SP ============================== */

@media only screen and (max-width: 812px) {
	img.wide100 {
		width: 100vw;
		max-width: 100vw;
	}
	.shurui {
    display: block;
    margin-bottom: 50px;
}
.shurui div {
   width: 100%;
}	

.green {
  border-left: #38D430 7px solid;
  padding-left: 10px;
		margin-bottom: 20px;
}
.red {
  border-left: #E1251B 7px solid;
  padding-left: 10px;
		margin-bottom: 20px;
}
.yellow {
  border-left: #FFC600 7px solid;
  padding-left: 10px;
		margin-bottom: 20px;
}
	.last .box_txt {
    width: 100%;
    padding-top: 0px;
}

}





.books video {
    width: 100%;
}
.content {
  padding: 90px 0; }
  @media screen and (max-width: 1110px) {
    .content {
      padding: 9vw 0; } }
  @media screen and (max-width: 768px) {
    .content {
      padding: 15vw 0; } }
  .content .sectTitle {
    font-family: 'Noto Serif JP', serif;
    font-size: 30px;
    text-align: center;
    letter-spacing: 4px;
    font-weight: 500; }
    @media screen and (max-width: 1110px) {
      .content .sectTitle {
        font-size: 3vw;
        letter-spacing: 0.4vw; } }
    @media screen and (max-width: 768px) {
      .content .sectTitle {
        font-size: 5vw;
        letter-spacing: 0.5vw; } }
  .content .contTitle {
    width: 1000px;
    margin: auto;
    position: relative;
    margin-bottom: 80px; }
    @media screen and (max-width: 1110px) {
      .content .contTitle {
        width: 95%;
        margin-bottom: 8vw; } }
    @media screen and (max-width: 768px) {
      .content .contTitle {
        width: 100%; } }
    .content .contTitle .textWrap {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1; }
      .content .contTitle .textWrap .num {
        font-family: 'Noto Serif JP', serif;
        font-size: 50px;
        margin-right: 50px; }
        @media screen and (max-width: 1110px) {
          .content .contTitle .textWrap .num {
            font-size: 5vw;
            margin-right: 5vw; } }
        @media screen and (max-width: 768px) {
          .content .contTitle .textWrap .num {
            font-size: 16vw;
            margin-right: 3vw; } }
      .content .contTitle .textWrap .title {
        font-family: 'Noto Serif JP', serif;
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 2px; }
        @media screen and (max-width: 1110px) {
          .content .contTitle .textWrap .title {
            font-size: 3vw; } }
        @media screen and (max-width: 768px) {
          .content .contTitle .textWrap .title {
            font-size: 5vw;
            line-height: 1.5em; } }
    .content .contTitle .bkTx {
      position: absolute;
      font-size: 100px;
      font-weight: 700;
      top: 30%;
      right: 0;
      transform: translateY(-50%); }
      @media screen and (max-width: 1110px) {
        .content .contTitle .bkTx {
          font-size: 10vw; } }
      @media screen and (max-width: 768px) {
        .content .contTitle .bkTx {
          font-size: 15vw;
          top: 65%;
          right: 5vw; } }
      .content .contTitle .bkTx.blue {
        color: #DDEAFF; }
      .content .contTitle .bkTx.white {
        color: #fff; }






  .content.content03 {
    background-image: url("../img/cont03_back.jpg");
    background-position: 0% bottom;
    background-size: cover;
    background-repeat: no-repeat; }
    .content.content03 .inner {
      width: 1080px;
      margin: auto; }
      @media screen and (max-width: 1110px) {
        .content.content03 .inner {
          width: 95%; } }
      .content.content03 .inner .upperWrap {
        background-color: #FAF9F5;
        padding: 60px 90px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
        position: relative;
        margin-top: 30px;
        z-index: 1; }
        @media screen and (max-width: 1110px) {
          .content.content03 .inner .upperWrap {
            padding: 6vw 9vw;
            -webkit-box-shadow: 0.2vw 0.2vw 0.6vw rgba(0, 0, 0, 0.3);
            box-shadow: 0.2vw 0.2vw 0.6vw rgba(0, 0, 0, 0.3);
            margin-top: 8vw; } }
        @media screen and (max-width: 768px) {
          .content.content03 .inner .upperWrap {
            display: block; } }
        .content.content03 .inner .upperWrap .leftArea {
          word-wrap: break-word;
          width: 48%;
          font-size: 15px;
          font-weight: 300;
          line-height: 1.6em; }
          @media screen and (max-width: 1110px) {
            .content.content03 .inner .upperWrap .leftArea {
              font-size: 1.5vw; } }
          @media screen and (max-width: 768px) {
            .content.content03 .inner .upperWrap .leftArea {
              width: 100%;
              font-size: 14px;
              line-height: 1.8em;
              margin-bottom: 2en; } }
        .content.content03 .inner .upperWrap .rightArea {
          width: 46%;
          position: relative; }
          @media screen and (max-width: 768px) {
            .content.content03 .inner .upperWrap .rightArea {
              width: 100%;
              margin-top: 5vw; } }
          .content.content03 .inner .upperWrap .rightArea .image {
            width: 100%; }
          .content.content03 .inner .upperWrap .rightArea .cap {
            font-size: 16px;
            text-align: right;
            font-weight: 300;
            margin: 25px 0; }
            @media screen and (max-width: 1110px) {
              .content.content03 .inner .upperWrap .rightArea .cap {
                font-size: 1.6vw;
                margin: 2.5vw 0; } }
            @media screen and (max-width: 1110px) {
              .content.content03 .inner .upperWrap .rightArea .cap {
                font-size: 3.2vw;
                margin: 2.5vw 0; } }
          .content.content03 .inner .upperWrap .rightArea .names p.small {
            font-size: 16px;
            text-align: right;
            font-weight: 300; }
            @media screen and (max-width: 1110px) {
              .content.content03 .inner .upperWrap .rightArea .names p.small {
                font-size: 1.6vw; } }
            @media screen and (max-width: 768px) {
              .content.content03 .inner .upperWrap .rightArea .names p.small {
                font-size: 3.2vw; } }
          .content.content03 .inner .upperWrap .rightArea .names p.big {
            font-size: 22px;
            text-align: right;
            font-weight: 500; }
            @media screen and (max-width: 1110px) {
              .content.content03 .inner .upperWrap .rightArea .names p.big {
                font-size: 2.2vw; } }
            @media screen and (max-width: 768px) {
              .content.content03 .inner .upperWrap .rightArea .names p.big {
                font-size: 5vw; } }
      .content.content03 .inner .lowerWrap {
        background-color: #FAF9F5;
        padding: 40px; }
        @media screen and (max-width: 1110px) {
          .content.content03 .inner .lowerWrap {
            padding: 4vw; } }
        .content.content03 .inner .lowerWrap .careerWrap {
          position: relative;
          height: 550px; }
          @media screen and (max-width: 1110px) {
            .content.content03 .inner .lowerWrap .careerWrap {
              height: 55vw; } }
          @media screen and (max-width: 768px) {
            .content.content03 .inner .lowerWrap .careerWrap {
              height: auto;
              margin-bottom: 5vw; } }
          .content.content03 .inner .lowerWrap .careerWrap .paper {
            background-color: #fff;
            width: 52%;
            padding: 44px 0;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
            position: absolute; }
            @media screen and (max-width: 1110px) {
              .content.content03 .inner .lowerWrap .careerWrap .paper {
                padding: 4.4vw 0;
                -webkit-box-shadow: 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.1);
                box-shadow: 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.1); } }
            @media screen and (max-width: 768px) {
              .content.content03 .inner .lowerWrap .careerWrap .paper {
                position: relative;
                width: 100%; } }
            .content.content03 .inner .lowerWrap .careerWrap .paper.left {
              left: 0;
              z-index: 1; }
            .content.content03 .inner .lowerWrap .careerWrap .paper.right {
              right: 0;
              top: 100px; }
              @media screen and (max-width: 1110px) {
                .content.content03 .inner .lowerWrap .careerWrap .paper.right {
                  top: 10vw; } }
              @media screen and (max-width: 768px) {
                .content.content03 .inner .lowerWrap .careerWrap .paper.right {
                  top: 0; } }
            .content.content03 .inner .lowerWrap .careerWrap .paper .caTitle {
              font-size: 15px;
              text-align: center;
              margin-bottom: 30px; }
              @media screen and (max-width: 1110px) {
                .content.content03 .inner .lowerWrap .careerWrap .paper .caTitle {
                  font-size: 1.5vw;
                  margin-bottom: 3vw; } }
              @media screen and (max-width: 768px) {
                .content.content03 .inner .lowerWrap .careerWrap .paper .caTitle {
                  font-size: 3.5vw;
                  margin-bottom: 4vw; } }
            .content.content03 .inner .lowerWrap .careerWrap .paper .caBody {
              font-size: 13px;
              font-weight: 300; }
              @media screen and (max-width: 1110px) {
                .content.content03 .inner .lowerWrap .careerWrap .paper .caBody {
                  font-size: 1.3vw; } }
              @media screen and (max-width: 768px) {
                .content.content03 .inner .lowerWrap .careerWrap .paper .caBody {
                  font-size: 3.5vw; } }
      .content.content03 .inner ul.books {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 95%;
        margin: auto; }
        @media screen and (max-width: 768px) {
          .content.content03 .inner ul.books {
            width: 100%; } }
        .content.content03 .inner ul.books li {
          width: 23%; }
          @media screen and (max-width: 1110px) {
            .content.content03 .inner ul.books li {
              width: 25%; } }
          @media screen and (max-width: 768px) {
            .content.content03 .inner ul.books li {
              width: 48%;
              margin-bottom: 8vw; }
              .content.content03 .inner ul.books li:nth-last-child(-n+2) {
                margin-bottom: 0; } }
          .content.content03 .inner ul.books li p {
            font-size: 13px;
            font-weight: 300;
            line-height: 1.4em;
            margin-top: 20px;
            width: 90%;
            margin: auto;
            margin-top: 20px;
            display: flex;
            justify-content: center; }
            @media screen and (max-width: 1110px) {
              .content.content03 .inner ul.books li p {
                font-size: 1.3vw;
                margin-top: 2vw; } }
            @media screen and (max-width: 768px) {
              .content.content03 .inner ul.books li p {
                font-size: 3.2vw;
                line-height: 1.8em; } }