* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; }

body {
  background-color: #e2f6f9;
  text-align: center;
  font-size: 20px;
  line-height: 1.9;
  color: #1C2437;
  font-family:  "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Meiryo, 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic Pro','MS PGothic',sans-serif; }

#top img {
  width:100%; }

section:nth-child(n+2) {
  margin: 50px 0;
  padding: 70px 0; }

h2 {
  color: #1e50a2;
  font-size: 38px;
  font-weight: 600;
  border-bottom: 5px solid;
  display: inline;
  padding: 12px 0;
  position: relative;}
  h2 ~ p {
    font-size:18px;
    margin: 50px 0 80px; }
  h2 ~ ul.column_3 {
    margin: 50px 0 20px; }
  #philosophy p {
    font-size: 18px;
    line-height: 2.3em;
    margin: 40px 0 15px; }
    h2::before, #philosophy h2::before {
      display: block;
      position: absolute;
      right:-30px;
      bottom:-15px; }
    h2::before {
      content: url(../img/drop.svg); }

h3 {
  color: #1e50a2; }
  h3 ~ p {
    margin: auto;
    padding: 15px 15px 0;
    font-size: 15px;
    text-align: justify;}

h4 {
  line-height: 1.5em;
  padding:10px 0 20px; }
  h4 ~ p {
    font-size: 15px;
    text-align: justify;
    margin: auto;
    padding: 0 15px; }

li { list-style: none; }

footer {
  padding: 40px 0;
  font-size: 12px; }

.pc { display: block; }
.sp { display: none; }

.content_area {
  margin: auto;
  max-width: 980px;
  width: 100%; }

.column_3, .column_2, #system ul {
  display: flex;
  margin: auto;}
  .column_3 li {
    max-width: 327px;
    margin: 0 10px;
    padding: 30px 10px;
    border-radius: 30px;
    background: #fff; }
  .column_2 {
    max-width: 980px; }
  .column_2 li {
    max-width: 470px;
    margin: 0 auto;
    padding: 30px 10px;
    border-radius: 30px;
    background: #fff; }
  #system ul li {
    max-width: 50%; }

#system .backup {
  margin: 50px 0 0; }
  #system .backup ul {
    display: block;
    margin-top: 50px; }
  #system .backup ul li {
    max-width: 50%;
    margin: 0 auto; }

.summary_image {
  position: relative;
  width:100%;
  margin: 50px 0 0;}
  .summary_image img {
    width:100%; }
  .summary_image p {
    text-align: left;
    font-weight: 600;
    color: #1e50a2;
    font-size: 25px;
    position: absolute;
    top: 100px;
    left: 80px;　}

#system img {
  width: 95%; }

#contents .tag {
  font-size:12px;
  color: #fff;
  width:35%;
  margin:0 auto;
  text-align: center;
  border-radius: 5px;
  background: #1e50a2; }

#philosophy {
  background-color: #1e50a2;
  color: #fff; }

#philosophy h2 {
  color: #fff; }
  #philosophy h2::before {
    content: url(../img/drop_white.svg); }

.backup .kanken {
  max-width: 200px;
  margin-bottom: 20px;}

@media screen and (max-width: 768px) {

.pc { display: none; }
.sp { display: block; }

section:nth-child(n+2) {
  margin: 10px 0;
  padding: 50px 0; }

h2 {
  font-size: 9vw; }
  h2 ~ p {
    margin: 50px 0 60px; }

h2 ~ p, ul li p {
  font-size:4.5vw; }

h3 {
  line-height: 1.7em;
  font-size: 7vw;}

h4 {
  margin: 0; }

p {
  text-align: justify;
  width:100%; }

.content_area {
  padding: 0 20px; }

.column_3, .column_2, #system ul {
  display: block;
  margin: auto;}
  .column_3 li, .column_2 li {
    max-width: 100%;
    margin: 50px 0;
    padding: 30px 10px;
    border-radius: 30px;
    background: #fff; }
    .column_3 li:last-child, .column_2 li:last-child {
    margin-bottom:0;
    }
  #system ul li {
    max-width: 100%;
    margin: 50px 0; }

#system .backup ul li {
  max-width: 100%; }

.summary_image {
  position: relative;
  width:100%; }
  .summary_image img {
    margin: 120px 0 0 0;
    width:100%; }
  .summary_image p {
    text-align: left;
    font-weight: 600;
    color: #1e50a2;
    font-size: 4.5vw;
    position: absolute;
    top: 0;
    left: 10px;　}

#philosophy p {
  font-size: 4vw; }