@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  color: #666666; }

@media (min-width: 768px) {
  .pc {
    display: block; }

  .sp {
    display: none; }

  #hero {
    height: 500px;
    width: 100%;
    background-image: url("../img/profession/hero.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover; }
    #hero div {
      width: 1000px;
      margin: 0 auto; }
      #hero div h1 {
        font-size: 40px;
        color: white;
        text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.1em;
        padding-top: 220px; }

  #introduction {
    display: table;
    margin: 0 auto;
    padding: 100px 0; }
    #introduction h2 {
      font-size: 30px;
      font-weight: bold;
      color: #E08692;
      margin-bottom: 30px;
      text-align: center;
      letter-spacing: 0.1em; }
    #introduction .english {
      display: block;
      background: linear-gradient(-180deg, #f9e9c5 0%, #ea8a97 75%, #bd93ec 100%);
      background: -webkit-linear-gradient(-180deg, #f9e9c5 0%, #ea8a97 75%, #bd93ec 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px; }
    #introduction .text {
      line-height: 2;
      color: #666666;
      font-size: 16px;
      text-align: center; }
    #introduction .attention {
      font-size: 14px;
      margin-top: 20px;
      width: 700px;
      margin: 30px auto 0 auto;
      display: block;
      padding-left: 1.3em;
      text-indent: -1.3em; }

  #section01 {
    background: linear-gradient(-90deg, rgba(249, 233, 197, 0.5) 0%, rgba(234, 138, 151, 0.5) 75%, rgba(189, 147, 236, 0.5) 100%);
    height: 835px;
    padding: 70px; }
    #section01 > div {
      width: 950px;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section01 > div img {
        width: 400px;
        position: absolute;
        top: 0;
        left: 0; }
      #section01 > div .right {
        position: absolute;
        top: 0;
        right: 0; }
        #section01 > div .right div {
          padding-left: 100px;
          margin-bottom: 30px; }
          #section01 > div .right div h3 {
            font-size: 30px;
            color: #E08692;
            margin-bottom: 10px; }
          #section01 > div .right div h4 {
            font-size: 20px;
            line-height: 1.5;
            border-bottom: dotted 5px yellow;
            display: inline-block; }
        #section01 > div .right ul {
          width: 600px;
          padding: 50px;
          background: white;
          line-height: 2;
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          text-align: justify; }
          #section01 > div .right ul li:first-of-type {
            margin-bottom: 20px; }
          #section01 > div .right ul .attention {
            font-size: 14px;
            padding-left: 1.3em;
            text-indent: -1.3em; }

  #section02 {
    height: 650px;
    padding: 70px; }
    #section02 > div {
      width: 950px;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section02 > div img {
        width: 500px;
        position: absolute;
        top: 0;
        left: 0; }
      #section02 > div .right {
        position: absolute;
        top: 0;
        right: 0; }
        #section02 > div .right div {
          margin-bottom: 30px;
          text-align: right; }
          #section02 > div .right div h3 {
            font-size: 30px;
            color: #E08692;
            margin-bottom: 10px; }
          #section02 > div .right div h4 {
            font-size: 20px;
            line-height: 1.5;
            border-bottom: dotted 5px yellow;
            display: inline-block;
            margin: 0 auto 0 auto; }
        #section02 > div .right p {
          width: 500px;
          padding: 50px;
          background: white;
          line-height: 2;
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          text-align: justify; }

  #section03 {
    background: linear-gradient(-90deg, rgba(249, 233, 197, 0.5) 0%, rgba(234, 138, 151, 0.5) 75%, rgba(189, 147, 236, 0.5) 100%);
    height: 715px;
    padding: 70px; }
    #section03 > div {
      width: 950px;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section03 > div img {
        width: 400px;
        position: absolute;
        top: 0;
        right: 0; }
      #section03 > div .left {
        position: absolute;
        top: 0;
        left: 0; }
        #section03 > div .left div {
          padding-left: 0px;
          margin-bottom: 30px; }
          #section03 > div .left div h3 {
            font-size: 30px;
            color: #E08692;
            margin-bottom: 10px; }
          #section03 > div .left div h4 {
            font-size: 20px;
            line-height: 1.5;
            border-bottom: dotted 5px yellow;
            display: inline-block; }
        #section03 > div .left p {
          width: 600px;
          padding: 50px;
          background: white;
          line-height: 2;
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          text-align: justify; }
          #section03 > div .left p span {
            font-size: 14px; }

  #section04 {
    height: 540px;
    padding: 70px; }
    #section04 > div {
      width: 950px;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section04 > div img {
        width: 550px;
        position: absolute;
        top: 0;
        right: 0; }
      #section04 > div .left {
        position: absolute;
        top: 0;
        left: 0; }
        #section04 > div .left div {
          padding-left: 0px;
          margin-bottom: 30px; }
          #section04 > div .left div h3 {
            font-size: 30px;
            color: #E08692;
            margin-bottom: 10px; }
          #section04 > div .left div h4 {
            font-size: 20px;
            line-height: 1.5;
            border-bottom: dotted 5px yellow;
            display: inline-block; }
        #section04 > div .left p {
          width: 500px;
          padding: 50px;
          background: white;
          line-height: 2;
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          text-align: justify; }
          #section04 > div .left p span {
            font-size: 14px; }

  .border {
    width: 100%;
    height: 20px;
    background: #f9e9c5;
    background: linear-gradient(90deg, #f9e9c5 0%, #ea8a97 75%, #bd93ec 100%); }

  #section05 {
    padding: 100px 0 0 0; }
    #section05 h4 {
      text-align: center;
      font-size: 25px;
      margin-bottom: 100px; }
    #section05 ul li {
      width: 100%;
      height: 250px;
      box-shadow: 0 -2px 5px 1px rgba(0, 0, 0, 0.3);
      position: relative; }
      #section05 ul li div {
        width: auto;
        display: table;
        margin: 0 auto;
        font-size: 0; }
        #section05 ul li div .image {
          width: 100px;
          height: 250px;
          display: inline-block;
          vertical-align: top; }
        #section05 ul li div div {
          width: 250px;
          height: 250px;
          padding: 40px;
          display: inline-block;
          vertical-align: middle;
          background: white; }
          #section05 ul li div div .number {
            display: block;
            width: 80px;
            margin: 0 auto 10px auto; }
          #section05 ul li div div .step {
            font-size: 25px;
            text-align: center;
            color: #998675;
            display: block;
            font-weight: bold; }
          #section05 ul li div div h5 {
            text-align: center;
            font-size: 27px;
            color: #E08692;
            margin-top: 15px; }
        #section05 ul li div .text {
          padding: 0 50px;
          display: inline-block;
          vertical-align: middle;
          font-size: 16px;
          width: 650px;
          line-height: 2;
          text-align: justify; }
      #section05 ul li:nth-of-type(1) {
        z-index: 1;
        background: #F5B6B6; }
        #section05 ul li:nth-of-type(1) div .image {
          width: 100px; }
        #section05 ul li:nth-of-type(1) div .text {
          width: 650px; }
      #section05 ul li:nth-of-type(2) {
        z-index: 2;
        background: #F5B8D3; }
        #section05 ul li:nth-of-type(2) div .image {
          width: 130px; }
        #section05 ul li:nth-of-type(2) div .text {
          width: 620px; }
      #section05 ul li:nth-of-type(3) {
        z-index: 3;
        background: #E4BAD6; }
        #section05 ul li:nth-of-type(3) div .image {
          width: 160px; }
        #section05 ul li:nth-of-type(3) div .text {
          width: 590px; }
      #section05 ul li:nth-of-type(4) {
        z-index: 4;
        background: #CEB8D8; }
        #section05 ul li:nth-of-type(4) div .image {
          width: 190px; }
        #section05 ul li:nth-of-type(4) div .text {
          width: 560px; }
      #section05 ul li:nth-of-type(5) div .image {
        width: 220px; }
      #section05 ul li:nth-of-type(5) div .text {
        width: 530px; }

  #link {
    display: table;
    margin: 0 auto;
    position: relative;
    padding: 200px 0; }
    #link img {
      width: 400px;
      position: absolute;
      top: 70px;
      left: -30px;
      z-index: 0; }
    #link p {
      font-size: 18px;
      font-weight: bold;
      color: #4D4D4D;
      text-align: center;
      z-index: 1;
      position: absolute;
      top: 95px;
      left: 27px;
      z-index: 0;
      text-align: center; }
    #link a {
      width: 500px;
      padding: 10px;
      font-size: 20px;
      display: block;
      margin: 0 auto;
      font-weight: bold;
      color: #4D4D4D;
      text-align: center;
      background: #EAF4B3;
      border-radius: 5px; } }
