#main {
  padding-bottom: 0;
}
#main .body {
  max-width: 1020px;
}

[pc]{
display: inline;
}
[sp]{
display: none;
}
@media (max-width:768px) {
  [pc]{
  display: none;
  }
  [sp]{
  display: inline;
  }
}

#main .btn-1.dl {
  max-width: calc(100% - 20px);
  width: 470px;
  min-height: 90px;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
  color: #fff;
  padding-right: .5em;
  padding-left: 70px;
  background: url("../images/common/icon-dl.svg") 30px center /25px 25px no-repeat #79B9B7;
  border-radius: 8px;
  transition: .2s;
  margin: 10px;
}
#main .btn-1.dl b {
  display: inline-block;
  color: var(--c-green);
  background: #fff;
  padding: 0 .25em;
}
#main .btn-1.dl:hover {
  color: #fff;
  background-image: url("../images/common/icon-dl.svg");
  background-color: var(--c-green2);
}
#main .btn-1.dl:after {
  content: none;
}
@media (max-width:540px) {
  #main .btn-1.dl {
    max-width: 100%;
    min-height: 75px;
    padding-left: 45px;
    background-size: 20px 20px;
    background-position: 1.1em center;
    margin-left: 0;
    margin-right: 0;
  }
}


#main .top{
  padding: 60px 0 20px 0;
}

#main .row-2{
  padding: 40px 0 30px;
  /*background: #ECF8F8;*/
}


@media (max-width:768px) {

  #main .top{
    padding: 45px 0 20px 0;
  }
  #main .row-2{
    padding: 25px 0 45px;
  }


}


:root {
  --text-blue1: #006ab8;
  --text-blue2: #009cd3;
}

.main-title { 
  color: var(--text-blue1); 
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.5;
}
.item-title { 
  color: var(--text-blue2); 
  font-size: 1.1em;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.item-text{
  margin-top:0;
  color: var(--text-blue2);
  font-size:0.9em;
  font-weight:500;
  line-height:1.4;
  margin-bottom: 10px;
}
.num::before {
  content: attr(data-num);
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: var(--text-blue2);
  color: #fff;
  text-align: center;
  line-height:1.2em;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 1em;
  border-radius: .3rem;
  margin-right: .2em;
  margin-top: .1em;
  vertical-align: baseline;
}

.intro-list {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 0;
}
.intro-list li {
  position: relative;
  padding-left: 0.85em;
  margin-bottom: 2px;
  font-size: 1em;
  line-height: 1.6;
}
.intro-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  color:#323940;
  font-size: 0.8em;
  top: 0.2em;
}

@media (max-width:768px) {

  .main-title { 
    font-size: 2em;
  }
  .item-title { 
    font-size: 1.3em;
  }
  .item-text{
    font-size: 1em;
  }
  .intro-list li {
    font-size: 1em;
  }
  .num::before {
    margin-top: .05em;
  }

}

/* SPレイアウト */
.box1 { 
  display: flex; 
  flex-direction: column; 
  gap: 10px 30px;
}
.col-1 { 
  display: flex; 
  flex-direction: column; 
  gap: 10px 30px;
}
.col-2 { 
  display: flex; 
  flex-direction: column; 
}

/* PCレイアウト */
@media (min-width: 767px) {

  .box1 {
    flex-direction: row;
    max-width: 1000px;
    margin: 0 auto;
    align-items: flex-start;
  }

  .col-1 {
    flex: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "intro   item3"
      "large   large"
      "item1   item4"
      "item2   item5";
    gap: 10px 30px;
  }

  .intro{ 
    grid-area: intro; 
  }
  .image-large { 
    grid-area: large;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -4em;
    margin-bottom: 6.5em;
  }

  .item-1{ 
    grid-area: item1; 
  }
  .item-1 .img { 
    margin: 10px 0;
  }

  .item-2{ 
    grid-area: item2; 
  }
  .item-3{ 
    grid-area: item3; 
  }

  .item-4{ 
    grid-area: item4; 
    margin-top: -23em;
    position: relative;
  }
  .item-4 .item-text { 
    position: absolute;
    right: 0;
    width: 10em;
  }
  .item-4 .img { 
    position: relative;
    margin-top: 5px;
  }

  .item-5{ 
    grid-area: item5;
    margin-top: -23em;
  }
  .item-5 .img { 
    width: 90%;
  }

  .item-6{ 
    position: relative;
  }
  .item-6 .num::before{
    margin-bottom: 1.2em;
  }
  .item-6 .item-title span { 
    width: 50%;
    line-height: 1.4;
    padding-top: 0.25em;
  }
  .item-6 .item-text { 
    position: absolute;
    left: 0;
    width: 15em;
  }
  .item-6 .img { 
    width: 90%;
    margin-top: -40px !important;
    margin-left: auto;
  }

  .item-7{ 
    position: relative;
  }

  .item-7 .item-text { 
    position: absolute;
    left: 0;
    width: 15em;
  }
  .item-7 .img { 
    width: 60%;
    margin-left: auto;
  }

  .item-8{ 

  }
  .item-8 .item-text { 
    position: relative;
  }
  .item-8 .img { 
    margin-top: -1em !important;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .item-9{ 

  }

  .item-10{ 

  }
  .item-10 .img { 
    margin-top: 5px !important;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .item-11{ 

  }

  .item .img{
    margin-top: 5px;
  }

  .col-2 {
    flex: 1;
    gap: 10px 30px;
  }

}

@media (max-width:768px) {

  .item .img{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .box1,
  .col-1,
  .col-2{
    gap: 20px 0;
  }

}