header {
  background: url(/web/img/img_web.webp) no-repeat #fff;
  background-position: center bottom;
  background-size: 330px;
  padding-top: 140px;
  height: auto;
  display: block; }
  @media screen and (max-width: 768px) {
    header {
      background-position: center bottom;
      background-size: 70%;
      padding-top: 105px; } }
  header h1 {
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    color: #4fa7b2; }
    @media screen and (max-width: 768px) {
      header h1 {
        font-size: 30px;
        margin-top: 50px; } }

#web {
  background: #e8f7ff; }
  #web .inner > .flex {
    margin: 80px 0 0;
    align-items: center; }
    @media screen and (max-width: 1160px) {
      #web .inner > .flex {
        flex-flow: column-reverse; } }
    #web .inner > .flex > div {
      width: 50%;
      min-width: 50%;
      padding: 0 60px 0 0; }
      @media screen and (max-width: 1160px) {
        #web .inner > .flex > div {
          width: 100%;
          padding: 0; } }
      #web .inner > .flex > div h3 {
        font-size: 32px;
        color: #4fa7b2;
        text-align: left; }
      #web .inner > .flex > div p {
        text-align: justify;
        line-height: 2em; }
    #web .inner > .flex figure {
      width: 50%;
      max-width: 450px;
      margin: 0; }
      #web .inner > .flex figure img {
        width: 100%; }
      @media screen and (max-width: 1160px) {
        #web .inner > .flex figure {
          width: 100%; } }

.riyo {
  padding: 100px 0 160px; }

#point_wrap .inner > h3 {
  margin: 160px 0 40px; }

#point_wrap .inner > .flex > div {
  width: 50%;
  min-width: 50%;
  padding: 0 60px 0 0; }
  @media screen and (max-width: 1160px) {
    #point_wrap .inner > .flex > div {
      width: auto;
      padding: 0; } }

@media screen and (max-width: 1160px) {
  #point_wrap .inner > .flex {
    flex-flow: column; } }

@media screen and (max-width: 1160px) {
  #point_wrap .inner > .flex figure {
    margin: 0; } }

@media screen and (max-width: 1160px) {
  #point_wrap .inner > .flex figure img {
    width: 95%; } }

#point_wrap .inner .table_wrap table {
  width: 100%;
  margin: 80px auto; }
  #point_wrap .inner .table_wrap table th,
  #point_wrap .inner .table_wrap table td {
    padding: 5px 1em; }
  #point_wrap .inner .table_wrap table th {
    min-height: 10em;
    max-width: 3em;
    min-width: 3em;
    padding: 0; }
    #point_wrap .inner .table_wrap table th .vertical {
      writing-mode: tb-lr;
      writing-mode: vertical-lr;
      -webkit-writing-mode: vertical-lr;
      letter-spacing: .2em;
      min-height: 10em; }
  #point_wrap .inner .table_wrap table td {
    border: 1px solid #4fa7b2; }
  #point_wrap .inner .table_wrap table thead th {
    border: 1px solid #4fa7b2;
    padding: 10px;
    color: #4fa7b2;
    width: 20%;
    background: #ecfcfe;
    white-space: nowrap; }
    #point_wrap .inner .table_wrap table thead th span {
      font-size: 1.5em;
      display: block; }
    #point_wrap .inner .table_wrap table thead th a {
      cursor: pointer;
      background: #4fa7b2;
      border-radius: 6px;
      color: #fff;
      border: 1px solid #4fa7b2;
      display: block;
      padding: 3px 0;
      margin-top: 10px; }
      #point_wrap .inner .table_wrap table thead th a:hover {
        opacity: 0.7; }
  #point_wrap .inner .table_wrap table tbody th {
    border-top: 1px solid #fff; }
  #point_wrap .inner .table_wrap table tbody td {
    color: #4fa7b2;
    text-align: center; }
    #point_wrap .inner .table_wrap table tbody td.memo {
      text-align: left; }
  @media screen and (max-width: 1160px) {
    #point_wrap .inner .table_wrap table {
      min-width: 1100px; } }

@media screen and (max-width: 1160px) {
  #point_wrap .inner .table_wrap {
    overflow-x: scroll; } }

#point_wrap .inner .table_wrap table {
  margin: 0 auto; }
  #point_wrap .inner .table_wrap table thead th {
    width: 29%; }
    #point_wrap .inner .table_wrap table thead th:first-child {
      width: 11%; }
  #point_wrap .inner .table_wrap table tbody td.semi-style {
    width: calc(29% / 2); }

#point_wrap .inner #point4 {
  flex-wrap: wrap; }
  #point_wrap .inner #point4 li {
    width: calc(50% - 10px); }
    @media screen and (max-width: 1160px) {
      #point_wrap .inner #point4 li {
        width: 100%; } }
    #point_wrap .inner #point4 li h3 {
      font-size: 30px;
      font-weight: bold;
      color: #4fa7b2;
      text-align: center;
      position: relative; }
      #point_wrap .inner #point4 li h3::after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 156px;
        height: 5px;
        top: calc(50% - 5px / 2);
        background-color: #fddc0e;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: -10px;
        top: initial; }
      @media screen and (max-width: 1160px) {
        #point_wrap .inner #point4 li h3 {
          font-size: 26px; } }
    #point_wrap .inner #point4 li p {
      font-size: 16px; }

#point_wrap .inner #faq_wrap {
  flex-wrap: wrap;
  margin: 100px 0 140px; }
  #point_wrap .inner #faq_wrap li {
    width: calc(50% - 10px); }
    @media screen and (max-width: 1160px) {
      #point_wrap .inner #faq_wrap li {
        width: 100%; } }
    #point_wrap .inner #faq_wrap li h4 {
      color: #4FA7B2;
      font-size: 20px;
      align-items: flex-end;
      justify-content: flex-start;
      min-height: 60px; }
      #point_wrap .inner #faq_wrap li h4 figure {
        margin: 0 15px 0 0; }
    #point_wrap .inner #faq_wrap li p {
      padding: 10px 20px;
      background: rgba(79, 167, 178, 0.15); }