@charset "UTF-8";
@media screen and (min-width: 768px),print { 

  #page-family {
    color: #071D37;
  }

  /* family -------------------------------------*/
  #main {
    margin: 0 0 135px;
    padding: 110px 0 0;
    background: url('../images/family/bg-main.jpg') no-repeat center top;
  }
  #family .inner {
  }
  #main h2 {
    margin: 0 0 20px;
    text-align: center;
  }
  #main ul.family-link {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  #family .contentsbox .box .title {
    margin: 0 0 40px;
    padding: 25px 0 0 170px;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 1.0px;
  }
  #family .contentsbox .box .title .sub {
    padding: 0 0 15px;
    background: url('../images/family/bg-sub.jpg') no-repeat left 15px bottom;
  }
  #family .contentsbox .box .title h3 {
    font-size: 52px;
    letter-spacing: 2.0px;
  }
  #family .contentsbox .box .title h3 span {
    background: linear-gradient(transparent 65%, #F5EF43 65%);
  }
  #family .contentsbox .box .title .num {
    position: absolute;
    left: 0;
    top: 0;
  }

  #family .contentsbox .box .ttl {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 25px;
  }
  #family .contentsbox .box .txt {
    margin: 0 0 20px;
  }
  #family .contentsbox .box .link a {
}


  #contents01 {
    width: 1200px;
    margin: 0 auto 180px;
    padding: 300px 0 0;
    background: url('../images/family/pic01.jpg') no-repeat center top;
  }
  #contents01 .box {
    width: 620px;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 15px;
    background: #fff;
    padding: 50px 40px 35px;
  }
  #contents01 .box .ttl {
    font-size: 30px;
  }
  #contents01 .link {
    width: 780px;
    margin: 0 auto;
    padding: 25px 120px;
    border: 1px solid #707070;
    display: flex;
    background: #fff;
    justify-content: space-between;
  }
  #contents01 .link li {
    width: 250px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  #contents01 .link li a {
    color: #071D37;
  }
  #contents01 .link li .img {
    margin: 0 0 5px;
  }
  
  #contents02 {
    position: relative;
    width: 1200px;
    margin: 0 auto 180px;
    padding: 115px 0 0;
    background: url('../images/family/pic02.jpg') no-repeat left 100px top;
  }
  #contents02 .img {
    position: absolute;
    right: 120px;
    top: -55px;
  }
  #contents02 .box {
    width: 590px;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 15px 560px;
    background: #fff;
    padding: 30px 40px 35px;
  }
  #contents02 .contact {
      position: relative;
      background: #F5EF43;
      padding: 40px 255px 30px 120px;
   }
   #contents02 .contact .txt {
      font-size: 24px;
      font-weight: bold;
      text-align: right;
      margin: 0 0 10px;
      letter-spacing: 3.0px;
   }
   #contents02 .contact .human {
      position: absolute;
      right: 47px;
      bottom: 0;
   }
   #contents02 .contact .tel {
      display: flex;
      justify-content: space-between;
   }
   #contents02 .contact .btn { 
      display: block;
      height: 60px;
      font-size: 20px;
      font-weight: bold;
      border-radius: 30px;
      line-height: 1.0;
      border: 3px solid #071d37;
      text-align: center;
      background: #fff;
      margin: 0 0 0 20px;
      padding: 17px 60px;
   }
   #contents02 .contact .btn:hover{text-decoration: none; }


  #contents03 {
    width: 1100px;
    margin: 0 auto 140px;
    background: url('../images/family/pic03.jpg') no-repeat right top;
  }
  #contents03 .sub {
    background: url('../images/family/bg-sub-03.jpg') no-repeat left 15px bottom 5px !important;
  }
  #contents03 .box {
    font-size: 16px;
    font-weight: 500;
    margin: 0 500px 40px 0;
    background: #fff;
    padding: 0 0 0 50px;
  }
  #contents03 .box .txt {
    padding: 0 40px 0 0;
  }
  #contents03 .inner {
    padding: 70px 70px 20px 90px; position: relative;
    background: url('../images/family/hana.png') no-repeat right 50px top 42% #FAF7E8;
  }
  #contents03 .inner .subttl {
    font-size: 18px;
    font-weight: bold;
  }
  #contents03 .inner h4 {
    color: #D3AF51;
    font-size: 32px;
    line-height: 1.5;
    font-weight: bold;
    margin: 0 0 15px;
  }
  #contents03 .inner .flbox {
    display: flex;
    margin: 0 0 50px;
    justify-content: space-between;
  }
  #contents03 .inner .txtbox {
    width: 430px;
    font-size: 16px;
    font-weight: 500;
  }
  #contents03 .inner .txt {
    margin: 0 0 25px;
  }

  #contents03 .inner .flex-bx {
    display: flex; margin-left: -400px;
  }

  #contents03 .inner .flex-bx1 {
    display: flex; margin-left: 110px; margin-top: 200px;
  }


  #contents03 .inner .link {
    margin: 0 20px 10px;
    z-index: 9999;
  }

  #contents03 .inner .picture {
    position: relative;
  }
  #contents03 .inner .flbox:nth-child(2) .picture {
    padding: 45px 0 0;
  }
  #contents03 .inner .picture .img {
    position: absolute;
    left: -25px;
    top: -35px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #D3AF51;
    color: #fff;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    font-weight: bold;
    padding: 35px 0 0;
  }
  #contents03 .inner .flbox:nth-child(2) .picture .img {
    top: 0;
  }
  #contents03 .inner .picture .img span {
    font-size: 30px;
  }



  #contents04 {
    width: 1100px;
    margin: 0 auto 120px;
    padding: 77px 0 0;
    background: url('../images/family/pic04.jpg') no-repeat left top;
  }
  #contents04 .sub {
    text-align: center;
    margin: 0 40px 0 0;
    background: url('../images/family/bg-sub-02.jpg') no-repeat left 120px bottom 5px !important;
  }
  #contents04 .box {
    width: 630px;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 15px 515px;
    background: #fff;
    padding: 30px 35px 0;
  }
  #contents04 .box .ttl {
    font-size: 30px;
  }
  #contents04 .link a {

  }




  #last {
    color: #fff;
    margin: 0 0 110px;
    padding: 170px 0 120px;
    text-align: center;
    letter-spacing: 1.0px;
    font-size: 26px;
    font-weight: bold;
    background: url('../images/family/bg-last.jpg') no-repeat center top;
  }
  #last .txt {
    font-size: 18px;
    margin: 0 0 25px;
  }

  #link {
    width:780px;
    margin: 0 auto 150px;
    display: flex;
    justify-content: space-between; 
  }



  
  }

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




}

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



  #page-family {
    color: #071D37;
  }

  /* family -------------------------------------*/
  #main {
    padding: 6vw 4vw 0;
    background: url('../images/index/sp-bg-family.jpg') no-repeat center top;
    background-size: 100%;
  }
  #main .inner {
  }
  #main h2 {
    text-align: center;
    margin: 0 5vw 5vw;
  }
  #main ul.family-link {
    padding: 0 2vw;
    margin: 0 0 4vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #main ul.family-link li {
    width: 48%;
    margin: 0 0 4vw;
  }

  #family .contentsbox .box .title {
    margin: 0 0 5vw;
    padding: 0 0 0 27%;
    position: relative;
    font-size: 3.6vw;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 1.0px;
  }
  #family .contentsbox .box .title .sub {
    font-size: 3.6vw;
    padding: 0 0 3vw;
    background: url('../images/family/bg-sub.jpg') no-repeat left bottom;
    background-size: 70%;
  }
  #family .contentsbox .box .title h3 {
    font-size: 7vw;
    letter-spacing: 2.0px;
  }
  #family .contentsbox .box .title h3 span {
    background: linear-gradient(transparent 65%, #F5EF43 65%);
  }
  #family .contentsbox .box .title .num {
    width: 22%;
    position: absolute;
    left: 0;
    top: 0;
  }

  #family .contentsbox .box .ttl {
    font-size: 4.0vw;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 4vw;
  }
  #family .contentsbox .box .txt , #family .contentsbox .box .pic {
    margin: 0 0 3vw;
  }
  #family .contentsbox .box .link a {
    width: 84.541vw;
    margin: 0 auto;
    display: block;
   }


  #contents01 {
    margin: 0 0 15vw;
    padding: 25vw 0 0;
    background: url('../images/family/pic01.jpg') no-repeat center top;
    background-size: 100%;
  }
  #contents01 .box {
    font-size: 3.6vw;
    font-weight: 500;
    margin: 0 0 3vw;
    background: #fff;
    padding: 5vw 4vw 2vw;
  }
  #contents01 .box .ttl {
    font-size: 4.2vw;
  }
  #contents01 .link {
    padding: 5vw 3vw;
    margin: 0 2vw;
    border: 1px solid #707070;
    display: flex;
    background: #fff;
    justify-content: space-between;
  }
  #contents01 .link li {
    width: 48%;
    font-size: 3.2vw;
    font-weight: bold;
  }
  #contents01 .link li a {
    color: #071D37;
  }
  #contents01 .link li .img {
    margin: 0 0 2vw;
  }
  
  #contents02 {
    position: relative;
    margin: 0 0 12vw;
  }
  #contents02 .img {
    width: 22%;
    position: absolute;
    right: 2vw;
    top: -2vw;
  }
  #contents02 .box {
    font-size: 3.6vw;
    font-weight: 500;
    margin: 0 0 5vw;
    background: #fff;
    padding: 5vw 4vw;
  }
  #contents02 .contact {
      position: relative;
      background: #F5EF43;
      padding: 6vw 4vw;
   }
   #contents02 .contact .txt {
      font-size: 3.7vw;
      font-weight: bold;
      margin: 0 0 3vw;
      letter-spacing: 1.0px;
      text-align: center;
   }
   #contents02 .contact .human {
      position: absolute;
      left: 5vw;
      bottom: 0;
      width: 18%;
   }
   #contents02 .contact .tel {
    text-align: center;
   }
   #contents02 .contact .tel img {
    width: 85%;
  }
   #contents02 .contact .btn { 
         display: block;
    font-size: 4.0vw;
    font-weight: bold;
    border-radius: 30px;
    line-height: 1.0;
    border: 3px solid #071d37;
    text-align: center;
    background: #fff;
    margin: 4vw 0 0;
    padding: 4vw 0 4vw 2vw;
   }
   #contents02 .contact .btn:hover{text-decoration: none; }


  #contents03 {
    margin: 0 0 10vw;
  }
  #contents03 .sub {
    background: url('../images/family/bg-sub-03.jpg') no-repeat left bottom 5px !important;
  }
  #contents03 .box {
    font-size: 3.6vw;
    font-weight: 500;
    margin: 0 0 4vw;
    background: #fff;
    padding: 5vw 4vw 2vw;
  }
  #contents03 .box .txt {
  }
  #contents03 .inner {
    padding: 7vw 4vw 2vw;
    background: #FAF7E8;
  }
  #contents03 .inner .subttl {
    font-size: 3.7vw;
    font-weight: bold;
  }
  #contents03 .inner h4 {
    color: #D3AF51;
    font-size: 5.5vw;
    line-height: 1.7;
    font-weight: bold;
    margin: 0 0 4vw;
  }
  #contents03 .inner .flbox {
    margin: 0 0 8vw;
  }
  #contents03 .inner .txtbox {
    font-size: 3.6vw;
    font-weight: 500;
  }
  #contents03 .inner .txt {
    margin: 0 0 25px;
  }
  #contents03 .inner .link {
    margin: 0 0 3vw;
    text-align: center;
  }
  #contents03 .inner .link a {
    width: 84.541vw;
    margin: 0 auto;
    display: block;
}

  #contents03 .inner .picture {
    position: relative;
    padding: 3vw 0 0;
    margin: 0 0 4vw;
  }
  #contents03 .inner .flbox:nth-child(2) .picture img {
    max-width: 100%;
  }
  #contents03 .inner .picture .img {
    position: absolute;
    left: -2vw;
    top: -4vw;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    background: #D3AF51;
    color: #fff;
    font-size: 4.2vw;
    line-height: 1.2;
    text-align: center;
    font-weight: bold;
    padding: 6vw 0 0;
  }

  #contents03 .inner .picture .img span {
    font-size: 4.5vw;
  }



  #contents04 {
    margin: 0 0 12vw;
  }
  #contents04 .sub {
    background: url('../images/family/bg-sub-02.jpg') no-repeat left bottom 5px !important;
  }
  #contents04 .box {
    font-size: 3.6vw;
    font-weight: 500;
    margin: 0 0 4vw;
    background: #fff;
    padding: 5vw 4vw;
  }

  


  #last {
    color: #fff;
    font-weight: 500;
    margin: 0 0 10vw;
    padding: 6vw 4vw;
    background: url('../images/family/sp-bg-last.jpg') no-repeat center top;
    background-size: cover;
  }
  #last h4 {
    font-size: 4.0vw;
    font-weight: bold;
  }
  #last .txt {
    margin: 0 0 4vw;
  }

  #link {
    margin: 0 3vw 12vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
  }
  #link li {
    width: 48%;
    margin: 0 1% 3vw;
  }



}