@media (max-width: 768px) {
  .pc {
    display: none; }

  .sp {
    display: block; }

  #hero {
    height: 300px;
    width: 100%;
    background-image: url("../img/profession/hero.jpg");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover; }
    #hero div {
      width: 100%;
      margin: 0 auto; }
      #hero div h1 {
        font-size: 30px;
        color: white;
        text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.1em;
        padding-top: 220px;
        text-align: center; }

  #introduction {
    display: block;
    margin: 0 auto;
    padding: 70px 0;
    width: 90%; }
    #introduction h2 {
      font-size: 25px;
      font-weight: bold;
      color: #E08692;
      margin-bottom: 30px;
      text-align: center;
      letter-spacing: 0.1em; }
    #introduction .english {
      display: block;
      background: linear-gradient(-180deg, #f9e9c5 0%, #ea8a97 75%, #bd93ec 100%);
      background: -webkit-linear-gradient(-180deg, #f9e9c5 0%, #ea8a97 75%, #bd93ec 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 26px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px; }
    #introduction .text {
      line-height: 2;
      color: #666666;
      font-size: 15px;
      text-align: center; }
    #introduction .attention {
      font-size: 13px;
      margin-top: 30px;
      width: 100% px;
      margin: 30px auto 0 auto;
      display: block;
      padding-left: 1.3em;
      text-indent: -1.3em;
      text-align: justify; }

  #spBgSection01 {
    background-image: url("../img/profession/image01.jpg");
    background-position: centertop;
    background-repeat: no-repeat;
    background-size: cover;
    height: 180px;
    width: 100%; }

  #section01 {
    background: linear-gradient(-90deg, rgba(249, 233, 197, 0.5) 0%, rgba(234, 138, 151, 0.5) 75%, rgba(189, 147, 236, 0.5) 100%);
    height: auto;
    padding: 30px 0 70px 0;
    width: 100%; }
    #section01 > div {
      width: 85%;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section01 > div img {
        display: none; }
      #section01 > div .right {
        position: relative; }
        #section01 > div .right div {
          padding-left: 0;
          margin-bottom: 30px; }
          #section01 > div .right div h3 {
            font-size: 30px;
            color: #E08692;
            margin-bottom: 10px; }
          #section01 > div .right div h4 {
            font-size: 18px;
            line-height: 1.5;
            border-bottom: dotted 5px yellow;
            display: inline-block; }
        #section01 > div .right ul {
          width: 100%;
          padding: 20px;
          background: white;
          line-height: 2;
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          text-align: justify;
          font-size: 15px; }
          #section01 > div .right ul li:first-of-type {
            margin-bottom: 30px; }
          #section01 > div .right ul .attention {
            font-size: 13px;
            padding-left: 1.3em;
            text-indent: -1.3em; }

  #spBgSection02 {
    background-image: url("../img/profession/image02.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 180px;
    width: 100%; }

  #section02 {
    height: auto;
    padding: 30px 0 70px 0;
    width: 100%; }
    #section02 > div {
      width: 85%;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section02 > div img {
        display: none; }
      #section02 > div .right {
        position: relative; }
        #section02 > div .right div {
          margin-bottom: 30px;
          text-align: right; }
          #section02 > div .right div h3 {
            font-size: 30px;
            color: #E08692;
            margin-bottom: 10px; }
          #section02 > div .right div h4 {
            font-size: 18px;
            line-height: 1.5;
            border-bottom: dotted 5px yellow;
            display: inline-block;
            margin: 0 auto 0 auto; }
        #section02 > div .right p {
          width: 100%;
          padding: 20px;
          background: white;
          line-height: 2;
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          text-align: justify;
          font-size: 15px; }

  #spBgSection03 {
    background-image: url("../img/profession/image03.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 180px;
    width: 100%; }

  #section03 {
    background: linear-gradient(-90deg, rgba(249, 233, 197, 0.5) 0%, rgba(234, 138, 151, 0.5) 75%, rgba(189, 147, 236, 0.5) 100%);
    height: auto;
    padding: 30px 0 70px 0;
    width: 100%; }
    #section03 > div {
      width: 85%;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section03 > div img {
        display: none; }
      #section03 > div .left {
        position: relative; }
        #section03 > div .left div {
          padding-left: 0px;
          margin-bottom: 30px; }
          #section03 > div .left div h3 {
            font-size: 30px;
            color: #E08692;
            margin-bottom: 10px; }
          #section03 > div .left div h4 {
            font-size: 18px;
            line-height: 1.5;
            border-bottom: dotted 5px yellow;
            display: inline-block; }
        #section03 > div .left p {
          width: 100%;
          padding: 20px;
          background: white;
          line-height: 2;
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          text-align: justify;
          font-size: 15px; }
          #section03 > div .left p span {
            font-size: 13px; }

  #spBgSection04 {
    background-image: url("../img/profession/image04.jpg");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 180px;
    width: 100%; }

  #section04 {
    height: auto;
    padding: 30px 0 70px 0;
    width: 100%; }
    #section04 > div {
      width: 85%;
      display: block;
      margin: 0 auto;
      position: relative; }
      #section04 > div img {
        display: none; }
      #section04 > div .left {
        position: relative; }
        #section04 > div .left div {
          padding-left: 0px;
          margin-bottom: 30px; }
          #section04 > div .left div h3 {
            font-size: 30px;
            color: #E08692;
            margin-bottom: 10px; }
          #section04 > div .left div h4 {
            font-size: 18px;
            line-height: 1.5;
            border-bottom: dotted 5px yellow;
            display: inline-block; }
        #section04 > div .left p {
          width: 100%;
          padding: 20px;
          background: white;
          line-height: 2;
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          text-align: justify;
          font-size: 15px; }
          #section04 > div .left p span {
            font-size: 13px; }

  .border {
    width: 100%;
    height: 20px;
    background: #f9e9c5;
    background: linear-gradient(90deg, #f9e9c5 0%, #ea8a97 75%, #bd93ec 100%); }

  #section05 {
    padding: 70px 0 0 0; }
    #section05 h4 {
      text-align: center;
      font-size: 25px;
      margin-bottom: 70px; }
    #section05 ul li {
      width: 100%;
      height: auto;
      box-shadow: 0 -2px 5px 1px rgba(0, 0, 0, 0.3);
      position: relative; }
      #section05 ul li div {
        width: 100%;
        display: flex;
        margin: 0 auto;
        font-size: 0; }
        #section05 ul li div .image {
          display: none; }
        #section05 ul li div div {
          width: 35%;
          height: auto;
          padding: 25px 10px 10px 10px;
          display: inline-block;
          vertical-align: middle;
          background: white; }
          #section05 ul li div div .number {
            display: block;
            width: 50px;
            margin: 0 auto 10px auto; }
          #section05 ul li div div .step {
            font-size: 20px;
            text-align: center;
            color: #998675;
            display: block;
            font-weight: bold; }
          #section05 ul li div div h5 {
            text-align: center;
            font-size: 20px;
            color: #E08692;
            margin-top: 15px; }
        #section05 ul li div .text {
          padding: 20px;
          display: inline-block;
          vertical-align: middle;
          font-size: 15px;
          width: 65%;
          line-height: 2;
          text-align: justify;
          height: auto; }
      #section05 ul li:nth-of-type(1) {
        z-index: 1;
        background: #F5B6B6; }
      #section05 ul li:nth-of-type(2) {
        z-index: 2;
        background: #F5B8D3; }
      #section05 ul li:nth-of-type(3) {
        z-index: 3;
        background: #E4BAD6; }
      #section05 ul li:nth-of-type(4) {
        z-index: 4;
        background: #CEB8D8; } }