@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; }

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

  .sp {
    display: none; }

  #hero {
    height: 500px;
    width: 100%;
    background-image: url("../img/study/hero.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 100px; }
    #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; }
        #hero div h1 span {
          color: white;
          text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
          letter-spacing: 0.1em;
          padding-left: 30px; }

  .section {
    padding: 0px 0 50px 0; }
    .section div {
      width: 1000px;
      margin: 0px auto 0px auto;
      position: relative; }
      .section div h3 {
        width: 100%;
        background: #f9e9c5;
        background: linear-gradient(-90deg, #f9e9c5 0%, #ea8a97 75%, #bd93ec 100%);
        border-radius: 5px;
        padding: 10px 10px 10px 30px;
        color: white;
        font-size: 25px;
        letter-spacing: 0.2em; }
      .section div .date {
        font-size: 12px;
        position: absolute;
        top: 65px;
        right: 0px;
        color: #666666;
        margin: 0; }
      .section div p {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        margin: 20px 20px 20px 0;
        color: #DC7184; }
        .section div p span {
          font-size: 25px; }
      .section div .school {
        position: absolute;
        top: 70px; }
        .section div .school h4 {
          position: absolute;
          font-size: 20px;
          font-weight: bold;
          display: inline-block;
          width: 1000px;
          z-index: 1;
          top: 7px;
          left: 25px;
          color: #DC7184; }
        .section div .school img {
          position: absolute;
          height: 60px;
          z-index: 0; }
      .section div table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        margin-top: 60px; }
        .section div table tr td {
          border: solid thin #E08692;
          font-size: 15px;
          padding: 20px;
          color: #4D4D4D; }
          .section div table tr td:first-of-type {
            width: 50%;
            font-size: 18px;
            font-weight: bold; }
          .section div table tr td:nth-of-type(2) {
            width: 50%;
            font-size: 16px; }
          .section div table tr td .attention {
            font-size: 14px;
            font-weight: bold;
            color: #DC7184; }
          .section div table tr td a {
            padding: 5px 10px;
            background: #DC7184;
            color: white;
            margin: 10px 0 0 0;
            display: inline-block;
            border-radius: 5px;
            transition: all 0.3s;
            text-align: center;
            font-size: 14px; }
            .section div table tr td a:hover {
              opacity: 0.5; }

  aside img {
    width: 25px; } }
@media (max-width: 768px) {
  .pc {
    display: none; }

  .sp {
    display: block; }

  #hero {
    height: 300px;
    width: 100%;
    background-image: url("../img/study/hero.jpg");
    background-position: center 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: 150px;
        text-align: center; }
        #hero div h1 span {
          font-size: 28px; }

  .section {
    padding: 70px 0 0 0;
    width: 85%;
    display: block;
    margin: 0 auto; }
    .section div {
      width: 100%;
      margin: 0px auto 0px auto;
      position: relative; }
      .section div h3 {
        width: 100%;
        background: #f9e9c5;
        background: linear-gradient(-90deg, #f9e9c5 0%, #ea8a97 75%, #bd93ec 100%);
        border-radius: 5px;
        padding: 10px 10px 10px 30px;
        color: white;
        font-size: 25px;
        letter-spacing: 0.2em;
        margin-bottom: 20px; }
      .section div .date {
        font-size: 12px;
        position: absolute;
        top: 65px;
        right: 0px;
        color: #666666;
        margin: 0; }
      .section div p {
        font-size: 16px;
        font-weight: bold;
        display: block;
        margin-bottom: 0px;
        color: #DC7184; }
        .section div p span {
          font-size: 25px; }
        .section div p:last-of-type {
          padding-bottom: 20px; }
      .section div .school {
        position: relative; }
        .section div .school h4 {
          position: relative;
          font-size: 20px;
          font-weight: bold;
          display: block;
          width: 100%;
          z-index: 1;
          color: #DC7184;
          border-top: solid thin #DC7184;
          padding-top: 20px; }
        .section div .school img {
          display: none; }
      .section div table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 50px;
        margin-top: 20px; }
        .section div table tr td {
          border: solid thin #E08692;
          font-size: 15px;
          padding: 10px;
          color: #4D4D4D; }
          .section div table tr td a.toWeb {
            padding: 10px 10px;
            background: #DC7184;
            color: white;
            margin: 5px 0 0 0;
            display: inline-block;
            border-radius: 5px;
            transition: all 0.3s;
            width: 100%;
            text-align: center; }
            .section div table tr td a.toWeb:hover {
              opacity: 0.5; }
          .section div table tr td:first-of-type {
            width: 45%;
            font-size: 15px;
            font-weight: bold; }
          .section div table tr td:nth-of-type(2) {
            width: 55%;
            font-size: 15px; }
            .section div table tr td:nth-of-type(2) a {
              color: #666666; }
          .section div table tr td .attention {
            font-size: 14px;
            font-weight: bold;
            color: #DC7184; } }